[docs] Improve Paperbase demo (#26711)

mui · Jun 12, 2021 · 6a83b7a · 6a83b7a
1 parent 0c43ebe
commit 6a83b7a
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 89 deletions.
diff --git a/docs/src/pages/premium-themes/paperbase/Content.js b/docs/src/pages/premium-themes/paperbase/Content.js
@@ -10,9 +10,8 @@ import Tooltip from '@material-ui/core/Tooltip';
 import IconButton from '@material-ui/core/IconButton';
 import SearchIcon from '@material-ui/icons/Search';
 import RefreshIcon from '@material-ui/icons/Refresh';
-import Box from 'packages/material-ui-system/src/Box';
 
-function Content() {
+export default function Content() {
   return (
     <Paper sx={{ maxWidth: 936, margin: 'auto', overflow: 'hidden' }}>
       <AppBar
@@ -50,13 +49,9 @@ function Content() {
           </Grid>
         </Toolbar>
       </AppBar>
-      <Box sx={{ m: '40px 16px' }}>
-        <Typography color="text.secondary" align="center">
-          No users for this project yet
-        </Typography>
-      </Box>
+      <Typography sx={{ my: 5, mx: 2 }} color="text.secondary" align="center">
+        No users for this project yet
+      </Typography>
     </Paper>
   );
 }
-
-export default Content;
diff --git a/docs/src/pages/premium-themes/paperbase/Content.tsx b/docs/src/pages/premium-themes/paperbase/Content.tsx
@@ -10,9 +10,8 @@ import Tooltip from '@material-ui/core/Tooltip';
 import IconButton from '@material-ui/core/IconButton';
 import SearchIcon from '@material-ui/icons/Search';
 import RefreshIcon from '@material-ui/icons/Refresh';
-import Box from 'packages/material-ui-system/src/Box';
 
-function Content() {
+export default function Content() {
   return (
     <Paper sx={{ maxWidth: 936, margin: 'auto', overflow: 'hidden' }}>
       <AppBar
@@ -50,13 +49,9 @@ function Content() {
           </Grid>
         </Toolbar>
       </AppBar>
-      <Box sx={{ m: '40px 16px' }}>
-        <Typography color="text.secondary" align="center">
-          No users for this project yet
-        </Typography>
-      </Box>
+      <Typography sx={{ my: 5, mx: 2 }} color="text.secondary" align="center">
+        No users for this project yet
+      </Typography>
     </Paper>
   );
 }
-
-export default Content;
diff --git a/docs/src/pages/premium-themes/paperbase/Header.tsx b/docs/src/pages/premium-themes/paperbase/Header.tsx
@@ -20,7 +20,7 @@ interface HeaderProps {
   onDrawerToggle: () => void;
 }
 
-function Header(props: HeaderProps) {
+export default function Header(props: HeaderProps) {
   const { onDrawerToggle } = props;
 
   return (
@@ -114,5 +114,3 @@ function Header(props: HeaderProps) {
     </React.Fragment>
   );
 }
-
-export default Header;
diff --git a/docs/src/pages/premium-themes/paperbase/Navigator.js b/docs/src/pages/premium-themes/paperbase/Navigator.js
@@ -1,9 +1,10 @@
 import * as React from 'react';
-
 import Divider from '@material-ui/core/Divider';
 import Drawer from '@material-ui/core/Drawer';
 import List from '@material-ui/core/List';
+import Box from '@material-ui/core/Box';
 import ListItem from '@material-ui/core/ListItem';
+import ListItemButton from '@material-ui/core/ListItemButton';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import HomeIcon from '@material-ui/icons/Home';
@@ -19,7 +20,7 @@ import PhonelinkSetupIcon from '@material-ui/icons/PhonelinkSetup';
 
 const categories = [
   {
-    id: 'Develop',
+    id: 'Build',
     children: [
       {
         id: 'Authentication',
@@ -31,7 +32,7 @@ const categories = [
       { id: 'Hosting', icon: <PublicIcon /> },
       { id: 'Functions', icon: <SettingsEthernetIcon /> },
       {
-        id: 'ML Kit',
+        id: 'Machine learning',
         icon: <SettingsInputComponentIcon />,
       },
     ],
@@ -47,59 +48,53 @@ const categories = [
 ];
 
 const item = {
-  py: 1,
+  py: '2px',
+  px: 3,
   color: 'rgba(255, 255, 255, 0.7)',
   '&:hover, &:focus': {
     bgcolor: 'rgba(255, 255, 255, 0.08)',
   },
 };
 
 const itemCategory = {
-  bgcolor: '#232f3e',
-  boxShadow: '0 -1px 0 #404854 inset',
-  py: 2,
-};
-
-const firebase = {
-  fontSize: 24,
-  color: (theme) => theme.palette.common.white,
+  boxShadow: '0 -1px 0 rgb(255,255,255,0.1) inset',
+  py: 1.5,
+  px: 3,
 };
 
-function Navigator(props) {
+export default function Navigator(props) {
   const { ...other } = props;
 
   return (
     <Drawer variant="permanent" {...other}>
       <List disablePadding>
-        <ListItem sx={{ ...item, ...itemCategory, ...firebase }}>Paperbase</ListItem>
+        <ListItem sx={{ ...item, ...itemCategory, fontSize: 22, color: '#fff' }}>
+          Paperbase
+        </ListItem>
         <ListItem sx={{ ...item, ...itemCategory }}>
-          <ListItemIcon sx={{ minWidth: 'auto', mr: 2 }}>
+          <ListItemIcon>
             <HomeIcon />
           </ListItemIcon>
           <ListItemText>Project Overview</ListItemText>
         </ListItem>
         {categories.map(({ id, children }) => (
-          <React.Fragment key={id}>
-            <ListItem sx={{ py: 2 }}>
-              <ListItemText sx={{ color: 'common.white' }}>{id}</ListItemText>
+          <Box key={id} sx={{ bgcolor: '#101F33' }}>
+            <ListItem sx={{ py: 2, px: 3 }}>
+              <ListItemText sx={{ color: '#fff' }}>{id}</ListItemText>
             </ListItem>
             {children.map(({ id: childId, icon, active }) => (
-              <ListItem
-                key={childId}
-                button
-                sx={{ ...item, ...(active && { color: '#4fc3f7' }) }}
-              >
-                <ListItemIcon sx={{ minWidth: 'auto', mr: 2 }}>{icon}</ListItemIcon>
-                <ListItemText>{childId}</ListItemText>
+              <ListItem disablePadding key={childId}>
+                <ListItemButton selected={active} sx={item}>
+                  <ListItemIcon>{icon}</ListItemIcon>
+                  <ListItemText>{childId}</ListItemText>
+                </ListItemButton>
               </ListItem>
             ))}
 
             <Divider sx={{ mt: 2 }} />
-          </React.Fragment>
+          </Box>
         ))}
       </List>
     </Drawer>
   );
 }
-
-export default Navigator;
diff --git a/docs/src/pages/premium-themes/paperbase/Navigator.tsx b/docs/src/pages/premium-themes/paperbase/Navigator.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { Theme } from '@material-ui/core/styles';
 import Divider from '@material-ui/core/Divider';
 import Drawer, { DrawerProps } from '@material-ui/core/Drawer';
 import List from '@material-ui/core/List';
+import Box from '@material-ui/core/Box';
 import ListItem from '@material-ui/core/ListItem';
+import ListItemButton from '@material-ui/core/ListItemButton';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import HomeIcon from '@material-ui/icons/Home';
@@ -19,7 +20,7 @@ import PhonelinkSetupIcon from '@material-ui/icons/PhonelinkSetup';
 
 const categories = [
   {
-    id: 'Develop',
+    id: 'Build',
     children: [
       {
         id: 'Authentication',
@@ -31,7 +32,7 @@ const categories = [
       { id: 'Hosting', icon: <PublicIcon /> },
       { id: 'Functions', icon: <SettingsEthernetIcon /> },
       {
-        id: 'ML Kit',
+        id: 'Machine learning',
         icon: <SettingsInputComponentIcon />,
       },
     ],
@@ -47,58 +48,52 @@ const categories = [
 ];
 
 const item = {
-  py: 1,
+  py: '2px',
+  px: 3,
   color: 'rgba(255, 255, 255, 0.7)',
   '&:hover, &:focus': {
     bgcolor: 'rgba(255, 255, 255, 0.08)',
   },
 };
 
 const itemCategory = {
-  bgcolor: '#232f3e',
-  boxShadow: '0 -1px 0 #404854 inset',
-  py: 2,
+  boxShadow: '0 -1px 0 rgb(255,255,255,0.1) inset',
+  py: 1.5,
+  px: 3,
 };
 
-const firebase = {
-  fontSize: 24,
-  color: (theme: Theme) => theme.palette.common.white,
-};
-
-function Navigator(props: DrawerProps) {
+export default function Navigator(props: DrawerProps) {
   const { ...other } = props;
 
   return (
     <Drawer variant="permanent" {...other}>
       <List disablePadding>
-        <ListItem sx={{ ...item, ...itemCategory, ...firebase }}>Paperbase</ListItem>
+        <ListItem sx={{ ...item, ...itemCategory, fontSize: 22, color: '#fff' }}>
+          Paperbase
+        </ListItem>
         <ListItem sx={{ ...item, ...itemCategory }}>
-          <ListItemIcon sx={{ minWidth: 'auto', mr: 2 }}>
+          <ListItemIcon>
             <HomeIcon />
           </ListItemIcon>
           <ListItemText>Project Overview</ListItemText>
         </ListItem>
         {categories.map(({ id, children }) => (
-          <React.Fragment key={id}>
-            <ListItem sx={{ py: 2 }}>
-              <ListItemText sx={{ color: 'common.white' }}>{id}</ListItemText>
+          <Box key={id} sx={{ bgcolor: '#101F33' }}>
+            <ListItem sx={{ py: 2, px: 3 }}>
+              <ListItemText sx={{ color: '#fff' }}>{id}</ListItemText>
             </ListItem>
             {children.map(({ id: childId, icon, active }) => (
-              <ListItem
-                key={childId}
-                button
-                sx={{ ...item, ...(active && { color: '#4fc3f7' }) }}
-              >
-                <ListItemIcon sx={{ minWidth: 'auto', mr: 2 }}>{icon}</ListItemIcon>
-                <ListItemText>{childId}</ListItemText>
+              <ListItem disablePadding key={childId}>
+                <ListItemButton selected={active} sx={item}>
+                  <ListItemIcon>{icon}</ListItemIcon>
+                  <ListItemText>{childId}</ListItemText>
+                </ListItemButton>
               </ListItem>
             ))}
             <Divider sx={{ mt: 2 }} />
-          </React.Fragment>
+          </Box>
         ))}
       </List>
     </Drawer>
   );
 }
-
-export default Navigator;
diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.js b/docs/src/pages/premium-themes/paperbase/Paperbase.js
@@ -59,7 +59,7 @@ theme = {
     MuiDrawer: {
       styleOverrides: {
         paper: {
-          backgroundColor: '#18202c',
+          backgroundColor: '#081627',
         },
       },
     },
@@ -120,13 +120,23 @@ theme = {
     MuiDivider: {
       styleOverrides: {
         root: {
-          backgroundColor: '#404854',
+          backgroundColor: 'rgb(255,255,255,0.15)',
+        },
+      },
+    },
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          '&.Mui-selected': {
+            color: '#4fc3f7',
+          },
         },
       },
     },
     MuiListItemText: {
       styleOverrides: {
         primary: {
+          fontSize: 14,
           fontWeight: theme.typography.fontWeightMedium,
         },
       },
@@ -135,7 +145,8 @@ theme = {
       styleOverrides: {
         root: {
           color: 'inherit',
-          marginRight: 0,
+          minWidth: 'auto',
+          marginRight: theme.spacing(2),
           '& svg': {
             fontSize: 20,
           },
@@ -155,7 +166,7 @@ theme = {
 
 const drawerWidth = 256;
 
-function Paperbase() {
+export default function Paperbase() {
   const [mobileOpen, setMobileOpen] = React.useState(false);
   const isSmUp = useMediaQuery(theme.breakpoints.up('sm'));
 
@@ -198,5 +209,3 @@ function Paperbase() {
     </ThemeProvider>
   );
 }
-
-export default Paperbase;