From 0fee348b920dc7545d27ffd5c83ef81c7163d132 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Mon, 7 Aug 2023 13:48:31 -0300 Subject: [PATCH] [website] Adjust styles of the Product section on the homepage (#38366) --- docs/public/static/branding/product-advanced-light.svg | 2 +- docs/public/static/branding/product-core-dark.svg | 2 +- docs/public/static/branding/product-core-light.svg | 2 +- .../static/branding/product-designkits-light.svg | 2 +- .../public/static/branding/product-templates-light.svg | 2 +- docs/public/static/branding/product-toolpad-light.svg | 2 +- docs/src/components/home/AdvancedShowcase.tsx | 5 ++++- docs/src/components/home/CoreShowcase.tsx | 8 ++++---- docs/src/components/home/DesignKits.tsx | 6 +++--- docs/src/components/home/MaterialDesignDemo.tsx | 4 ++-- docs/src/components/home/ProductsSwitcher.tsx | 6 ++---- docs/src/components/home/ShowcaseContainer.tsx | 10 +++++----- docs/src/components/home/StoreTemplatesBanner.tsx | 6 +++--- 13 files changed, 29 insertions(+), 28 deletions(-) diff --git a/docs/public/static/branding/product-advanced-light.svg b/docs/public/static/branding/product-advanced-light.svg index 7aa9b4b3f0d511..deed2209c80955 100644 --- a/docs/public/static/branding/product-advanced-light.svg +++ b/docs/public/static/branding/product-advanced-light.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/public/static/branding/product-core-dark.svg b/docs/public/static/branding/product-core-dark.svg index 1ef2969d795e0d..559c337f6d71b3 100644 --- a/docs/public/static/branding/product-core-dark.svg +++ b/docs/public/static/branding/product-core-dark.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/public/static/branding/product-core-light.svg b/docs/public/static/branding/product-core-light.svg index 4b8fdfabe90456..3e78a586ce9aec 100644 --- a/docs/public/static/branding/product-core-light.svg +++ b/docs/public/static/branding/product-core-light.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/public/static/branding/product-designkits-light.svg b/docs/public/static/branding/product-designkits-light.svg index 2bdb5b4e1ad175..4e642fac75327d 100644 --- a/docs/public/static/branding/product-designkits-light.svg +++ b/docs/public/static/branding/product-designkits-light.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/public/static/branding/product-templates-light.svg b/docs/public/static/branding/product-templates-light.svg index cd61aa49a80b10..23ad7bddf755a0 100644 --- a/docs/public/static/branding/product-templates-light.svg +++ b/docs/public/static/branding/product-templates-light.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/public/static/branding/product-toolpad-light.svg b/docs/public/static/branding/product-toolpad-light.svg index eb0d806c41129f..8af9515f7c8ab2 100644 --- a/docs/public/static/branding/product-toolpad-light.svg +++ b/docs/public/static/branding/product-toolpad-light.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/src/components/home/AdvancedShowcase.tsx b/docs/src/components/home/AdvancedShowcase.tsx index 306f5e19923e09..ade51a5c46dc8c 100644 --- a/docs/src/components/home/AdvancedShowcase.tsx +++ b/docs/src/components/home/AdvancedShowcase.tsx @@ -1690,10 +1690,13 @@ export default function DataTable() { sx={(theme) => ({ overflow: 'hidden', width: '100%', - boxShadow: '0px 4px 20px rgba(61, 71, 82, 0.25)', + boxShadow: '0px 4px 16px rgba(61, 71, 82, 0.15)', bgcolor: '#fff', + border: '1px solid', + borderColor: 'grey.200', ...theme.applyDarkStyles({ bgcolor: 'primaryDark.800', + boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.4)', }), })} > diff --git a/docs/src/components/home/CoreShowcase.tsx b/docs/src/components/home/CoreShowcase.tsx index ea4826cebb9b4a..ae8c227f297aa1 100644 --- a/docs/src/components/home/CoreShowcase.tsx +++ b/docs/src/components/home/CoreShowcase.tsx @@ -61,7 +61,7 @@ export default function CoreShowcase() { border: '1px solid', borderColor: mode === 'dark' - ? globalTheme.palette.primaryDark[500] + ? globalTheme.palette.primaryDark[600] : globalTheme.palette.grey[200], }, }, @@ -102,17 +102,17 @@ export default function CoreShowcase() { '&.MuiChip-colorSuccess': { backgroundColor: mode === 'dark' - ? globalTheme.palette.success[900] + ? globalTheme.palette.success[800] : globalTheme.palette.success[100], color: mode === 'dark' ? globalTheme.palette.success[100] - : globalTheme.palette.success[900], + : globalTheme.palette.success[800], }, '&.MuiChip-colorDefault': { backgroundColor: mode === 'dark' - ? globalTheme.palette.grey[900] + ? globalTheme.palette.primaryDark[600] : globalTheme.palette.grey[200], color: mode === 'dark' diff --git a/docs/src/components/home/DesignKits.tsx b/docs/src/components/home/DesignKits.tsx index 4b8fadd61815d7..41f9044240bc71 100644 --- a/docs/src/components/home/DesignKits.tsx +++ b/docs/src/components/home/DesignKits.tsx @@ -255,9 +255,9 @@ export default function DesignKits() { width: '100%', height: '100%', background: `linear-gradient(to bottom, ${ - (theme.vars || theme).palette.grey[50] + (theme.vars || theme).palette.primary[50] } 0%, ${transparent} 30%, ${transparent} 70%, ${ - (theme.vars || theme).palette.grey[50] + (theme.vars || theme).palette.primary[50] } 100%)`, zIndex: 2, ...theme.applyDarkStyles({ @@ -279,7 +279,7 @@ export default function DesignKits() { width: 400, height: '100%', background: `linear-gradient(to right, ${ - (theme.vars || theme).palette.grey[50] + (theme.vars || theme).palette.primary[50] }, ${transparent})`, zIndex: 2, ...theme.applyDarkStyles({ diff --git a/docs/src/components/home/MaterialDesignDemo.tsx b/docs/src/components/home/MaterialDesignDemo.tsx index 91e4c17f2e7a3a..973ce125edb12f 100644 --- a/docs/src/components/home/MaterialDesignDemo.tsx +++ b/docs/src/components/home/MaterialDesignDemo.tsx @@ -65,7 +65,7 @@ export default function MaterialDesignDemo(props: CardProps) { sx={{ mx: 2, flexGrow: 1, - '& svg': { fontSize: 20, verticalAlign: 'bottom', mr: 0.5 }, + '& svg': { fontSize: 20, verticalAlign: 'bottom', mr: 0.2 }, }} > Michael Scott @@ -85,7 +85,7 @@ export default function MaterialDesignDemo(props: CardProps) { direction="row" alignItems="center" justifyContent="space-between" - sx={{ px: 2, py: 1.5, bgcolor: 'background.default' }} + sx={{ pl: 1.5, pr: 2, py: 1.5, bgcolor: 'background.default' }} > - - {icon} - + {icon} svg': { transition: '0.2s' }, '&:hover > svg': { transform: 'translateX(2px)' }, }} diff --git a/docs/src/components/home/ShowcaseContainer.tsx b/docs/src/components/home/ShowcaseContainer.tsx index 1d66e3da485407..340e832f8e1d84 100644 --- a/docs/src/components/home/ShowcaseContainer.tsx +++ b/docs/src/components/home/ShowcaseContainer.tsx @@ -37,15 +37,15 @@ export default function ShowcaseContainer({ justifyContent: 'center', alignItems: 'center', p: 2, - bgcolor: 'grey.100', - borderColor: 'grey.300', + bgcolor: 'grey.50', + borderColor: 'divider', borderBottomLeftRadius: 0, borderBottomRightRadius: 0, }, (theme) => theme.applyDarkStyles({ bgcolor: 'primaryDark.700', - borderColor: 'primaryDark.600', + borderColor: 'divider', }), ...(Array.isArray(previewSx) ? previewSx : [previewSx]), ]} @@ -63,14 +63,14 @@ export default function ShowcaseContainer({ minHeight: 200, borderWidth: '0 1px 1px 1px', borderStyle: 'solid', - borderColor: 'primaryDark.900', + borderColor: 'divider', bgcolor: 'primaryDark.800', borderBottomLeftRadius: 10, borderBottomRightRadius: 10, }, (theme) => theme.applyDarkStyles({ - borderColor: 'primaryDark.700', + borderColor: 'divider', }), ...(Array.isArray(codeSx) ? codeSx : [codeSx]), ]} diff --git a/docs/src/components/home/StoreTemplatesBanner.tsx b/docs/src/components/home/StoreTemplatesBanner.tsx index 63a258c5ec8fe5..757c64d72be9a1 100644 --- a/docs/src/components/home/StoreTemplatesBanner.tsx +++ b/docs/src/components/home/StoreTemplatesBanner.tsx @@ -24,7 +24,7 @@ const Image = styled('img')(({ theme }) => ({ width: 450, height: 450 / ratio, }, - border: '6px solid', + border: '4px solid', borderColor: (theme.vars || theme).palette.grey[400], borderRadius: (theme.vars || theme).shape.borderRadius, objectFit: 'cover', @@ -281,12 +281,12 @@ export default function StoreTemplatesBanner() { pointerEvents: 'none', zIndex: 10, background: `linear-gradient(to right, ${ - (theme.vars || theme).palette.grey[50] + (theme.vars || theme).palette.primary[50] }, ${transparent})`, ...theme.applyDarkStyles({ background: `linear-gradient(to right, ${ (theme.vars || theme).palette.primaryDark[900] - }, ${alpha(theme.palette.primaryDark[900], 0)})`, + }, ${alpha(theme.palette.primary[900], 0)})`, }), })} />