[material-ui][docs] Remove Masonry component and Material Design icon…

… from the landing page template (#41080)
mui · Feb 15, 2024 · 36523fa · 36523fa
1 parent af07936
commit 36523fa
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 58 deletions.
diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.js b/docs/data/material/getting-started/templates/landing-page/LandingPage.js
@@ -8,7 +8,6 @@ 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 AppAppBar from './components/AppAppBar';
 import Hero from './components/Hero';
 import LogoCollection from './components/LogoCollection';
@@ -51,10 +50,7 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>
-          <SvgMaterialDesign sx={{ fontSize: '20px', mr: 1 }} />
-          Material Design
-        </ToggleButton>
+        <ToggleButton value={false}>Material Design 2</ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );

diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx b/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx
@@ -7,7 +7,6 @@ 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 AppAppBar from './components/AppAppBar';
 import Hero from './components/Hero';
 import LogoCollection from './components/LogoCollection';
@@ -58,10 +57,7 @@ function ToggleCustomTheme({
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>
-          <SvgMaterialDesign sx={{ fontSize: '20px', mr: 1 }} />
-          Material Design
-        </ToggleButton>
+        <ToggleButton value={false}>Material Design 2</ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );

diff --git a/docs/data/material/getting-started/templates/landing-page/components/Testimonials.js b/docs/data/material/getting-started/templates/landing-page/components/Testimonials.js
@@ -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 = [
@@ -23,7 +22,7 @@ const userTestimonials = [
     name: 'Travis Howard',
     occupation: 'Lead Product Designer',
     testimonial:
-      "One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product, providing the kind of support that enhances the overall user experience and instills confidence in the brand.",
+      "One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product.",
   },
   {
     avatar: <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />,
@@ -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 (
@@ -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>
   );
 }
diff --git a/docs/data/material/getting-started/templates/landing-page/components/Testimonials.tsx b/docs/data/material/getting-started/templates/landing-page/components/Testimonials.tsx
@@ -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 = [
@@ -23,7 +22,7 @@ const userTestimonials = [
     name: 'Travis Howard',
     occupation: 'Lead Product Designer',
     testimonial:
-      "One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product, providing the kind of support that enhances the overall user experience and instills confidence in the brand.",
+      "One of the standout features of this product is the exceptional customer support. In my experience, the team behind this product has been quick to respond and incredibly helpful. It's reassuring to know that they stand firmly behind their product.",
   },
   {
     avatar: <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />,
@@ -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 (
@@ -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>
   );
 }