Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

fix: header-responsiveness (#3381)

Browse Source 
- when introducing dark mode icon in the header, on tablet the menu
items don't have enough space anymore, and this fix it

- fixing also the color for dark mode of the keyboard nav button "skip
to content"
This commit is contained in:
NicolaeUnleash 2023-03-24 15:51:28 +02:00 committed by GitHub
parent 56e98cd95b
commit 3e602ceed5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/component/common/SkipNavLink/SkipNavLink.tsx
View File

@ -1,5 +1,6 @@
import { SKIP_NAV_TARGET_ID } from 'component/common/SkipNavLink/SkipNavTarget'; import { SKIP_NAV_TARGET_ID } from 'component/common/SkipNavLink/SkipNavTarget';
import { styled } from '@mui/material'; import { styled } from '@mui/material';
import { focusable } from 'themes/themeStyles';
const StyledLink = styled('a')(({ theme }) => ({ const StyledLink = styled('a')(({ theme }) => ({
position: 'fixed', position: 'fixed',
@ -10,10 +11,11 @@ const StyledLink = styled('a')(({ theme }) => ({
padding: theme.spacing(1, 2), padding: theme.spacing(1, 2),
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
textDecoration: 'none', textDecoration: 'none',
background: theme.palette.primary.dark, background: theme.palette.background.alternative,
color: theme.palette.primary.contrastText, color: theme.palette.common.white,
borderRadius: theme.shape.borderRadius, borderRadius: theme.shape.borderRadius,
fontSize: theme.fontSizes.smallBody, fontSize: theme.fontSizes.smallBody,
...focusable(theme),
[theme.breakpoints.down(960)]: { [theme.breakpoints.down(960)]: {
top: '0.8rem', top: '0.8rem',

4
frontend/src/component/menu/Header/Header.tsx
View File

@ -54,9 +54,7 @@ const StyledContainer = styled(Container)(({ theme }) => ({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
maxWidth: 1280, maxWidth: 1280,
[theme.breakpoints.down('md')]: { '&&&': { padding: 0 },
padding: '0',
},
})); }));
const StyledUserContainer = styled('div')({ const StyledUserContainer = styled('div')({