Align with vuetify changes

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>

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"

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>