move demos to rebranding scope

docs/src/components/home/Hero.tsx

@@ -6,19 +6,19 @@ import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import Stack from '@material-ui/core/Stack';
 import GradientText from 'docs/src/components/typography/GradientText';
-import PlayerCard from 'docs/src/pages/components/cards/PlayerCard';
-import TaskCard from 'docs/src/pages/components/cards/TaskCard';
-import NotificationCard from 'docs/src/pages/components/cards/NotificationCard';
-import ThemeChip from 'docs/src/pages/components/chips/ThemeChip';
-import ThemeDatePicker from 'docs/src/pages/components/date-picker/ThemeDatePicker';
-import ThemeSlider from 'docs/src/pages/components/slider/ThemeSlider';
-import FolderTable from 'docs/src/pages/components/tables/FolderTable';
-import ThemeTabs from 'docs/src/pages/components/tabs/ThemeTabs';
-import ThemeTimeline from 'docs/src/pages/components/timeline/ThemeTimeline';
-import ViewToggleButton from 'docs/src/pages/components/toggle-button/ViewToggleButton';
-import ThemeToggleButton from 'docs/src/pages/components/toggle-button/ThemeToggleButton';
-import ThemeSwitch from 'docs/src/pages/components/switches/ThemeSwitch';
-import ThemeAccordion from 'docs/src/pages/components/accordion/ThemeAccordion';
+import PlayerCard from 'docs/src/components/showcase/PlayerCard';
+import TaskCard from 'docs/src/components/showcase/TaskCard';
+import NotificationCard from 'docs/src/components/showcase/NotificationCard';
+import ThemeChip from 'docs/src/components/showcase/ThemeChip';
+import ThemeDatePicker from 'docs/src/components/showcase/ThemeDatePicker';
+import ThemeSlider from 'docs/src/components/showcase/ThemeSlider';
+import FolderTable from 'docs/src/components/showcase/FolderTable';
+import ThemeTabs from 'docs/src/components/showcase/ThemeTabs';
+import ThemeTimeline from 'docs/src/components/showcase/ThemeTimeline';
+import ViewToggleButton from 'docs/src/components/showcase/ViewToggleButton';
+import ThemeToggleButton from 'docs/src/components/showcase/ThemeToggleButton';
+import ThemeSwitch from 'docs/src/components/showcase/ThemeSwitch';
+import ThemeAccordion from 'docs/src/components/showcase/ThemeAccordion';
 import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
 
 export default function Hero() {

docs/src/pages/components/cards/PlayerCard.tsx → docs/src/components/showcase/PlayerCard.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { ThemeProvider, createTheme, useTheme } from '@material-ui/core/styles';
-import Avatar from '@material-ui/core/Avatar';
 import Box from '@material-ui/core/Box';
 import Card from '@material-ui/core/Card';
 import IconButton from '@material-ui/core/IconButton';
@@ -67,9 +66,7 @@ export default function PlayerCard() {
         },
         spacing: 10,
         typography: {
-          fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join(
-            ',',
-          ),
+          fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join(','),
         },
         components: {
           MuiButtonBase: {
@@ -108,15 +105,12 @@ export default function PlayerCard() {
   return (
     <ThemeProvider theme={theme}>
       <Card variant="outlined" sx={{ display: 'flex', p: 1 }}>
-        <Avatar
-          variant="rounded"
-          alt="Song cover"
+        <img
+          alt="Beside Myself album cover"
+          style={{ borderRadius: 10 }}
           src="/static/images/cards/basement-beside-myself.jpg"
-          imgProps={{
-            width: '124',
-            height: '124',
-          }}
-          sx={{ width: 124, height: 124 }}
+          width="124"
+          height="124"
         />
         <Box sx={{ alignSelf: 'center', mx: 2 }}>
           <Typography variant="body1" fontWeight={500}>

docs/src/pages/components/chips/ThemeChip.tsx → docs/src/components/showcase/ThemeChip.tsx

@@ -47,9 +47,7 @@ export default function ThemeChip() {
           },
         },
         typography: {
-          fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join(
-            ',',
-          ),
+          fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join(','),
           fontWeightRegular: 500,
         },
         components: {
@@ -87,14 +85,11 @@ export default function ThemeChip() {
       }),
     [mode],
   );
-  const handleDelete = () => {
-    console.info('You clicked the delete icon.');
-  };
   return (
     <ThemeProvider theme={theme}>
       <Stack direction="row" spacing={2}>
-        <Chip label="React" color="primary" onDelete={handleDelete} />
-        <Chip label="Javascript" onDelete={handleDelete} />
+        <Chip label="React" color="primary" onDelete={() => {}} />
+        <Chip label="Javascript" onDelete={() => {}} />
       </Stack>
     </ThemeProvider>
   );

docs/src/pages/components/tabs/ThemeTabs.tsx → docs/src/components/showcase/ThemeTabs.tsx

@@ -38,9 +38,7 @@ export default function ThemeTabs() {
         },
         spacing: 10,
         typography: {
-          fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join(
-            ',',
-          ),
+          fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join(','),
           button: {
             textTransform: 'initial',
           },
@@ -56,17 +54,16 @@ export default function ThemeTabs() {
               root: {
                 backgroundColor: mode === 'dark' ? primary[700] : primary[500],
                 borderRadius: 10,
-                boxShadow:
-                  '0px 20px 25px rgba(0, 0, 0, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.04)',
+                boxShadow: '0px 20px 25px rgba(0, 0, 0, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.04)',
               },
               indicator: {
                 backgroundColor: 'transparent',
                 '&:before': {
                   content: '""',
                   display: 'block',
                   position: 'absolute',
-                  left: 40,
-                  right: 40,
+                  left: 30,
+                  right: 30,
                   height: '100%',
                   backgroundColor: '#fff',
                 },
@@ -95,12 +92,7 @@ export default function ThemeTabs() {
 
   return (
     <ThemeProvider theme={theme}>
-      <Tabs
-        value={value}
-        onChange={handleChange}
-        aria-label="theme example"
-        variant="fullWidth"
-      >
+      <Tabs value={value} onChange={handleChange} aria-label="theme example" variant="fullWidth">
         <Tab label="Yesterday" />
         <Tab label="Today" />
         <Tab label="Tomorrow" />