From e58832d43a4cf1bee8f95d31f4d0f9893f570d68 Mon Sep 17 00:00:00 2001
From: Antoine Nguyen <tonio@ngyn.org>
Date: Tue, 16 Jul 2024 13:31:41 +0200
Subject: [PATCH] Align with vuetify changes

---
 frontend/src/views/account/SettingsView.vue   | 27 +++++++++----------
 frontend/src/views/admin/ParametersView.vue   | 10 +++----
 .../src/views/admin/domains/DomainView.vue    | 16 +++++------
 3 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/frontend/src/views/account/SettingsView.vue b/frontend/src/views/account/SettingsView.vue
index f2f6f678d..4669c0e35 100644
--- a/frontend/src/views/account/SettingsView.vue
+++ b/frontend/src/views/account/SettingsView.vue
@@ -20,28 +20,28 @@
         {{ $gettext('API access') }}
       </v-tab>
     </v-tabs>
-    <v-window v-model="tab">
-      <v-window-item value="profile">
+    <v-tabs-window v-model="tab">
+      <v-tabs-window-item value="profile">
         <ProfileForm />
-      </v-window-item>
-      <v-window-item value="security">
+      </v-tabs-window-item>
+      <v-tabs-window-item value="security">
         <TotpAuthForm />
         <FidoAuthForm />
         <BackupCodeAuthForm />
-      </v-window-item>
-      <v-window-item v-if="authStore.userHasMailbox" value="forward">
+      </v-tabs-window-item>
+      <v-tabs-window-item v-if="authStore.userHasMailbox" value="forward">
         <ForwardForm />
-      </v-window-item>
-      <v-window-item v-if="authStore.userHasMailbox" value="autoreply">
+      </v-tabs-window-item>
+      <v-tabs-window-item v-if="authStore.userHasMailbox" value="autoreply">
         <AutoReplyForm />
-      </v-window-item>
-      <v-window-item
+      </v-tabs-window-item>
+      <v-tabs-window-item
         v-if="authStore.authUser.role === 'SuperAdmins'"
         value="api"
       >
         <APISetupForm />
-      </v-window-item>
-    </v-window>
+      </v-tabs-window-item>
+    </v-tabs-window>
   </div>
 </template>
 
@@ -64,7 +64,4 @@ const tab = ref()
 .v-toolbar {
   background-color: #f7f8fa !important;
 }
-.v-tabs {
-  background-color: #f7f8fa !important;
-}
 </style>
diff --git a/frontend/src/views/admin/ParametersView.vue b/frontend/src/views/admin/ParametersView.vue
index 077a9b3f1..6998a9cb4 100644
--- a/frontend/src/views/admin/ParametersView.vue
+++ b/frontend/src/views/admin/ParametersView.vue
@@ -4,7 +4,7 @@
       <v-toolbar-title>{{ title }}</v-toolbar-title>
     </v-toolbar>
 
-    <v-tabs v-model="active">
+    <v-tabs v-model="active" bg-color="white">
       <v-tab
         v-for="(element, index) in displayableElements"
         :key="index"
@@ -14,8 +14,8 @@
         {{ element.label }}
       </v-tab>
     </v-tabs>
-    <v-window v-model="active">
-      <v-window-item
+    <v-tabs-window v-model="active">
+      <v-tabs-window-item
         v-for="element in displayableElements"
         :key="element.label"
       >
@@ -72,8 +72,8 @@
             </template>
           </v-card-text>
         </v-card>
-      </v-window-item>
-    </v-window>
+      </v-tabs-window-item>
+    </v-tabs-window>
     <v-btn
       icon="mdi-content-save"
       class="ma-5"
diff --git a/frontend/src/views/admin/domains/DomainView.vue b/frontend/src/views/admin/domains/DomainView.vue
index 5d873dc11..4f22feb10 100644
--- a/frontend/src/views/admin/domains/DomainView.vue
+++ b/frontend/src/views/admin/domains/DomainView.vue
@@ -27,8 +27,8 @@
         {{ $gettext('DMARC') }}
       </v-tab>
     </v-tabs>
-    <v-window v-model="tab">
-      <v-window-item>
+    <v-tabs-window v-model="tab">
+      <v-tabs-window-item>
         <v-row>
           <v-col cols="12" md="6">
             <DomainSummary :domain="domain" />
@@ -49,8 +49,8 @@
             />
           </v-col>
         </v-row>
-      </v-window-item>
-      <v-window-item>
+      </v-tabs-window-item>
+      <v-tabs-window-item>
         <v-row>
           <v-col cols="12">
             <TimeSerieChart
@@ -69,11 +69,11 @@
             />
           </v-col>
         </v-row>
-      </v-window-item>
-      <v-window-item>
+      </v-tabs-window-item>
+      <v-tabs-window-item>
         <DmarcAligmentChart :domain="domain" />
-      </v-window-item>
-    </v-window>
+      </v-tabs-window-item>
+    </v-tabs-window>
   </div>
 </template>