[#1584] Fix active indicator tabs styles

akvo · Sep 14, 2023 · 9f402fc · 9f402fc
1 parent 0675c52
commit 9f402fc
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/frontend/src/components/location-dropdown/style.module.scss b/frontend/src/components/location-dropdown/style.module.scss
@@ -5,6 +5,6 @@
   width: 400px;
   padding: 20px;
   :global(.ant-tabs) {
-    margin-top: 4px;
+    background-color: $primaryGrey;
   }
 }
diff --git a/frontend/src/components/select/country-transnational-filter.jsx b/frontend/src/components/select/country-transnational-filter.jsx
@@ -110,7 +110,7 @@ const CountryTransnationalFilter = ({
 
   return (
     <Tabs
-      type="card"
+      type="line"
       className="country-filter-tab"
       onChange={handleChangeLocationTab}
     >

diff --git a/frontend/src/styles/tabs.scss b/frontend/src/styles/tabs.scss
@@ -2,7 +2,6 @@
 .ant-dropdown,
 .ant-modal-root {
   .ant-tabs:not(.ant-tabs-left) {
-    background-color: $primaryGrey;
     box-shadow: 0px 0px 4px rgb(0 0 0 / 25%);
     border-radius: 4px;
     &.ant-tabs-top {
@@ -12,15 +11,15 @@
     }
     .ant-tabs-nav-list {
       .ant-tabs-tab {
-        flex: 0 0 50%;
-        margin-left: 0;
+        display: flex;
+        padding: 16px 24px 12px 24px;
+        align-items: center;
+        gap: 8px;
         border: none;
-        padding: 16px 24px;
-        border-top-left-radius: 4px;
-        border-top-right-radius: 4px;
-        border-bottom: 4px solid $primaryPurple3;
+        border-radius: 4px;
+        background-color: $primaryGrey;
+        margin-bottom: 8px;
         &.ant-tabs-tab-active {
-          border-bottom: 4px solid $primaryPurple7;
           .ant-tabs-tab-btn {
             color: $primaryDarkBlue;
           }
@@ -31,6 +30,19 @@
           font-weight: 500;
           color: $primaryDarkBlue;
         }
+        &:focus {
+          border: 2px solid $primaryPurple7;
+        }
+      }
+      .ant-tabs-tab + .ant-tabs-tab {
+        margin-left: 16px;
+      }
+      .ant-tabs-ink-bar {
+        background: $primaryPurple7;
+        border-radius: 2px 2px 0px 0px;
+        &:focus {
+          background: transparent;
+        }
       }
     }
     .ant-tabs-content-holder {
@@ -46,8 +58,8 @@
       }
     }
     & > .ant-tabs-nav {
-      .ant-tabs-nav-list {
-        width: 100%;
+      .ant-tabs-ink-bar {
+        height: 4px;
       }
     }
   }