fix as suggested

mui · Aug 5, 2021 · 3b746d4 · 3b746d4
1 parent c45e9fe
commit 3b746d4
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 15 deletions.
diff --git a/docs/src/components/home/CoreShowcase.tsx b/docs/src/components/home/CoreShowcase.tsx
@@ -57,7 +57,7 @@ darkBrandingTheme = createTheme(darkBrandingTheme, {
 const CODES = [
  `const theme = createTheme({
  shape: {
- borderRadius: 10,
+ borderRadius: 12,
  },`,
  `
  spacing: 10,`,
@@ -68,13 +68,13 @@ const CODES = [
  ],`,
  `
  typography: {
- fontFamily: '"PlusJakartaSans", sans-serif',
+ fontFamily: '"IBM Plex Sans", sans-serif',
  fontWeightBold: 500,
  },`,
  `
  palette: {
  background: {
- default: theme.palette.mode === 'dark' ? '#0A1929' : '#F3F6F9',
+ default: '#F3F6F9',
  },`,
  `
  divider: '#E5E8EC',`,
@@ -195,7 +195,7 @@ function TypeWriter({
  onStepComplete(step);
  clearInterval(time);
  }
- }, 50);
+ }, 32);
  return () => {
  clearInterval(time);
  };
@@ -269,7 +269,7 @@ export default function CoreShowcase() {
  <ShowcaseContainer
  preview={
  <ThemeProvider theme={customTheme}>
- <Box sx={{ minWidth: 300, width: '50%', maxWidth: '100%' }}>
+ <Box sx={{ minWidth: 300, width: '80%', maxWidth: '100%' }}>
  <MaterialDesignDemo />
  </Box>
  </ThemeProvider>
@@ -309,7 +309,7 @@ export default function CoreShowcase() {
  <Button
  size="small"
  startIcon={<ReplayRounded fontSize="small" />}
- sx={{ ml: 'auto' }}
+ sx={{ ml: 'auto', color: 'primary.400' }}
  onClick={() => {
  setStep(0);
  }}
@@ -325,7 +325,24 @@ export default function CoreShowcase() {
  </Typography>
  )}
  </Box>
- <Box ref={codeContainer} sx={{ px: 2, overflow: 'auto', flexGrow: 1 }}>
+ <Box
+ ref={codeContainer}
+ sx={{
+ px: 2,
+ overflow: 'auto',
+ flexGrow: 1,
+ scrollbarWidth: 'none' /* Firefox */,
+ '&::-webkit-scrollbar': {
+ display: 'none',
+ },
+ '& pre': {
+ scrollbarWidth: 'none' /* Firefox */,
+ '&::-webkit-scrollbar': {
+ display: 'none',
+ },
+ },
+ }}
+ >
  <HighlightedCode component={MarkdownElement} code={codeImports} language="jsx" />
  {customized && <Box height={20} />}
  {customized && <TypeWriter step={step} codes={CODES} onStepComplete={updateTheme} />}

diff --git a/docs/src/components/home/MaterialDesignDemo.tsx b/docs/src/components/home/MaterialDesignDemo.tsx
@@ -35,11 +35,11 @@ ${themed ? `import { ThemeProvider, createTheme } from '@material-ui/core/styles
  }}
  >
  <Typography fontWeight="bold">Michael Scott</Typography>
- <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+ <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
  <LocationOn />
  Scranton, PA
  </Typography>
- <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+ <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
  <BusinessRounded />
  Michael Scott
  </Typography>
@@ -103,11 +103,11 @@ export default function MaterialDesignDemo() {
  }}
  >
  <Typography fontWeight={600}>Michael Scott</Typography>
- <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+ <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
  <LocationOn />
  Scranton, PA
  </Typography>
- <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+ <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
  <BusinessRounded />
  Michael Scott
  </Typography>

diff --git a/docs/src/components/home/ProductsSwitcher.tsx b/docs/src/components/home/ProductsSwitcher.tsx
@@ -40,7 +40,7 @@ function ProductItem({
  <Typography color="text.primary" variant="body2" fontWeight="bold">
  {name}
  </Typography>
- <Typography color="text.secondary" variant="body2" fontWeight="regular">
+ <Typography color="text.secondary" variant="body2" fontWeight="regular" sx={{ my: 0.5 }}>
  {description}
  </Typography>
  <NextLink href={href} passHref>

diff --git a/docs/src/components/home/ShowcaseContainer.tsx b/docs/src/components/home/ShowcaseContainer.tsx
@@ -48,7 +48,7 @@ export default function ShowcaseContainer({
  maxWidth: '100%',
  position: 'relative',
  minHeight: 200,
- maxHeight: 500,
+ maxHeight: 540,
  borderWidth: '0 1px 1px 1px',
  borderStyle: 'solid',
  borderColor: (theme) =>

diff --git a/docs/src/components/home/showcaseUtils.ts b/docs/src/components/home/showcaseUtils.ts
@@ -5,7 +5,7 @@ export const getMaterialThemeFrames = (theme: Theme) => {
  const frames: Array<ThemeOptions> = [
  {
  shape: {
- borderRadius: 10,
+ borderRadius: 12,
  },
  },
  {
@@ -19,7 +19,7 @@ export const getMaterialThemeFrames = (theme: Theme) => {
  },
  {
  typography: {
- fontFamily: '"PlusJakartaSans", sans-serif',
+ fontFamily: '"IBM Plex Sans", sans-serif',
  fontWeightBold: 500,
  },
  },