fix: styles related to the HDS update, as per Oiva's observations

Author: vincit-matu

apps/admin-ui/src/component/Navigation.tsx

@@ -82,8 +82,11 @@ const BackgroundHeader = styled(Header)`
   }
   #hds-mobile-menu {
     #user-menu * {
-      color: var(--header-color);
+      color: var(--header-color) !important;
       box-sizing: border-box;
+      button {
+        padding-inline: var(--spacing-s);
+      }
     }
     ul > li {
       > span {
@@ -93,6 +96,9 @@ const BackgroundHeader = styled(Header)`
           width: 100%;
           font-size: var(--fontsize-body-xl);
         }
+        .active {
+          font-weight: bold;
+        }
       }
 
       /* hide the big link to frontpage which HDS adds by default */
@@ -114,7 +120,7 @@ const ActionBar = styled(Header.ActionBar)`
 
 const NavigationMenuWrapper = styled.div`
   span:has(.active) {
-    font-weight: bold;
+    font-weight: bold !important;
 
     /* using box-shadow for a bottom border inside of the element, without affecting text positioning */
     box-shadow: 0 -4px 0 0 var(--color-black) inset;

apps/ui/components/common/Navigation.tsx

@@ -45,6 +45,7 @@ const Wrapper = styled.div`
     [class*="module_headerNavigationMenu__"] ul {
       width: 100%;
       margin: 0 auto;
+      padding-inline: 0;
       max-width: var(--container-width-xl);
     }
 
@@ -95,6 +96,9 @@ const Wrapper = styled.div`
         display: none;
       }
     }
+    .active {
+      font-weight: bold;
+    }
   }
 `;
 

apps/ui/pages/reservations/index.tsx

@@ -39,11 +39,7 @@ const Heading = styled.div`
   margin-bottom: var(--spacing-layout-l);
 `;
 
-const StyledTabList = styled(TabList).attrs({
-  style: {
-    "--tablist-border-color": "white",
-  } as React.CSSProperties,
-})`
+const StyledTabList = styled(TabList)`
   ul {
     width: 100% !important;
     position: relative;