From 3e602ceed5128ee10c03e8fcabb7ea826e958271 Mon Sep 17 00:00:00 2001
From: NicolaeUnleash <103567375+NicolaeUnleash@users.noreply.github.com>
Date: Fri, 24 Mar 2023 15:51:28 +0200
Subject: [PATCH] fix: header-responsiveness (#3381)

- 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"
---
 frontend/src/component/common/SkipNavLink/SkipNavLink.tsx | 6 ++++--
 frontend/src/component/menu/Header/Header.tsx             | 4 +---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/component/common/SkipNavLink/SkipNavLink.tsx b/frontend/src/component/common/SkipNavLink/SkipNavLink.tsx
index b00610ba7a..52545cc2fa 100644
--- a/frontend/src/component/common/SkipNavLink/SkipNavLink.tsx
+++ b/frontend/src/component/common/SkipNavLink/SkipNavLink.tsx
@@ -1,5 +1,6 @@
 import { SKIP_NAV_TARGET_ID } from 'component/common/SkipNavLink/SkipNavTarget';
 import { styled } from '@mui/material';
+import { focusable } from 'themes/themeStyles';
 
 const StyledLink = styled('a')(({ theme }) => ({
     position: 'fixed',
@@ -10,10 +11,11 @@ const StyledLink = styled('a')(({ theme }) => ({
     padding: theme.spacing(1, 2),
     whiteSpace: 'nowrap',
     textDecoration: 'none',
-    background: theme.palette.primary.dark,
-    color: theme.palette.primary.contrastText,
+    background: theme.palette.background.alternative,
+    color: theme.palette.common.white,
     borderRadius: theme.shape.borderRadius,
     fontSize: theme.fontSizes.smallBody,
+    ...focusable(theme),
 
     [theme.breakpoints.down(960)]: {
         top: '0.8rem',
diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx
index 21d20682d9..8e094e2c88 100644
--- a/frontend/src/component/menu/Header/Header.tsx
+++ b/frontend/src/component/menu/Header/Header.tsx
@@ -54,9 +54,7 @@ const StyledContainer = styled(Container)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     maxWidth: 1280,
-    [theme.breakpoints.down('md')]: {
-        padding: '0',
-    },
+    '&&&': { padding: 0 },
 }));
 
 const StyledUserContainer = styled('div')({