[website] Migrate Pricing page to use CSS theme variables (mui#34917)

jesrodri · Dec 6, 2022 · b83d290 · b83d290
1 parent ffd4a21
commit b83d290
Show file tree

Hide file tree

Showing 7 changed files with 232 additions and 164 deletions.
diff --git a/docs/pages/pricing.tsx b/docs/pages/pricing.tsx
@@ -12,12 +12,12 @@ import WhatToExpect from 'docs/src/components/pricing/WhatToExpect';
 import FAQ from 'docs/src/components/pricing/FAQ';
 import HeroEnd from 'docs/src/components/home/HeroEnd';
 import AppFooter from 'docs/src/layouts/AppFooter';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 
 export default function Pricing() {
   return (
-    <BrandingProvider>
+    <BrandingCssVarsProvider>
       <Head
         title="Pricing - MUI"
         description="The community edition lets you get going right away. Switch to a commercial plan for more components & technical support."
@@ -39,6 +39,6 @@ export default function Pricing() {
         <Divider />
       </main>
       <AppFooter />
-    </BrandingProvider>
+    </BrandingCssVarsProvider>
   );
 }
diff --git a/docs/src/components/home/Testimonials.tsx b/docs/src/components/home/Testimonials.tsx
@@ -18,12 +18,11 @@ function Testimonials() {
     <Box
       data-mui-color-scheme="dark"
       ref={ref}
-      sx={{
-        background: (theme) =>
-          `linear-gradient(85deg, ${(theme.vars || theme).palette.primaryDark[700]} 0%, ${
-            (theme.vars || theme).palette.primaryDark[600]
-          } 100%)`,
-      }}
+      sx={(theme) => ({
+        background: `linear-gradient(85deg, ${(theme.vars || theme).palette.primaryDark[700]} 0%, ${
+          (theme.vars || theme).palette.primaryDark[600]
+        } 100%)`,
+      })}
     >
       <Container sx={{ py: { xs: 4, md: 8 } }}>
         <Grid container spacing={3} alignItems="center">

diff --git a/docs/src/components/pricing/EarlyBird.tsx b/docs/src/components/pricing/EarlyBird.tsx
@@ -18,13 +18,12 @@ export default function EarlyBird() {
       id="early-bird"
     >
       <Stack
-        sx={{
+        sx={(theme) => ({
           borderRadius: 1,
           p: 2,
-          bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'primary.50'),
+          bgcolor: 'primary.50',
           border: '1px solid',
-          borderColor: (theme) =>
-            theme.palette.mode === 'dark' ? 'primaryDark.500' : 'primary.100',
+          borderColor: 'primary.100',
           display: 'flex',
           flexDirection: {
             xs: 'column',
@@ -35,7 +34,11 @@ export default function EarlyBird() {
             xs: 'flex-start',
             sm: 'center',
           },
-        }}
+          ...theme.applyDarkStyles({
+            bgcolor: 'primaryDark.900',
+            borderColor: 'primaryDark.500',
+          }),
+        })}
       >
         <Box>
           <Typography fontWeight="bold" sx={{ mb: 0.5 }}>

diff --git a/docs/src/components/pricing/FAQ.tsx b/docs/src/components/pricing/FAQ.tsx
@@ -277,14 +277,17 @@ export default function FAQ() {
           {renderItem(7)}
           <Paper
             variant="outlined"
-            sx={{
+            sx={(theme) => ({
               p: 2,
               textAlign: 'center',
               borderStyle: 'dashed',
-              borderColor: (theme) =>
-                theme.palette.mode === 'dark' ? 'primaryDark.400' : 'grey.300',
-              bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.800' : 'white'),
-            }}
+              borderColor: 'grey.300',
+              bgcolor: 'white',
+              ...theme.applyDarkStyles({
+                borderColor: 'primaryDark.400',
+                bgcolor: 'primaryDark.800',
+              }),
+            })}
           >
             <Box sx={{ textAlign: 'left' }}>
               <Typography variant="body2" color="text.primary" fontWeight="bold" component="h3">

diff --git a/docs/src/components/pricing/HeroPricing.tsx b/docs/src/components/pricing/HeroPricing.tsx
@@ -20,7 +20,12 @@ export default function HeroPricing() {
         <Typography
           component="h1"
           variant="body2"
-          color={(theme) => (theme.palette.mode === 'dark' ? 'primary.400' : 'primary.600')}
+          sx={(theme) => ({
+            color: 'primary.600',
+            ...theme.applyDarkStyles({
+              color: 'primary.400',
+            }),
+          })}
           fontWeight="bold"
         >
           Pricing

diff --git a/docs/src/components/pricing/PricingList.tsx b/docs/src/components/pricing/PricingList.tsx
@@ -87,23 +87,33 @@ export default function PricingList() {
         value={planIndex}
         variant="fullWidth"
         onChange={(event, value) => setPlanIndex(value)}
-        sx={{
-          mb: 2,
-          position: 'sticky',
-          top: 55,
-          bgcolor: 'background.paper',
-          zIndex: 1,
-          mx: { xs: -2, sm: -3 },
-          borderTop: '1px solid',
-          borderColor: 'divider',
-          '& .MuiTab-root': {
-            borderBottom: '1px solid',
+        sx={[
+          {
+            mb: 2,
+            position: 'sticky',
+            top: 55,
+            bgcolor: 'background.paper',
+            zIndex: 1,
+            mx: { xs: -2, sm: -3 },
+            borderTop: '1px solid',
             borderColor: 'divider',
-            '&.Mui-selected': {
-              bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.700' : 'grey.50'),
+            '& .MuiTab-root': {
+              borderBottom: '1px solid',
+              borderColor: 'divider',
+              '&.Mui-selected': {
+                bgcolor: 'grey.50',
+              },
             },
           },
-        }}
+          (theme) =>
+            theme.applyDarkStyles({
+              '& .MuiTab-root': {
+                '&.Mui-selected': {
+                  bgcolor: 'primaryDark.700',
+                },
+              },
+            }),
+        ]}
       >
         <Tab label="Community" />
         <Tab