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] Add stray design adjustments throughout the site #41642

Merged
merged 1 commit into from
Mar 25, 2024
Merged

[website] Add stray design adjustments throughout the site #41642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/src/components/about/Team.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ function Person(props: Profile & { sx?: PaperProps['sx'] }) {
borderRadius: 40,
border: '2px solid',
borderColor: 'primary.50',
boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.15)',
boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.1)',
transform: 'translateX(50%)',
overflow: 'hidden',
...theme.applyDarkStyles({
Expand Down Expand Up @@ -185,7 +185,7 @@ function Person(props: Profile & { sx?: PaperProps['sx'] }) {
</Typography>
{props.about && <Divider sx={{ my: 1.5 }} />}
{props.about && (
<Typography variant="body2" color="grey.600">
<Typography variant="body2" color="text.tertiary">
{props.about}
</Typography>
)}
Expand Down
16 changes: 6 additions & 10 deletions docs/src/components/pricing/LicensingModelSwitch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
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}`,
outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
outlineOffset: '2px',
},
'& .MuiTabs-scroller, & .MuiTab-root': {
// Override inline-style to see the box-shadow
Expand All @@ -32,14 +33,14 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
fontWeight: theme.typography.fontWeightSemiBold,
minWidth: 0,
minHeight: 0,
color: (theme.vars || theme).palette.grey[600],
color: (theme.vars || theme).palette.text.tertiary,
borderRadius: 20,
zIndex: 2,
'&:hover': {
color: (theme.vars || theme).palette.grey[800],
color: (theme.vars || theme).palette.text.primary,
},
'&.Mui-selected': {
color: (theme.vars || theme).palette.primary[500],
color: (theme.vars || theme).palette.primary[600],
fontWeight: theme.typography.fontWeightSemiBold,
},
'&.Mui-focusVisible': {
Expand All @@ -58,19 +59,14 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
...theme.applyDarkStyles({
borderColor: (theme.vars || theme).palette.primaryDark[700],
backgroundColor: (theme.vars || theme).palette.primaryDark[900],
color: (theme.vars || theme).palette.grey[400],
'& .MuiTabs-indicator': {
height: '100%',
borderRadius: 20,
backgroundColor: alpha(theme.palette.primaryDark[600], 0.5),
borderColor: (theme.vars || theme).palette.primaryDark[500],
borderColor: (theme.vars || theme).palette.primaryDark[600],
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: (theme.vars || theme).palette.primary[200],
},
Expand Down
4 changes: 2 additions & 2 deletions docs/src/components/pricing/PricingTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1361,8 +1361,8 @@ export default function PricingTable({
sx={[
(theme) => ({
px: 1,
py: 1.5,
justifyContent: 'flex-start',
fontSize: '0.875rem',
fontWeight: 'medium',
borderRadius: '0px',
position: 'absolute',
Expand Down Expand Up @@ -1512,8 +1512,8 @@ export default function PricingTable({
sx={[
(theme) => ({
px: 1,
py: 1.5,
justifyContent: 'flex-start',
fontSize: '0.875rem',
fontWeight: 'medium',
borderRadius: '0px',
position: 'absolute',
Expand Down
6 changes: 3 additions & 3 deletions docs/src/components/productX/XHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ export default function XHero() {
...theme.applyDarkStyles({
borderColor: 'primaryDark.700',
backgroundColor: 'primaryDark.900',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
}),
})}
>
Expand Down Expand Up @@ -281,7 +281,7 @@ export default function XHero() {
...theme.applyDarkStyles({
borderColor: 'primaryDark.700',
backgroundColor: 'primaryDark.900',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
}),
})}
>
Expand Down Expand Up @@ -338,7 +338,7 @@ export default function XHero() {
(theme) =>
theme.applyDarkStyles({
borderColor: 'primaryDark.700',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
backgroundColor: 'primaryDark.900',
'& .MuiDateRangePickerDay-day.Mui-selected': {
color: '#FFF',
Expand Down
3 changes: 2 additions & 1 deletion docs/src/components/showcase/FolderTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ export default function BasicTable() {
sx={[
{
maxWidth: 260,
borderColor: 'grey.200',
boxShadow: (theme) => `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
[`& .${tableCellClasses.root}`]: {
borderColor: 'grey.200',
Expand All @@ -103,7 +104,7 @@ export default function BasicTable() {
theme.applyDarkStyles({
bgcolor: 'primaryDark.900',
borderColor: 'primaryDark.700',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
[`& .${tableCellClasses.root}`]: {
borderColor: 'primaryDark.700',
},
Expand Down
3 changes: 2 additions & 1 deletion docs/src/components/showcase/NotificationCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,12 @@ export default function NotificationCard() {
p: 2,
gap: 2,
maxWidth: 283,
borderColor: 'grey.200',
boxShadow: `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
...theme.applyDarkStyles({
bgcolor: 'primaryDark.900',
borderColor: 'primaryDark.700',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
}),
})}
>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/components/showcase/PlayerCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function PlayerCard({ disableTheming }: { disableTheming?: boolea
alignItems: 'center',
gap: 2,
...(!disableTheming && {
borderColor: 'divider',
borderColor: 'grey.200',
boxShadow: (theme) => `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
[`& .${iconButtonClasses.root}`]: {
border: '1px solid',
Expand All @@ -52,7 +52,7 @@ export default function PlayerCard({ disableTheming }: { disableTheming?: boolea
((theme) =>
theme.applyDarkStyles({
bgcolor: 'primaryDark.900',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
[`& .${iconButtonClasses.root}`]: {
bgcolor: 'primary.900',
color: 'primary.200',
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/showcase/RealEstateCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function RealEstateCard({ sx, ...props }: CardProps) {
boxShadow: `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
...theme.applyDarkStyles({
bgcolor: 'primaryDark.900',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
}),
}),
...(Array.isArray(sx) ? sx : [sx]),
Expand Down
11 changes: 5 additions & 6 deletions docs/src/components/showcase/TaskCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,17 @@ export default function TaskCard() {
<Fade in timeout={700}>
<Card
data-mui-color-scheme="dark"
sx={(theme) => ({
sx={{
minWidth: 280,
maxWidth: 360,
minHeight: 280,
display: 'flex',
flexDirection: 'column',
p: 3,
background: `linear-gradient(to right bottom, ${
(theme.vars || theme).palette.primary[500]
}, ${(theme.vars || theme).palette.primary[600]} 120%)`,
boxShadow: '0px 20px 25px rgba(0, 0, 0, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.04)',
})}
background:
'linear-gradient(180deg, var(--muidocs-palette-primary-600) 0%, var(--muidocs-palette-primary-700) 100%)',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.04)',
}}
>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.8 }}>
<ScheduleRounded fontSize="inherit" />
Expand Down
3 changes: 2 additions & 1 deletion docs/src/components/showcase/ThemeAccordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export default function ThemeAccordion() {
{
[`& .${accordionClasses.root}`]: {
bgcolor: '#fff',
borderColor: 'grey.200',
boxShadow: (theme) => `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,

[`&.${accordionClasses.expanded}`]: {
Expand Down Expand Up @@ -59,7 +60,7 @@ export default function ThemeAccordion() {
[`& .${accordionClasses.root}`]: {
bgcolor: 'primaryDark.900',
borderColor: 'primaryDark.700',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
},
[`& .${accordionSummaryClasses.root}`]: {
[`& .${accordionSummaryClasses.content}`]: {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/showcase/ThemeDatePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export default function ThemeDatePicker() {
'& > div': {
borderColor: 'primaryDark.700',
bgcolor: 'primaryDark.900',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
},
[`& .${iconButtonClasses.root}`]: {
color: 'primary.300',
Expand Down
35 changes: 15 additions & 20 deletions docs/src/components/showcase/ThemeSlider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default function ThemeSlider() {
...theme.applyDarkStyles({
bgcolor: 'primaryDark.900',
borderColor: 'primaryDark.700',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
}),
})}
>
Expand All @@ -36,7 +36,6 @@ export default function ThemeSlider() {
valueLabelFormat={valuetext}
valueLabelDisplay="on"
marks={[
{ value: 0, label: '0ºC' },
{ value: 10 },
{ value: 20, label: '20ºC' },
{ value: 30 },
Expand All @@ -46,17 +45,15 @@ export default function ThemeSlider() {
{ value: 70 },
{ value: 80, label: '80ºC' },
{ value: 90 },
{ value: 100, label: '100ºC' },
]}
sx={[
{
display: 'inline-block',
width: '100%',
color: 'primary.500',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
color: 'primary.main',
height: 6,
margin: 0,
pt: 2,
pb: 2,
m: 0,
[`& .${sliderClasses.rail}`]: {
opacity: 1,
bgcolor: 'grey.200',
Expand All @@ -65,24 +62,26 @@ export default function ThemeSlider() {
border: 'none',
},
[`& .${sliderClasses.mark}`]: {
color: 'transparent',
color: 'text.tertiary',
},
[`& .${sliderClasses.markLabel}`]: {
color: 'grey.900',
color: 'text.secondary',
fontSize: '0.75rem',
fontWeight: 600,
fontWeight: 'semiBold',
},
[`& .${sliderClasses.thumb}`]: {
width: 12,
height: 12,
mx: -1,
width: 16,
height: 16,
'&::before': {
boxShadow: 'none',
},
},
[`& .${sliderClasses.valueLabel}`]: {
backgroundColor: 'transparent',
color: 'primary.600',
fontWeight: 700,
fontSize: '0.75rem',
fontWeight: 'bold',
padding: 0,
[`& .${sliderClasses.valueLabelOpen}`]: {
transform: 'none',
Expand All @@ -92,15 +91,11 @@ export default function ThemeSlider() {
},
(theme) =>
theme.applyDarkStyles({
color: 'primary.400',
[`& .${sliderClasses.rail}`]: {
bgcolor: 'primaryDark.600',
},
[`& .${sliderClasses.markLabel}`]: {
color: 'grey.600',
},
[`& .${sliderClasses.valueLabel}`]: {
color: 'primary.200',
color: 'primary.300',
},
}),
]}
Expand Down
12 changes: 3 additions & 9 deletions docs/src/components/showcase/ThemeTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ export default function ThemeTabs() {
variant="fullWidth"
sx={[
{
background:
'linear-gradient(180deg, var(--muidocs-palette-primary-500) 0%, var(--muidocs-palette-primary-600) 100%)',
borderRadius: 1,
boxShadow: '0px 20px 25px rgba(0, 0, 0, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.04)',
background:
'linear-gradient(180deg, var(--muidocs-palette-primary-600) 0%, var(--muidocs-palette-primary-700) 100%)',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.04)',
[`& .${tabsClasses.indicator}`]: {
backgroundColor: 'transparent',
'&::before': {
Expand All @@ -47,12 +47,6 @@ export default function ThemeTabs() {
},
},
},
(theme) =>
theme.applyDarkStyles({
[`& .${tabClasses.root}`]: {
color: 'primary.200',
},
}),
]}
>
<Tab label="Material UI" />
Expand Down
6 changes: 5 additions & 1 deletion docs/src/components/showcase/ThemeTimeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,12 @@ export default function BasicTimeline() {
pb: 1,
display: 'flex',
alignItems: 'flex-start',
borderColor: 'grey.200',
boxShadow: `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
...theme.applyDarkStyles({
bgcolor: 'primaryDark.900',
borderColor: 'primaryDark.700',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
}),
})}
>
Expand All @@ -42,9 +43,12 @@ export default function BasicTimeline() {
borderRadius: 0.3,
bgcolor: 'primary.50',
color: 'primary.600',
border: '1px solid',
borderColor: 'primary.100',
...theme.applyDarkStyles({
bgcolor: 'primary.900',
color: 'primary.50',
borderColor: 'primary.800',
}),
})}
>
Expand Down
5 changes: 2 additions & 3 deletions docs/src/components/showcase/ThemeToggleButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ export default function ThemeToggleButton() {
bgcolor: '#fff',
'& .MuiToggleButton-root': {
textTransform: 'none',
fontWeight: 600,
color: 'grey.700',
fontWeight: 'medium',
color: 'text.secondary',
'&.Mui-selected': {
color: 'primary.700',
bgcolor: 'primary.50',
Expand All @@ -32,7 +32,6 @@ export default function ThemeToggleButton() {
theme.applyDarkStyles({
bgcolor: 'primaryDark.900',
'& .MuiToggleButton-root': {
color: 'grey.400',
'&.Mui-selected': {
color: 'primary.100',
bgcolor: 'primary.900',
Expand Down
Loading
Loading