From 0f2e8486cd723c68701a35f63437dcc804be4ea7 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Wed, 27 Aug 2025 02:23:06 +0200
Subject: [PATCH] UI: change tablist to reflect fixmycity-design, see #2107

---
 public/css/index-tailwind-output.css   | 40 ++++++++++++++++++++++++
 src/UI/Base/TabbedGroup.svelte         | 35 ++++++---------------
 src/UI/Wikipedia/WikipediaPanel.svelte | 13 ++------
 src/index.css                          | 42 ++++++++++++++++++++++++++
 4 files changed, 93 insertions(+), 37 deletions(-)

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 34744bb80..eff0449cf 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -5444,6 +5444,46 @@ button.unstyled, .button-unstyled button {
   padding: 0;
 }
 
+/****** Tablist elements *****/
+
+.tablist {
+  margin: 0.25rem;
+  padding: 0.5rem;
+  border: 2px dashed var(--button-background-hover);
+  border-radius: 0.5rem;
+  display: flex;
+  justify-content: center;
+}
+
+.tab {
+  border: unset;
+  border-radius: 0;
+  transition: all;
+  color: var(--foreground-color);
+  border-bottom: 2px solid var(--foreground-color);
+  font-weight: bold;
+  margin: 0.25rem;
+  padding: 0.25rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.tab-selected {
+  opacity: 100%;
+  background: var(--interactive-background);
+}
+
+/* Actually used, don't remove*/
+
+.tab-unselected {
+  background: #00000000 !important;
+  opacity: 60%;
+}
+
+.tab-unselected:hover {
+  background: var(--interactive-background);
+}
+
 /******* Other input elements ******/
 
 .hover-alert:hover {
diff --git a/src/UI/Base/TabbedGroup.svelte b/src/UI/Base/TabbedGroup.svelte
index 586f7daf8..8c692740a 100644
--- a/src/UI/Base/TabbedGroup.svelte
+++ b/src/UI/Base/TabbedGroup.svelte
@@ -43,11 +43,11 @@
       }
     }}
   >
-    <div class="interactive sticky top-0 flex items-center justify-between">
-      <TabList class="flex flex-wrap">
+    <div class="tablist sticky top-0 flex items-center justify-center">
+      <TabList class="flex items-center justify-center">
         {#if $$slots.title0}
           <Tab
-            class={({ selected }) => twJoin("tab", selected && "primary", !$condition0 && "hidden")}
+            class={({ selected }) => twJoin("tab", selected ? "tab-selected": "tab-unselected", !$condition0 && "hidden")}
           >
             <div bind:this={tabElements[0]} class="flex">
               <slot name="title0">Tab 0</slot>
@@ -56,7 +56,7 @@
         {/if}
         {#if $$slots.title1}
           <Tab
-            class={({ selected }) => twJoin("tab", selected && "primary", !$condition1 && "hidden")}
+            class={({ selected }) => twJoin("tab",  selected ? "tab-selected": "tab-unselected", !$condition1 && "hidden")}
           >
             <div bind:this={tabElements[1]} class="flex">
               <slot name="title1" />
@@ -65,7 +65,7 @@
         {/if}
         {#if $$slots.title2}
           <Tab
-            class={({ selected }) => twJoin("tab", selected && "primary", !$condition2 && "hidden")}
+            class={({ selected }) => twJoin("tab",  selected ? "tab-selected": "tab-unselected", !$condition2 && "hidden")}
           >
             <div bind:this={tabElements[2]} class="flex">
               <slot name="title2" />
@@ -74,7 +74,7 @@
         {/if}
         {#if $$slots.title3}
           <Tab
-            class={({ selected }) => twJoin("tab", selected && "primary", !$condition3 && "hidden")}
+            class={({ selected }) => twJoin("tab",  selected ? "tab-selected": "tab-unselected", !$condition3 && "hidden")}
           >
             <div bind:this={tabElements[3]} class="flex">
               <slot name="title3" />
@@ -83,7 +83,7 @@
         {/if}
         {#if $$slots.title4}
           <Tab
-            class={({ selected }) => twJoin("tab", selected && "primary", !$condition4 && "hidden")}
+            class={({ selected }) => twJoin("tab",  selected ? "tab-selected": "tab-unselected", !$condition4 && "hidden")}
           >
             <div bind:this={tabElements[4]} class="flex">
               <slot name="title4" />
@@ -92,7 +92,7 @@
         {/if}
         {#if $$slots.title5}
           <Tab
-            class={({ selected }) => twJoin("tab", selected && "primary", !$condition5 && "hidden")}
+            class={({ selected }) => twJoin("tab",  selected ? "tab-selected": "tab-unselected", !$condition5 && "hidden")}
           >
             <div bind:this={tabElements[5]} class="flex">
               <slot name="title5" />
@@ -101,7 +101,7 @@
         {/if}
         {#if $$slots.title6}
           <Tab
-            class={({ selected }) => twJoin("tab", selected && "primary", !$condition6 && "hidden")}
+            class={({ selected }) => twJoin("tab",  selected ? "tab-selected": "tab-unselected", !$condition6 && "hidden")}
           >
             <div bind:this={tabElements[6]} class="flex">
               <slot name="title6" />
@@ -167,19 +167,6 @@
     height: calc(100% - 2rem);
   }
 
-  :global(.tab) {
-    margin: 0.25rem;
-    padding: 0.25rem;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    border-radius: 1rem;
-  }
-
-  :global(.tab .flex) {
-    align-items: center;
-    gap: 0.25rem;
-  }
-
   :global(.tab span|div) {
     align-items: center;
     gap: 0.25rem;
@@ -190,8 +177,4 @@
     fill: var(--interactive-contrast);
   }
 
-  :global(.tab-unselected) {
-    background-color: var(--background-color) !important;
-    color: var(--foreground-color) !important;
-  }
 </style>
diff --git a/src/UI/Wikipedia/WikipediaPanel.svelte b/src/UI/Wikipedia/WikipediaPanel.svelte
index ac9e710d5..43db3d34a 100644
--- a/src/UI/Wikipedia/WikipediaPanel.svelte
+++ b/src/UI/Wikipedia/WikipediaPanel.svelte
@@ -31,9 +31,9 @@
     <WikipediaArticle wikipediaDetails={_wikipediaStores[0]} />
   {:else}
     <TabGroup>
-      <TabList>
+      <TabList class="tablist">
         {#each _wikipediaStores as store (store.tag)}
-          <Tab class={({ selected }) => (selected ? "tab-selected" : "tab-unselected")}>
+          <Tab class={({ selected }) => ("tab "+ (selected ? "tab-selected" : "tab-unselected"))}>
             <WikipediaTitle wikipediaDetails={store} />
           </Tab>
         {/each}
@@ -51,14 +51,5 @@
 
 <style>
   /* Actually used, don't remove*/
-  .tab-selected {
-    background-color: rgb(59 130 246);
-    color: rgb(255 255 255);
-  }
 
-  /* Actually used, don't remove*/
-  .tab-unselected {
-    background-color: rgb(255 255 255);
-    color: rgb(0 0 0);
-  }
 </style>
diff --git a/src/index.css b/src/index.css
index d1dc9a284..0fd70652d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -293,6 +293,48 @@ button.unstyled, .button-unstyled button {
     padding: 0;
 }
 
+/****** Tablist elements *****/
+
+.tablist {
+    margin: 0.25rem;
+    padding: 0.5rem;
+    border: 2px dashed var(--button-background-hover);
+    border-radius: 0.5rem;
+    display: flex;
+    justify-content: center;
+
+}
+
+.tab {
+    border: unset;
+    border-radius: 0;
+    transition: all;
+    color: var(--foreground-color);
+    border-bottom: 2px solid var(--foreground-color);
+    font-weight: bold;
+
+    margin: 0.25rem;
+    padding: 0.25rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+
+}
+
+.tab-selected {
+    opacity: 100%;
+    background: var(--interactive-background);
+}
+
+/* Actually used, don't remove*/
+.tab-unselected {
+    background: #00000000 !important;
+    opacity: 60%;
+}
+
+.tab-unselected:hover {
+    background: var(--interactive-background);
+}
+
 /******* Other input elements ******/
 
 .hover-alert:hover {