[core] Batch small changes (#25804)

docs/pages/blog/2021-q1-update.md

@@ -50,33 +50,33 @@ Here are the most significant improvements since December 2020.
   The migration to the new style engine allows us to fully rely on dynamic styles.
   Developers can now do the following:
 
-  ```jsx
-  import { createMuiTheme, Button } from '@material-ui/core';
-
-  // 1. Extend the theme.
-  const theme = createMuiTheme({
-    palette: {
-      neutral: {
-        main: '#5c6ac4',
-      },
+```jsx
+import { createMuiTheme, Button } from '@material-ui/core';
+
+// 1. Extend the theme.
+const theme = createMuiTheme({
+  palette: {
+    neutral: {
+      main: '#5c6ac4',
     },
-  });
-
-  // 2. Notify TypeScript about the new color in the palette
-  declare module '@material-ui/core/styles' {
-    interface Palette {
-      neutral: Palette['primary'];
-    }
-    interface PaletteOptions {
-      neutral: PaletteOptions['primary'];
-    }
+  },
+});
+
+// 2. Notify TypeScript about the new color in the palette
+declare module '@material-ui/core/styles' {
+  interface Palette {
+    neutral: Palette['primary'];
+  }
+  interface PaletteOptions {
+    neutral: PaletteOptions['primary'];
   }
+}
 
-  // 3. Profit
-  <Button color="neutral"  />
-  ```
+// 3. Profit
+<Button color="neutral"  />
+```
 
-  This new feature removes the need to create a wrapper component.
+This new feature removes the need to create a wrapper component.
 
 - 📍 We have synchronized the icons with the latest update of the Material Design icons.<br />
   Google has moved its icons to a new location: https://fonts.google.com/icons.
@@ -99,14 +99,14 @@ Here are the most significant improvements since December 2020.
   We initially didn't plan to do so but reversed on hearing the feedback from the community.
   In addition to using the `sx` prop, you can now do, for example:
 
-  ```jsx
-  <Box display="grid" />
-  <Typography p={2} color="text.secondary" />
-  <Stack mt={1} />
-  <Grid color="success.main" />
-  ```
+```jsx
+<Box display="grid" />
+<Typography p={2} color="text.secondary" />
+<Stack mt={1} />
+<Grid color="success.main" />
+```
 
-  Note that with the other components, only the `sx` prop is available.
+Note that with the other components, only the `sx` prop is available.
 
 - ⚓️ We have introduced a new release line: `v4.x.x-deprecations.x`.
   This release line is kept in sync with the latest version of v4 and includes actionable deprecations to ease the migration to v5.

docs/pages/branding/pricing.tsx

@@ -513,8 +513,8 @@ const faqData = [
     summary: 'Do you offer discounts to educational and non-profit organizations?',
     detail: (
       <React.Fragment>
-        Yes, we offer a 50% discount on any product license to educational, non-profit, and charity
-        entities.
+        Yes, we offer a 50% discount on all products licensed to students, instructors, non-profit,
+        and charity entities.
         <br />
         <br />
         To qualify for this discount you need to send us a document clearly indicating that you are

docs/src/modules/components/DemoSandboxed.js

@@ -69,7 +69,7 @@ const useStyles = makeStyles(
       backgroundColor: theme.palette.background.default,
       flexGrow: 1,
       height: 400,
-      border: 'none',
+      border: 0,
       boxShadow: theme.shadows[1],
     },
   }),

docs/src/modules/components/MarkdownElement.js

@@ -185,7 +185,7 @@ const styles = (theme) => ({
     '& hr': {
       height: 1,
       margin: theme.spacing(6, 0),
-      border: 'none',
+      border: 0,
       flexShrink: 0,
       backgroundColor: theme.palette.divider,
     },

docs/src/pages/components/switches/CustomizedSwitches.js

@@ -21,7 +21,7 @@ const IOSSwitch = styled((props) => (
       '& + .MuiSwitch-track': {
         backgroundColor: '#52d869',
         opacity: 1,
-        border: 'none',
+        border: 0,
       },
     },
     '&.Mui-focusVisible .MuiSwitch-thumb': {

docs/src/pages/components/switches/CustomizedSwitches.tsx

@@ -21,7 +21,7 @@ const IOSSwitch = styled((props: SwitchProps) => (
       '& + .MuiSwitch-track': {
         backgroundColor: '#52d869',
         opacity: 1,
-        border: 'none',
+        border: 0,
       },
     },
     '&.Mui-focusVisible .MuiSwitch-thumb': {

docs/src/pages/discover-more/related-projects/related-projects.md

@@ -8,14 +8,15 @@ Feel free to submit a pull request to add another project; it will be accepted i
 
 ## Design resources
 
-<a href="https://material-ui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-sketch" style="margin-left: 8px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-sketch.svg" alt="sketch" /></a>
-<a href="https://material-ui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-figma" style="margin-left: 32px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-figma.svg" alt="figma" /></a>
+<a href="https://material-ui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-figma" style="margin-left: 8px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-figma.svg" alt="figma" /></a>
+<a href="https://material-ui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-adobe-xd" style="margin-left: 32px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-adobe-xd.svg" alt="adobe-xd" /></a>
+<a href="https://material-ui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-sketch" style="margin-left: 32px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-sketch.svg" alt="sketch" /></a>
 
 A set of reusable components for design tools is available, designed to match the React components, and to help you craft great products:
 
 - [Figma](https://material-ui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-figma): A large UI kit with over 600 handcrafted Material-UI components.
-- [Sketch](https://material-ui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-sketch): A large UI kit with over 600 handcrafted Material-UI symbols.
 - [Adobe XD](https://material-ui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-adobe-xd): A large UI kit with over 600 handcrafted Material-UI components.
+- [Sketch](https://material-ui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=related-projects-sketch): A large UI kit with over 600 handcrafted Material-UI symbols.
 - [Framer](https://packages.framer.com/package/material-ui/material-ui): A small free UI kit of Material-UI components.
 
 ## Images and illustrations
@@ -66,10 +67,6 @@ This is a collection of third-party projects that extend Material-UI.
 
 - [material-ui-image](https://mui.wertarbyte.com/#material-ui-image): Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern suggests.
 
-### Pagination
-
-- [material-ui-flat-pagination](https://github.com/szmslab/material-ui-flat-pagination): A flat design pagination component for Material-UI.
-
 ### Scheduler/Calendar
 
 - [dx-react-scheduler-material-ui](https://devexpress.github.io/devextreme-reactive/react/scheduler/): A scheduler/calendar component for Material-UI with multiple calendar views, editing, recurrence appointments and date navigation features ([paid license](https://js.devexpress.com/licensing/)).

docs/src/pages/getting-started/installation/installation.md

@@ -83,12 +83,12 @@ You should consider pointing to a specific version, such as [v4.4.0](https://unp
 ## Design resources
 
 <a href="https://material-ui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-figma" style="margin-left: 8px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-figma.svg" alt="figma" /></a>
-<a href="https://material-ui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-sketch" style="margin-left: 32px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-sketch.svg" alt="sketch" /></a>
 <a href="https://material-ui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-adobe-xd" style="margin-left: 32px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-adobe-xd.svg" alt="adobe-xd" /></a>
+<a href="https://material-ui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-sketch" style="margin-left: 32px; margin-top: 8px; display: inline-block;"><img src="/static/images/download-sketch.svg" alt="sketch" /></a>
 
 A set of reusable components for design tools is available, designed to match the React components, and to help you craft great products:
 
 - [Figma](https://material-ui.com/store/items/figma-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-figma): A large UI kit with over 600 handcrafted Material-UI components.
-- [Sketch](https://material-ui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-sketch): A large UI kit with over 600 handcrafted Material-UI symbols.
 - [Adobe XD](https://material-ui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-adobe-xd): A large UI kit with over 600 handcrafted Material-UI components.
+- [Sketch](https://material-ui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-sketch): A large UI kit with over 600 handcrafted Material-UI symbols.
 - [Framer](https://packages.framer.com/package/material-ui/material-ui): A small free UI kit of Material-UI components.

docs/src/pages/getting-started/templates/album/Album.js

@@ -8,9 +8,10 @@ import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Grid from '@material-ui/core/Grid';
+import Stack from '@material-ui/core/Stack';
+import Box from '@material-ui/core/Box';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
 import Link from '@material-ui/core/Link';
 
@@ -27,57 +28,29 @@ function Copyright() {
   );
 }
 
-const useStyles = makeStyles((theme) => ({
-  icon: {
-    marginRight: theme.spacing(2),
-  },
-  heroContent: {
-    backgroundColor: theme.palette.background.paper,
-    padding: theme.spacing(8, 0, 6),
-  },
-  heroButtons: {
-    marginTop: theme.spacing(4),
-  },
-  cardGrid: {
-    paddingTop: theme.spacing(8),
-    paddingBottom: theme.spacing(8),
-  },
-  card: {
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  cardMedia: {
-    paddingTop: '56.25%', // 16:9
-  },
-  cardContent: {
-    flexGrow: 1,
-  },
-  footer: {
-    backgroundColor: theme.palette.background.paper,
-    padding: theme.spacing(6),
-  },
-}));
-
 const cards = [1, 2, 3, 4, 5, 6, 7, 8, 9];
 
 export default function Album() {
-  const classes = useStyles();
-
   return (
     <React.Fragment>
       <CssBaseline />
       <AppBar position="relative">
         <Toolbar>
-          <CameraIcon className={classes.icon} />
+          <CameraIcon sx={{ mr: 2 }} />
           <Typography variant="h6" color="inherit" noWrap>
             Album layout
           </Typography>
         </Toolbar>
       </AppBar>
       <main>
         {/* Hero unit */}
-        <div className={classes.heroContent}>
+        <Box
+          sx={{
+            bgcolor: 'background.paper',
+            pt: 8,
+            pb: 6,
+          }}
+        >
           <Container maxWidth="sm">
             <Typography
               component="h1"
@@ -93,30 +66,34 @@ export default function Album() {
               the creator, etc. Make it short and sweet, but not too short so folks
               don&apos;t simply skip over it entirely.
             </Typography>
-            <div className={classes.heroButtons}>
-              <Grid container spacing={2} justifyContent="center">
-                <Grid item>
-                  <Button variant="contained">Main call to action</Button>
-                </Grid>
-                <Grid item>
-                  <Button variant="outlined">Secondary action</Button>
-                </Grid>
-              </Grid>
-            </div>
+            <Stack
+              sx={{ pt: 4 }}
+              direction="row"
+              spacing={2}
+              justifyContent="center"
+            >
+              <Button variant="contained">Main call to action</Button>
+              <Button variant="outlined">Secondary action</Button>
+            </Stack>
           </Container>
-        </div>
-        <Container className={classes.cardGrid} maxWidth="md">
+        </Box>
+        <Container sx={{ py: 8 }} maxWidth="md">
           {/* End hero unit */}
           <Grid container spacing={4}>
             {cards.map((card) => (
               <Grid item key={card} xs={12} sm={6} md={4}>
-                <Card className={classes.card}>
+                <Card
+                  sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+                >
                   <CardMedia
-                    className={classes.cardMedia}
+                    sx={{
+                      // 16:9
+                      pt: '56.25%',
+                    }}
                     image="https://source.unsplash.com/random"
                     title="Image title"
                   />
-                  <CardContent className={classes.cardContent}>
+                  <CardContent sx={{ flexGrow: 1 }}>
                     <Typography gutterBottom variant="h5" component="h2">
                       Heading
                     </Typography>
@@ -136,7 +113,7 @@ export default function Album() {
         </Container>
       </main>
       {/* Footer */}
-      <footer className={classes.footer}>
+      <Box sx={{ bgcolor: 'background.paper', p: 6 }} component="footer">
         <Typography variant="h6" align="center" gutterBottom>
           Footer
         </Typography>
@@ -149,7 +126,7 @@ export default function Album() {
           Something here to give the footer a purpose!
         </Typography>
         <Copyright />
-      </footer>
+      </Box>
       {/* End footer */}
     </React.Fragment>
   );