From e948fc799ea5537c5d10e04cc9c40d7fed52e947 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 25 Mar 2024 15:54:11 +0100 Subject: [PATCH] [website] Add stray design adjustments throughout the site (#41642) --- docs/src/components/about/Team.tsx | 4 +-- .../pricing/LicensingModelSwitch.tsx | 16 ++++----- docs/src/components/pricing/PricingTable.tsx | 4 +-- docs/src/components/productX/XHero.tsx | 6 ++-- docs/src/components/showcase/FolderTable.tsx | 3 +- .../components/showcase/NotificationCard.tsx | 3 +- docs/src/components/showcase/PlayerCard.tsx | 4 +-- .../components/showcase/RealEstateCard.tsx | 2 +- docs/src/components/showcase/TaskCard.tsx | 11 +++--- .../components/showcase/ThemeAccordion.tsx | 3 +- .../components/showcase/ThemeDatePicker.tsx | 2 +- docs/src/components/showcase/ThemeSlider.tsx | 35 ++++++++----------- docs/src/components/showcase/ThemeTabs.tsx | 12 ++----- .../src/components/showcase/ThemeTimeline.tsx | 6 +++- .../components/showcase/ThemeToggleButton.tsx | 5 ++- docs/src/modules/brandingTheme.ts | 5 ++- 16 files changed, 55 insertions(+), 66 deletions(-) diff --git a/docs/src/components/about/Team.tsx b/docs/src/components/about/Team.tsx index 805d10b79cf065..087e43d93fbb8f 100644 --- a/docs/src/components/about/Team.tsx +++ b/docs/src/components/about/Team.tsx @@ -123,7 +123,7 @@ function Person(props: Profile & { sx?: PaperProps['sx'] }) { borderRadius: 40, border: '2px solid', borderColor: 'primary.50', - boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.15)', + boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.1)', transform: 'translateX(50%)', overflow: 'hidden', ...theme.applyDarkStyles({ @@ -185,7 +185,7 @@ function Person(props: Profile & { sx?: PaperProps['sx'] }) { {props.about && } {props.about && ( - + {props.about} )} diff --git a/docs/src/components/pricing/LicensingModelSwitch.tsx b/docs/src/components/pricing/LicensingModelSwitch.tsx index edb28f944a752d..8e10672d7017d7 100644 --- a/docs/src/components/pricing/LicensingModelSwitch.tsx +++ b/docs/src/components/pricing/LicensingModelSwitch.tsx @@ -17,7 +17,8 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({ borderColor: (theme.vars || theme).palette.grey[100], backgroundColor: (theme.vars || theme).palette.grey[50], '&:has(.Mui-focusVisible)': { - outline: `2px solid ${(theme.vars || theme).palette.primary.main}`, + outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`, + outlineOffset: '2px', }, '& .MuiTabs-scroller, & .MuiTab-root': { // Override inline-style to see the box-shadow @@ -32,14 +33,14 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({ fontWeight: theme.typography.fontWeightSemiBold, minWidth: 0, minHeight: 0, - color: (theme.vars || theme).palette.grey[600], + color: (theme.vars || theme).palette.text.tertiary, borderRadius: 20, zIndex: 2, '&:hover': { - color: (theme.vars || theme).palette.grey[800], + color: (theme.vars || theme).palette.text.primary, }, '&.Mui-selected': { - color: (theme.vars || theme).palette.primary[500], + color: (theme.vars || theme).palette.primary[600], fontWeight: theme.typography.fontWeightSemiBold, }, '&.Mui-focusVisible': { @@ -58,19 +59,14 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({ ...theme.applyDarkStyles({ borderColor: (theme.vars || theme).palette.primaryDark[700], backgroundColor: (theme.vars || theme).palette.primaryDark[900], - color: (theme.vars || theme).palette.grey[400], '& .MuiTabs-indicator': { height: '100%', borderRadius: 20, backgroundColor: alpha(theme.palette.primaryDark[600], 0.5), - borderColor: (theme.vars || theme).palette.primaryDark[500], + borderColor: (theme.vars || theme).palette.primaryDark[600], boxShadow: `0px 1px 4px ${(theme.vars || theme).palette.common.black}`, }, '& .MuiTab-root': { - color: (theme.vars || theme).palette.grey[400], - '&:hover': { - color: (theme.vars || theme).palette.grey[300], - }, '&.Mui-selected': { color: (theme.vars || theme).palette.primary[200], }, diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx index a274e0b3767259..ecea45b9b2f87c 100644 --- a/docs/src/components/pricing/PricingTable.tsx +++ b/docs/src/components/pricing/PricingTable.tsx @@ -1361,8 +1361,8 @@ export default function PricingTable({ sx={[ (theme) => ({ px: 1, - py: 1.5, justifyContent: 'flex-start', + fontSize: '0.875rem', fontWeight: 'medium', borderRadius: '0px', position: 'absolute', @@ -1512,8 +1512,8 @@ export default function PricingTable({ sx={[ (theme) => ({ px: 1, - py: 1.5, justifyContent: 'flex-start', + fontSize: '0.875rem', fontWeight: 'medium', borderRadius: '0px', position: 'absolute', diff --git a/docs/src/components/productX/XHero.tsx b/docs/src/components/productX/XHero.tsx index 95d9d956cefd6b..89059c5235b17f 100644 --- a/docs/src/components/productX/XHero.tsx +++ b/docs/src/components/productX/XHero.tsx @@ -141,7 +141,7 @@ export default function XHero() { ...theme.applyDarkStyles({ borderColor: 'primaryDark.700', backgroundColor: 'primaryDark.900', - boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)', + boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)', }), })} > @@ -281,7 +281,7 @@ export default function XHero() { ...theme.applyDarkStyles({ borderColor: 'primaryDark.700', backgroundColor: 'primaryDark.900', - boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)', + boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)', }), })} > @@ -338,7 +338,7 @@ export default function XHero() { (theme) => theme.applyDarkStyles({ borderColor: 'primaryDark.700', - boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)', + boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)', backgroundColor: 'primaryDark.900', '& .MuiDateRangePickerDay-day.Mui-selected': { color: '#FFF', diff --git a/docs/src/components/showcase/FolderTable.tsx b/docs/src/components/showcase/FolderTable.tsx index dcf0005bfdf3cf..bd1694b4c40633 100644 --- a/docs/src/components/showcase/FolderTable.tsx +++ b/docs/src/components/showcase/FolderTable.tsx @@ -91,6 +91,7 @@ export default function BasicTable() { sx={[ { maxWidth: 260, + borderColor: 'grey.200', boxShadow: (theme) => `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`, [`& .${tableCellClasses.root}`]: { borderColor: 'grey.200', @@ -103,7 +104,7 @@ export default function BasicTable() { theme.applyDarkStyles({ bgcolor: 'primaryDark.900', borderColor: 'primaryDark.700', - boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)', + boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)', [`& .${tableCellClasses.root}`]: { borderColor: 'primaryDark.700', }, diff --git a/docs/src/components/showcase/NotificationCard.tsx b/docs/src/components/showcase/NotificationCard.tsx index 8f08369d6b3a4f..ab0f3097c1b409 100644 --- a/docs/src/components/showcase/NotificationCard.tsx +++ b/docs/src/components/showcase/NotificationCard.tsx @@ -17,11 +17,12 @@ export default function NotificationCard() { p: 2, gap: 2, maxWidth: 283, + borderColor: 'grey.200', boxShadow: `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`, ...theme.applyDarkStyles({ bgcolor: 'primaryDark.900', borderColor: 'primaryDark.700', - boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)', + boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)', }), })} > diff --git a/docs/src/components/showcase/PlayerCard.tsx b/docs/src/components/showcase/PlayerCard.tsx index 8183ffe5f0e81a..37a4e88cd7bd3d 100644 --- a/docs/src/components/showcase/PlayerCard.tsx +++ b/docs/src/components/showcase/PlayerCard.tsx @@ -28,7 +28,7 @@ export default function PlayerCard({ disableTheming }: { disableTheming?: boolea alignItems: 'center', gap: 2, ...(!disableTheming && { - borderColor: 'divider', + borderColor: 'grey.200', boxShadow: (theme) => `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`, [`& .${iconButtonClasses.root}`]: { border: '1px solid', @@ -52,7 +52,7 @@ export default function PlayerCard({ disableTheming }: { disableTheming?: boolea ((theme) => theme.applyDarkStyles({ bgcolor: 'primaryDark.900', - boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)', + boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)', [`& .${iconButtonClasses.root}`]: { bgcolor: 'primary.900', color: 'primary.200', diff --git a/docs/src/components/showcase/RealEstateCard.tsx b/docs/src/components/showcase/RealEstateCard.tsx index 569e8d7166f406..a9306332e62dc5 100644 --- a/docs/src/components/showcase/RealEstateCard.tsx +++ b/docs/src/components/showcase/RealEstateCard.tsx @@ -21,7 +21,7 @@ export default function RealEstateCard({ sx, ...props }: CardProps) { boxShadow: `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`, ...theme.applyDarkStyles({ bgcolor: 'primaryDark.900', - boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)', + boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)', }), }), ...(Array.isArray(sx) ? sx : [sx]), diff --git a/docs/src/components/showcase/TaskCard.tsx b/docs/src/components/showcase/TaskCard.tsx index d437f7a6f6b217..077ffc8188461c 100644 --- a/docs/src/components/showcase/TaskCard.tsx +++ b/docs/src/components/showcase/TaskCard.tsx @@ -13,18 +13,17 @@ export default function TaskCard() { ({ + sx={{ minWidth: 280, maxWidth: 360, minHeight: 280, display: 'flex', flexDirection: 'column', p: 3, - background: `linear-gradient(to right bottom, ${ - (theme.vars || theme).palette.primary[500] - }, ${(theme.vars || theme).palette.primary[600]} 120%)`, - boxShadow: '0px 20px 25px rgba(0, 0, 0, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.04)', - })} + background: + 'linear-gradient(180deg, var(--muidocs-palette-primary-600) 0%, var(--muidocs-palette-primary-700) 100%)', + boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.04)', + }} > diff --git a/docs/src/components/showcase/ThemeAccordion.tsx b/docs/src/components/showcase/ThemeAccordion.tsx index cee46e898ebf03..ee3e35afe8939a 100644 --- a/docs/src/components/showcase/ThemeAccordion.tsx +++ b/docs/src/components/showcase/ThemeAccordion.tsx @@ -24,6 +24,7 @@ export default function ThemeAccordion() { { [`& .${accordionClasses.root}`]: { bgcolor: '#fff', + borderColor: 'grey.200', boxShadow: (theme) => `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`, [`&.${accordionClasses.expanded}`]: { @@ -59,7 +60,7 @@ export default function ThemeAccordion() { [`& .${accordionClasses.root}`]: { bgcolor: 'primaryDark.900', borderColor: 'primaryDark.700', - boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)', + boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)', }, [`& .${accordionSummaryClasses.root}`]: { [`& .${accordionSummaryClasses.content}`]: { diff --git a/docs/src/components/showcase/ThemeDatePicker.tsx b/docs/src/components/showcase/ThemeDatePicker.tsx index 2695dba9efbc2a..822ce3b5c4f0a4 100644 --- a/docs/src/components/showcase/ThemeDatePicker.tsx +++ b/docs/src/components/showcase/ThemeDatePicker.tsx @@ -95,7 +95,7 @@ export default function ThemeDatePicker() { '& > div': { borderColor: 'primaryDark.700', bgcolor: 'primaryDark.900', - boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)', + boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)', }, [`& .${iconButtonClasses.root}`]: { color: 'primary.300', diff --git a/docs/src/components/showcase/ThemeSlider.tsx b/docs/src/components/showcase/ThemeSlider.tsx index 5c94f416b82b06..5c5eca0bdbfa93 100644 --- a/docs/src/components/showcase/ThemeSlider.tsx +++ b/docs/src/components/showcase/ThemeSlider.tsx @@ -25,7 +25,7 @@ export default function ThemeSlider() { ...theme.applyDarkStyles({ bgcolor: 'primaryDark.900', borderColor: 'primaryDark.700', - boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)', + boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)', }), })} > @@ -36,7 +36,6 @@ export default function ThemeSlider() { valueLabelFormat={valuetext} valueLabelDisplay="on" marks={[ - { value: 0, label: '0ºC' }, { value: 10 }, { value: 20, label: '20ºC' }, { value: 30 }, @@ -46,17 +45,15 @@ export default function ThemeSlider() { { value: 70 }, { value: 80, label: '80ºC' }, { value: 90 }, - { value: 100, label: '100ºC' }, ]} sx={[ { - display: 'inline-block', - width: '100%', - color: 'primary.500', + display: 'inline-flex', + alignItems: 'center', + justifyContent: 'center', + color: 'primary.main', height: 6, - margin: 0, - pt: 2, - pb: 2, + m: 0, [`& .${sliderClasses.rail}`]: { opacity: 1, bgcolor: 'grey.200', @@ -65,16 +62,17 @@ export default function ThemeSlider() { border: 'none', }, [`& .${sliderClasses.mark}`]: { - color: 'transparent', + color: 'text.tertiary', }, [`& .${sliderClasses.markLabel}`]: { - color: 'grey.900', + color: 'text.secondary', fontSize: '0.75rem', - fontWeight: 600, + fontWeight: 'semiBold', }, [`& .${sliderClasses.thumb}`]: { - width: 12, - height: 12, + mx: -1, + width: 16, + height: 16, '&::before': { boxShadow: 'none', }, @@ -82,7 +80,8 @@ export default function ThemeSlider() { [`& .${sliderClasses.valueLabel}`]: { backgroundColor: 'transparent', color: 'primary.600', - fontWeight: 700, + fontSize: '0.75rem', + fontWeight: 'bold', padding: 0, [`& .${sliderClasses.valueLabelOpen}`]: { transform: 'none', @@ -92,15 +91,11 @@ export default function ThemeSlider() { }, (theme) => theme.applyDarkStyles({ - color: 'primary.400', [`& .${sliderClasses.rail}`]: { bgcolor: 'primaryDark.600', }, - [`& .${sliderClasses.markLabel}`]: { - color: 'grey.600', - }, [`& .${sliderClasses.valueLabel}`]: { - color: 'primary.200', + color: 'primary.300', }, }), ]} diff --git a/docs/src/components/showcase/ThemeTabs.tsx b/docs/src/components/showcase/ThemeTabs.tsx index 9be02584352a8e..a0d208721ea201 100644 --- a/docs/src/components/showcase/ThemeTabs.tsx +++ b/docs/src/components/showcase/ThemeTabs.tsx @@ -19,10 +19,10 @@ export default function ThemeTabs() { variant="fullWidth" sx={[ { - background: - 'linear-gradient(180deg, var(--muidocs-palette-primary-500) 0%, var(--muidocs-palette-primary-600) 100%)', borderRadius: 1, - boxShadow: '0px 20px 25px rgba(0, 0, 0, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.04)', + background: + 'linear-gradient(180deg, var(--muidocs-palette-primary-600) 0%, var(--muidocs-palette-primary-700) 100%)', + boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.04)', [`& .${tabsClasses.indicator}`]: { backgroundColor: 'transparent', '&::before': { @@ -47,12 +47,6 @@ export default function ThemeTabs() { }, }, }, - (theme) => - theme.applyDarkStyles({ - [`& .${tabClasses.root}`]: { - color: 'primary.200', - }, - }), ]} > diff --git a/docs/src/components/showcase/ThemeTimeline.tsx b/docs/src/components/showcase/ThemeTimeline.tsx index 65845d316776a4..42e29a0d7536af 100644 --- a/docs/src/components/showcase/ThemeTimeline.tsx +++ b/docs/src/components/showcase/ThemeTimeline.tsx @@ -21,11 +21,12 @@ export default function BasicTimeline() { pb: 1, display: 'flex', alignItems: 'flex-start', + borderColor: 'grey.200', boxShadow: `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`, ...theme.applyDarkStyles({ bgcolor: 'primaryDark.900', borderColor: 'primaryDark.700', - boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)', + boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)', }), })} > @@ -42,9 +43,12 @@ export default function BasicTimeline() { borderRadius: 0.3, bgcolor: 'primary.50', color: 'primary.600', + border: '1px solid', + borderColor: 'primary.100', ...theme.applyDarkStyles({ bgcolor: 'primary.900', color: 'primary.50', + borderColor: 'primary.800', }), })} > diff --git a/docs/src/components/showcase/ThemeToggleButton.tsx b/docs/src/components/showcase/ThemeToggleButton.tsx index edddebe19d38b5..2359550e6148ac 100644 --- a/docs/src/components/showcase/ThemeToggleButton.tsx +++ b/docs/src/components/showcase/ThemeToggleButton.tsx @@ -20,8 +20,8 @@ export default function ThemeToggleButton() { bgcolor: '#fff', '& .MuiToggleButton-root': { textTransform: 'none', - fontWeight: 600, - color: 'grey.700', + fontWeight: 'medium', + color: 'text.secondary', '&.Mui-selected': { color: 'primary.700', bgcolor: 'primary.50', @@ -32,7 +32,6 @@ export default function ThemeToggleButton() { theme.applyDarkStyles({ bgcolor: 'primaryDark.900', '& .MuiToggleButton-root': { - color: 'grey.400', '&.Mui-selected': { color: 'primary.100', bgcolor: 'primary.900', diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts index b52135676bcff5..763ea0e811bac0 100644 --- a/docs/src/modules/brandingTheme.ts +++ b/docs/src/modules/brandingTheme.ts @@ -1178,8 +1178,8 @@ export function getThemedComponents(): ThemeOptions { root: ({ theme, ownerState }) => [ { textTransform: 'none', - fontWeight: 500, - color: theme.palette.grey[700], + fontWeight: 'medium', + color: theme.palette.text.secondary, borderColor: theme.palette.grey[200], ...(ownerState.size === 'small' && { padding: '0.375rem 0.75rem', @@ -1194,7 +1194,6 @@ export function getThemedComponents(): ThemeOptions { }, } as const, theme.applyDarkStyles({ - color: theme.palette.grey[300], borderColor: theme.palette.primaryDark[700], '&:hover': { backgroundColor: alpha(theme.palette.primaryDark[600], 0.2),