add in stray design adjustments

danilo-leal · Oct 16, 2023 · b12986a · b12986a
1 parent 7251587
commit b12986a
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 50 deletions.
diff --git a/docs/src/components/pricing/HeroPricing.tsx b/docs/src/components/pricing/HeroPricing.tsx
@@ -1,32 +1,22 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
+import Section from 'docs/src/layouts/Section';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import GradientText from 'docs/src/components/typography/GradientText';
 
 export default function HeroPricing() {
   return (
-    <Container>
-      <Box
-        sx={{
-          height: '34vh',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        <Typography component="h1" variant="body2" color="primary.main" fontWeight="bold">
-          Pricing
-        </Typography>
-        <Typography variant="h2" textAlign="center" sx={{ my: 1 }}>
-          Start using MUI&apos;s products <GradientText>for free!</GradientText>
-        </Typography>
-        <Typography color="text.secondary" textAlign="center" sx={{ maxWidth: 500 }}>
-          Switch to a commercial plan to access advanced
-          <br /> features & technical support.
-        </Typography>
-      </Box>
-    </Container>
+    <Section cozy>
+      <SectionHeadline
+        alwaysCenter
+        overline="Pricing"
+        title={
+          <Typography variant="h2" component="h1" sx={{ mx: 'auto' }}>
+            Start using MUI&apos;s products <GradientText>for free!</GradientText>
+          </Typography>
+        }
+        description="Switch to a commercial plan to access advanced features & technical support."
+      />
+    </Section>
   );
 }
diff --git a/docs/src/components/pricing/LicensingModelSwitch.tsx b/docs/src/components/pricing/LicensingModelSwitch.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
+import { styled, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Tooltip from '@mui/material/Tooltip';
-import { styled } from '@mui/material/styles';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import { useLicensingModel } from 'docs/src/components/pricing/LicensingModelContext';
@@ -14,7 +14,7 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
   overflow: 'visible',
   borderRadius: 20,
   border: '1px solid',
-  borderColor: (theme.vars || theme).palette.grey[200],
+  borderColor: (theme.vars || theme).palette.grey[100],
   backgroundColor: (theme.vars || theme).palette.grey[50],
   '&:has(.Mui-focusVisible)': {
     outline: `2px solid ${(theme.vars || theme).palette.primary.main}`,
@@ -27,44 +27,48 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
     zIndex: 1,
   },
   '& .MuiTab-root': {
-    padding: '2px 10px',
-    fontSize: theme.typography.pxToRem(14),
-    fontWeight: 500,
+    padding: '4px 8px',
+    fontSize: theme.typography.pxToRem(13),
+    fontWeight: theme.typography.fontWeightSemiBold,
     minWidth: 0,
     minHeight: 0,
-    color: (theme.vars || theme).palette.grey[700],
+    color: (theme.vars || theme).palette.grey[600],
     borderRadius: 20,
     '&:hover': {
       color: (theme.vars || theme).palette.grey[800],
     },
     '&.Mui-selected': {
-      color: (theme.vars || theme).palette.grey[900],
-      fontWeight: 600,
+      color: (theme.vars || theme).palette.primary[500],
+      fontWeight: theme.typography.fontWeightSemiBold,
     },
   },
   '& .MuiTabs-indicator': {
-    backgroundColor: '#fff',
+    backgroundColor: '#FFF',
+    border: '1px solid',
+    borderColor: (theme.vars || theme).palette.grey[200],
     height: '100%',
     borderRadius: 20,
     zIndex: 0,
-    boxShadow: '0px 4px 20px rgba(45, 56, 67, 0.1)',
+    boxShadow: `0px 1px 2px ${(theme.vars || theme).palette.grey[200]}`,
   },
   ...theme.applyDarkStyles({
-    borderColor: (theme.vars || theme).palette.grey[800],
-    backgroundColor: (theme.vars || theme).palette.grey[900],
+    borderColor: (theme.vars || theme).palette.primaryDark[700],
+    backgroundColor: (theme.vars || theme).palette.primaryDark[900],
     color: (theme.vars || theme).palette.grey[400],
     '& .MuiTabs-indicator': {
-      backgroundColor: (theme.vars || theme).palette.grey[700],
       height: '100%',
       borderRadius: 20,
+      backgroundColor: alpha(theme.palette.primaryDark[600], 0.5),
+      borderColor: (theme.vars || theme).palette.primaryDark[500],
+      boxShadow: `0px 1px 4px ${(theme.vars || theme).palette.common.black}`,
     },
     '& .MuiTab-root': {
       color: (theme.vars || theme).palette.grey[400],
       '&:hover': {
         color: (theme.vars || theme).palette.grey[300],
       },
       '&.Mui-selected': {
-        color: '#fff',
+        color: (theme.vars || theme).palette.primary[200],
       },
     },
   }),

diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
@@ -174,19 +174,24 @@ export function PlanPrice(props: PlanPriceProps) {
       <LicensingModelSwitch />
       <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', mt: 1, mb: 4 }}>
         <Typography
-          variant="body2"
+          variant="caption"
           fontWeight="medium"
           sx={(theme) => ({
             borderRadius: 0.5,
             alignSelf: 'flex-end',
             textDecoration: 'line-through',
-            p: '2px 4px',
-            mb: '3px',
+            py: 0.5,
+            px: 1,
+            mb: 0.5,
+            fontWeight: 'medium',
             bgcolor: 'error.50',
             color: 'error.500',
+            border: '1px solid',
+            borderColor: 'error.100',
             ...theme.applyDarkStyles({
-              color: 'error.400',
+              color: 'error.300',
               bgcolor: 'error.900',
+              borderColor: 'error.800',
             }),
           })}
         >
@@ -1245,7 +1250,7 @@ export default function PricingTable({
   const renderNestedRow = (key: string) => renderMasterRow(key, nestedGridSx, plans);
 
   return (
-    <Box ref={tableRef} {...props} sx={{ pt: 8, pb: 8, ...props.sx }}>
+    <Box ref={tableRef} {...props} sx={{ pt: 8, ...props.sx }}>
       <StickyHead container={tableRef} disableCalculation={columnHeaderHidden} />
       {!columnHeaderHidden && (
         <Box sx={gridSx}>

diff --git a/docs/src/components/pricing/PricingWhatToExpect.tsx b/docs/src/components/pricing/PricingWhatToExpect.tsx
@@ -11,16 +11,20 @@ import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined';
 import Section from 'docs/src/layouts/Section';
 import Link from 'docs/src/modules/components/Link';
 import GradientText from 'docs/src/components/typography/GradientText';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 
 export default function PricingWhatToExpect() {
   return (
-    <Section>
-      <Typography
-        variant="h2"
-        sx={{ maxWidth: { xs: 280, sm: 320, md: 400 }, mb: { xs: 2, sm: 4 } }}
-      >
-        Key information about <GradientText>the paid plans</GradientText>
-      </Typography>
+    <Section cozy>
+      <SectionHeadline
+        overline="Paid plans"
+        title={
+          <Typography variant="h2" sx={{ mt: 1, mb: 4, maxWidth: 600 }}>
+            Key information about
+            <br /> <GradientText>the paid plans</GradientText>
+          </Typography>
+        }
+      />
       <Box
         sx={{
           columnGap: 3,