Skip to content

Commit

Permalink
[docs-infra] Add stray design polish (#42646)
Browse files Browse the repository at this point in the history
  • Loading branch information
@danilo-leal
danilo-leal authored Jun 19, 2024
1 parent 0750714 commit da4546d
Show file tree
Hide file tree
Showing 8 changed files with 100 additions and 102 deletions.
6 changes: 2 additions & 4 deletions docs/src/components/about/OurValues.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export default function OurValues() {
<Paper
variant="outlined"
sx={(theme) => ({
p: 4,
p: 2.5,
height: '100%',
display: 'flex',
flexDirection: 'column',
Expand Down Expand Up @@ -110,14 +110,12 @@ export default function OurValues() {
variant="body2"
sx={[
{
fontWeight: 'bold',
fontWeight: 'semiBold',
},
(theme) => ({
mb: 0.5,
color: (theme.vars || theme).palette.text.primary,
'&::first-letter': {
mr: 0.1,
fontSize: theme.typography.pxToRem(16),
color: (theme.vars || theme).palette.primary.main,
},
...theme.applyDarkStyles({
Expand Down
57 changes: 33 additions & 24 deletions docs/src/components/careers/PerksBenefits.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,30 +19,53 @@ const companyInfo = [
},
{
title: 'Handbook',
description: 'Learn everything about how MUI as a company is run.',
description: 'Learn everything about how MUI as a company.',
routeUrl: ROUTES.handbook,
},
{
title: 'Blog',
description: 'Check behind-the-scenes and news about the company.',
description: 'Learn about our products and team.',
routeUrl: ROUTES.blog,
},
];

interface CardContentBlockProps {
description: string;
title: string;
}

function CardContentBlock({ title, description }: CardContentBlockProps) {
return (
<React.Fragment>
<Typography component="h2" variant="body2" sx={{ fontWeight: 'semiBold' }}>
{title}
</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
{description}
</Typography>
<Typography variant="body2" color="primary" sx={{ fontWeight: 'bold', mt: 'auto' }}>
Learn more <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
</Typography>
</React.Fragment>
);
}

function RemoteAwardCard() {
return (
<Paper
component={Link}
href="/blog/remote-award-win-2024/"
noLinkStyle
variant="outlined"
sx={{ p: 2 }}
sx={{ p: 2, display: 'flex', flexDirection: 'column ' }}
>
<Box
sx={{
mb: 2,
maxWidth: { xs: 315, sm: 325 },
maxHeight: 315,
display: 'flex',
aspectRatio: '1 / 1',
border: '1px solid',
borderColor: 'divider',
borderRadius: '6px',
Expand All @@ -68,17 +91,12 @@ function RemoteAwardCard() {
]}
/>
</Box>
<div>
<Typography component="h2" variant="body2" sx={{ fontWeight: 'semiBold' }}>
Remote Excellence Awards
</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
Winners in the first-ever Remote Excellence Awards, in the Small & Mighty category! 🎉
</Typography>
<Typography variant="body2" color="primary" sx={{ fontWeight: 'bold' }}>
Learn more <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
</Typography>
</div>
<Box sx={{ mt: 'auto' }}>
<CardContentBlock
title="Remote Excellence Awards"
description={`Winners in the first-ever Remote Excellence Awards, in the Small & Mighty category! 🎉`}
/>
</Box>
</Paper>
);
}
Expand Down Expand Up @@ -151,16 +169,7 @@ export default function PerksBenefits() {
variant="outlined"
sx={{ p: 2, width: '100%', flexGrow: 1, display: 'flex', flexDirection: 'column' }}
>
<Typography variant="body2" sx={{ fontWeight: 'bold', mb: 0.5 }}>
{title}
</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
{description}
</Typography>
<Typography variant="body2" color="primary" sx={{ fontWeight: 'bold', mt: 'auto' }}>
Learn more{' '}
<KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
</Typography>
<CardContentBlock title={title} description={description} />
</Paper>
))}
</Stack>
Expand Down
18 changes: 8 additions & 10 deletions docs/src/components/footer/EmailSubscribe.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,12 +87,12 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
</FormLabel>
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
mt: 1,
gap: 1,
width: { xs: '100%', sm: 'auto' },
maxWidth: { xs: '100%', sm: 320 },
display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
gap: 1,
}}
>
<InputBase
Expand All @@ -110,23 +110,22 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
minWidth: 220,
borderRadius: '8px',
border: '1px solid',
borderColor: 'grey.200',
borderColor: 'grey.300',
bgcolor: '#FFF',
boxShadow: `inset 0 1px 2px ${
(theme.vars || theme).palette.grey[50]
}, 0 2px .5px ${alpha(theme.palette.grey[100], 0.5)}`,
'&:hover': {
borderColor: 'grey.300',
borderColor: 'grey.400',
boxShadow: `inset 0 1px 2px ${(theme.vars || theme).palette.grey[100]}`,
},
[`&.${inputBaseClasses.focused}`]: {
boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primary[200]}`,
boxShadow: `0 0 0 3px ${alpha(theme.palette.primary[500], 0.5)}`,
borderColor: 'primary.500',
},
[`& .${inputBaseClasses.input}`]: {
borderRadius: theme.shape.borderRadius,
py: 1,
px: 1.5,
px: 1,
},
}),
(theme) =>
Expand All @@ -141,13 +140,12 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
boxShadow: `inset 0 1px 2px ${(theme.vars || theme).palette.common.black}`,
},
[`&.${inputBaseClasses.focused}`]: {
boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primary[800]}`,
borderColor: 'primary.400',
},
}),
]}
/>
<Button variant="outlined" disabled={form.status === 'loading'} type="submit">
<Button variant="outlined" size="small" disabled={form.status === 'loading'} type="submit">
Subscribe
</Button>
</Box>
Expand Down
7 changes: 3 additions & 4 deletions docs/src/components/home/DiamondSponsors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@ const DIAMONDs = [
{
src: '/static/sponsors/doit-square.svg',
name: 'Doit International',
description:
'Delivers technology and cloud expertise to buy, optimize and manage public cloud.',
description: 'Technology and cloud expertise to buy, optimize and manage public cloud.',
href: 'https://www.doit.com/?utm_source=MUI&utm_medium=referral&utm_content=homepage',
},
{
Expand All @@ -45,7 +44,7 @@ export default function DiamondSponsors() {
variant="h6"
sx={[
{
fontWeight: 'bold',
fontWeight: 'semiBold',
},
(theme) => ({
mt: 4,
Expand Down Expand Up @@ -97,7 +96,7 @@ export default function DiamondSponsors() {
<AddRounded />
</IconButton>
<div>
<Typography variant="body2" sx={{ color: 'text.primary', fontWeight: 'bold' }}>
<Typography variant="body2" sx={{ color: 'text.primary', fontWeight: 'semiBold' }}>
Become our sponsor!
</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/components/home/GoldSponsors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export default function GoldSponsors() {
variant="h6"
sx={[
{
fontWeight: 'bold',
fontWeight: 'semiBold',
},
(theme) => ({
mt: 4,
Expand Down Expand Up @@ -129,7 +129,7 @@ export default function GoldSponsors() {
<AddRounded />
</IconButton>
<div>
<Typography variant="body2" sx={{ color: 'text.primary', fontWeight: 'bold' }}>
<Typography variant="body2" sx={{ color: 'text.primary', fontWeight: 'semiBold' }}>
Become a sponsor
</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
Expand Down
20 changes: 5 additions & 15 deletions docs/src/components/home/SponsorCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import LaunchRounded from '@mui/icons-material/LaunchRounded';
import { Link } from '@mui/docs/Link';

export default function SponsorCard(props: {
Expand Down Expand Up @@ -39,31 +37,23 @@ export default function SponsorCard(props: {
sx={{
p: 2,
display: 'flex',
gap: 2,
height: '100%',
'& svg': {
transition: '0.2s',
},
'&:hover': {
'& svg': {
transform: 'translateY(-2px)',
},
},
}}
>
<Avatar
{...(inView && { src: item.src, srcSet: item.srcSet, alt: `${item.name} logo` })}
sx={{ borderRadius: '4px', width: logoSize, height: logoSize }}
slotProps={{ img: { loading: 'lazy' } }}
/>
<Box sx={{ ml: 2 }}>
<Typography variant="body2" sx={{ fontWeight: 'bold' }}>
{item.name}{' '}
<LaunchRounded color="primary" sx={{ fontSize: 14, verticalAlign: 'middle', ml: 0.5 }} />
<div>
<Typography variant="body2" sx={{ fontWeight: 'semiBold', mb: '2px' }}>
{item.name}
</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{item.description}
</Typography>
</Box>
</div>
</Paper>
);
}
51 changes: 28 additions & 23 deletions docs/src/modules/components/DiamondSponsors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import Divider from '@mui/material/Divider';
import Typography from '@mui/material/Typography';
import { Link } from '@mui/docs/Link';
import { useTranslate } from 'docs/src/modules/utils/i18n';
Expand All @@ -13,26 +14,28 @@ const NativeLink = styled('a')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 12,
border: '1px solid',
borderLeft: '1px solid',
borderRight: '1px solid',
borderBottom: 0,
borderColor: (theme.vars || theme).palette.divider,
transition: theme.transitions.create(['color', 'border-color']),
boxShadow: `${alpha(theme.palette.grey[100], 0.3)} 0 -2px 0 inset`,
transition: theme.transitions.create(['background-color']),
'&:first-of-type': {
borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
borderRadius: '12px 12px 0 0',
},
'&:hover': {
backgroundColor: (theme.vars || theme).palette.grey[50],
},
'&:focus-visible': {
outline: `3px solid ${alpha((theme.vars || theme).palette.primary[500], 0.5)}`,
outlineOffset: '2px',
outlineOffset: '-3px',
},
'& img': {
display: 'inline-block',
},
...theme.applyDarkStyles({
boxShadow: `${alpha(theme.palette.primaryDark[600], 0.1)} 0 2px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -2px 0 inset`,
'&:hover': {
backgroundColor: alpha(theme.palette.primary[800], 0.2),
borderColor: (theme.vars || theme).palette.primary[900],
backgroundColor: alpha(theme.palette.primary[900], 0.1),
},
}),
}));
Expand All @@ -41,7 +44,7 @@ export default function DiamondSponsors() {
const t = useTranslate();

return (
<Stack direction="column" spacing={1} useFlexGap sx={{ mt: 2 }}>
<Stack direction="column" sx={{ mt: 2 }}>
<NativeLink
data-ga-event-category="sponsor"
data-ga-event-action="docs-premium"
Expand All @@ -68,6 +71,7 @@ export default function DiamondSponsors() {
]}
/>
</NativeLink>
<Divider />
<NativeLink
data-ga-event-category="sponsor"
data-ga-event-action="docs-premium"
Expand All @@ -94,6 +98,7 @@ export default function DiamondSponsors() {
]}
/>
</NativeLink>
<Divider />
<NativeLink
data-ga-event-category="sponsor"
data-ga-event-action="docs-premium"
Expand Down Expand Up @@ -123,36 +128,36 @@ export default function DiamondSponsors() {
<Link
href="/material-ui/discover-more/backers/#diamond-sponsors"
sx={(theme) => ({
p: 1.5,
height: 45,
width: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 1,
border: '1px dashed',
transition: theme.transitions.create(['color', 'border-color', 'background-color']),
backgroundColor: alpha(theme.palette.grey[50], 0.5),
borderColor: (theme.vars || theme).palette.grey[300],
borderRadius: '0 0 12px 12px',
backgroundColor: alpha(theme.palette.primary[50], 0.4),
transition: theme.transitions.create(['color', 'background-color']),
'&:hover': {
backgroundColor: alpha(theme.palette.primary[100], 0.5),
borderColor: (theme.vars || theme).palette.primary[300],
backgroundColor: (theme.vars || theme).palette.primary[50],
borderColor: (theme.vars || theme).palette.primary[200],
},
'&:focus-visible': {
outlineOffset: '-3px',
},
...theme.applyDarkStyles({
backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
borderColor: (theme.vars || theme).palette.primaryDark[700],
backgroundColor: alpha(theme.palette.primaryDark[700], 0.3),
borderColor: alpha(theme.palette.primaryDark[600], 0.5),
'&:hover': {
backgroundColor: alpha(theme.palette.primary[700], 0.2),
borderColor: (theme.vars || theme).palette.primary[800],
backgroundColor: alpha(theme.palette.primary[700], 0.1),
borderColor: alpha(theme.palette.primary[600], 0.4),
},
}),
})}
>
<Typography variant="caption" sx={{ fontWeight: 'semiBold', textAlign: 'center' }}>
<Typography variant="caption" sx={{ fontWeight: 'medium' }}>
{t('becomeADiamondSponsor')}
</Typography>
{/* <Typography variant="caption" fontWeight="regular" color="text.secondary">
{t('diamondSponsorVacancies')}
</Typography> */}
</Link>
</Stack>
);
Expand Down
Loading

0 comments on commit da4546d

Please sign in to comment.