From a81db4d69bdaff0c1ec79fa85e9263d4acc46de0 Mon Sep 17 00:00:00 2001
From: djanelle-mit <djanelle@mit.edu>
Date: Mon, 10 Nov 2025 11:54:52 -0500
Subject: [PATCH] Styling to result type tabs to match designs and markup
 treated as navigation

---
 app/assets/stylesheets/partials/_search.scss  | 53 +++++++++++++++++--
 .../stylesheets/partials/_variables.scss      |  1 +
 app/views/search/_source_tabs.html.erb        | 20 ++++---
 3 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/partials/_search.scss b/app/assets/stylesheets/partials/_search.scss
index b40244b1..77c66203 100644
--- a/app/assets/stylesheets/partials/_search.scss
+++ b/app/assets/stylesheets/partials/_search.scss
@@ -197,7 +197,52 @@
   color: #fff;
 }
 
-/* temp style to visualize active tab. Save us from this Dave! */
-#tabs .active{
-  background-color: red;
-}
+/* =========== */
+/* New Tab Bar */
+/* =========== */
+
+#tabs {
+  margin-top: 0;
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    gap: 4px;
+  }
+
+  a {
+    padding: 12px 20px 16px;
+    background-color: transparent;
+    color: $color-text-oncolor;
+    display: inline-block;
+    font-weight: $fw-medium;
+
+    border: 2px solid transparent;
+    border-bottom: 0;    
+
+    text-decoration: underline;
+    text-decoration-color: $color-red-500;
+    text-underline-offset: 0.5rem;
+
+    &:hover {
+      border-color: $color-gray-700;
+      background-color: $color-gray-900;
+    }
+
+    &.active {
+      background-color: $color-white;
+      color: $color-text-primary;
+      text-decoration: none;
+
+      &:hover {
+        color: $color-text-primary;
+        border-color: transparent;
+      }
+    }
+
+
+  }
+
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/partials/_variables.scss b/app/assets/stylesheets/partials/_variables.scss
index e5aa673c..8b2b9c19 100644
--- a/app/assets/stylesheets/partials/_variables.scss
+++ b/app/assets/stylesheets/partials/_variables.scss
@@ -41,6 +41,7 @@ $color-text-primary: $color-gray-950;
 $color-text-secondary: $color-gray-700;
 $color-text-placeholder: $color-gray-500;
 $color-text-disabled: $color-gray-400;
+$color-text-oncolor: $color-white;
 
 // FOCUS
 $color-focus: $color-cyan-700;
diff --git a/app/views/search/_source_tabs.html.erb b/app/views/search/_source_tabs.html.erb
index e164ebf6..7f02c4cf 100644
--- a/app/views/search/_source_tabs.html.erb
+++ b/app/views/search/_source_tabs.html.erb
@@ -1,10 +1,14 @@
   <!-- Tab Navigation -->
-  <div id="tabs" class="tab-navigation top-space">
-    <%= link_to "Primo", results_path(params.permit(:q, :per_page, :booleanType, :tab).merge(tab: 'primo')),
-                class: "tab-link #{'active' if @active_tab == 'primo'}", 
-                data: { turbo_frame: "search-results", turbo_action: "advance" } %>
-    <%= link_to "TIMDEX", results_path(params.permit(:q, :per_page, :booleanType, :tab).merge(tab: 'timdex')),
-                class: "tab-link #{'active' if @active_tab == 'timdex'}", 
-                data: { turbo_frame: "search-results", turbo_action: "advance" } %>
-  </div>
+  <nav id="tabs" class="tab-navigation" aria-label="Result type navigation">
+    <ul>
+      <li>
+        <%= link_to "Primo", results_path(params.permit(:q, :per_page, :booleanType, :tab).merge(tab: 'primo')),
+                class: "tab-link #{'active' if @active_tab == 'primo'}",
+                data: { turbo_frame: "search-results", turbo_action: "advance" } %></li>  
+      <li>
+        <%= link_to "TIMDEX", results_path(params.permit(:q, :per_page, :booleanType, :tab).merge(tab: 'timdex')),
+                class: "tab-link #{'active' if @active_tab == 'timdex'}",
+                data: { turbo_frame: "search-results", turbo_action: "advance" } %></li>
+    </ul>
+  </nav>
   
\ No newline at end of file