From 7faab118953050eec27e119a53070d2994b70476 Mon Sep 17 00:00:00 2001 From: Victor Zanivan Monteiro Date: Tue, 27 Feb 2024 12:33:47 -0300 Subject: [PATCH] [material-ui][docs] Fix color mode toggle of the landing page template (#41293) --- .../templates/landing-page/LandingPage.js | 3 +-- .../templates/landing-page/LandingPage.tsx | 3 +-- .../templates/landing-page/components/Features.js | 5 +++-- .../templates/landing-page/components/Features.tsx | 5 +++-- .../templates/landing-page/components/Hero.js | 2 +- .../templates/landing-page/components/Hero.tsx | 2 +- .../templates/landing-page/components/Pricing.js | 12 +++--------- .../templates/landing-page/components/Pricing.tsx | 12 +++--------- 8 files changed, 16 insertions(+), 28 deletions(-) diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.js b/docs/data/material/getting-started/templates/landing-page/LandingPage.js index 74c6cff3c40ba8..0ef02a93a9125d 100644 --- a/docs/data/material/getting-started/templates/landing-page/LandingPage.js +++ b/docs/data/material/getting-started/templates/landing-page/LandingPage.js @@ -19,8 +19,6 @@ import FAQ from './components/FAQ'; import Footer from './components/Footer'; import getLPTheme from './getLPTheme'; -const defaultTheme = createTheme({}); - function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) { return ( { setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx b/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx index 399372c0c0587e..aedbebb9a0992d 100644 --- a/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx +++ b/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx @@ -18,8 +18,6 @@ import FAQ from './components/FAQ'; import Footer from './components/Footer'; import getLPTheme from './getLPTheme'; -const defaultTheme = createTheme({}); - interface ToggleCustomThemeProps { showCustomTheme: Boolean; toggleCustomTheme: () => void; @@ -67,6 +65,7 @@ export default function LandingPage() { const [mode, setMode] = React.useState('dark'); const [showCustomTheme, setShowCustomTheme] = React.useState(true); const LPtheme = createTheme(getLPTheme(mode)); + const defaultTheme = createTheme({ palette: { mode } }); const toggleColorMode = () => { setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); diff --git a/docs/data/material/getting-started/templates/landing-page/components/Features.js b/docs/data/material/getting-started/templates/landing-page/components/Features.js index 99e0606e883d4a..f409b6b31d1a55 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Features.js +++ b/docs/data/material/getting-started/templates/landing-page/components/Features.js @@ -150,6 +150,7 @@ export default function Features() { {items.map(({ icon, title, description }, index) => ( handleItemClick(index)} sx={{ @@ -195,7 +196,7 @@ export default function Features() { > {icon} -
+ -
+ ))} diff --git a/docs/data/material/getting-started/templates/landing-page/components/Features.tsx b/docs/data/material/getting-started/templates/landing-page/components/Features.tsx index d493be0d22e792..dd1ecf351e6096 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Features.tsx +++ b/docs/data/material/getting-started/templates/landing-page/components/Features.tsx @@ -150,6 +150,7 @@ export default function Features() { {items.map(({ icon, title, description }, index) => ( handleItemClick(index)} sx={{ @@ -195,7 +196,7 @@ export default function Features() { > {icon} -
+ -
+ ))} diff --git a/docs/data/material/getting-started/templates/landing-page/components/Hero.js b/docs/data/material/getting-started/templates/landing-page/components/Hero.js index 00ceb2861270f3..c7da7e0072168d 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Hero.js +++ b/docs/data/material/getting-started/templates/landing-page/components/Hero.js @@ -17,7 +17,7 @@ export default function Hero() { backgroundImage: theme.palette.mode === 'light' ? 'linear-gradient(180deg, #CEE5FD, #FFF)' - : 'linear-gradient(#02294F, #090E10)', + : `linear-gradient(#02294F, ${alpha('#090E10', 0.0)})`, backgroundSize: '100% 20%', backgroundRepeat: 'no-repeat', })} diff --git a/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx b/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx index 00ceb2861270f3..c7da7e0072168d 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx +++ b/docs/data/material/getting-started/templates/landing-page/components/Hero.tsx @@ -17,7 +17,7 @@ export default function Hero() { backgroundImage: theme.palette.mode === 'light' ? 'linear-gradient(180deg, #CEE5FD, #FFF)' - : 'linear-gradient(#02294F, #090E10)', + : `linear-gradient(#02294F, ${alpha('#090E10', 0.0)})`, backgroundSize: '100% 20%', backgroundRepeat: 'no-repeat', })} diff --git a/docs/data/material/getting-started/templates/landing-page/components/Pricing.js b/docs/data/material/getting-started/templates/landing-page/components/Pricing.js index 17edcbeb3491ae..8892d3aa411850 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Pricing.js +++ b/docs/data/material/getting-started/templates/landing-page/components/Pricing.js @@ -115,8 +115,7 @@ export default function Pricing() { display: 'flex', justifyContent: 'space-between', alignItems: 'center', - color: - tier.title === 'Professional' ? 'primary.contrastText' : '', + color: tier.title === 'Professional' ? 'grey.100' : '', }} > @@ -145,10 +144,7 @@ export default function Pricing() { sx={{ display: 'flex', alignItems: 'baseline', - color: - tier.title === 'Professional' - ? 'primary.contrastText' - : undefined, + color: tier.title === 'Professional' ? 'grey.50' : undefined, }} > @@ -189,9 +185,7 @@ export default function Pricing() { variant="subtitle2" sx={{ color: - tier.title === 'Professional' - ? 'primary.contrastText' - : undefined, + tier.title === 'Professional' ? 'grey.200' : undefined, }} > {line} diff --git a/docs/data/material/getting-started/templates/landing-page/components/Pricing.tsx b/docs/data/material/getting-started/templates/landing-page/components/Pricing.tsx index c56ce6b5837658..bcb8ca47d33478 100644 --- a/docs/data/material/getting-started/templates/landing-page/components/Pricing.tsx +++ b/docs/data/material/getting-started/templates/landing-page/components/Pricing.tsx @@ -115,8 +115,7 @@ export default function Pricing() { display: 'flex', justifyContent: 'space-between', alignItems: 'center', - color: - tier.title === 'Professional' ? 'primary.contrastText' : '', + color: tier.title === 'Professional' ? 'grey.100' : '', }} > @@ -145,10 +144,7 @@ export default function Pricing() { sx={{ display: 'flex', alignItems: 'baseline', - color: - tier.title === 'Professional' - ? 'primary.contrastText' - : undefined, + color: tier.title === 'Professional' ? 'grey.50' : undefined, }} > @@ -189,9 +185,7 @@ export default function Pricing() { variant="subtitle2" sx={{ color: - tier.title === 'Professional' - ? 'primary.contrastText' - : undefined, + tier.title === 'Professional' ? 'grey.200' : undefined, }} > {line}