diff --git a/docs/data/joy/getting-started/templates/order-dashboard/App.tsx b/docs/data/joy/getting-started/templates/order-dashboard/App.tsx index e884a21e0ffe71..480cf9fa1a626f 100644 --- 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={} + sx={{ pl: 0 }} > { - // Feather icon setup: https://github.com/feathericons/feather#4-replace - // @ts-ignore - if (typeof feather !== 'undefined') { - // @ts-ignore - feather.replace(); - } - }, [status]); - return ( - ({ - '[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', - }, - })} - /> -
+
({ - '--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', - })} + }} > 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 index 073e9e37b0c5c7..d1b512bb8a123b 100644 --- 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]), ]} > - - + + ); } 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 index c55a76bc6f1eb0..ffad77fc4fccae 100644 --- 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) { > Country 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 index b08ee630ebe9c5..d04990e770b3d6 100644 --- 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 ( - - - - - + +
{icon ?? }
+ + 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 index 69d9f489923f9d..bd916e6fa70b5c 100644 --- 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 ( - - - + + - - + + - - + + - - + + ); 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 index 7f50326288d249..ad9ae6f4c0a891 100644 --- 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,9 +33,6 @@ export default function FileUpload({ { gap: 1.5, alignItems: 'flex-start', - ...(progress >= 100 && { - borderColor: 'primary.500', - }), }, ...(Array.isArray(sx) ? sx : [sx]), ]} @@ -39,24 +40,30 @@ export default function FileUpload({ -
{icon ?? }
+
{icon ?? }
 {fileName} {fileSize} = 100 && { + color: 'var(--joy-palette-success-solidBg)', + }), + }, + ]} /> {progress}% @@ -65,7 +72,7 @@ export default function FileUpload({
- +
) : ( - - + + )} 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 index 746e72e993fe86..e77c937ca54480 100644 --- 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" > - + - - ); } diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/MyProfile.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/MyProfile.tsx index 189aebbd33b1d6..9d30ec1b9fcea1 100644 --- a/docs/data/joy/getting-started/templates/profile-dashboard/components/MyProfile.tsx +++ b/docs/data/joy/getting-started/templates/profile-dashboard/components/MyProfile.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import Avatar from '@mui/joy/Avatar'; +import AspectRatio from '@mui/joy/AspectRatio'; import Box from '@mui/joy/Box'; import Button from '@mui/joy/Button'; -import Chip, { chipClasses } from '@mui/joy/Chip'; import Divider from '@mui/joy/Divider'; import FormControl from '@mui/joy/FormControl'; import FormLabel from '@mui/joy/FormLabel'; import FormHelperText from '@mui/joy/FormHelperText'; import Input from '@mui/joy/Input'; +import IconButton from '@mui/joy/IconButton'; import Textarea from '@mui/joy/Textarea'; import Stack from '@mui/joy/Stack'; import Select from '@mui/joy/Select'; @@ -16,6 +16,20 @@ import Typography from '@mui/joy/Typography'; import Tabs from '@mui/joy/Tabs'; import TabList from '@mui/joy/TabList'; import Tab, { tabClasses } from '@mui/joy/Tab'; +import Breadcrumbs from '@mui/joy/Breadcrumbs'; +import Link from '@mui/joy/Link'; +import Card from '@mui/joy/Card'; +import CardActions from '@mui/joy/CardActions'; +import CardOverflow from '@mui/joy/CardOverflow'; + +import HomeRoundedIcon from '@mui/icons-material/HomeRounded'; +import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; +import EmailRoundedIcon from '@mui/icons-material/EmailRounded'; +import AccessTimeFilledRoundedIcon from '@mui/icons-material/AccessTimeFilledRounded'; +import VideocamRoundedIcon from '@mui/icons-material/VideocamRounded'; +import InsertDriveFileRoundedIcon from '@mui/icons-material/InsertDriveFileRounded'; +import EditRoundedIcon from '@mui/icons-material/EditRounded'; + import DropZone from './DropZone'; import FileUpload from './FileUpload'; import CountrySelector from './CountrySelector'; @@ -26,201 +40,350 @@ export default function MyProfile() { - - My profile - - + - ({ - '--Chip-minHeight': '20px', - '--ListItem-minHeight': '48px', - top: 'calc(-1 * (var(--main-paddingTop, 0px) - var(--Header-height, 0px)))', - zIndex: 10, - width: '100%', - overflow: 'auto hidden', - alignSelf: 'flex-start', - scrollSnapType: 'inline', - '&::after': { - pointerEvents: 'none', - display: { xs: 'block', sm: 'none' }, - content: '""', - position: 'sticky', - top: 0, - width: 40, - flex: 'none', - zIndex: 1, - right: 0, - borderBottom: '1px solid transparent', - background: `linear-gradient(to left, ${theme.vars.palette.background.body}, rgb(0 0 0 / 0))`, - backgroundClip: 'content-box', - }, - '&::-webkit-scrollbar': { - width: 0, - display: 'none', - }, - [`& .${tabClasses.root}`]: { - '--focus-outline-offset': '-2px', - '&:first-of-type': { - ml: 'calc(-1 * var(--ListItem-paddingX))', - }, - scrollSnapAlign: 'start', - bgcolor: 'transparent', - flex: 'none', - '&:hover': { - bgcolor: 'transparent', - }, - [`&.${tabClasses.selected}`]: { - color: 'primary.plainColor', - bgcolor: 'transparent', - [`& .${chipClasses.root}`]: theme.variants.solid.primary, - }, - }, - })} > - - Account settings - - - Team{' '} - - 2 - - - - Plan - - - Billing{' '} - - 4 - - - - Notifications - - - Integrations - - - API - - - } + sx={{ pl: 0 }} + > + + + + + Users + + + My profile + + + + My profile + + + hr': { - gridColumn: '1/-1', - }, + bgcolor: 'transparent', }} > - Name - - - First name - - - - Last name - - - - - - Email - } - placeholder="email" - defaultValue="siriwatk@test.com" - /> - - -
- Your photo - This will be displayed on your profile. -
- - - + + Settings + + + Team + + + Plan + + + Billing + + + + + + + + + Personal info + + Customize how your profile information will apper to the networks. + - - - Role - - - - - - - Timezone - - - -
- Bio - Write a short introduction. -
-
+ + + + + + + + + + + + + Name + + + + + + + + Role + + + + Email + } + placeholder="email" + defaultValue="siriwatk@test.com" + sx={{ flexGrow: 1 }} + /> + + +
+ +
+
+ + Timezone + + +
+ + + + + + + + + + + + + + Name + + + + + + + + + Role + + + + Email + } + placeholder="email" + defaultValue="siriwatk@test.com" + sx={{ flexGrow: 1 }} + /> + + +
+ +
+
+ + Timezone + + +
+ + + + + + + + + + + Bio + + Write a short introduction to be displayed on your profile + + + +