[website] Add stray design tweaks to the X page (#38589)

mui · Sep 19, 2023 · fd4e9f7 · fd4e9f7
1 parent 5ae040f
commit fd4e9f7
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 93 deletions.
diff --git 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
@@ -49,9 +49,8 @@ function CustomRangeShortcuts(props: PickersShortcutsProps<DateRange<Date>>) {
       <List
         sx={{
           display: 'flex',
-          py: 1.5,
-          px: 1.5,
-          gap: 1.5,
+          p: 1.5,
+          gap: 1,
           '& .MuiListItem-root': {
             p: 0,
             width: 'fit-content',
@@ -138,12 +137,21 @@ export default function XDateRangeDemo() {
                 height: 28,
                 fontWeight: 400,
               },
+              '& .MuiDateRangePickerDay-day.Mui-selected': {
+                fontWeight: 600,
+              },
+              '& .MuiDateRangePickerDay-day:not(.Mui-selected)': {
+                borderColor: 'primary.300',
+              },
             },
             (theme) =>
               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
@@ -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
@@ -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,
               })}
             >
-              <Box sx={{ p: 2 }}>
-                <Typography fontWeight={500}>Cool Project</Typography>
-              </Box>
+              <Typography fontWeight={500} p={2}>
+                Cool UI project
+              </Typography>
               <Divider />
               <FolderTreeView />
             </Paper>
@@ -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
@@ -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 = (
     <Box
       sx={{
-        ml: 1,
+        ml: 1.3,
         mr: -2,
         display: 'flex',
         alignItems: 'center',
         '&:before': {
           content: '""',
           display: 'block',
-          height: 2,
+          height: 1.5,
           width: 15,
           bgcolor: 'primaryDark.500',
         },
-        '&:after': {
-          content: '""',
-          width: 6,
-          height: 6,
-          bgcolor: 'warning.500',
-          borderRadius: '50%',
-          display: 'block',
-          marginRight: 1.5,
-        },
       }}
     />
   );

diff --git 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() {
           <TreeView
             aria-label="file system navigator"
             defaultExpanded={['2', '2.3', '3']}
-            defaultCollapseIcon={<IndeterminateCheckBoxOutlined fontSize="small" />}
-            defaultExpandIcon={<AddBoxOutlined fontSize="small" />}
             sx={{ height: { xs: 260, sm: 300 }, overflowY: 'auto', p: 1 }}
           >
             <TreeItem nodeId="1" label="Drive">
@@ -261,28 +239,28 @@ export default function XDateRangeDemo() {
               <TreeItem nodeId="1.2" label="Photos">
                 <TreeItem
                   nodeId="1.2.1"
-                  label="Family.jpeg"
+                  label="family.jpeg"
                   ContentProps={{ lastNestedChild: true }}
                 />
                 <TreeItem
                   nodeId="1.2.2"
-                  label="My Dog.png"
+                  label="my_dogpng"
                   ContentProps={{ lastNestedChild: true }}
                 />
               </TreeItem>
             </TreeItem>
             <TreeItem nodeId="2" label="Favorite">
               <TreeItem
                 nodeId="2.1"
-                label="MUI Retreat Picture.jpg"
+                label="MUI_retreat_photo.jpg"
                 ContentProps={{ lastNestedChild: true }}
               />
               <TreeItem
                 nodeId="2.2"
-                label="v5 launch video.mkv"
+                label="v6_secrets.mkv"
                 ContentProps={{ lastNestedChild: true }}
               />
-              <TreeItem nodeId="2.3" label="images">
+              <TreeItem nodeId="2.3" label="Other pictures">
                 <TreeItem
                   nodeId="2.3.1"
                   label="my_avatar.jpg"