From 4beabf64b53c79ac9d0de051eb903d0a774e4460 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 21 Feb 2024 15:29:37 -0300
Subject: [PATCH] [website] Improve the footer's chip contrast (#41209)
---
docs/pages/blog.tsx | 1 +
.../website/branding-theme-test.tsx | 54 +++++++++++++++++++
docs/src/layouts/AppFooter.tsx | 42 ++++++---------
docs/src/modules/brandingTheme.ts | 9 ++--
4 files changed, 76 insertions(+), 30 deletions(-)
create mode 100644 docs/pages/experiments/website/branding-theme-test.tsx
diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx
index 78a8b14639386c..9c60ca4e74421c 100644
--- a/docs/pages/blog.tsx
+++ b/docs/pages/blog.tsx
@@ -292,6 +292,7 @@ export default function Blog(props: InferGetStaticPropsType
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx
index 7f7393871a6ab3..d284e61cb4ec1c 100644
--- a/docs/src/layouts/AppFooter.tsx
+++ b/docs/src/layouts/AppFooter.tsx
@@ -5,12 +5,12 @@ import Divider from '@mui/material/Divider';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
+import Chip from '@mui/material/Chip';
import XIcon from '@mui/icons-material/X';
import GitHubIcon from '@mui/icons-material/GitHub';
import LinkedInIcon from '@mui/icons-material/LinkedIn';
import YouTubeIcon from '@mui/icons-material/YouTube';
import RssFeedIcon from '@mui/icons-material/RssFeed';
-import { alpha } from '@mui/material/styles';
import SvgMuiLogotype from 'docs/src/icons/SvgMuiLogotype';
import EmailSubscribe from 'docs/src/components/footer/EmailSubscribe';
import ROUTES from 'docs/src/route';
@@ -142,36 +142,26 @@ export default function AppFooter(props: AppFooterProps) {
Vision
-
+
Careers{' '}
- ({
- px: 0.5,
- py: 0.1,
- ml: 1,
- mb: '1px',
- position: 'relative',
- top: theme.spacing(-0.5),
- fontSize: theme.typography.pxToRem(10),
- fontWeight: 'Bold',
- textTransform: 'uppercase',
- letterSpacing: '.04rem',
- borderRadius: 8,
- border: 1,
- borderColor: 'success.300',
- bgcolor: alpha(theme.palette.success[100], 0.4),
- color: 'success.700',
- ...theme.applyDarkStyles({
- borderColor: alpha(theme.palette.success[800], 0.5),
- bgcolor: alpha(theme.palette.success[800], 0.2),
- color: 'success.200',
- }),
+ height: 18,
+ '& .MuiChip-label': {
+ px: '4px',
+ fontSize: theme.typography.pxToRem(10),
+ fontWeight: 'bold',
+ textTransform: 'uppercase',
+ letterSpacing: '.04rem',
+ },
})}
- >
- Hiring
-
+ />
Support
diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
index 3128eb034c6f87..c6c9a7ef051c99 100644
--- a/docs/src/modules/brandingTheme.ts
+++ b/docs/src/modules/brandingTheme.ts
@@ -902,9 +902,9 @@ export function getThemedComponents(): ThemeOptions {
color: (theme.vars || theme).palette.grey[900],
borderColor: (theme.vars || theme).palette.grey[200],
...theme.applyDarkStyles({
- backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
color: (theme.vars || theme).palette.grey[300],
- borderColor: alpha(theme.palette.primaryDark[500], 0.5),
+ backgroundColor: alpha(theme.palette.primaryDark[700], 0.5),
+ borderColor: (theme.vars || theme).palette.primaryDark[600],
}),
}),
...(variant === 'outlined' &&
@@ -921,10 +921,11 @@ export function getThemedComponents(): ThemeOptions {
color === 'success' && {
borderColor: (theme.vars || theme).palette.success[100],
backgroundColor: (theme.vars || theme).palette.success[50],
+ color: (theme.vars || theme).palette.success[900],
...theme.applyDarkStyles({
color: (theme.vars || theme).palette.success[300],
- borderColor: alpha(theme.palette.success[300], 0.3),
- background: alpha(theme.palette.success[800], 0.3),
+ borderColor: alpha(theme.palette.success[300], 0.2),
+ background: alpha(theme.palette.success[800], 0.2),
}),
}),
...(variant === 'filled' && {