From fd4e9f73b930c8a5f59538d711821f5def851277 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Tue, 19 Sep 2023 09:13:23 -0300 Subject: [PATCH] [website] Add stray design tweaks to the X page (#38589) --- .../src/components/home/XGridGlobalStyles.tsx | 6 +- .../components/productX/XDateRangeDemo.tsx | 14 +++- .../src/components/productX/XGridFullDemo.tsx | 42 ++++++++++++ docs/src/components/productX/XHero.tsx | 66 +++++++++++++++---- docs/src/components/productX/XRoadmap.tsx | 15 +---- .../src/components/productX/XTreeViewDemo.tsx | 40 +++-------- .../components/showcase/FolderTreeView.tsx | 55 +++++++--------- 7 files changed, 145 insertions(+), 93 deletions(-) diff --git a/docs/src/components/home/XGridGlobalStyles.tsx b/docs/src/components/home/XGridGlobalStyles.tsx index 5bad2522a45f08..ea356d2003fe71 100644 --- a/docs/src/components/home/XGridGlobalStyles.tsx +++ b/docs/src/components/home/XGridGlobalStyles.tsx @@ -125,7 +125,7 @@ export default function XGridGlobalStyles({ }, }, '& .MuiCheckbox-root': { - color: (theme.vars || theme).palette.primary[400], + color: (theme.vars || theme).palette.primary[300], }, '& .MuiIconButton-root:not(.Mui-disabled)': { color: (theme.vars || theme).palette.primary[300], @@ -151,9 +151,9 @@ export default function XGridGlobalStyles({ '& .MuiIconButton-root': { '&:not([disabled])': { color: (theme.vars || theme).palette.primaryDark[100], - borderColor: (theme.vars || theme).palette.primaryDark[300], + borderColor: (theme.vars || theme).palette.primaryDark[400], }, - borderColor: (theme.vars || theme).palette.primaryDark[500], + borderColor: (theme.vars || theme).palette.primaryDark[600], }, }, }, diff --git a/docs/src/components/productX/XDateRangeDemo.tsx b/docs/src/components/productX/XDateRangeDemo.tsx index c8c6587c07e4ec..831933d353c7b3 100644 --- a/docs/src/components/productX/XDateRangeDemo.tsx +++ b/docs/src/components/productX/XDateRangeDemo.tsx @@ -49,9 +49,8 @@ function CustomRangeShortcuts(props: PickersShortcutsProps>) { theme.applyDarkStyles({ '& > div': { bgcolor: 'primaryDark.900', }, + '& .MuiDateRangePickerDay-day.Mui-selected': { + color: '#FFF', + }, }), ]} > diff --git a/docs/src/components/productX/XGridFullDemo.tsx b/docs/src/components/productX/XGridFullDemo.tsx index c356bae596553d..f2e500ea7b3188 100644 --- a/docs/src/components/productX/XGridFullDemo.tsx +++ b/docs/src/components/productX/XGridFullDemo.tsx @@ -1,4 +1,6 @@ import * as React from 'react'; +import { red, green, yellow, blue } from '@mui/material/colors'; +import { alpha } from '@mui/material/styles'; import { DataGridPro, GridToolbar, GridPaginationModel } from '@mui/x-data-grid-pro'; import { useDemoData } from '@mui/x-data-grid-generator'; import FormControl from '@mui/material/FormControl'; @@ -183,6 +185,26 @@ export default function XGridFullDemo() { '& .MuiDataGrid-cell': { bgcolor: 'grey.50', }, + '& .MuiChip-root.Rejected': { + color: red[800], + backgroundColor: red[50], + borderColor: red[100], + }, + '& .MuiChip-root.Filled': { + color: green[800], + backgroundColor: green[50], + borderColor: green[100], + }, + '& .MuiChip-root.Open': { + color: blue[800], + backgroundColor: blue[50], + borderColor: blue[100], + }, + '& .MuiChip-root.PartiallyFilled': { + color: 'text.secondary', + backgroundColor: yellow[50], + borderColor: yellow[600], + }, '& .MuiDataGrid-footerContainer': { minHeight: 48, borderTop: '1px solid', @@ -209,6 +231,26 @@ export default function XGridFullDemo() { '& .MuiDataGrid-footerContainer': { borderColor: 'primaryDark.600', }, + '& .MuiChip-root.Rejected': { + color: red[200], + backgroundColor: alpha(red[900], 0.2), + borderColor: alpha(red[700], 0.5), + }, + '& .MuiChip-root.Filled': { + color: green[200], + backgroundColor: alpha(green[900], 0.2), + borderColor: alpha(green[700], 0.5), + }, + '& .MuiChip-root.Open': { + color: blue[200], + backgroundColor: alpha(blue[900], 0.2), + borderColor: alpha(blue[700], 0.5), + }, + '& .MuiChip-root.PartiallyFilled': { + color: yellow[200], + backgroundColor: alpha(yellow[900], 0.2), + borderColor: alpha(yellow[700], 0.2), + }, }, }), ]} diff --git a/docs/src/components/productX/XHero.tsx b/docs/src/components/productX/XHero.tsx index f40e12ce0771fa..5319cc4c5a9ea2 100644 --- a/docs/src/components/productX/XHero.tsx +++ b/docs/src/components/productX/XHero.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { red } from '@mui/material/colors'; +import { red, green, yellow, blue } from '@mui/material/colors'; import Box from '@mui/material/Box'; import Divider from '@mui/material/Divider'; import Paper from '@mui/material/Paper'; @@ -207,10 +207,25 @@ export default function XHero() { px: 0.5, }, }, - '& .MuiDataGrid-cell[data-field="status"][data-value="Rejected"]': { - '& .MuiChip-root': { - color: red[500], - }, + '& .MuiChip-root.Rejected': { + color: red[800], + backgroundColor: red[50], + borderColor: red[100], + }, + '& .MuiChip-root.Filled': { + color: green[800], + backgroundColor: green[50], + borderColor: green[100], + }, + '& .MuiChip-root.Open': { + color: blue[800], + backgroundColor: blue[50], + borderColor: blue[100], + }, + '& .MuiChip-root.PartiallyFilled': { + color: 'text.secondary', + backgroundColor: yellow[50], + borderColor: yellow[600], }, '& .grouping-column-header': { pl: 6, @@ -226,10 +241,25 @@ export default function XHero() { '& .MuiDataGrid-cell': { borderColor: alpha(theme.palette.primaryDark[600], 0.5), }, - '& .MuiDataGrid-cell[data-field="status"][data-value="Rejected"]': { - '& .MuiChip-root': { - color: red[300], - }, + '& .MuiChip-root.Rejected': { + color: red[200], + backgroundColor: alpha(red[900], 0.2), + borderColor: alpha(red[700], 0.5), + }, + '& .MuiChip-root.Filled': { + color: green[200], + backgroundColor: alpha(green[900], 0.2), + borderColor: alpha(green[700], 0.5), + }, + '& .MuiChip-root.Open': { + color: blue[200], + backgroundColor: alpha(blue[900], 0.2), + borderColor: alpha(blue[700], 0.5), + }, + '& .MuiChip-root.PartiallyFilled': { + color: yellow[200], + backgroundColor: alpha(yellow[900], 0.2), + borderColor: alpha(yellow[700], 0.2), }, }, }), @@ -274,9 +304,9 @@ export default function XHero() { flexGrow: 1, })} > - - Cool Project - + + Cool UI project + @@ -305,6 +335,9 @@ export default function XHero() { '& [role="row"]': { margin: { xs: '4px 0', xl: '6px 0' }, }, + '& .MuiPickersArrowSwitcher-root': { + padding: 1, + }, '& .MuiDateRangePickerDay-root': { lineHeight: 0, margin: 0, @@ -314,6 +347,12 @@ export default function XHero() { height: { xs: 28, xl: 32 }, fontWeight: 400, }, + '& .MuiDateRangePickerDay-day.Mui-selected': { + fontWeight: 600, + }, + '& .MuiDateRangePickerDay-day:not(.Mui-selected)': { + borderColor: 'primary.300', + }, }, (theme) => theme.applyDarkStyles({ @@ -322,6 +361,9 @@ export default function XHero() { '& > div': { backgroundColor: 'primaryDark.800', }, + '& .MuiDateRangePickerDay-day.Mui-selected': { + color: '#FFF', + }, }), ]} > diff --git a/docs/src/components/productX/XRoadmap.tsx b/docs/src/components/productX/XRoadmap.tsx index 88efbc00e4fb66..ad76efaa9f7ecf 100644 --- a/docs/src/components/productX/XRoadmap.tsx +++ b/docs/src/components/productX/XRoadmap.tsx @@ -35,7 +35,7 @@ export default function XRoadmap() { content: '""', display: 'block', position: 'absolute', - width: 2, + width: 1.5, bgcolor: 'primaryDark.500', top: 24, bottom: 10, @@ -51,26 +51,17 @@ export default function XRoadmap() { const bullet = ( ); diff --git a/docs/src/components/productX/XTreeViewDemo.tsx b/docs/src/components/productX/XTreeViewDemo.tsx index df4eba0ada0505..26f2d86d4923fa 100644 --- a/docs/src/components/productX/XTreeViewDemo.tsx +++ b/docs/src/components/productX/XTreeViewDemo.tsx @@ -12,8 +12,6 @@ import { TreeItemContentProps, } from '@mui/x-tree-view/TreeItem'; import Typography from '@mui/material/Typography'; -import AddBoxOutlined from '@mui/icons-material/AddBoxOutlined'; -import IndeterminateCheckBoxOutlined from '@mui/icons-material/IndeterminateCheckBoxOutlined'; import FolderRounded from '@mui/icons-material/FolderRounded'; import FolderOpenRounded from '@mui/icons-material/FolderOpenRounded'; import PhotoOutlined from '@mui/icons-material/PhotoOutlined'; @@ -157,19 +155,14 @@ const StyledTreeItem = styled(MuiTreeItem)(({ theme }) => [ }, '& .MuiTreeItem-root': { position: 'relative', - '&:last-of-type': { - '&:before': { - height: 30 / 2, - }, - }, '&:before': { content: '""', display: 'block', position: 'absolute', - left: -18, + left: -14, height: '100%', - width: 2, - backgroundColor: (theme.vars || theme).palette.grey[200], + width: 1.5, + backgroundColor: (theme.vars || theme).palette.grey[100], }, }, '& .MuiTreeItem-content': { @@ -178,25 +171,12 @@ const StyledTreeItem = styled(MuiTreeItem)(({ theme }) => [ '& .MuiTreeItem-group': { marginLeft: 0, paddingLeft: theme.spacing(3), - '& .MuiTreeItem-content': { - '&:before': { - content: '""', - position: 'absolute', - display: 'block', - width: 24, - height: 2, - backgroundColor: (theme.vars || theme).palette.grey[200], - top: '50%', - left: 6, - transform: 'translate(-100%, -50%)', - }, - }, }, }, theme.applyDarkStyles({ '& .MuiTreeItem-root': { '&:before': { - backgroundColor: (theme.vars || theme).palette.primaryDark[500], + backgroundColor: (theme.vars || theme).palette.primaryDark[700], }, }, '& .MuiTreeItem-group': { @@ -236,8 +216,6 @@ export default function XDateRangeDemo() { } - defaultExpandIcon={} sx={{ height: { xs: 260, sm: 300 }, overflowY: 'auto', p: 1 }} > @@ -261,12 +239,12 @@ export default function XDateRangeDemo() { @@ -274,15 +252,15 @@ export default function XDateRangeDemo() { - + [ }, '& .MuiTreeItem-root': { position: 'relative', - '&:last-of-type': { - '&:before': { - height: 34 / 2, - }, - }, '&:before': { content: '""', display: 'block', position: 'absolute', - left: -18, + left: -14, height: '100%', - width: 2, + width: 1.5, backgroundColor: (theme.vars || theme).palette.grey[200], }, }, '& .MuiTreeItem-group': { marginLeft: 0, paddingLeft: theme.spacing(3), - '& .MuiTreeItem-content': { - '&:before': { - content: '""', - position: 'absolute', - display: 'block', - width: 24, - height: 2, - backgroundColor: (theme.vars || theme).palette.grey[200], - top: '50%', - left: 6, - transform: 'translate(-100%, -50%)', - }, - }, }, }, theme.applyDarkStyles({ @@ -193,25 +175,34 @@ export default function FolderTreeView() { sx={{ p: 1, overflowY: 'auto' }} > - - + + + + - + - + + + +