Skip to content

[material-ui][docs] Remove Masonry component and Material Design icon from the landing page template #41080

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zanivan merged 13 commits into from
Feb 15, 2024
Merged

[material-ui][docs] Remove Masonry component and Material Design icon from the landing page template #41080

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
1cc92a2
Replace Masonry for Grid
zanivan Feb 13, 2024
e451d6a
Replace Material Design icon
zanivan Feb 13, 2024
7b186fd
Run docs:typescript:formatted
zanivan Feb 13, 2024
90b5771
Fix eslint
zanivan Feb 13, 2024
8ce1c30
Fix lint
zanivan Feb 13, 2024
0aab215
Rerun-tests
zanivan Feb 13, 2024
bba4442
Replace icon for 'MD2' label
zanivan Feb 14, 2024
5219fde
Merge remote-tracking branch 'upstream/master' into material-ui-templ…
zanivan Feb 14, 2024
04da734
Rerun tests
zanivan Feb 14, 2024
534b941
Merge remote-tracking branch 'upstream/master' into material-ui-templ…
zanivan Feb 15, 2024
0f08c05
Danilo's feedback
zanivan Feb 15, 2024
0e3af36
Merge remote-tracking branch 'upstream/master' into material-ui-templ…
zanivan Feb 15, 2024
2c600dc
Fix lint
zanivan Feb 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/data/material/getting-started/templates/landing-page/LandingPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
import SvgMaterialDesign from 'docs/src/icons/SvgMaterialDesign';
import AdbRoundedIcon from '@mui/icons-material/AdbRounded';
Copy link
Contributor

@mapache-salvaje mapache-salvaje Feb 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this the best icon choice to replace the MD logo? I would almost prefer the Google "G" instead, or even just an M for Material. Or else maybe we should just include the Material Design icon as an asset? I know it'll just get deleted by the developer, but it's pretty common to start a project by deleting assets from a boilerplate.

Copy link
Collaborator Author

@zanivan zanivan Feb 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I replaced it for MD2. I think it's a good way to state the Material Design version, too.

import AppAppBar from './components/AppAppBar';
import Hero from './components/Hero';
import LogoCollection from './components/LogoCollection';
Expand Down Expand Up @@ -52,7 +52,7 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
Custom theme
</ToggleButton>
<ToggleButton value={false}>
<SvgMaterialDesign sx={{ fontSize: '20px', mr: 1 }} />
<AdbRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
Material Design
</ToggleButton>
</ToggleButtonGroup>
Expand Down
4 changes: 2 additions & 2 deletions docs/data/material/getting-started/templates/landing-page/LandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
import SvgMaterialDesign from 'docs/src/icons/SvgMaterialDesign';
import AdbRoundedIcon from '@mui/icons-material/AdbRounded';
import AppAppBar from './components/AppAppBar';
import Hero from './components/Hero';
import LogoCollection from './components/LogoCollection';
Expand Down Expand Up @@ -59,7 +59,7 @@ function ToggleCustomTheme({
Custom theme
</ToggleButton>
<ToggleButton value={false}>
<SvgMaterialDesign sx={{ fontSize: '20px', mr: 1 }} />
<AdbRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
Material Design
</ToggleButton>
</ToggleButtonGroup>
Expand Down
57 changes: 34 additions & 23 deletions docs/data/material/getting-started/templates/landing-page/components/Testimonials.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import Masonry from '@mui/lab/Masonry';
import { useMediaQuery } from '@mui/material';
import Grid from '@mui/material/Grid';
import { useTheme } from '@mui/system';

const userTestimonials = [
Expand Down Expand Up @@ -80,8 +79,6 @@ const logoStyle = {

export default function Testimonials() {
const theme = useTheme();
const isSmallScreen = useMediaQuery('(max-width:600px)');
const columns = isSmallScreen ? 1 : 3;
const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;

return (
Expand Down Expand Up @@ -112,32 +109,46 @@ export default function Testimonials() {
and reliable support.
</Typography>
</Box>
<Masonry columns={columns} spacing={2}>
<Grid container spacing={2}>
{userTestimonials.map((testimonial, index) => (
<Card key={index} sx={{ p: 1 }}>
<CardContent>
<Typography variant="body2" color="text.secondary">
{testimonial.testimonial}
</Typography>
</CardContent>
<Box
<Grid item xs={12} sm={6} md={4} key={index} sx={{ display: 'flex' }}>
<Card
sx={{
display: 'flex',
flexDirection: 'row',
flexDirection: 'column',
justifyContent: 'space-between',
pr: 2,
flexGrow: 1,
p: 1,
}}
>
<CardHeader
avatar={testimonial.avatar}
title={testimonial.name}
subheader={testimonial.occupation}
/>
<img src={logos[index]} alt={`Logo ${index + 1}`} style={logoStyle} />
</Box>
</Card>
<CardContent>
<Typography variant="body2" color="text.secondary">
{testimonial.testimonial}
</Typography>
</CardContent>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
pr: 2,
}}
>
<CardHeader
avatar={testimonial.avatar}
title={testimonial.name}
subheader={testimonial.occupation}
/>
<img
src={logos[index]}
alt={`Logo ${index + 1}`}
style={logoStyle}
/>
</Box>
</Card>
</Grid>
))}
</Masonry>
</Grid>
</Container>
);
}
57 changes: 34 additions & 23 deletions docs/data/material/getting-started/templates/landing-page/components/Testimonials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import Masonry from '@mui/lab/Masonry';
import { useMediaQuery } from '@mui/material';
import Grid from '@mui/material/Grid';
import { useTheme } from '@mui/system';

const userTestimonials = [
Expand Down Expand Up @@ -80,8 +79,6 @@ const logoStyle = {

export default function Testimonials() {
const theme = useTheme();
const isSmallScreen = useMediaQuery('(max-width:600px)');
const columns = isSmallScreen ? 1 : 3;
const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;

return (
Expand Down Expand Up @@ -112,32 +109,46 @@ export default function Testimonials() {
and reliable support.
</Typography>
</Box>
<Masonry columns={columns} spacing={2}>
<Grid container spacing={2}>
{userTestimonials.map((testimonial, index) => (
<Card key={index} sx={{ p: 1 }}>
<CardContent>
<Typography variant="body2" color="text.secondary">
{testimonial.testimonial}
</Typography>
</CardContent>
<Box
<Grid item xs={12} sm={6} md={4} key={index} sx={{ display: 'flex' }}>
<Card
sx={{
display: 'flex',
flexDirection: 'row',
flexDirection: 'column',
justifyContent: 'space-between',
pr: 2,
flexGrow: 1,
p: 1,
}}
>
<CardHeader
avatar={testimonial.avatar}
title={testimonial.name}
subheader={testimonial.occupation}
/>
<img src={logos[index]} alt={`Logo ${index + 1}`} style={logoStyle} />
</Box>
</Card>
<CardContent>
<Typography variant="body2" color="text.secondary">
{testimonial.testimonial}
</Typography>
</CardContent>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
pr: 2,
}}
>
<CardHeader
avatar={testimonial.avatar}
title={testimonial.name}
subheader={testimonial.occupation}
/>
<img
src={logos[index]}
alt={`Logo ${index + 1}`}
style={logoStyle}
/>
</Box>
</Card>
</Grid>
))}
</Masonry>
</Grid>
</Container>
);
}