[docs] Move the themes to themes.material-ui.com

docs/src/modules/components/HomeSteps.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles, useTheme } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
@@ -63,7 +63,7 @@ const styles = theme => ({
     fontSize: 30,
   },
   stepBody: {
-    minHeight: 270,
+    minHeight: 290,
   },
   markdownElement: {
     maxWidth: `calc(100vw - ${(theme.spacing(5) + 1) * 2}px)`,
@@ -91,11 +91,12 @@ const styles = theme => ({
 });
 
 const PremiumThemesLink = React.forwardRef((props, ref) => {
-  return <Link href="/premium-themes" naked prefetch ref={ref} {...props} />;
+  return <Link href="https://themes.material-ui.com/" naked ref={ref} {...props} />;
 });
 
 function HomeSteps(props) {
   const { classes, t } = props;
+  const theme = useTheme();
 
   return (
     <Grid container>
@@ -183,9 +184,13 @@ function HomeSteps(props) {
           <Typography variant="subtitle1" component="div" gutterBottom>
             {t('themesDescr')}
           </Typography>
-          <Link prefetch href="/premium-themes" className={classes.link}>
+          <Link href="https://themes.material-ui.com/" className={classes.link}>
             <NoSsr>
-              <img className={classes.img} alt="themes" src="/static/images/themes-preview.jpg" />
+              <img
+                className={classes.img}
+                alt="themes"
+                src={`/static/images/themes-${theme.palette.type}.jpg`}
+              />
             </NoSsr>
           </Link>
         </div>

docs/src/pages.js

@@ -180,8 +180,10 @@ const pages = [
       { pathname: '/guides/flow' },
     ],
   },
-  { pathname: '/premium-themes' },
-
+  {
+    pathname: 'https://themes.material-ui.com/',
+    title: 'Premium Themes',
+  },
   {
     pathname: '/discover-more',
     children: [

docs/static/_redirects

@@ -31,6 +31,7 @@ https://material-ui.dev/* https://material-ui.com/:splat 301!
 /lab/about/ /components/about-the-lab/ 301
 /lab/* /components/:splat 301
 /css-in-js/* /styles/:splat 301
+/premium-themes* https://themes.material-ui.com/ 301
 
 # Legacy
 /v0.20.0 https://v0.material-ui.com/v0.20.0