[docs][joy-ui] Refine the Profile Dashboard template (#38599)

Co-authored-by: siriwatknp <[email protected]>
mui · Sep 5, 2023 · d9cdb05 · d9cdb05
1 parent 37f058f
commit d9cdb05
Show file tree

Hide file tree

Showing 12 changed files with 622 additions and 395 deletions.
diff --git a/docs/data/joy/getting-started/templates/order-dashboard/App.tsx b/docs/data/joy/getting-started/templates/order-dashboard/App.tsx
@@ -72,6 +72,7 @@ export default function JoyOrderDashboardTemplate() {
               size="sm"
               aria-label="breadcrumbs"
               separator={<ChevronRightRoundedIcon fontSize="sm" />}
+              sx={{ pl: 0 }}
             >
               <Link
                 underline="none"

diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/App.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/App.tsx
@@ -1,58 +1,26 @@
 import * as React from 'react';
 import { CssVarsProvider } from '@mui/joy/styles';
-import GlobalStyles from '@mui/joy/GlobalStyles';
 import CssBaseline from '@mui/joy/CssBaseline';
 import Box from '@mui/joy/Box';
-import useScript from './useScript';
 import Sidebar from './components/Sidebar';
 import Header from './components/Header';
 import MyProfile from './components/MyProfile';
 
-const useEnhancedEffect =
-  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
 export default function JoyOrderDashboardTemplate() {
-  const status = useScript(`https://unpkg.com/feather-icons`);
-
-  useEnhancedEffect(() => {
-    // Feather icon setup: https://github.com/feathericons/feather#4-replace
-    // @ts-ignore
-    if (typeof feather !== 'undefined') {
-      // @ts-ignore
-      feather.replace();
-    }
-  }, [status]);
-
   return (
     <CssVarsProvider disableTransitionOnChange>
-      <GlobalStyles
-        styles={(theme) => ({
-          '[data-feather], .feather': {
-            color: `var(--Icon-color, ${theme.vars.palette.text.icon})`,
-            margin: 'var(--Icon-margin)',
-            fontSize: `var(--Icon-fontSize, ${theme.vars.fontSize.xl})`,
-            width: '1em',
-            height: '1em',
-          },
-        })}
-      />
       <CssBaseline />
       <Box sx={{ display: 'flex', minHeight: '100dvh' }}>
-        <Header />
         <Sidebar />
+        <Header />
         <Box
           component="main"
           className="MainContent"
-          sx={(theme) => ({
-            '--main-paddingTop': {
-              xs: `calc(${theme.spacing(2)} + var(--Header-height, 0px))`,
-              md: '32px',
-            },
-            px: {
-              xs: 2,
+          sx={{
+            pt: {
+              xs: 'calc(12px + var(--Header-height))',
               md: 3,
             },
-            pt: 'var(--main-paddingTop)',
             pb: {
               xs: 2,
               sm: 2,
@@ -65,7 +33,7 @@ export default function JoyOrderDashboardTemplate() {
             height: '100dvh',
             gap: 1,
             overflow: 'auto',
-          })}
+          }}
         >
           <MyProfile />
         </Box>

diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/ColorSchemeToggle.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/ColorSchemeToggle.tsx
@@ -2,6 +2,9 @@ import * as React from 'react';
 import { useColorScheme } from '@mui/joy/styles';
 import IconButton, { IconButtonProps } from '@mui/joy/IconButton';
 
+import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
+import LightModeIcon from '@mui/icons-material/LightMode';
+
 export default function ColorSchemeToggle({
   onClick,
   sx,
@@ -51,8 +54,8 @@ export default function ColorSchemeToggle({
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
-      <i data-feather="moon" />
-      <i data-feather="sun" />
+      <DarkModeRoundedIcon />
+      <LightModeIcon />
     </IconButton>
   );
 }
diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/CountrySelector.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/CountrySelector.tsx
@@ -15,6 +15,7 @@ export default function ContrySelector({ sx, ...props }: FormControlProps) {
     >
       <FormLabel>Country</FormLabel>
       <Autocomplete
+        size="sm"
         autoHighlight
         isOptionEqualToValue={(option, value) => option.code === value.code}
         defaultValue={{ code: 'TH', label: 'Thailand', phone: '66' }}

diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/DropZone.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/DropZone.tsx
@@ -1,14 +1,22 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import * as React from 'react';
-import Box from '@mui/joy/Box';
 import Card, { CardProps } from '@mui/joy/Card';
 import Link from '@mui/joy/Link';
 import Typography from '@mui/joy/Typography';
+import AspectRatio from '@mui/joy/AspectRatio';
 
-export default function DropZone({ sx, ...props }: CardProps) {
+import FileUploadRoundedIcon from '@mui/icons-material/FileUploadRounded';
+
+export default function DropZone({
+  icon,
+  sx,
+  ...props
+}: CardProps & {
+  icon?: React.ReactElement;
+}) {
   return (
     <Card
-      variant="outlined"
+      variant="soft"
       {...props}
       sx={[
         {
@@ -19,25 +27,24 @@ export default function DropZone({ sx, ...props }: CardProps) {
           alignItems: 'center',
           px: 3,
           flexGrow: 1,
+          boxShadow: 'none',
         },
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
-      <Box sx={{ p: 1, bgcolor: 'background.level1', borderRadius: '50%' }}>
-        <Box
-          sx={{
-            width: 32,
-            height: 32,
-            borderRadius: '50%',
-            bgcolor: 'background.level2',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          <i data-feather="upload-cloud" />
-        </Box>
-      </Box>
+      <AspectRatio
+        ratio="1"
+        variant="solid"
+        color="primary"
+        sx={{
+          minWidth: 32,
+          borderRadius: '50%',
+          '--Icon-fontSize': '16px',
+        }}
+      >
+        <div>{icon ?? <FileUploadRoundedIcon />}</div>
+      </AspectRatio>
+
       <Typography level="body-sm" textAlign="center">
         <Link component="button" overlay>
           Click to upload

diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/EditorToolbar.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/EditorToolbar.tsx
@@ -5,6 +5,11 @@ import Select from '@mui/joy/Select';
 import Option from '@mui/joy/Option';
 import IconButton from '@mui/joy/IconButton';
 
+import FormatBoldRoundedIcon from '@mui/icons-material/FormatBoldRounded';
+import FormatItalicRoundedIcon from '@mui/icons-material/FormatItalicRounded';
+import StrikethroughSRoundedIcon from '@mui/icons-material/StrikethroughSRounded';
+import FormatListBulletedRoundedIcon from '@mui/icons-material/FormatListBulletedRounded';
+
 export default function EditorToolbar({ sx, ...props }: BoxProps) {
   return (
     <Box
@@ -14,23 +19,23 @@ export default function EditorToolbar({ sx, ...props }: BoxProps) {
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
-      <Select defaultValue="1" sx={{ minWidth: 160 }}>
+      <Select size="sm" defaultValue="1" sx={{ minWidth: 160 }}>
         <Option value="1">Normal text</Option>
         <Option value="2" sx={{ fontFamily: 'code' }}>
           Code text
         </Option>
       </Select>
-      <IconButton variant="plain" color="neutral">
-        <i data-feather="bold" />
+      <IconButton size="sm" variant="plain" color="neutral">
+        <FormatBoldRoundedIcon />
       </IconButton>
-      <IconButton variant="plain" color="neutral">
-        <i data-feather="italic" />
+      <IconButton size="sm" variant="plain" color="neutral">
+        <FormatItalicRoundedIcon />
       </IconButton>
-      <IconButton variant="plain" color="neutral">
-        <i data-feather="link-2" />
+      <IconButton size="sm" variant="plain" color="neutral">
+        <StrikethroughSRoundedIcon />
       </IconButton>
-      <IconButton variant="plain" color="neutral">
-        <i data-feather="list" />
+      <IconButton size="sm" variant="plain" color="neutral">
+        <FormatListBulletedRoundedIcon />
       </IconButton>
     </Box>
   );

diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/FileUpload.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/FileUpload.tsx
@@ -7,6 +7,10 @@ import IconButton from '@mui/joy/IconButton';
 import LinearProgress from '@mui/joy/LinearProgress';
 import Typography from '@mui/joy/Typography';
 
+import InsertDriveFileRoundedIcon from '@mui/icons-material/InsertDriveFileRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import RemoveCircleOutlineRoundedIcon from '@mui/icons-material/RemoveCircleOutlineRounded';
+
 export default function FileUpload({
   icon,
   fileName,
@@ -29,34 +33,37 @@ export default function FileUpload({
         {
           gap: 1.5,
           alignItems: 'flex-start',
-          ...(progress >= 100 && {
-            borderColor: 'primary.500',
-          }),
         },
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
       <AspectRatio
         ratio="1"
         variant="soft"
-        color="primary"
+        color="neutral"
         sx={{
           minWidth: 32,
           borderRadius: '50%',
           '--Icon-fontSize': '16px',
         }}
       >
-        <div>{icon ?? <i data-feather="file" />}</div>
+        <div>{icon ?? <InsertDriveFileRoundedIcon />}</div>
       </AspectRatio>
       <CardContent>
         <Typography fontSize="sm">{fileName}</Typography>
         <Typography level="body-xs">{fileSize}</Typography>
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
           <LinearProgress
+            color="neutral"
             value={progress}
             determinate
-            variant="plain"
-            sx={{ bgcolor: 'neutral.softBg' }}
+            sx={[
+              {
+                ...(progress >= 100 && {
+                  color: 'var(--joy-palette-success-solidBg)',
+                }),
+              },
+            ]}
           />
           <Typography fontSize="xs">{progress}%</Typography>
         </Box>
@@ -65,25 +72,20 @@ export default function FileUpload({
         <AspectRatio
           ratio="1"
           variant="solid"
-          color="primary"
+          color="success"
           sx={{
             minWidth: 20,
             borderRadius: '50%',
             '--Icon-fontSize': '14px',
           }}
         >
           <div>
-            <i data-feather="check" />
+            <CheckRoundedIcon />
           </div>
         </AspectRatio>
       ) : (
-        <IconButton
-          variant="plain"
-          color="neutral"
-          size="sm"
-          sx={{ mt: -1, mr: -1 }}
-        >
-          <i data-feather="trash-2" />
+        <IconButton variant="plain" color="danger" size="sm" sx={{ mt: -1, mr: -1 }}>
+          <RemoveCircleOutlineRoundedIcon />
         </IconButton>
       )}
     </Card>

diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/Header.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/Header.tsx
@@ -2,8 +2,7 @@ import * as React from 'react';
 import GlobalStyles from '@mui/joy/GlobalStyles';
 import IconButton from '@mui/joy/IconButton';
 import Sheet from '@mui/joy/Sheet';
-import MuiLogo from './MuiLogo';
-import ColorSchemeToggle from './ColorSchemeToggle';
+import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
 import { toggleSidebar } from '../utils';
 
 export default function Header() {
@@ -12,14 +11,16 @@ export default function Header() {
       sx={{
         display: { xs: 'flex', md: 'none' },
         alignItems: 'center',
+        justifyContent: 'space-between',
         position: 'fixed',
         top: 0,
         width: '100vw',
         height: 'var(--Header-height)',
-        zIndex: 9995,
-        py: 1,
-        px: 2,
+        zIndex: 9998,
+        p: 2,
         gap: 1,
+        borderBottom: '1px solid',
+        borderColor: 'background.level1',
         boxShadow: 'sm',
       }}
     >
@@ -39,10 +40,8 @@ export default function Header() {
         color="neutral"
         size="sm"
       >
-        <i data-feather="menu" />
+        <MenuRoundedIcon />
       </IconButton>
-      <MuiLogo variant="plain" sx={{ boxShadow: 'none', mr: 'auto' }} />
-      <ColorSchemeToggle id={undefined} />
     </Sheet>
   );
 }