Skip to content

Commit a0bd75b

Browse files
danilo-lealDiegoAndai
danilo-leal
authored and
DiegoAndai
committed
[blog] Refresh the design slightly (mui#41697)
1 parent e804bda commit a0bd75b

File tree

4 files changed

+155
-143
lines changed

4 files changed

+155
-143
lines changed

‎docs/pages/blog.tsx‎

Lines changed: 119 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react';
22
import { InferGetStaticPropsType } from 'next';
33
import { useRouter } from 'next/router';
4-
import { alpha } from '@mui/material/styles';
54
import Avatar from '@mui/material/Avatar';
65
import AvatarGroup from '@mui/material/AvatarGroup';
76
import Box from '@mui/material/Box';
@@ -64,19 +63,12 @@ function PostPreview(props: BlogPost) {
6463
/>
6564
))}
6665
</Box>
67-
<Typography
68-
component="h2"
69-
fontWeight="bold"
70-
variant="subtitle1"
71-
sx={{
72-
mb: 0.5,
73-
}}
74-
>
66+
<Typography component="h2" fontWeight="bold" variant="subtitle1" gutterBottom>
7567
<Link
7668
aria-describedby={`describe-${props.slug}`}
7769
href={`/blog/${props.slug}/`}
70+
color="text.primary"
7871
sx={{
79-
color: 'text.primary',
8072
'&:hover': {
8173
textDecoration: 'underline',
8274
},
@@ -153,7 +145,7 @@ function PostPreview(props: BlogPost) {
153145
</Typography>
154146
)}
155147
{props.date && (
156-
<Typography variant="caption" fontWeight="regular" color="text.secondary">
148+
<Typography variant="caption" fontWeight="regular" color="text.tertiary">
157149
{new Date(props.date).toDateString()}
158150
</Typography>
159151
)}
@@ -164,6 +156,7 @@ function PostPreview(props: BlogPost) {
164156
href={`/blog/${props.slug}`}
165157
id={`describe-${props.slug}`}
166158
endIcon={<KeyboardArrowRightRoundedIcon />}
159+
size="small"
167160
sx={{ mt: { xs: 0.5, md: 0 }, p: { xs: 0, sm: '6px 8px' } }}
168161
>
169162
Read more
@@ -173,7 +166,7 @@ function PostPreview(props: BlogPost) {
173166
);
174167
}
175168

176-
const PAGE_SIZE = 5;
169+
const PAGE_SIZE = 7;
177170

178171
export default function Blog(props: InferGetStaticPropsType<typeof getStaticProps>) {
179172
const router = useRouter();
@@ -236,6 +229,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
236229
{ shallow: true },
237230
);
238231
};
232+
239233
return (
240234
<BrandingCssVarsProvider>
241235
<Head
@@ -257,13 +251,15 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
257251
</Typography>
258252
}
259253
/>
254+
</Section>
255+
<Divider />
256+
<Container sx={{ mt: { xs: 2, sm: -6 } }}>
260257
<Box
261258
component="ul"
262259
sx={{
263260
display: 'grid',
264261
m: 0,
265262
p: 0,
266-
pt: 8,
267263
gap: 2,
268264
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
269265
}}
@@ -273,25 +269,18 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
273269
key={post.slug}
274270
component="li"
275271
variant="outlined"
276-
sx={[
277-
{
278-
p: 2,
279-
display: 'flex',
280-
flexDirection: 'column',
281-
position: 'relative',
282-
borderColor: 'grey.200',
283-
boxShadow: '0px 4px 12px rgba(170, 180, 190, 0.2)',
284-
'&:focus-within': {
285-
'& a': {
286-
outline: 0,
287-
},
288-
},
289-
},
290-
(theme) =>
291-
theme.applyDarkStyles({
292-
boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.4)',
293-
}),
294-
]}
272+
sx={(theme) => ({
273+
p: 2,
274+
display: 'flex',
275+
flexDirection: 'column',
276+
backgroundImage: (theme.vars || theme).palette.gradients.radioSubtle,
277+
boxShadow: '0 4px 12px rgba(170, 180, 190, 0.2)',
278+
...theme.applyDarkStyles({
279+
background: (theme.vars || theme).palette.primaryDark[900],
280+
backgroundImage: (theme.vars || theme).palette.gradients.radioSubtle,
281+
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.4)',
282+
}),
283+
})}
295284
>
296285
{post.image && (
297286
<Box
@@ -310,8 +299,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
310299
</Paper>
311300
))}
312301
</Box>
313-
</Section>
314-
<Divider />
302+
</Container>
315303
<Container
316304
ref={postListRef}
317305
sx={{
@@ -325,7 +313,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
325313
<Typography
326314
component="h2"
327315
variant="h6"
328-
fontWeight="700"
316+
fontWeight="semiBold"
329317
sx={{ mb: { xs: 1, sm: 2 }, mt: 8 }} // margin-top makes the title appear when scroll into view
330318
>
331319
Posts{' '}
@@ -342,94 +330,105 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
342330
</Typography>
343331
<Box sx={{ gridRow: 'span 2' }}>
344332
<Box
345-
sx={(theme) => ({
333+
sx={{
346334
position: 'sticky',
347-
top: 100,
348-
alignSelf: 'start',
349-
mb: 2,
350-
mt: { xs: 3, sm: 2, md: 9 }, // margin-top makes the title appear when scroll into view
351-
p: 2,
352-
borderRadius: 1,
353-
border: '1px solid',
354-
borderColor: (theme.vars || theme).palette.divider,
355-
boxShadow: '0px 2px 6px rgba(170, 180, 190, 0.2)',
356-
...theme.applyDarkStyles({
357-
background: alpha(theme.palette.primaryDark[700], 0.2),
358-
boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.2)',
359-
}),
360-
})}
335+
top: 90,
336+
mt: { xs: 0, md: 9 },
337+
mb: { xs: 2, md: 0 },
338+
display: 'flex',
339+
flexDirection: 'column',
340+
gap: 2,
341+
'& .MuiPaper-root': {
342+
p: 2,
343+
bgcolor: 'transparent',
344+
borderColor: 'divider',
345+
},
346+
}}
361347
>
362-
<Typography color="text.primary" fontWeight="semiBold" sx={{ mb: 2 }}>
363-
Filter by tag
364-
</Typography>
365-
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
366-
{Object.keys(tagInfo).map((tag) => {
367-
const selected = !!selectedTags[tag];
368-
return (
369-
<Chip
370-
key={tag}
371-
variant={selected ? 'filled' : 'outlined'}
372-
color={selected ? 'primary' : undefined}
373-
{...(selected
374-
? {
375-
label: tag,
376-
onDelete: () => {
377-
postListRef.current?.scrollIntoView();
378-
removeTag(tag);
379-
},
380-
}
381-
: {
382-
label: tag,
383-
onClick: () => {
384-
postListRef.current?.scrollIntoView();
385-
router.push(
386-
{
387-
query: {
388-
...router.query,
389-
tags: tag,
348+
<Paper variant="outlined">
349+
<Typography
350+
color="text.primary"
351+
fontWeight="semiBold"
352+
variant="subtitle2"
353+
sx={{ mb: 2 }}
354+
>
355+
Filter posts by tag
356+
</Typography>
357+
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
358+
{Object.keys(tagInfo).map((tag) => {
359+
const selected = !!selectedTags[tag];
360+
return (
361+
<Chip
362+
key={tag}
363+
variant={selected ? 'filled' : 'outlined'}
364+
color={selected ? 'primary' : undefined}
365+
{...(selected
366+
? {
367+
label: tag,
368+
onDelete: () => {
369+
postListRef.current?.scrollIntoView();
370+
removeTag(tag);
371+
},
372+
}
373+
: {
374+
label: tag,
375+
onClick: () => {
376+
postListRef.current?.scrollIntoView();
377+
router.push(
378+
{
379+
query: {
380+
...router.query,
381+
tags: tag,
382+
},
390383
},
391-
},
392-
undefined,
393-
{ shallow: true },
394-
);
395-
},
396-
})}
397-
size="small"
398-
sx={{
399-
py: 1.2,
400-
}}
401-
/>
402-
);
403-
})}
404-
</Box>
405-
<Divider sx={{ my: 2 }} />
406-
<Typography color="text.primary" fontWeight="semiBold" gutterBottom>
407-
Want to hear more from us?
408-
</Typography>
409-
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
410-
Get up to date with everything MUI-related through our social media:
411-
</Typography>
412-
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, '* > svg': { mr: 1 } }}>
413-
<Link href="https://github.com/mui" target="_blank" fontSize={14}>
414-
<GitHubIcon fontSize="small" />
415-
GitHub
416-
</Link>
417-
<Link href="https://twitter.com/MUI_hq" target="_blank" fontSize={14}>
418-
<XIcon fontSize="small" />X
419-
</Link>
420-
<Link href="https://mui.com/r/discord/" target="_blank" fontSize={14}>
421-
<DiscordIcon fontSize="small" />
422-
Discord
423-
</Link>
424-
<Link href="https://www.linkedin.com/company/mui/" target="_blank" fontSize={14}>
425-
<LinkedInIcon fontSize="small" />
426-
LinkedIn
427-
</Link>
428-
<Link href="https://www.youtube.com/@MUI_hq" target="_blank" fontSize={14}>
429-
<YouTubeIcon fontSize="small" />
430-
Youtube
431-
</Link>
432-
</Box>
384+
undefined,
385+
{ shallow: true },
386+
);
387+
},
388+
})}
389+
size="small"
390+
sx={{
391+
py: 1.2,
392+
}}
393+
/>
394+
);
395+
})}
396+
</Box>
397+
</Paper>
398+
<Paper variant="outlined">
399+
<Typography
400+
color="text.primary"
401+
fontWeight="semiBold"
402+
variant="subtitle2"
403+
gutterBottom
404+
>
405+
Want to hear more from us?
406+
</Typography>
407+
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
408+
Get up to date with everything MUI-related through our social media:
409+
</Typography>
410+
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, '* > svg': { mr: 1 } }}>
411+
<Link href="https://github.com/mui" target="_blank" fontSize={14}>
412+
<GitHubIcon fontSize="small" />
413+
GitHub
414+
</Link>
415+
<Link href="https://twitter.com/MUI_hq" target="_blank" fontSize={14}>
416+
<XIcon fontSize="small" />X
417+
</Link>
418+
<Link href="https://mui.com/r/discord/" target="_blank" fontSize={14}>
419+
<DiscordIcon fontSize="small" />
420+
Discord
421+
</Link>
422+
<Link href="https://www.linkedin.com/company/mui/" target="_blank" fontSize={14}>
423+
<LinkedInIcon fontSize="small" />
424+
LinkedIn
425+
</Link>
426+
<Link href="https://www.youtube.com/@MUI_hq" target="_blank" fontSize={14}>
427+
<YouTubeIcon fontSize="small" />
428+
Youtube
429+
</Link>
430+
</Box>
431+
</Paper>
433432
</Box>
434433
</Box>
435434
<div>

0 commit comments

Comments
 (0)