Skip to content

Commit

Permalink
fine-tune the demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@danilo-leal
danilo-leal committed Oct 9, 2023
1 parent 069adf6 commit 3b71da5
Show file tree
Hide file tree
Showing 8 changed files with 22 additions and 104 deletions.
4 changes: 2 additions & 2 deletions docs/data/joy/main-features/color-inversion/ColorInversionAnyParentStyled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ const StyledBox = styled(Box)(({ theme }) => ({
display: 'grid',
gridTemplateColumns: '1fr 1fr',
alignItems: 'center',
rowGap: 2,
columnGap: 8,
rowGap: 16,
columnGap: 64,
borderRadius: 8,
background: `linear-gradient(45deg, ${theme.vars.palette.neutral[800]}, ${theme.vars.palette.neutral[600]})`,
...applySolidInversion('neutral'),
Expand Down
4 changes: 2 additions & 2 deletions docs/data/joy/main-features/color-inversion/ColorInversionAnyParentStyled.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ const StyledBox = styled(Box)(({ theme }) => ({
display: 'grid',
gridTemplateColumns: '1fr 1fr',
alignItems: 'center',
rowGap: 2,
columnGap: 8,
rowGap: 16,
columnGap: 64,
borderRadius: 8,
background: `linear-gradient(45deg, ${theme.vars.palette.neutral[800]}, ${theme.vars.palette.neutral[600]})`,
...applySolidInversion('neutral'),
Expand Down
49 changes: 4 additions & 45 deletions docs/data/joy/main-features/color-inversion/ColorInversionFooter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,11 @@ import Box from '@mui/joy/Box';
import IconButton from '@mui/joy/IconButton';
import Card from '@mui/joy/Card';
import CardContent from '@mui/joy/CardContent';
import Chip from '@mui/joy/Chip';
import Divider from '@mui/joy/Divider';
import Input from '@mui/joy/Input';
import List from '@mui/joy/List';
import ListSubheader from '@mui/joy/ListSubheader';
import ListItem from '@mui/joy/ListItem';
import ListItemDecorator from '@mui/joy/ListItemDecorator';
import ListItemButton from '@mui/joy/ListItemButton';
import Typography from '@mui/joy/Typography';
import Sheet from '@mui/joy/Sheet';
Expand Down Expand Up @@ -117,60 +115,21 @@ export default function ColorInversionFooter() {
<ListItemButton>Blog</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton>Contact us</ListItemButton>
<ListItemButton>About</ListItemButton>
</ListItem>
</List>
</ListItem>
<ListItem nested sx={{ width: { xs: '50%', md: 180 } }}>
<ListSubheader sx={{ fontWeight: 'xl' }}>Products</ListSubheader>
<List sx={{ '--ListItemDecorator-size': '32px' }}>
<ListItem>
<ListItemButton>
<ListItemDecorator>
<img
alt=""
src="/static/branding/product-core-dark.svg"
width="24"
/>
</ListItemDecorator>
MUI Core
</ListItemButton>
<ListItemButton>Joy UI</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton>
<ListItemDecorator>
<img
alt=""
src="/static/branding/product-advanced-dark.svg"
width="24"
/>
</ListItemDecorator>
MUI X
</ListItemButton>
<ListItemButton>Base UI</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton>
<ListItemDecorator>
<img
alt=""
src="/static/branding/product-toolpad-dark.svg"
width="24"
/>
</ListItemDecorator>
MUI Toolpad
<Chip
variant="soft"
size="sm"
sx={{
minHeight: 20,
fontSize: 'xs2',
fontWeight: 'lg',
ml: 'auto',
}}
>
Beta
</Chip>
</ListItemButton>
<ListItemButton>Material UI</ListItemButton>
</ListItem>
</List>
</ListItem>
Expand Down
49 changes: 4 additions & 45 deletions docs/data/joy/main-features/color-inversion/ColorInversionFooter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,11 @@ import Box from '@mui/joy/Box';
import IconButton from '@mui/joy/IconButton';
import Card from '@mui/joy/Card';
import CardContent from '@mui/joy/CardContent';
import Chip from '@mui/joy/Chip';
import Divider from '@mui/joy/Divider';
import Input from '@mui/joy/Input';
import List from '@mui/joy/List';
import ListSubheader from '@mui/joy/ListSubheader';
import ListItem from '@mui/joy/ListItem';
import ListItemDecorator from '@mui/joy/ListItemDecorator';
import ListItemButton from '@mui/joy/ListItemButton';
import Typography from '@mui/joy/Typography';
import Sheet from '@mui/joy/Sheet';
Expand Down Expand Up @@ -122,60 +120,21 @@ export default function ColorInversionFooter() {
<ListItemButton>Blog</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton>Contact us</ListItemButton>
<ListItemButton>About</ListItemButton>
</ListItem>
</List>
</ListItem>
<ListItem nested sx={{ width: { xs: '50%', md: 180 } }}>
<ListSubheader sx={{ fontWeight: 'xl' }}>Products</ListSubheader>
<List sx={{ '--ListItemDecorator-size': '32px' }}>
<ListItem>
<ListItemButton>
<ListItemDecorator>
<img
alt=""
src="/static/branding/product-core-dark.svg"
width="24"
/>
</ListItemDecorator>
MUI Core
</ListItemButton>
<ListItemButton>Joy UI</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton>
<ListItemDecorator>
<img
alt=""
src="/static/branding/product-advanced-dark.svg"
width="24"
/>
</ListItemDecorator>
MUI X
</ListItemButton>
<ListItemButton>Base UI</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton>
<ListItemDecorator>
<img
alt=""
src="/static/branding/product-toolpad-dark.svg"
width="24"
/>
</ListItemDecorator>
MUI Toolpad
<Chip
variant="soft"
size="sm"
sx={{
minHeight: 20,
fontSize: 'xs2',
fontWeight: 'lg',
ml: 'auto',
}}
>
Beta
</Chip>
</ListItemButton>
<ListItemButton>Material UI</ListItemButton>
</ListItem>
</List>
</ListItem>
Expand Down
6 changes: 3 additions & 3 deletions docs/data/joy/main-features/color-inversion/ColorInversionHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export default function ColorInversionHeader() {
<Box sx={{ display: 'flex', flexShrink: 0, gap: 2 }}>
<Button
startDecorator={<AddIcon />}
sx={{ borderRadius: 'xl', display: { xs: 'none', md: 'inline-flex' } }}
sx={{ borderRadius: '50%', display: { xs: 'none', md: 'inline-flex' } }}
>
New invoice
</Button>
Expand All @@ -123,14 +123,14 @@ export default function ColorInversionHeader() {
</Typography>
}
sx={{
'--Input-radius': '40px',
'--Input-radius': '50%',
'--Input-paddingInline': '12px',
width: 160,
display: { xs: 'none', lg: 'flex' },
}}
/>
<Badge badgeContent={2} variant="solid" color="danger">
<IconButton variant="soft" sx={{ borderRadius: 'xl' }}>
<IconButton variant="soft" sx={{ borderRadius: '50%' }}>
<NotificationsIcon />
</IconButton>
</Badge>
Expand Down
6 changes: 3 additions & 3 deletions docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ export default function ColorInversionHeader() {
<Box sx={{ display: 'flex', flexShrink: 0, gap: 2 }}>
<Button
startDecorator={<AddIcon />}
sx={{ borderRadius: 'xl', display: { xs: 'none', md: 'inline-flex' } }}
sx={{ borderRadius: '50%', display: { xs: 'none', md: 'inline-flex' } }}
>
New invoice
</Button>
Expand All @@ -128,14 +128,14 @@ export default function ColorInversionHeader() {
</Typography>
}
sx={{
'--Input-radius': '40px',
'--Input-radius': '50%',
'--Input-paddingInline': '12px',
width: 160,
display: { xs: 'none', lg: 'flex' },
}}
/>
<Badge badgeContent={2} variant="solid" color="danger">
<IconButton variant="soft" sx={{ borderRadius: 'xl' }}>
<IconButton variant="soft" sx={{ borderRadius: '50%' }}>
<NotificationsIcon />
</IconButton>
</Badge>
Expand Down
4 changes: 2 additions & 2 deletions docs/data/joy/main-features/color-inversion/ColorInversionMarketing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ export default function ColorInversionMarketing() {
>
<Box sx={{ zIndex: 1, position: 'relative' }}>
<Typography level="h2">Get started</Typography>
<Typography sx={{ mt: 1, mb: 3 }}>
Instant access to the power of the React UI library
<Typography sx={{ mt: 0.5, mb: 2 }}>
Instant access to the power of the Joy UI library.
</Typography>
<Box
sx={{
Expand Down
4 changes: 2 additions & 2 deletions docs/data/joy/main-features/color-inversion/ColorInversionMarketing.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ export default function ColorInversionMarketing() {
>
<Box sx={{ zIndex: 1, position: 'relative' }}>
<Typography level="h2">Get started</Typography>
<Typography sx={{ mt: 1, mb: 3 }}>
Instant access to the power of the React UI library
<Typography sx={{ mt: 0.5, mb: 2 }}>
Instant access to the power of the Joy UI library.
</Typography>
<Box
sx={{
Expand Down

0 comments on commit 3b71da5

Please sign in to comment.