🎨 feat(orga): Improve navigation tabs in mission page

1024pix · Dec 13, 2024 · d18ab3c · d18ab3c
1 parent f2deda5
commit d18ab3c
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 34 deletions.
diff --git a/orga/app/components/mission/navigation.gjs b/orga/app/components/mission/navigation.gjs
@@ -2,19 +2,12 @@ import { LinkTo } from '@ember/routing';
 import { t } from 'ember-intl';
 
 <template>
-  <nav class="panel navbar campaign-list-header__tabs" aria-label={{t "pages.missions.mission.tabs.aria-label"}}>
-    <ul>
-      <li>
-        <LinkTo @route="authenticated.missions.mission.activities" class="navbar-item">
-          {{t "pages.missions.mission.tabs.activities"}}
-        </LinkTo>
-      </li>
-
-      <li>
-        <LinkTo @route="authenticated.missions.mission.results" class="navbar-item">
-          {{t "pages.missions.mission.tabs.results"}}
-        </LinkTo>
-      </li>
-    </ul>
+  <nav class="campaign-list-header__tabs" aria-label={{t "pages.missions.mission.tabs.aria-label"}}>
+    <LinkTo @route="authenticated.missions.mission.activities" class="navbar-item">
+      {{t "pages.missions.mission.tabs.activities"}}
+    </LinkTo>
+    <LinkTo @route="authenticated.missions.mission.results" class="navbar-item">
+      {{t "pages.missions.mission.tabs.results"}}
+    </LinkTo>
   </nav>
 </template>
diff --git a/orga/app/styles/components/campaign/list-header.scss b/orga/app/styles/components/campaign/list-header.scss
@@ -3,7 +3,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    
+
     @include device-is('tablet') {
       flex-direction: row;
       margin: 1em 0 2.4em;
@@ -18,29 +18,26 @@
   }
 
   &__tabs {
+    display: flex;
+    gap: 8px;
+    width: fit-content;
     margin-bottom: 20px;
-
-    ul {
-      display: flex;
-      width: 100%;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
-
-    ul li {
-      flex-grow: 1;
-    }
+    padding: var(--pix-spacing-2x);
+    background-color: var(--pix-neutral-0);
+    border-radius: 8px;
 
     .navbar-item {
-      height: 100%;
-    }    
+      padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
+      font-weight: var(--pix-font-normal);
+      border-bottom: none;
+      border-radius: 8px;
 
-    @include device-is('tablet') {
-      ul li {
-        flex-grow: inherit;
+      &.active {
+        color: inherit;
+        font-weight: var(--pix-font-medium);
+        background: var(--pix-orga-50);
+        border-bottom: none;
       }
     }
-
   }
 }
diff --git a/orga/app/styles/pages/authenticated/mission.scss b/orga/app/styles/pages/authenticated/mission.scss
@@ -80,8 +80,8 @@
   @extend %pix-body-l;
 
   display: grid;
-  gap: var(--pix-spacing-8x);
   grid-template-columns: 2fr 1fr;
+  gap: var(--pix-spacing-8x);
   margin-top: var(--pix-spacing-8x);
 
   h2 {