Remove container from TemplateFrame

mui · Aug 23, 2024 · 1741edc · 1741edc
1 parent 063b71b
commit 1741edc
Show file tree

Hide file tree

Showing 19 changed files with 705 additions and 697 deletions.
diff --git a/docs/data/material/getting-started/templates/blog/Blog.js b/docs/data/material/getting-started/templates/blog/Blog.js
@@ -41,7 +41,7 @@ export default function Blog() {
   };
 
   return (
-    // you can delete this TemplateFrame component since it's just no navigate to other pages
+    // You can delete this TemplateFrame component since it's just no navigate to other pages
     <TemplateFrame
       toggleCustomTheme={toggleCustomTheme}
       showCustomTheme={showCustomTheme}

diff --git a/docs/data/material/getting-started/templates/blog/TemplateFrame.js b/docs/data/material/getting-started/templates/blog/TemplateFrame.js
@@ -9,7 +9,6 @@ import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import ToggleColorMode from './components/ToggleColorMode';
 import getBlogTheme from './theme/getBlogTheme';
@@ -25,7 +24,6 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   boxShadow: theme.shadows[1],
   backgroundImage: 'none',
-  padding: 4,
   zIndex: theme.zIndex.drawer + 1,
   flex: '0 0 auto',
 }));
@@ -46,54 +44,57 @@ function TemplateFrame({
     <ThemeProvider theme={blogTheme}>
       <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
         <StyledAppBar>
-          <Container maxWidth="lg">
-            <Toolbar
-              variant="dense"
-              disableGutters
-              sx={{ display: 'flex', justifyContent: 'space-between' }}
+          <Toolbar
+            variant="dense"
+            disableGutters
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              p: '8px 12px',
+            }}
+          >
+            <Button
+              variant="text"
+              size="small"
+              aria-label="Back to templates"
+              startIcon={<ArrowBackRoundedIcon />}
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'none', sm: 'flex' } }}
             >
-              <Button
-                variant="text"
-                size="small"
-                aria-label="Back to templates"
-                startIcon={<ArrowBackRoundedIcon />}
-                component="a"
-                href="/material-ui/getting-started/templates/"
-                sx={{ display: { xs: 'none', sm: 'flex' } }}
-              >
-                Back to templates
-              </Button>
-              <IconButton
-                size="small"
-                aria-label="Back to templates"
-                component="a"
-                href="/material-ui/getting-started/templates/"
-                sx={{ display: { xs: 'auto', sm: 'none' } }}
-              >
-                <ArrowBackRoundedIcon />
-              </IconButton>
-              <Box sx={{ display: 'flex', gap: 1 }}>
-                <FormControl variant="outlined" sx={{ minWidth: 180 }}>
-                  <Select
-                    size="small"
-                    labelId="theme-select-label"
-                    id="theme-select"
-                    value={showCustomTheme ? 'custom' : 'material'}
-                    onChange={handleChange}
-                    label="Design Language"
-                  >
-                    <MenuItem value="custom">Custom Theme</MenuItem>
-                    <MenuItem value="material">Material Design 2</MenuItem>
-                  </Select>
-                </FormControl>
-                <ToggleColorMode
-                  data-screenshot="toggle-mode"
-                  mode={mode}
-                  toggleColorMode={toggleColorMode}
-                />
-              </Box>
-            </Toolbar>
-          </Container>
+              Back to templates
+            </Button>
+            <IconButton
+              size="small"
+              aria-label="Back to templates"
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'auto', sm: 'none' } }}
+            >
+              <ArrowBackRoundedIcon />
+            </IconButton>
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
+                <Select
+                  size="small"
+                  labelId="theme-select-label"
+                  id="theme-select"
+                  value={showCustomTheme ? 'custom' : 'material'}
+                  onChange={handleChange}
+                  label="Design Language"
+                >
+                  <MenuItem value="custom">Custom Theme</MenuItem>
+                  <MenuItem value="material">Material Design 2</MenuItem>
+                </Select>
+              </FormControl>
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
+            </Box>
+          </Toolbar>
         </StyledAppBar>
         <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
       </Box>

diff --git a/docs/data/material/getting-started/templates/blog/TemplateFrame.tsx b/docs/data/material/getting-started/templates/blog/TemplateFrame.tsx
@@ -13,7 +13,6 @@ import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import ToggleColorMode from './components/ToggleColorMode';
 import getBlogTheme from './theme/getBlogTheme';
@@ -29,7 +28,6 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   boxShadow: theme.shadows[1],
   backgroundImage: 'none',
-  padding: 4,
   zIndex: theme.zIndex.drawer + 1,
   flex: '0 0 auto',
 }));
@@ -58,54 +56,57 @@ export default function TemplateFrame({
     <ThemeProvider theme={blogTheme}>
       <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
         <StyledAppBar>
-          <Container maxWidth="lg">
-            <Toolbar
-              variant="dense"
-              disableGutters
-              sx={{ display: 'flex', justifyContent: 'space-between' }}
+          <Toolbar
+            variant="dense"
+            disableGutters
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              width: '100%',
+              p: '8px 12px',
+            }}
+          >
+            <Button
+              variant="text"
+              size="small"
+              aria-label="Back to templates"
+              startIcon={<ArrowBackRoundedIcon />}
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'none', sm: 'flex' } }}
             >
-              <Button
-                variant="text"
-                size="small"
-                aria-label="Back to templates"
-                startIcon={<ArrowBackRoundedIcon />}
-                component="a"
-                href="/material-ui/getting-started/templates/"
-                sx={{ display: { xs: 'none', sm: 'flex' } }}
-              >
-                Back to templates
-              </Button>
-              <IconButton
-                size="small"
-                aria-label="Back to templates"
-                component="a"
-                href="/material-ui/getting-started/templates/"
-                sx={{ display: { xs: 'auto', sm: 'none' } }}
-              >
-                <ArrowBackRoundedIcon />
-              </IconButton>
-              <Box sx={{ display: 'flex', gap: 1 }}>
-                <FormControl variant="outlined" sx={{ minWidth: 180 }}>
-                  <Select
-                    size="small"
-                    labelId="theme-select-label"
-                    id="theme-select"
-                    value={showCustomTheme ? 'custom' : 'material'}
-                    onChange={handleChange}
-                    label="Design Language"
-                  >
-                    <MenuItem value="custom">Custom Theme</MenuItem>
-                    <MenuItem value="material">Material Design 2</MenuItem>
-                  </Select>
-                </FormControl>
-                <ToggleColorMode
-                  data-screenshot="toggle-mode"
-                  mode={mode}
-                  toggleColorMode={toggleColorMode}
-                />
-              </Box>
-            </Toolbar>
-          </Container>
+              Back to templates
+            </Button>
+            <IconButton
+              size="small"
+              aria-label="Back to templates"
+              component="a"
+              href="/material-ui/getting-started/templates/"
+              sx={{ display: { xs: 'auto', sm: 'none' } }}
+            >
+              <ArrowBackRoundedIcon />
+            </IconButton>
+            <Box sx={{ display: 'flex', gap: 1 }}>
+              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
+                <Select
+                  size="small"
+                  labelId="theme-select-label"
+                  id="theme-select"
+                  value={showCustomTheme ? 'custom' : 'material'}
+                  onChange={handleChange}
+                  label="Design Language"
+                >
+                  <MenuItem value="custom">Custom Theme</MenuItem>
+                  <MenuItem value="material">Material Design 2</MenuItem>
+                </Select>
+              </FormControl>
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
+            </Box>
+          </Toolbar>
         </StyledAppBar>
         <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
       </Box>

diff --git a/docs/data/material/getting-started/templates/blog/components/Footer.js b/docs/data/material/getting-started/templates/blog/components/Footer.js
@@ -9,7 +9,7 @@ import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-import { visuallyHidden } from '@mui/utils';
+
 import FacebookIcon from '@mui/icons-material/GitHub';
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
 import TwitterIcon from '@mui/icons-material/X';
@@ -70,10 +70,8 @@ export default function Footer() {
               <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
                 Subscribe for weekly updates. No spams ever!
               </Typography>
+              <InputLabel htmlFor="email-newsletter">Email</InputLabel>
               <Stack direction="row" spacing={1} useFlexGap>
-                <InputLabel htmlFor="email-newsletter" sx={visuallyHidden}>
-                  Email
-                </InputLabel>
                 <TextField
                   id="email-newsletter"
                   hiddenLabel

diff --git a/docs/data/material/getting-started/templates/blog/components/Footer.tsx b/docs/data/material/getting-started/templates/blog/components/Footer.tsx
@@ -9,7 +9,6 @@ import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-import { visuallyHidden } from '@mui/utils';
 import FacebookIcon from '@mui/icons-material/GitHub';
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
 import TwitterIcon from '@mui/icons-material/X';