From a6cfbf1a2e0d89a7827aaccfa376fb7c678060fd Mon Sep 17 00:00:00 2001 From: Taso Date: Wed, 8 Sep 2021 22:14:23 -0400 Subject: [PATCH] fix(menu/MUI): Fix styling issues arising from migration to v5 --- .../PlayerModal/Tabs/DialogBanView.tsx | 101 +++++++++--------- .../components/PlayersPage/PlayersPage.tsx | 1 - menu/src/components/misc/TextField.tsx | 1 + menu/src/index.tsx | 1 + menu/src/styles/theme.tsx | 17 ++- 5 files changed, 69 insertions(+), 52 deletions(-) diff --git a/menu/src/components/PlayerModal/Tabs/DialogBanView.tsx b/menu/src/components/PlayerModal/Tabs/DialogBanView.tsx index 10973ea29..2198fd6a4 100644 --- a/menu/src/components/PlayerModal/Tabs/DialogBanView.tsx +++ b/menu/src/components/PlayerModal/Tabs/DialogBanView.tsx @@ -5,32 +5,32 @@ import { DialogContent, MenuItem, TextField, - Typography -} from '@mui/material'; + Typography, +} from "@mui/material"; import { usePlayerDetailsValue } from "../../../state/playerDetails.state"; import { fetchWebPipe } from "../../../utils/fetchWebPipe"; import { useSnackbar } from "notistack"; import { useTranslate } from "react-polyglot"; -import { usePlayerModalContext } from '../../../provider/PlayerModalProvider'; -import { translateAlertType, userHasPerm } from '../../../utils/miscUtils'; -import { usePermissionsValue } from '../../../state/permissions.state'; -import xss from 'xss' -import { TxAdminAPIResp } from './DialogActionView'; +import { usePlayerModalContext } from "../../../provider/PlayerModalProvider"; +import { translateAlertType, userHasPerm } from "../../../utils/miscUtils"; +import { usePermissionsValue } from "../../../state/permissions.state"; +import xss from "xss"; +import { TxAdminAPIResp } from "./DialogActionView"; import { DialogLoadError } from "./DialogLoadError"; const DialogBanView: React.FC = () => { const assocPlayer = usePlayerDetailsValue(); - const [reason, setReason] = useState(''); - const [duration, setDuration] = useState('2 hours'); - const [customDuration, setCustomDuration] = useState('hours') - const [customDurLength, setCustomDurLength] = useState('1'); + const [reason, setReason] = useState(""); + const [duration, setDuration] = useState("2 hours"); + const [customDuration, setCustomDuration] = useState("hours"); + const [customDurLength, setCustomDurLength] = useState("1"); const t = useTranslate(); const { enqueueSnackbar } = useSnackbar(); const { showNoPerms } = usePlayerModalContext(); const playerPerms = usePermissionsValue(); - if(typeof assocPlayer !== 'object'){ + if (typeof assocPlayer !== "object") { return ; } @@ -52,76 +52,76 @@ const DialogBanView: React.FC = () => { }, }); // We need to clean the response as it contains html - const cleanedMsg = xss(resp.message) + const cleanedMsg = xss(resp.message); enqueueSnackbar(cleanedMsg, { variant: translateAlertType(resp.type) }); } catch (e) { - enqueueSnackbar(t('nui_menu.common.error'), { variant: "error" }); - console.error(e) + enqueueSnackbar(t("nui_menu.common.error"), { variant: "error" }); + console.error(e); } }; const banDurations = [ { - value: '2 hours', - label: `2 ${t('nui_menu.player_modal.ban.hours')}` + value: "2 hours", + label: `2 ${t("nui_menu.player_modal.ban.hours")}`, }, { - value: '8 hours', - label: `8 ${t('nui_menu.player_modal.ban.hours')}` + value: "8 hours", + label: `8 ${t("nui_menu.player_modal.ban.hours")}`, }, { - value: '1 day', - label: `1 ${t('nui_menu.player_modal.ban.days')}` + value: "1 day", + label: `1 ${t("nui_menu.player_modal.ban.days")}`, }, { - value: '2 days', - label: `2 ${t('nui_menu.player_modal.ban.days')}` + value: "2 days", + label: `2 ${t("nui_menu.player_modal.ban.days")}`, }, { - value: '1 week', - label: `1 ${t('nui_menu.player_modal.ban.weeks')}` + value: "1 week", + label: `1 ${t("nui_menu.player_modal.ban.weeks")}`, }, { - value: '2 weeks', - label: `2 ${t('nui_menu.player_modal.ban.weeks')}` + value: "2 weeks", + label: `2 ${t("nui_menu.player_modal.ban.weeks")}`, }, { - value: 'permanent', - label: t('nui_menu.player_modal.ban.permanent') + value: "permanent", + label: t("nui_menu.player_modal.ban.permanent"), }, { - value: 'custom', - label: t('nui_menu.player_modal.ban.custom') - } - ] + value: "custom", + label: t("nui_menu.player_modal.ban.custom"), + }, + ]; const customBanLength = [ { - value: 'hours', - label: 'Hours' + value: "hours", + label: "Hours", }, { - value: 'days', - label: 'Days' + value: "days", + label: "Days", }, { - value: 'weeks', - label: 'Week' + value: "weeks", + label: "Week", }, { - value: 'months', - label: 'Months' - } - ] + value: "months", + label: "Months", + }, + ]; return ( - Ban Player + Ban Player
{ onChange={(e) => setReason(e.currentTarget.value)} /> { type="number" placeholder="1" variant="outlined" - margin="dense" + size="small" value={customDurLength} onChange={(e) => setCustomDurLength(e.target.value)} /> @@ -162,8 +164,8 @@ const DialogBanView: React.FC = () => { setCustomDuration(e.target.value)} @@ -181,7 +183,7 @@ const DialogBanView: React.FC = () => { variant="contained" type="submit" color="primary" - style={{ marginTop: 2 }} + sx={{ mt: 2 }} onClick={handleBan} > Ban @@ -191,5 +193,4 @@ const DialogBanView: React.FC = () => { ); }; - export default DialogBanView; diff --git a/menu/src/components/PlayersPage/PlayersPage.tsx b/menu/src/components/PlayersPage/PlayersPage.tsx index fd6c37c69..3135062f5 100644 --- a/menu/src/components/PlayersPage/PlayersPage.tsx +++ b/menu/src/components/PlayersPage/PlayersPage.tsx @@ -11,7 +11,6 @@ const useStyles = makeStyles((theme: Theme) => ({ backgroundColor: theme.palette.background.default, height: "50vh", borderRadius: 15, - displayFlex: "column", flex: 1, }, overrideWrapper: { diff --git a/menu/src/components/misc/TextField.tsx b/menu/src/components/misc/TextField.tsx index fd9a798a8..5ac79d118 100644 --- a/menu/src/components/misc/TextField.tsx +++ b/menu/src/components/misc/TextField.tsx @@ -17,6 +17,7 @@ export const TextField: React.FC = (props) => { return ( diff --git a/menu/src/styles/theme.tsx b/menu/src/styles/theme.tsx index 69387c2e4..f386919b0 100644 --- a/menu/src/styles/theme.tsx +++ b/menu/src/styles/theme.tsx @@ -30,4 +30,19 @@ export const MenuTheme = createTheme(adaptV4Theme({ primary: "#fff", }, }, -})); +}), { + components: { + MuiListItem: { + styleOverrides: { + root: { + '&.Mui-selected': { + backgroundColor: "rgba(255, 255, 255, 0.08)" + } + } + } + }, + MuiPaper: { + styleOverrides: { root: { backgroundImage: 'unset' } }, + }, + } +});