From 51b66eb85b3003996ac2414757ae62ee7ba80ce5 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Tue, 18 Mar 2025 21:29:13 +0100
Subject: [PATCH] feat: improved tabs

---
 src/views/Profile.vue | 109 ++++++++++++++++--------------------------
 1 file changed, 41 insertions(+), 68 deletions(-)

diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index bec4c8f..521a31e 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -17,40 +17,40 @@
       <div v-if="loadstate === 'loaded'" class="flex flex-wrap">
         <div class="w-full">
           <div class="flex flex-wrap flex-col w-full tabs">
-            <div class="flex lg:flex-wrap flex-row lg:space-x-2 justify-center">
-              <div class="flex-none">
-                <button @click="() => {
-                  state.activetab = 'profile';
-                }
-                " :class="{
-                  'tab-active border-b-2 font-medium border-blue-500':
-                    state.activetab === 'profile',
-                }" class="tab tab-underline cursor-pointer py-4 px-6 block" type="button">
-                  {{ $t("profile") }}
-                </button>
-              </div>
-              <div class="flex-none">
-                <button @click="() => {
-                  state.activetab = 'laptimes';
-                }
-                " :class="{
-                  'tab-active border-b-2 font-medium border-blue-500':
-                    state.activetab === 'laptimes',
-                }" class="tab tab-underline cursor-pointer py-4 px-6 block" type="button">
-                  {{ $t("lap_times") }}
-                </button>
-              </div>
-              <div class="flex-none">
-                <button @click="() => {
-                  state.activetab = 'sponsorings';
-                }
-                " :class="{
-                  'tab-active border-b-2 font-medium border-blue-500':
-                    state.activetab === 'sponsorings',
-                }" class="tab tab-underline cursor-pointer py-4 px-6 block" type="button">
-                  {{ $t("sponsoring") }}
-                </button>
-              </div>
+            <div class="grid grid-cols-3 text-center gap-1">
+              <button @click="() => {
+                state.activetab = 'profile';
+              }
+              " :class="{
+                'tab-active font-medium bg-blue-600 hover:bg-blue-700 text-white':
+                  state.activetab === 'profile',
+                'bg-neutral-200':
+                  state.activetab !== 'profile',
+              }" class="cursor-pointer rounded-md p-2 py-3 md:py-4 md:px-6 block" type="button">
+                {{ $t("profile") }}
+              </button>
+              <button @click="() => {
+                state.activetab = 'laptimes';
+              }
+              " :class="{
+                'tab-active font-medium bg-blue-600 hover:bg-blue-700 text-white':
+                  state.activetab === 'laptimes',
+                'bg-neutral-200':
+                  state.activetab !== 'laptimes',
+              }" class="cursor-pointer rounded-md p-2 py-3 md:py-4 md:px-6 block" type="button">
+                {{ $t("lap_times") }}
+              </button>
+              <button @click="() => {
+                state.activetab = 'sponsorings';
+              }
+              " :class="{
+                'tab-active font-medium bg-blue-600 hover:bg-blue-700 text-white':
+                  state.activetab === 'sponsorings',
+                'bg-neutral-200':
+                  state.activetab !== 'sponsorings',
+              }" class="cursor-pointer rounded-md p-2 py-3 md:py-4 md:px-6 block" type="button">
+                {{ $t("sponsoring") }}
+              </button>
             </div>
             <div v-if="state.activetab === 'profile'" class="tab-content block">
               <div class="w-full mx-auto">
@@ -58,23 +58,9 @@
                   <div class="flex flex-wrap w-full">
                     <div class="w-full">
                       <div v-if="state.delete_active === false">
-                        <button type="button" class="
-                        mt-2
-focus:border-black focus:ring-2 focus:ring-black
-text-white text-base md:text-sm
-py-3.5
-px-5
-md:py-2.5
-md:px-5
-rounded-md
-bg-blue-500
-hover:bg-blue-600 hover:shadow-lg
-w-full
-md:w-auto
-cursor-pointer
-mb-1
-md:mr-1
-              " @click="get_certificate">
+                        <button type="button"
+                          class="mt-2 focus:border-black focus:ring-2 focus:ring-black text-white text-base md:text-sm py-3.5 px-5 md:py-2.5 md:px-5 rounded-md bg-blue-600 hover:bg-blue-700 hover:shadow-lg w-full md:w-auto cursor-pointer mb-1 md:mr-1"
+                          @click="get_certificate">
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                             class="inline h-4 align-sub">
@@ -89,22 +75,9 @@ md:mr-1
                       <div>
                         <div class="text-lg">{{ $t("registrationcode") }}</div>
                         <img class="w-full md:w-auto mb-2 bg-white p-2" alt="Registrierungscode" :src="state.barcode" />
-                        <button type="button" class="
-focus:border-black focus:ring-2 focus:ring-black
-text-white text-base md:text-sm
-py-3.5
-px-5
-md:py-2.5
-md:px-5
-rounded-md
-bg-blue-500
-hover:bg-blue-600 hover:shadow-lg
-w-full
-md:w-auto
-cursor-pointer
-mb-1
-md:mr-1
-              " @click="get_registration">
+                        <button type="button"
+                          class="focus:border-black focus:ring-2 focus:ring-black text-white text-base md:text-sm py-3.5 px-5 md:py-2.5 md:px-5 rounded-md bg-blue-600 hover:bg-blue-700 hover:shadow-lg w-full md:w-auto cursor-pointer mb-1 md:mr-1"
+                          @click="get_registration">
                           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                             class="inline h-4 align-sub">
@@ -128,7 +101,7 @@ md:mr-1
                 </div>
                 <div v-if="state.delete_active === true">
                   <button type="button"
-                    class="focus:border-black focus:ring-2 focus:ring-black text-white text-base md:text-sm py-3.5 px-5 md:py-2.5 md:px-5 rounded-md mb-1 md:mb-auto w-full md:w-auto cursor-pointer bg-blue-500 hover:bg-blue-600 hover:shadow-lg"
+                    class="focus:border-black focus:ring-2 focus:ring-black text-white text-base md:text-sm py-3.5 px-5 md:py-2.5 md:px-5 rounded-md mb-1 md:mb-auto w-full md:w-auto cursor-pointer bg-blue-600 hover:bg-blue-700 hover:shadow-lg"
                     @click="() => {
                       state.delete_active = false;
                     }