From 30b734712cd7f1cda2b09cc82640680e92501ecb Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Tue, 5 Jul 2022 16:47:55 +0200
Subject: [PATCH] UI: Style tabs component

---
 web/app/src/components/TabsWrapper.vue | 31 ++++++++++++++++----------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/web/app/src/components/TabsWrapper.vue b/web/app/src/components/TabsWrapper.vue
index bf6f8aa8..0e873e88 100644
--- a/web/app/src/components/TabsWrapper.vue
+++ b/web/app/src/components/TabsWrapper.vue
@@ -8,38 +8,45 @@ provide("selectedTitle", selectedTitle);
 </script>
 
 <template>
-  <div>
+  <nav>
     <ul class="tabs-header">
       <li
         v-for="title in tabTitles"
         :key="title"
         class="tab-item"
-        :class="{ selected: selectedTitle === title }"
+        :class="{ active: selectedTitle === title }"
         @click="selectedTitle = title"
       >
         {{ title }}
       </li>
     </ul>
     <slot />
-  </div>
+  </nav>
 </template>
 
 <style scoped>
+nav {
+  margin: var(--spacer-sm) 0;
+}
+
 .tabs-header {
-  list-style: none;
-  padding: 0;
-  margin: 0;
+  align-items: center;
   display: flex;
-  justify-content: space-between;
-  gap: 5px;
+  gap: var(--spacer);
+  list-style: none;
 }
 .tab-item {
-  flex: 1;
-  padding: 5px 0;
+  border-bottom: var(--border-width) solid transparent;
+  color: var(--color-text-hint);
   cursor: pointer;
+  padding: var(--spacer-sm) 0;
+  transition: border-color var(--transition-speed) ease-in-out, color var(--transition-speed) ease-in-out;
   user-select: none;
 }
-.tab-item.selected {
-  border-bottom: 1px solid white;
+
+.tab-item:hover,
+.tab-item.active {
+  border-color: var(--color-text);
+  color: var(--color-text);
 }
 </style>