CORE-5093: update design (#741)

* CORE-5093: update design * CORE-5093: fix lint issues
oacore · Jan 31, 2025 · a3800a4 · a3800a4
1 parent 5d167b7
commit a3800a4
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 18 deletions.
diff --git a/src/modules/header/header.jsx b/src/modules/header/header.jsx
@@ -245,28 +245,23 @@ const Header = ({ children, className, id, ...passProps }) => {
           onExpand={() => toggleMenu('about')}
           className={styles.aboutMenu}
         >
-          <Group id="about" label="About" tag="li" labelTag="a">
+          <Group id="about" label="About" tag="li">
             <Item href="/about">About us</Item>
             <Item href="/about#mission">Our mission</Item>
             <Item href="/about#team">Team</Item>
             <Item href="//blog.core.ac.uk">Blog</Item>
             <Item href="/faq">FAQs</Item>
             <Item href="/contact">Contact us</Item>
           </Group>
-          <Group
-            id="community"
-            label="Community governance"
-            tag="li"
-            labelTag="a"
-          >
+          <Group id="community" label="Community governance" tag="li">
             <Item href="/governance" className={styles.communitiesMenuItem}>
               Governance
             </Item>
             <Item href="/governance/advisory">Advisory Board</Item>
             <Item href="/governance/supporters">Board of supporters</Item>
             <Item href="/governance/research">Research network</Item>
           </Group>
-          <Group id="innovations" label="Innovations" tag="li" labelTag="a">
+          <Group id="innovations" label="Innovations" tag="li">
             <Item href="/about/research-outputs">Our research</Item>
             <Item href="/innovations/labs">CORE Labs</Item>
           </Group>

diff --git a/src/modules/header/styles.css b/src/modules/header/styles.css
@@ -222,6 +222,7 @@
   font-size: .875rem;
   font-weight: 400;
   color: hsl(var(--component-color) / var(--component-disabled));
+  text-align: start;
   letter-spacing: .01em;
 }
 
@@ -430,19 +431,19 @@
       flex-direction: row;
       width: max-content;
       max-height: 20rem;
-      gap: 16px;
+      gap: 24px;
+      padding: 10px;
     }
   }
 }
 
 .member-menu-item  {
-  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: max-content;
-  min-width: 172px;
+  min-width: 215px;
   height: 68px;
   padding: .5rem;
   margin-top: 1rem;
@@ -452,13 +453,6 @@
 }
 
 
-.member-menu-text {
-  position: absolute;
-  top: 50%;
-  width: 100%;
-  transform: translate(-50%, -50%);
-}
-
 /* search item styles */
 .search-bar-item {
   --app-bar-padding-y: 0;