tweak the demos

mui · Sep 15, 2023 · c975685 · c975685
1 parent e2bfa02
commit c975685
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 149 deletions.
diff --git a/docs/data/joy/components/drawer/DrawerAnchor.js b/docs/data/joy/components/drawer/DrawerAnchor.js
@@ -51,13 +51,13 @@ export default function DrawerAnchor() {
   return (
     <React.Fragment>
       <ButtonGroup variant="outlined">
-        {['left', 'right', 'top', 'bottom'].map((anchor) => (
+        {['top', 'right', 'bottom', 'left'].map((anchor) => (
           <Button key={anchor} onClick={toggleDrawer(anchor, true)}>
             {anchor}
           </Button>
         ))}
       </ButtonGroup>
-      {['left', 'right', 'top', 'bottom'].map((anchor) => (
+      {['top', 'right', 'bottom', 'left'].map((anchor) => (
         <Drawer
           key={anchor}
           anchor={anchor}

diff --git a/docs/data/joy/components/drawer/DrawerAnchor.tsx b/docs/data/joy/components/drawer/DrawerAnchor.tsx
@@ -59,13 +59,13 @@ export default function DrawerAnchor() {
   return (
     <React.Fragment>
       <ButtonGroup variant="outlined">
-        {(['left', 'right', 'top', 'bottom'] as const).map((anchor) => (
+        {(['top', 'right', 'bottom', 'left'] as const).map((anchor) => (
           <Button key={anchor} onClick={toggleDrawer(anchor, true)}>
             {anchor}
           </Button>
         ))}
       </ButtonGroup>
-      {(['left', 'right', 'top', 'bottom'] as const).map((anchor) => (
+      {(['top', 'right', 'bottom', 'left'] as const).map((anchor) => (
         <Drawer
           key={anchor}
           anchor={anchor}

diff --git a/docs/data/joy/components/drawer/DrawerFilters.js b/docs/data/joy/components/drawer/DrawerFilters.js
@@ -71,9 +71,12 @@ export default function DrawerFilters() {
         >
           <DialogTitle>Filters</DialogTitle>
           <ModalClose />
+          <Divider sx={{ mt: 'auto' }} />
           <DialogContent sx={{ gap: 2 }}>
             <FormControl>
-              <FormLabel sx={{ typography: 'title-md' }}>Property Type</FormLabel>
+              <FormLabel sx={{ typography: 'title-md', fontWeight: 'bold' }}>
+                Property type
+              </FormLabel>
               <RadioGroup
                 value={type || ''}
                 onChange={(event) => {
@@ -145,28 +148,19 @@ export default function DrawerFilters() {
               </RadioGroup>
             </FormControl>
 
-            <Typography component="div" level="title-md">
+            <Typography level="title-md" fontWeight="bold" sx={{ mt: 1 }}>
               Amenities
             </Typography>
             <div role="group" aria-labelledby="rank">
               <List
                 orientation="horizontal"
                 size="sm"
-                wrap
                 sx={{
                   '--List-gap': '12px',
                   '--ListItem-radius': '20px',
                 }}
               >
-                {[
-                  'Wifi',
-                  'Washer',
-                  'Air Conditioner',
-                  'Kitchen',
-                  'Dryer',
-                  'Heating',
-                  'Dedicated Workspace',
-                ].map((item, index) => {
+                {['Wi-fi', 'Washer', 'A/C', 'Kitchen'].map((item, index) => {
                   const selected = amenities.includes(index);
                   return (
                     <ListItem key={item}>
@@ -212,34 +206,26 @@ export default function DrawerFilters() {
               </List>
             </div>
 
-            <Typography level="title-md" sx={{ mt: 1 }}>
-              Booking Options
+            <Typography level="title-md" fontWeight="bold" sx={{ mt: 2 }}>
+              Booking options
             </Typography>
             <FormControl orientation="horizontal">
               <Box sx={{ flex: 1, pr: 1 }}>
-                <FormLabel sx={{ typography: 'title-sm' }}>Instant Book</FormLabel>
-                <FormHelperText sx={{ typography: 'body-sm' }}>
-                  Listings you can book without waiting for host approval
-                </FormHelperText>
-              </Box>
-              <Switch />
-            </FormControl>
-
-            <FormControl orientation="horizontal">
-              <Box sx={{ flex: 1, mt: 1, mr: 1 }}>
-                <FormLabel sx={{ typography: 'title-sm' }}>Self Check-in</FormLabel>
+                <FormLabel sx={{ typography: 'title-sm' }}>
+                  Instant booking
+                </FormLabel>
                 <FormHelperText sx={{ typography: 'body-sm' }}>
-                  Easy access to the property when you arrive
+                  Listings that you can book without waiting for host approval.
                 </FormHelperText>
               </Box>
               <Switch />
             </FormControl>
 
             <FormControl orientation="horizontal">
               <Box sx={{ flex: 1, mt: 1, mr: 1 }}>
-                <FormLabel sx={{ typography: 'title-sm' }}>Superhost</FormLabel>
+                <FormLabel sx={{ typography: 'title-sm' }}>Self check-in</FormLabel>
                 <FormHelperText sx={{ typography: 'body-sm' }}>
-                  Stay with top tier recognized hosts
+                  Easy access to the property when you arrive.
                 </FormHelperText>
               </Box>
               <Switch />

diff --git a/docs/data/joy/components/drawer/DrawerFilters.tsx b/docs/data/joy/components/drawer/DrawerFilters.tsx
@@ -71,10 +71,12 @@ export default function DrawerFilters() {
         >
           <DialogTitle>Filters</DialogTitle>
           <ModalClose />
-
+          <Divider sx={{ mt: 'auto' }} />
           <DialogContent sx={{ gap: 2 }}>
             <FormControl>
-              <FormLabel sx={{ typography: 'title-md' }}>Property Type</FormLabel>
+              <FormLabel sx={{ typography: 'title-md', fontWeight: 'bold' }}>
+                Property type
+              </FormLabel>
               <RadioGroup
                 value={type || ''}
                 onChange={(event) => {
@@ -146,28 +148,19 @@ export default function DrawerFilters() {
               </RadioGroup>
             </FormControl>
 
-            <Typography component="div" level="title-md">
+            <Typography level="title-md" fontWeight="bold" sx={{ mt: 1 }}>
               Amenities
             </Typography>
             <div role="group" aria-labelledby="rank">
               <List
                 orientation="horizontal"
                 size="sm"
-                wrap
                 sx={{
                   '--List-gap': '12px',
                   '--ListItem-radius': '20px',
                 }}
               >
-                {[
-                  'Wifi',
-                  'Washer',
-                  'Air Conditioner',
-                  'Kitchen',
-                  'Dryer',
-                  'Heating',
-                  'Dedicated Workspace',
-                ].map((item, index) => {
+                {['Wi-fi', 'Washer', 'A/C', 'Kitchen'].map((item, index) => {
                   const selected = amenities.includes(index);
                   return (
                     <ListItem key={item}>
@@ -213,34 +206,26 @@ export default function DrawerFilters() {
               </List>
             </div>
 
-            <Typography level="title-md" sx={{ mt: 1 }}>
-              Booking Options
+            <Typography level="title-md" fontWeight="bold" sx={{ mt: 2 }}>
+              Booking options
             </Typography>
             <FormControl orientation="horizontal">
               <Box sx={{ flex: 1, pr: 1 }}>
-                <FormLabel sx={{ typography: 'title-sm' }}>Instant Book</FormLabel>
-                <FormHelperText sx={{ typography: 'body-sm' }}>
-                  Listings you can book without waiting for host approval
-                </FormHelperText>
-              </Box>
-              <Switch />
-            </FormControl>
-
-            <FormControl orientation="horizontal">
-              <Box sx={{ flex: 1, mt: 1, mr: 1 }}>
-                <FormLabel sx={{ typography: 'title-sm' }}>Self Check-in</FormLabel>
+                <FormLabel sx={{ typography: 'title-sm' }}>
+                  Instant booking
+                </FormLabel>
                 <FormHelperText sx={{ typography: 'body-sm' }}>
-                  Easy access to the property when you arrive
+                  Listings that you can book without waiting for host approval.
                 </FormHelperText>
               </Box>
               <Switch />
             </FormControl>
 
             <FormControl orientation="horizontal">
               <Box sx={{ flex: 1, mt: 1, mr: 1 }}>
-                <FormLabel sx={{ typography: 'title-sm' }}>Superhost</FormLabel>
+                <FormLabel sx={{ typography: 'title-sm' }}>Self check-in</FormLabel>
                 <FormHelperText sx={{ typography: 'body-sm' }}>
-                  Stay with top tier recognized hosts
+                  Easy access to the property when you arrive.
                 </FormHelperText>
               </Box>
               <Switch />

diff --git a/docs/data/joy/components/drawer/DrawerMobileNavigation.js b/docs/data/joy/components/drawer/DrawerMobileNavigation.js
@@ -26,7 +26,7 @@ export default function DrawerMobileNavigation() {
             gap: 0.5,
             ml: 'auto',
             mt: 1,
-            mr: 1,
+            mr: 2,
           }}
         >
           <Typography
@@ -36,63 +36,57 @@ export default function DrawerMobileNavigation() {
             fontWeight="lg"
             sx={{ cursor: 'pointer' }}
           >
-            close
+            Close
           </Typography>
           <ModalClose id="close-icon" sx={{ position: 'initial' }} />
         </Box>
+        <Input
+          size="sm"
+          placeholder="Search"
+          variant="plain"
+          endDecorator={<Search />}
+          slotProps={{
+            input: {
+              'aria-label': 'Search anything',
+            },
+          }}
+          sx={{
+            m: 3,
+            borderRadius: 0,
+            borderBottom: '2px solid',
+            borderColor: 'neutral.outlinedBorder',
+            '&:hover': {
+              borderColor: 'neutral.outlinedHoverBorder',
+            },
+            '&::before': {
+              border: '1px solid var(--Input-focusedHighlight)',
+              transform: 'scaleX(0)',
+              left: 0,
+              right: 0,
+              bottom: '-2px',
+              top: 'unset',
+              transition: 'transform .15s cubic-bezier(0.1,0.9,0.2,1)',
+              borderRadius: 0,
+            },
+            '&:focus-within::before': {
+              transform: 'scaleX(1)',
+            },
+          }}
+        />
         <List
           size="lg"
           component="nav"
           sx={{
             flex: 'none',
-            mt: 6,
-            mb: 5,
             fontSize: 'xl',
             '& > div': { justifyContent: 'center' },
           }}
         >
           <ListItemButton sx={{ fontWeight: 'lg' }}>Home</ListItemButton>
           <ListItemButton>About</ListItemButton>
-          <ListItemButton>Works</ListItemButton>
           <ListItemButton>Studio</ListItemButton>
           <ListItemButton>Contact</ListItemButton>
         </List>
-        <Box sx={{ px: 5, textAlign: 'center' }}>
-          <Input
-            placeholder="Search"
-            variant="plain"
-            endDecorator={<Search />}
-            slotProps={{
-              input: {
-                'aria-label': 'Search anything',
-              },
-            }}
-            sx={{
-              borderRadius: 0,
-              borderBottom: '2px solid',
-              borderColor: 'neutral.outlinedBorder',
-              '&:hover': {
-                borderColor: 'neutral.outlinedHoverBorder',
-              },
-              '&::before': {
-                border: '1px solid var(--Input-focusedHighlight)',
-                transform: 'scaleX(0)',
-                left: 0,
-                right: 0,
-                bottom: '-2px',
-                top: 'unset',
-                transition: 'transform .15s cubic-bezier(0.1,0.9,0.2,1)',
-                borderRadius: 0,
-              },
-              '&:focus-within::before': {
-                transform: 'scaleX(1)',
-              },
-            }}
-          />
-          <Typography level="body-xs" sx={{ mt: 3 }}>
-            We made honest design for your business. Check out our works.
-          </Typography>
-        </Box>
       </Drawer>
     </React.Fragment>
   );