Skip to content

Commit

Permalink
[website] Miscellaneous improvements to the marketing pages (#33897)
Browse files Browse the repository at this point in the history
  • Loading branch information
@danilo-leal
danilo-leal committed Aug 15, 2022
1 parent 10ad00e commit 7609d5f
Show file tree
Hide file tree
Showing 7 changed files with 28 additions and 32 deletions.
4 changes: 2 additions & 2 deletions docs/src/components/action/Highlighter.tsx
View file
Expand Up @@ -45,15 +45,15 @@ export default function Highlighter({
border: '1px solid transparent',
transitionProperty: 'all',
transitionDuration: '150ms',
color: (theme) => (theme.palette.mode === 'dark' ? 'grey.600' : 'grey.500'),
color: (theme) => (theme.palette.mode === 'dark' ? 'primary.800' : 'primary.300'),
...((!disableBorder || selected) && {
borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.500' : 'grey.200'),
}),
...(selected && {
bgcolor: (theme) =>
theme.palette.mode === 'dark' ? 'primaryDark.700' : lightSelectedBg[selectedBg],
borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.300' : 'grey.200'),
color: (theme) => (theme.palette.mode === 'dark' ? 'primary.400' : 'primary.500'),
color: (theme) => (theme.palette.mode === 'dark' ? 'primary.300' : 'primary.500'),
}),
...(!selected && {
'&:hover, &:focus': {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/home/DiamondSponsors.tsx
View file
Expand Up @@ -51,7 +51,7 @@ export default function DiamondSponsors() {
sx={{
color: (theme) =>
theme.palette.mode === 'dark'
? theme.palette.primary[400]
? theme.palette.primary[300]
: theme.palette.primary[500],
}}
>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/home/GoldSponsors.tsx
View file
Expand Up @@ -85,7 +85,7 @@ export default function GoldSponsors() {
sx={{
color: (theme) =>
theme.palette.mode === 'dark'
? theme.palette.warning[500]
? theme.palette.warning[300]
: theme.palette.warning[700],
}}
>
Expand Down
40 changes: 15 additions & 25 deletions docs/src/components/home/MaterialDesignComponents.tsx
View file
Expand Up @@ -40,7 +40,9 @@ import Link from 'docs/src/modules/components/Link';
const Grid = styled('div')(({ theme }) => ({
borderRadius: theme.shape.borderRadius,
backgroundColor:
theme.palette.mode === 'dark' ? theme.palette.background.paper : theme.palette.grey[50],
theme.palette.mode === 'dark'
? theme.palette.background.paper
: alpha(theme.palette.grey[50], 0.4),
display: 'grid',
gridTemplateColumns: '1fr',
gridAutoRows: 240,
Expand All @@ -57,10 +59,10 @@ const Grid = styled('div')(({ theme }) => ({
padding: theme.spacing(2),
alignSelf: 'stretch',
border: '1px solid',
borderColor: theme.palette.divider,
'&:last-of-type': {
backgroundColor: theme.palette.background.default,
},
borderColor:
theme.palette.mode === 'dark'
? alpha(theme.palette.primaryDark[600], 0.3)
: theme.palette.grey[200],
[theme.breakpoints.only('xs')]: {
'&:first-of-type': {
borderTopLeftRadius: theme.shape.borderRadius,
Expand All @@ -69,7 +71,6 @@ const Grid = styled('div')(({ theme }) => ({
'&:last-of-type': {
borderBottomLeftRadius: theme.shape.borderRadius,
borderBottomRightRadius: theme.shape.borderRadius,
borderStyle: 'dashed',
},
'&:not(:first-of-type)': {
marginTop: -1,
Expand Down Expand Up @@ -175,7 +176,7 @@ function Demo({
})}
</ThemeProvider>
</Box>
<Typography fontWeight="bold" variant="body2">
<Typography fontWeight="semiBold" variant="body2">
{name}
</Typography>
</Box>
Expand Down Expand Up @@ -266,22 +267,6 @@ export function buildTheme(theme: Theme): ThemeOptions {
? theme.palette.primaryDark[400]
: theme.palette.primaryDark[600],
},
text: {
color:
theme.palette.mode === 'dark'
? theme.palette.primaryDark[50]
: theme.palette.primaryDark[700],
},
outlined: {
borderColor:
theme.palette.mode === 'dark'
? theme.palette.primaryDark[300]
: theme.palette.primaryDark[600],
color:
theme.palette.mode === 'dark'
? theme.palette.primaryDark[50]
: theme.palette.primaryDark[700],
},
iconSizeSmall: {
'& > *:nth-of-type(1)': {
fontSize: '0.875rem',
Expand Down Expand Up @@ -334,8 +319,8 @@ export function buildTheme(theme: Theme): ThemeOptions {
: alpha(theme.palette.primaryDark[50], 0.5),
borderColor:
theme.palette.mode === 'dark'
? theme.palette.primaryDark[200]
: theme.palette.primaryDark[600],
? theme.palette.primaryDark[500]
: theme.palette.primaryDark[300],
'& .MuiAlert-icon': {
color:
theme.palette.mode === 'dark'
Expand All @@ -356,6 +341,11 @@ export function buildTheme(theme: Theme): ThemeOptions {
theme.palette.mode === 'dark'
? theme.palette.primaryDark[50]
: theme.palette.primaryDark[700],
border: '1px solid',
borderColor:
theme.palette.mode === 'dark'
? alpha(theme.palette.primaryDark[500], 0.5)
: theme.palette.primaryDark[100],
'& .MuiAlert-icon': {
color:
theme.palette.mode === 'dark'
Expand Down
8 changes: 7 additions & 1 deletion docs/src/components/home/Testimonials.tsx
View file
Expand Up @@ -18,7 +18,13 @@ const Testimonials = () => {
});
return (
<ThemeProvider theme={brandingDarkTheme}>
<Box ref={ref} sx={{ bgcolor: 'primaryDark.700' }}>
<Box
ref={ref}
sx={{
background: (theme) =>
`linear-gradient(85deg, ${theme.palette.primaryDark[700]} 0%, ${theme.palette.primaryDark[600]} 100%)`,
}}
>
<Container sx={{ py: { xs: 4, md: 8 } }}>
<Grid container spacing={3} alignItems="center">
<Grid item xs={12} md={6} sx={{ zIndex: 1, minHeight: { xs: 400, sm: 307, lg: 355 } }}>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/typography/GradientText.tsx
View file
Expand Up @@ -5,7 +5,7 @@ const GradientText = styled('span')<{
}>(({ theme, color = 'primary' }) => ({
background:
theme.palette.mode === 'dark'
? theme.palette.primary.main
? theme.palette.primary[300]
: `linear-gradient(to right, ${theme.palette[color].main}, ${theme.palette[color][700]})`,
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/typography/SectionHeadline.tsx
View file
Expand Up @@ -13,7 +13,7 @@ export default function SectionHeadline({
}) {
const globalTheme = useTheme();
const mode = globalTheme.palette.mode;
const overlineColor = mode === 'dark' ? 'primary.400' : 'primary.600';
const overlineColor = mode === 'dark' ? 'primary.300' : 'primary.600';
const titleColor = mode === 'dark' ? 'grey.100' : 'primaryDark.900';
const descriptionColor = mode === 'dark' ? 'grey.500' : 'grey.800';
return (
Expand Down

0 comments on commit 7609d5f

Please sign in to comment.