From 71763f4b6679d0c1c44530a7b2e56af77c26698e Mon Sep 17 00:00:00 2001 From: Skorpios Date: Sat, 8 Mar 2025 14:40:20 -0800 Subject: [PATCH] Adjusted padding and borders for a more aesthetic look and feel for the vertical tabs. --- src/Utils/Theme/globalTheme.js | 51 +++++++++++++++++++--------------- 1 file changed, 29 insertions(+), 22 deletions(-) diff --git a/src/Utils/Theme/globalTheme.js b/src/Utils/Theme/globalTheme.js index dec8c5913..1a68cdd70 100644 --- a/src/Utils/Theme/globalTheme.js +++ b/src/Utils/Theme/globalTheme.js @@ -384,31 +384,38 @@ const baseTheme = (palette) => ({ }), }, variants: [ - { - props: { orientation: 'vertical' }, - style: ({ theme }) => ({ - alignItems: 'flex-start', - padding: theme.spacing(2), - color: theme.palette.primary.contrastText, - backgroundColor: theme.palette.primary.main, - border: 'none', - borderBottom: 'none', - borderRight: 'none', - '&.Mui-selected': { + { + props: { orientation: 'vertical' }, + style: ({ theme }) => ({ + alignItems: 'flex-start', + padding: `${theme.spacing(1)}px ${theme.spacing(2)}px ${theme.spacing(1)}px ${theme.spacing(6)}px`, + minHeight: theme.spacing(12), color: theme.palette.primary.contrastText, - backgroundColor: theme.palette.tertiary.main, - opacity: 1, + backgroundColor: theme.palette.primary.main, border: 'none', borderBottom: 'none', - borderRight: 'none' - }, - '&:hover': { - backgroundColor: theme.palette.tertiary.main, - border: 'none' - } - }), - }, - ], + borderRight: 'none', + borderRadius: theme.shape.borderRadius * 3, + margin: `${theme.spacing(1)}px ${theme.spacing(2)}px`, + '&.Mui-selected': { + color: theme.palette.primary.contrastText, + backgroundColor: theme.palette.tertiary.main, + opacity: 1, + border: 'none', + borderBottom: 'none', + borderRight: 'none', + borderRadius: theme.shape.borderRadius * 3, + minHeight: theme.spacing(14) + }, + '&:hover': { + backgroundColor: theme.palette.tertiary.main, + border: 'none', + borderRadius: theme.shape.borderRadius * 3, + minHeight: theme.spacing(14) + } + }), + }, + ], }, MuiSvgIcon: { styleOverrides: {