CORE-5093: update design

oacore · Jan 31, 2025 · fb9601f · fb9601f
1 parent 5d167b7
commit fb9601f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 13 deletions.
diff --git a/src/modules/header/header.jsx b/src/modules/header/header.jsx
@@ -245,7 +245,7 @@ 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>
@@ -257,7 +257,6 @@ const Header = ({ children, className, id, ...passProps }) => {
             id="community"
             label="Community governance"
             tag="li"
-            labelTag="a"
           >
             <Item href="/governance" className={styles.communitiesMenuItem}>
               Governance
@@ -266,7 +265,7 @@ const Header = ({ children, className, id, ...passProps }) => {
             <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
@@ -223,6 +223,7 @@
   font-weight: 400;
   color: hsl(var(--component-color) / var(--component-disabled));
   letter-spacing: .01em;
+  text-align: start;
 }
 
 .group-list {
@@ -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;