Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 4 commits into from
Nov 1, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
abd16ac
Migrate styles
trizotti Oct 27, 2022
fd9e6f6
Merge branch 'master' into use-css-theme-variables-in-pricing-page
trizotti Oct 28, 2022
06d2f51
Prettier the code
trizotti Oct 28, 2022
577470a
fix minor styles
siriwatknp Oct 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/pages/pricing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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."
Expand All @@ -39,6 +39,6 @@ export default function Pricing() {
<Divider />
</main>
<AppFooter />
</BrandingProvider>
</BrandingCssVarsProvider>
);
}
11 changes: 5 additions & 6 deletions docs/src/components/home/Testimonials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
13 changes: 8 additions & 5 deletions docs/src/components/pricing/EarlyBird.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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 }}>
Expand Down
13 changes: 8 additions & 5 deletions docs/src/components/pricing/FAQ.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
7 changes: 6 additions & 1 deletion docs/src/components/pricing/HeroPricing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
38 changes: 24 additions & 14 deletions docs/src/components/pricing/PricingList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down