From 674eaa5eebaf9c855c50ad2b4f6c1e4997d0b3cf Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Fri, 9 May 2025 10:17:59 +0200
Subject: [PATCH] Use new button variants

---
 src/components/AudioLayout.vue                 |  2 +-
 src/components/Chat.vue                        |  8 ++++----
 src/components/CopyLink.vue                    |  4 ++--
 src/components/Create.vue                      |  2 +-
 src/components/CreateChannel.vue               |  6 +++---
 src/components/CreateFileDrop.vue              |  6 +++---
 src/components/CreatePollDialog.vue            | 13 +++++++------
 src/components/CreateRoom.vue                  | 10 +++++-----
 src/components/GetLink.vue                     |  8 ++++----
 src/components/Home.vue                        |  2 +-
 src/components/InteractiveAuth.vue             |  8 ++++----
 src/components/Invite.vue                      |  2 +-
 src/components/LeaveRoomDialog.vue             |  5 ++---
 src/components/Login.vue                       |  6 +++---
 src/components/LogoutRoomDialog.vue            |  5 ++---
 src/components/MessageRetentionDialog.vue      |  2 +-
 src/components/MoreMenuPopup.vue               |  2 +-
 src/components/Profile.vue                     | 17 ++++++++---------
 src/components/ProfileInfoPopup.vue            |  2 +-
 src/components/PurgeRoomDialog.vue             | 10 ++++------
 src/components/QuoteView.vue                   |  4 ++--
 src/components/ReportRoomDialog.vue            |  5 ++---
 src/components/RoomExport.vue                  |  2 +-
 src/components/RoomInfo.vue                    | 18 +++++++++---------
 src/components/RoomList.vue                    |  4 ++--
 src/components/SelectLanguageDialog.vue        |  2 +-
 src/components/StickerPickerBottomSheet.vue    |  2 +-
 src/components/UnsupportedBrowserAlert.vue     |  2 +-
 src/components/UserProfileDialog.vue           | 10 +++++-----
 src/components/VoiceRecorder.vue               |  2 +-
 .../welcome_headers/WelcomeHeaderChannel.vue   |  4 ++--
 .../welcome_headers/WelcomeHeaderRoom.vue      |  4 ++--
 32 files changed, 87 insertions(+), 92 deletions(-)

diff --git a/src/components/AudioLayout.vue b/src/components/AudioLayout.vue
index 6f2fc73..9e110fb 100644
--- a/src/components/AudioLayout.vue
+++ b/src/components/AudioLayout.vue
@@ -69,7 +69,7 @@
 
     <div class="load-later">
       <div style="align-self: flex-end;">
-        <v-btn class="clap-button clickable" text elevation="0" v-blur @click.stop="clapButtonClicked()">👏</v-btn>
+        <v-btn class="clap-button clickable" variant="text" elevation="0" v-blur @click.stop="clapButtonClicked()">👏</v-btn>
         <v-btn icon="mic" :class="{'mic-button': true, 'dimmed': !canRecordAudio}" ref="mic_button" theme="dark" size="small" elevation="0" v-blur
           @click.stop="micButtonClicked()">
         </v-btn>
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 666ee0c..317e6b9 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -293,10 +293,10 @@
               <v-spacer>
                 <div v-if="currentSendError">{{ currentSendError }}</div>
               </v-spacer>
-              <v-btn color="primary" text @click="cancelSendAttachment" id="btn-attachment-cancel" :disabled="sendingStatus != sendStatuses.SENDING && sendingStatus != sendStatuses.INITIAL">
+              <v-btn color="primary" variant="text" @click="cancelSendAttachment" id="btn-attachment-cancel" :disabled="sendingStatus != sendStatuses.SENDING && sendingStatus != sendStatuses.INITIAL">
                 {{ $t("menu.cancel") }}
               </v-btn>
-              <v-btn id="btn-attachment-send" color="primary" text @click="sendAttachment(attachmentCaption)"
+              <v-btn id="btn-attachment-send" color="primary" variant="text" @click="sendAttachment(attachmentCaption)"
                 v-if="currentSendShowSendButton" :disabled="currentSendShowSendButton && sendingStatus != sendStatuses.INITIAL">{{ $t("menu.send") }}</v-btn>
             </v-card-actions>
            </template>
@@ -329,14 +329,14 @@
         <v-divider></v-divider>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn id="btn-ok" color="primary" text @click="showNoRecordingAvailableDialog = false">{{
+          <v-btn id="btn-ok" color="primary" variant="text" @click="showNoRecordingAvailableDialog = false">{{
           $t("menu.ok")
           }}</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
 
-    <CreatePollDialog :show="showCreatePollDialog" @close="showCreatePollDialog = false" />
+    <CreatePollDialog v-model="showCreatePollDialog" :room="room" />
 
     <UserProfileDialog
       v-model="showProfileDialog"
diff --git a/src/components/CopyLink.vue b/src/components/CopyLink.vue
index 8da2871..acf1a4a 100644
--- a/src/components/CopyLink.vue
+++ b/src/components/CopyLink.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
   <v-expand-transition>
-    <v-card class="ma-3" v-show="locationLink" flat>
+    <v-card class="ma-3" v-show="locationLink" variant="flat">
       <v-container>
         <slot/>
         <v-row cols="12" class="qr-container ma-3">
@@ -28,7 +28,7 @@
             <v-btn
               id="btn-copy-room-link"
               :color="locationLinkCopied ? '#DEE6FF' : 'black'"
-              depressed
+              variant="flat"
               @click.stop="copyRoomLink"
               :class="{'filled-button' : true, 'link-copied-in-place' : locationLinkCopied}"
               >{{ $t(`room_info.${locationLinkCopied ? 'link_copied' : i18nCopyLinkKey}`) }}</v-btn
diff --git a/src/components/Create.vue b/src/components/Create.vue
index 4c71e98..7ab6ad4 100644
--- a/src/components/Create.vue
+++ b/src/components/Create.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="create-root fill-height">
     <div class="mt-4 d-flex flex-row align-center">
-      <v-btn id="btn-back" text class="back-button" v-show="$navigation && $navigation.canPop()" @click.stop="goBack">
+      <v-btn id="btn-back" variant="text" class="back-button" v-show="$navigation && $navigation.canPop()" @click.stop="goBack">
         <v-icon>arrow_back</v-icon>
       </v-btn>
       <YouAre class="flex-grow-1 text-end" v-if="loggedIn" />
diff --git a/src/components/CreateChannel.vue b/src/components/CreateChannel.vue
index a49945e..13e2c45 100644
--- a/src/components/CreateChannel.vue
+++ b/src/components/CreateChannel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="create-root fill-height">
     <div class="mt-4 d-flex flex-row align-center">
-      <v-btn id="btn-back" text class="back-button" v-show="$navigation && $navigation.canPop()" @click.stop="goBack"
+      <v-btn id="btn-back" variant="text" class="back-button" v-show="$navigation && $navigation.canPop()" @click.stop="goBack"
         :disabled="creatingRoom">
         <v-icon>arrow_back</v-icon>
       </v-btn>
@@ -24,7 +24,7 @@
 
           <div class="create-buttons">
             <!-- Create button -->
-            <v-btn :disabled="!formIsValid || creatingRoom" color="#6360F0" depressed @click.stop="handleNext"
+            <v-btn :disabled="!formIsValid || creatingRoom" color="#6360F0" variant="flat" @click.stop="handleNext"
               class="filled-button mt-4">
               <div v-if="creatingRoom" class="text-center">
                 {{ creatingRoomStatus }}
@@ -33,7 +33,7 @@
               </div>
               <span v-else>{{ $t("getlink.next") }}</span>
             </v-btn>
-            <v-btn v-if="!loggedIn" color="black" depressed text @click.stop="goToLoginPage" class="text-button">{{
+            <v-btn v-if="!loggedIn" color="black" variant="flat" @click.stop="goToLoginPage" class="text-button">{{
               $t("menu.login")
               }}</v-btn>
           </div>
diff --git a/src/components/CreateFileDrop.vue b/src/components/CreateFileDrop.vue
index 4babf0a..57c8d2b 100644
--- a/src/components/CreateFileDrop.vue
+++ b/src/components/CreateFileDrop.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="create-root fill-height">
     <div class="mt-4 d-flex flex-row align-center">
-      <v-btn id="btn-back" text class="back-button" v-show="$navigation && $navigation.canPop()" @click.stop="goBack"
+      <v-btn id="btn-back" variant="text" class="back-button" v-show="$navigation && $navigation.canPop()" @click.stop="goBack"
         :disabled="creatingRoom">
         <v-icon>arrow_back</v-icon>
       </v-btn>
@@ -22,7 +22,7 @@
 
           <div class="create-buttons">
             <!-- Create button -->
-            <v-btn :disabled="!formIsValid || creatingRoom" color="#6360F0" depressed @click.stop="handleNext"
+            <v-btn :disabled="!formIsValid || creatingRoom" color="#6360F0" variant="flat" @click.stop="handleNext"
               class="filled-button mt-4">
               <div v-if="creatingRoom" class="text-center">
                 {{ creatingRoomStatus }}
@@ -31,7 +31,7 @@
               </div>
               <span v-else>{{ $t("getlink.next") }}</span>
             </v-btn>
-            <v-btn v-if="!loggedIn" color="black" depressed text @click.stop="goToLoginPage" class="text-button">{{
+            <v-btn v-if="!loggedIn" color="black" variant="flat" @click.stop="goToLoginPage" class="text-button">{{
               $t("menu.login")
               }}</v-btn>
           </div>
diff --git a/src/components/CreatePollDialog.vue b/src/components/CreatePollDialog.vue
index 28d83e7..9e34808 100644
--- a/src/components/CreatePollDialog.vue
+++ b/src/components/CreatePollDialog.vue
@@ -1,5 +1,5 @@
 <template>
- <v-dialog
+  <RoundedDialog
     v-model="showDialog"
     scrollable
     class="ma-0 pa-0"
@@ -9,7 +9,7 @@
     <v-card-title>
       <v-container fluid>
         <div class="room-name no-upper">{{ $t("poll_create.title") }}</div>
-        <v-btn id="btn-close" text class="header-button-right" @click.stop="showDialog = false">
+        <v-btn id="btn-close" icon class="header-button-right" @click.stop="showDialog = false">
           <v-icon>close</v-icon>
         </v-btn>
       </v-container>
@@ -51,7 +51,7 @@
                   :class="{ deletable: pollAnswers.length > 1 }"
                   ref="answerInput"
                 >
-                  <v-btn v-if="pollAnswers.length > 1" icon @click="removeAnswer(index)"><v-icon>delete</v-icon></v-btn>
+                  <v-btn v-if="pollAnswers.length > 1" color="transparent" icon="delete" @click="removeAnswer(index)"></v-btn>
                 </InputControl>
               </v-col>
             </v-row>
@@ -67,7 +67,7 @@
               <v-col cols="auto">
                 <v-btn
                   id="btn-create-poll"
-                  depressed
+                  variant="flat"
                   block
                   class="filled-button publish-button"
                   @click.stop="onCreatePoll()"
@@ -97,12 +97,13 @@
       </v-container>
     </v-card-actions>
   </v-card>
- </v-dialog>
+  </RoundedDialog>
 </template>
 <script>
 import util from "../plugins/utils";
 import InputControl from "./InputControl.vue";
 import RoomDialogBase from "./RoomDialogBase.vue";
+import RoundedDialog from "./RoundedDialog.vue";
 
 export default {
   name: "CreatePollDialog",
@@ -192,7 +193,7 @@ export default {
       return this.pollQuestion && this.pollAnswers.length > 0 && this.pollAnswers.every(a => a.text);
     }
   },
-  components: { InputControl },
+  components: { InputControl, RoundedDialog },
 };
 </script>
 
diff --git a/src/components/CreateRoom.vue b/src/components/CreateRoom.vue
index e04c098..31370fc 100644
--- a/src/components/CreateRoom.vue
+++ b/src/components/CreateRoom.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="create-root fill-height">
     <div class="mt-4 d-flex flex-row align-center">
-      <v-btn id="btn-back" text class="back-button" v-show="$navigation && $navigation.canPop()" @click.stop="goBack"
+      <v-btn id="btn-back" variant="text" class="back-button" v-show="$navigation && $navigation.canPop()" @click.stop="goBack"
         :disabled="creatingRoom">
         <v-icon>arrow_back</v-icon>
       </v-btn>
@@ -18,7 +18,7 @@
             v-on="{ ...roomTopicInputListeners }"></v-text-field>
 
           <!-- Message History (public room) -->
-          <v-card class="ma-0 mt-10" flat>
+          <v-card class="ma-0 mt-10" variant="flat">
             <v-card-text class="with-right-label">
               <div>
                 <div class="paragraph-bold">{{ $t('room_info.message_history') }}</div>
@@ -33,7 +33,7 @@
           <hr color="#ededed" />
 
           <!-- Limit History (message retention) -->
-          <v-card class="ma-0 mt-2" flat>
+          <v-card class="ma-0 mt-2" variant="flat">
             <v-card-text class="with-right-label">
               <div>
                 <div class="paragraph-bold">{{ $t('room_info.message_retention') }}</div>
@@ -51,7 +51,7 @@
           <div class="text-red" v-if="errorMessage != null">{{ this.errorMessage }}</div>
 
           <!-- Create button -->
-          <v-btn :disabled="!formIsValid || creatingRoom" color="#6360F0" depressed @click.stop="onCreate"
+          <v-btn :disabled="!formIsValid || creatingRoom" color="#6360F0" variant="flat" @click.stop="onCreate"
             class="filled-button mt-4">
             <div v-if="creatingRoom && !enterRoomDialog" class="text-center">
               {{ creatingRoomStatus }}
@@ -116,7 +116,7 @@
               </v-checkbox>
             </v-col>
           </v-row>
-          <v-btn color="black" depressed class="filled-button" @click.stop="onEnterRoom"
+          <v-btn color="black" variant="flat" class="filled-button" @click.stop="onEnterRoom"
             :disabled="!acceptUA || !selectedProfile.name">
             {{ $t("join.enter_room") }}
           </v-btn>
diff --git a/src/components/GetLink.vue b/src/components/GetLink.vue
index 29fb362..5b4587a 100644
--- a/src/components/GetLink.vue
+++ b/src/components/GetLink.vue
@@ -18,9 +18,9 @@
           <interactive-auth ref="interactiveAuth" />
 
           <div class="create-buttons">
-            <v-btn id="btn-login" :disabled="!isValid || loading" color="primary" depressed block
+            <v-btn id="btn-login" :disabled="!isValid || loading" color="primary" variant="flat" block
               @click.stop="handleLogin" :loading="loading" class="filled-button mt-4">{{ $t("getlink.next") }}</v-btn>
-            <v-btn color="black" depressed text block @click.stop="goToLoginPage" class="text-button">{{
+            <v-btn color="black" variant="flat" block @click.stop="goToLoginPage" class="text-button">{{
               $t("menu.login")
               }}</v-btn>
           </div>
@@ -41,9 +41,9 @@
         </template>
       </copy-link>
       <div class="create-buttons">
-        <v-btn color="black" style="color:black;background-color:white !important;" depressed @click.stop="goHome"
+        <v-btn color="black" style="color:black;background-color:white !important;" variant="flat" @click.stop="goHome"
           class="outlined-button">{{ $t("getlink.continue") }}</v-btn>
-        <v-btn color="black" depressed text block @click.stop="getDifferentLink" class="text-button">{{
+        <v-btn color="black" variant="flat" block @click.stop="getDifferentLink" class="text-button">{{
           $t("getlink.different_link") }}</v-btn>
       </div>
     </div>
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 74a575c..6969a24 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -12,7 +12,7 @@
       </v-row>
     </v-container>
 
-    <v-card class="members ma-3" flat>
+    <v-card class="members ma-3" variant="flat">
       <v-card-title class="h2">{{ $t("room.room_list_rooms") }}</v-card-title>
       <v-card-text class="pa-0">
         <RoomList
diff --git a/src/components/InteractiveAuth.vue b/src/components/InteractiveAuth.vue
index 6aa759d..147f78a 100644
--- a/src/components/InteractiveAuth.vue
+++ b/src/components/InteractiveAuth.vue
@@ -11,7 +11,7 @@
           <div class="text-start font-weight-light">{{ $t("login.email") }}</div>
           <v-text-field v-model="email" color="black" :rules="emailRules" type="email" maxlength="200"
             background-color="white" v-on:keyup.enter="onEmailEntered(email)" autofocus variant="solo"></v-text-field>
-          <v-btn :disabled="!emailIsValid" color="black" depressed class="filled-button"
+          <v-btn :disabled="!emailIsValid" color="black" variant="flat" class="filled-button"
             @click.stop="onEmailEntered(email)">
             {{ $t("login.send_verification") }}
           </v-btn>
@@ -39,7 +39,7 @@
       </v-row>
       <v-row cols="12" align="center" justify="center">
         <v-col sm="8" align="center">
-          <v-btn color="black" :disabled="!this.allPoliciesAccepted" depressed class="filled-button"
+          <v-btn color="black" :disabled="!this.allPoliciesAccepted" variant="flat" class="filled-button"
             @click.stop="onPoliciesAccepted()">
             {{ $t("login.accept_terms") }}
           </v-btn>
@@ -55,7 +55,7 @@
             <v-progress-circular style="display: inline-flex" indeterminate color="primary"
               size="20"></v-progress-circular>
           </div>
-          <v-btn color="black" depressed class="filled-button" @click.stop="onEmailResend()">
+          <v-btn color="black" variant="flat" class="filled-button" @click.stop="onEmailResend()">
             {{ $t("login.resend_verification") }}
           </v-btn>
         </v-col>
@@ -68,7 +68,7 @@
           <div class="text-start font-weight-light">{{ $t("login.registration_token") }}</div>
           <v-text-field v-model="token" color="black" :rules="tokenRules" type="text" maxlength="64"
             background-color="white" v-on:keyup.enter="onTokenEntered(token)" autofocus variant="solo"></v-text-field>
-          <v-btn :disabled="!tokenIsValid" color="black" depressed class="filled-button"
+          <v-btn :disabled="!tokenIsValid" color="black" variant="flat" class="filled-button"
             @click.stop="onTokenEntered(token)">
             {{ $t("login.send_token") }}
           </v-btn>
diff --git a/src/components/Invite.vue b/src/components/Invite.vue
index a2a54a6..5e1a4e7 100644
--- a/src/components/Invite.vue
+++ b/src/components/Invite.vue
@@ -5,7 +5,7 @@
       <v-btn
         id="btn-invite-done"
         :loading="loading"
-        text
+        variant="text"
         class="header-button-right"
         @click.stop="done"
       >
diff --git a/src/components/LeaveRoomDialog.vue b/src/components/LeaveRoomDialog.vue
index 774b054..e94f457 100644
--- a/src/components/LeaveRoomDialog.vue
+++ b/src/components/LeaveRoomDialog.vue
@@ -43,8 +43,7 @@
           <v-col cols="6">
             <v-btn
               id="btn-back"
-              depressed
-              text
+              variant="flat"
               block
               class="text-button"
               @click="showDialog = false"
@@ -55,7 +54,7 @@
             <v-btn
               id="btn-leave"
               color="red"
-              depressed
+              variant="flat"
               block
               class="filled-button"
               @click.stop="onLeaveRoom()"
diff --git a/src/components/Login.vue b/src/components/Login.vue
index b142248..9a993b9 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -16,7 +16,7 @@
             <div class="room-name no-upper">{{ $t("login.title") }}</div>
           </v-col>
           <v-col class="text-end">
-            <v-btn id="btn-close" text v-if="showCloseButton" @click.stop="$navigation.pop">
+            <v-btn id="btn-close" variant="text" v-if="showCloseButton" @click.stop="$navigation.pop">
               <v-icon>close</v-icon>
             </v-btn>
           </v-col>
@@ -79,7 +79,7 @@
           id="btn-login"
           :disabled="!isValid || loading || loadingLoginFlows"
           color="black"
-          depressed
+          variant="flat"
           block
           @click.stop="handleLogin"
           :loading="loading"
@@ -90,7 +90,7 @@
         <v-btn
           id="btn-create-room"
           color="primary"
-          depressed
+          variant="flat"
           block
           @click.stop="handleCreateRoom"
           class="filled-button mt-2"
diff --git a/src/components/LogoutRoomDialog.vue b/src/components/LogoutRoomDialog.vue
index c6f72be..eae7acc 100644
--- a/src/components/LogoutRoomDialog.vue
+++ b/src/components/LogoutRoomDialog.vue
@@ -15,8 +15,7 @@
         <v-row cols="12">
           <v-col cols="6">
             <v-btn
-              depressed
-              text
+              variant="flat"
               block
               class="text-button"
               @click.stop="$emit('onCancelLogoutClicked')"
@@ -26,7 +25,7 @@
           <v-col cols="6" align="center">
             <v-btn
               color="red"
-              depressed
+              variant="flat"
               block
               class="filled-button"
               @click.stop="logout"
diff --git a/src/components/MessageRetentionDialog.vue b/src/components/MessageRetentionDialog.vue
index 6cda020..364aa9f 100644
--- a/src/components/MessageRetentionDialog.vue
+++ b/src/components/MessageRetentionDialog.vue
@@ -18,7 +18,7 @@
         </v-row>
         <v-row cols="12" class="justify-center mt-0">
           <v-col cols="4" class="py-0">
-            <v-btn color="primary" :disabled="!isValid" depressed block class="filled-button my-0"
+            <v-btn color="primary" :disabled="!isValid" variant="flat" block class="filled-button my-0"
               @click.stop="setRetention()">{{
                 $t("menu.done") }}</v-btn>
           </v-col>
diff --git a/src/components/MoreMenuPopup.vue b/src/components/MoreMenuPopup.vue
index fb2105a..26fd35f 100644
--- a/src/components/MoreMenuPopup.vue
+++ b/src/components/MoreMenuPopup.vue
@@ -1,7 +1,7 @@
 <template>
   <v-dialog v-model="showDialog" content-class="more-menu-popup" class="ma-0 pa-0">
     <div class="popup-wrapper">
-    <v-card flat>
+    <v-card variant="flat">
       <v-card-text>
 
         <v-container class="mt-0 pa-0 pt-3 pb-3 action-row-container-no-dividers">
diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 39ec25f..5136a39 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -5,7 +5,7 @@
         <div class="room-name no-upper">{{ $t("profile.title") }}</div>
         <v-btn
           id="btn-close"
-          text
+          variant="text"
           class="header-button-right"
           v-show="$navigation && $navigation.canPop()"
           @click.stop="$navigation.pop"
@@ -53,7 +53,7 @@
           <!-- <div v-if="$matrix.currentUser.is_guest">
             {{ $t("profile.temporary_identity") }}
           </div> -->
-          <v-btn id="btn-logout" depressed block class="outlined-button" @click.stop="showLogoutPopup=true">
+          <v-btn id="btn-logout" variant="flat" block class="outlined-button" @click.stop="showLogoutPopup=true">
             {{ $t("menu.logout") }}
           </v-btn>
           <LogoutRoomDialog
@@ -151,14 +151,14 @@
         <v-divider></v-divider>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn id="btn-password-cancel" text @click="closeEditPasswordDialog">{{
+          <v-btn id="btn-password-cancel" variant="text" @click="closeEditPasswordDialog">{{
             $t("menu.cancel")
           }}</v-btn>
           <v-btn
             id="btn-password-set"
             :disabled="!passwordsMatch"
             color="primary"
-            text
+            variant="text"
             @click="
               setPassword(
                 $matrix.currentUser.is_guest
@@ -191,13 +191,13 @@
         <v-divider></v-divider>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn id="btn-displayname-cancel" text @click="showEditDisplaynameDialog = false">{{
+          <v-btn id="btn-displayname-cancel" variant="text" @click="showEditDisplaynameDialog = false">{{
             $t("menu.cancel")
           }}</v-btn>
           <v-btn
             id="btn-displayname-set"
             color="primary"
-            text
+            variant="text"
             @click="
               updateDisplayName(editValue);
               showEditDisplaynameDialog = false;
@@ -230,8 +230,7 @@
           <v-row cols="12">
             <v-col cols="6">
               <v-btn
-                depressed
-                text
+                variant="flat"
                 block
                 class="text-button"
                 @click="onNotifyDialogClosed"
@@ -241,7 +240,7 @@
             <v-col cols="6" align="center">
               <v-btn
                 color="primary"
-                depressed
+                variant="flat"
                 block
                 class="filled-button"
                 @click.stop="onNotifyDialog"
diff --git a/src/components/ProfileInfoPopup.vue b/src/components/ProfileInfoPopup.vue
index d108467..428a23c 100644
--- a/src/components/ProfileInfoPopup.vue
+++ b/src/components/ProfileInfoPopup.vue
@@ -1,6 +1,6 @@
 <template>
   <v-dialog v-model="showDialog" content-class="profile-info-popup" class="ma-0 pa-0">
-    <v-card flat>
+    <v-card variant="flat">
       <v-card-text>
         <div class="you-are">{{ $t("profile_info_popup.you_are") }}</div>
         <v-container fluid>
diff --git a/src/components/PurgeRoomDialog.vue b/src/components/PurgeRoomDialog.vue
index e8dc893..5c8c166 100644
--- a/src/components/PurgeRoomDialog.vue
+++ b/src/components/PurgeRoomDialog.vue
@@ -21,8 +21,7 @@
           <v-col cols="6">
             <v-btn
               id="btn-purge-room-cancel"
-              depressed
-              text
+              variant="flat"
               block
               class="text-button"
               :disabled="isPurging"
@@ -34,7 +33,7 @@
             <v-btn
               id="btn-purge-room"
               color="red"
-              depressed
+              variant="flat"
               block
               class="filled-button"
               :disabled="isPurging"
@@ -65,8 +64,7 @@
           <v-col cols="6">
             <v-btn
               id="btn-purge-room-undo"
-              depressed
-              text
+              variant="flat"
               block
               class="text-button"
               :disabled="isPurging"
@@ -75,7 +73,7 @@
             >
           </v-col>
           <v-col cols="6">
-            <v-btn depressed block class="outlined-button" @click="onDoPurgeRoom">
+            <v-btn variant="flat" block class="outlined-button" @click="onDoPurgeRoom">
               {{ $t("menu.delete_now") }}
             </v-btn>
           </v-col>
diff --git a/src/components/QuoteView.vue b/src/components/QuoteView.vue
index 5b8e11b..8bd4df4 100644
--- a/src/components/QuoteView.vue
+++ b/src/components/QuoteView.vue
@@ -18,7 +18,7 @@
           v-if="joinedToAnyRoom"
           id="btn-goodbye-view-other"
           color="white"
-          text
+          variant="text"
           class="close"
           @click.stop="viewOtherRooms"
           >{{ $t("goodbye.view_other_rooms") }}</v-btn
@@ -27,7 +27,7 @@
           v-else
           id="btn-goodbye-close"
           color="white"
-          text
+          variant="text"
           class="close"
           @click.stop="closeBrowserTab"
           >{{ $t("goodbye.close_tab") }}</v-btn
diff --git a/src/components/ReportRoomDialog.vue b/src/components/ReportRoomDialog.vue
index 86866fe..4c4dc36 100644
--- a/src/components/ReportRoomDialog.vue
+++ b/src/components/ReportRoomDialog.vue
@@ -13,8 +13,7 @@
           <v-col cols="6">
             <v-btn
               id="btn-back"
-              depressed
-              text
+              variant="flat"
               block
               class="text-button"
               @click="showDialog = false"
@@ -25,7 +24,7 @@
             <v-btn
               id="btn-report"
               color="red"
-              depressed
+              variant="flat"
               block
               class="filled-button"
               @click.stop="onReport()"
diff --git a/src/components/RoomExport.vue b/src/components/RoomExport.vue
index 4e068a8..7baa287 100644
--- a/src/components/RoomExport.vue
+++ b/src/components/RoomExport.vue
@@ -43,7 +43,7 @@
         <v-col class="text-center">
           <v-progress-circular indeterminate color="primary"></v-progress-circular>
           <div>{{ statusText }}</div>
-          <v-btn color="black" depressed class="filled-button mt-5" @click.stop="cancelExport">{{
+          <v-btn color="black" variant="flat" class="filled-button mt-5" @click.stop="cancelExport">{{
             $t("menu.cancel")
           }}</v-btn>
         </v-col>
diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue
index 89499ef..73cbafd 100644
--- a/src/components/RoomInfo.vue
+++ b/src/components/RoomInfo.vue
@@ -4,7 +4,7 @@
       <v-container fluid class="d-flex justify-space-between align-center">
         <v-btn
           id="btn-back"
-          text
+          variant="text"
           :class="(($navigation && $navigation.canPop()) || $matrix.currentRoomId) ? 'v-visible' : 'v-hidden'"
           @click.stop="goBack()"
         >
@@ -16,7 +16,7 @@
           v-if="!userCanPurgeRoom"
           id="btn-leave-room"
           color="black"
-          depressed
+          variant="flat"
           class="filled-button"
           @click.stop="showLeaveConfirmation = true"
           >👋 {{ $t("room_info.leave_room") }}</v-btn
@@ -91,7 +91,7 @@
     </div>
     <copy-link :locationLink="publicRoomLink" i18nCopyLinkKey="copy_invite_link" />
 
-    <v-card class="account ma-3" flat>
+    <v-card class="account ma-3" variant="flat">
       <v-card-title class="h2">{{ $t("room_info.permissions") }}</v-card-title>
       <v-card-text>
         <v-select
@@ -128,7 +128,7 @@
       </v-card-text>
     </v-card>
   
-    <v-card class="account ma-3" flat>
+    <v-card class="account ma-3" variant="flat">
       <v-card-title class="h2">{{ $t("room_info.message_retention") }}</v-card-title>
       <v-card-text v-if="canViewRetentionPolicy">
         <v-list v-if="canChangeRetentionPolicy">
@@ -156,7 +156,7 @@
 
     </v-card>
   
-    <v-card class="account ma-3" flat v-if="canChangeReadOnly()">
+    <v-card class="account ma-3" variant="flat" v-if="canChangeReadOnly()">
       <v-card-title class="h2">{{ $t("room_info.moderation") }}</v-card-title>
       <v-card-text class="" v-if="canChangeReadOnly()">
         <div class="with-right-label" style="align-items:center;height:36px">  
@@ -167,14 +167,14 @@
     </v-card-text>
     </v-card>
   
-    <v-card class="account ma-3" flat>
+    <v-card class="account ma-3" variant="flat">
       <v-card-title class="h2">{{ $t("room_info.report") }}</v-card-title>
       <v-card-text class="">
         <div class="with-right-label" style="align-items:center;height:36px">  
         <div class="option-title">{{ $t('room_info.report_info') }}</div>
         <v-btn
         color="black"
-        depressed
+        variant="flat"
         size="small"
         class="outlined-button"
         @click.stop="report"
@@ -183,7 +183,7 @@
     </v-card-text>
     </v-card>
   
-    <v-card class="members ma-3" flat>
+    <v-card class="members ma-3" variant="flat">
       <v-card-title class="h2"
         >{{ $t("room_info.members") }}<v-spacer></v-spacer>
         <div>{{ members.length }}</div></v-card-title
@@ -242,7 +242,7 @@
       <v-btn
         v-if="userCanExportChat"
         color="black"
-        depressed
+        variant="flat"
         class="filled-button"
         @click.stop="exportRoom"
         >{{ $t("room_info.export_room") }}</v-btn>
diff --git a/src/components/RoomList.vue b/src/components/RoomList.vue
index bb9b057..df2059c 100644
--- a/src/components/RoomList.vue
+++ b/src/components/RoomList.vue
@@ -28,10 +28,10 @@
       <v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
       <template v-slot:append>
         <v-list-item-action>
-          <v-btn id="btn-accept" class="filled-button" depressed color="black" @click.stop="acceptInvitation(room)">{{
+          <v-btn id="btn-accept" class="filled-button" variant="flat" color="black" @click.stop="acceptInvitation(room)">{{
             $t("menu.join") }}</v-btn>
           <v-btn v-if="!room.isServiceNoticeRoom" id="btn-reject" class="filled-button" color="black"
-            @click.stop="rejectInvitation(room)" text>{{
+            @click.stop="rejectInvitation(room)" variant="text">{{
               $t("menu.ignore") }}</v-btn>
         </v-list-item-action>
       </template>
diff --git a/src/components/SelectLanguageDialog.vue b/src/components/SelectLanguageDialog.vue
index ee8d8d1..d6e4224 100644
--- a/src/components/SelectLanguageDialog.vue
+++ b/src/components/SelectLanguageDialog.vue
@@ -28,7 +28,7 @@
       <v-card-actions>
         <v-btn
           id="btn-done"
-          depressed
+          variant="flat"
           block
           class="btn-dark"
           @click="$emit('update:model-value', false)"
diff --git a/src/components/StickerPickerBottomSheet.vue b/src/components/StickerPickerBottomSheet.vue
index 544471c..4989ec7 100644
--- a/src/components/StickerPickerBottomSheet.vue
+++ b/src/components/StickerPickerBottomSheet.vue
@@ -13,7 +13,7 @@
     </v-tabs>
     <v-tabs-window v-model="currentStickerPack">
       <v-window-item v-for="(pack,ipack) in packs" :key="'pack-content-' + ipack" :value="'pack-' + ipack">
-        <v-card flat>
+        <v-card variant="flat">
           <v-container fluid>
             <v-row>
               <v-col cols="2" v-for="sticker in stickersInPack(pack)" :key="pack + sticker.name">
diff --git a/src/components/UnsupportedBrowserAlert.vue b/src/components/UnsupportedBrowserAlert.vue
index ba45e0a..fc009b0 100644
--- a/src/components/UnsupportedBrowserAlert.vue
+++ b/src/components/UnsupportedBrowserAlert.vue
@@ -12,7 +12,7 @@
         <v-spacer></v-spacer>
         <v-btn
           :color="locationUrlCopied ? '#DEE6FF' : 'black'"
-          depressed
+          variant="flat"
           @click.stop="copyRoomLink1"
           :class="{'filled-button' : true, 'link-copied-in-place' : locationUrlCopied}"
           >{{ $t(`room_info.${locationUrlCopied ? 'link_copied' : 'copy_link'}`) }}</v-btn
diff --git a/src/components/UserProfileDialog.vue b/src/components/UserProfileDialog.vue
index 01f6468..a8a7626 100644
--- a/src/components/UserProfileDialog.vue
+++ b/src/components/UserProfileDialog.vue
@@ -38,21 +38,21 @@
       </div>
       <DeviceList :member="activeMember" />
       <div class="py-3" v-if="activeMember.userId != $matrix.currentUserId">
-        <v-btn text size="x-large" block v-if="activeMember.userId != $matrix.currentUserId && !$matrix.isDirectRoomWith(room, activeMember.userId)" class="start-private-chat clickable d-block text-none justify-start" @click="startPrivateChat(activeMember.userId)">
+        <v-btn variant="text" size="x-large" block v-if="activeMember.userId != $matrix.currentUserId && !$matrix.isDirectRoomWith(room, activeMember.userId)" class="start-private-chat clickable d-block text-none justify-start" @click="startPrivateChat(activeMember.userId)">
           <v-icon start>$vuetify.icons.direct_chat</v-icon>  {{ $t("menu.direct_chat") }}
         </v-btn>
         <div v-if="canBanUserComp">
-          <v-btn text x-large block v-if="activeMember.userId != $matrix.currentUserId && canBanUserComp" class="start-private-chat clickable d-block text-none justify-start" @click="banUser(activeMember)">
+          <v-btn variant="text" x-large block v-if="activeMember.userId != $matrix.currentUserId && canBanUserComp" class="start-private-chat clickable d-block text-none justify-start" @click="banUser(activeMember)">
             <v-icon start>$vuetify.icons.kickout</v-icon> {{ $t("menu.user_kick_and_ban") }}
           </v-btn>
         </div>
-        <v-btn text size="x-large" block v-if="activeMember.userId != $matrix.currentUserId && !isAdminComp && canMakeAdminComp" class="start-private-chat clickable d-block text-none justify-start" @click="makeAdmin(activeMember)">
+        <v-btn variant="text" size="x-large" block v-if="activeMember.userId != $matrix.currentUserId && !isAdminComp && canMakeAdminComp" class="start-private-chat clickable d-block text-none justify-start" @click="makeAdmin(activeMember)">
           <v-icon start>$vuetify.icons.make_admin</v-icon> {{ $t("menu.user_make_admin") }}
         </v-btn>
-        <v-btn text size="x-large" block v-if="activeMember.userId != $matrix.currentUserId && !isModeratorComp && !isAdminComp && canMakeModeratorComp" class="start-private-chat clickable d-block text-none justify-start" @click="makeModerator(activeMember)">
+        <v-btn variant="text" size="x-large" block v-if="activeMember.userId != $matrix.currentUserId && !isModeratorComp && !isAdminComp && canMakeModeratorComp" class="start-private-chat clickable d-block text-none justify-start" @click="makeModerator(activeMember)">
           <v-icon start>$vuetify.icons.make_moderator</v-icon> {{ $t("menu.user_make_moderator") }}
         </v-btn>
-        <v-btn text size="x-large" block v-if="activeMember.userId != $matrix.currentUserId && isModeratorComp && canRevokeModeratorComp" class="start-private-chat clickable d-block text-none justify-start" @click="revokeModerator(activeMember)">
+        <v-btn variant="text" size="x-large" block v-if="activeMember.userId != $matrix.currentUserId && isModeratorComp && canRevokeModeratorComp" class="start-private-chat clickable d-block text-none justify-start" @click="revokeModerator(activeMember)">
           <v-icon start>$vuetify.icons.revoke</v-icon> {{ $t("menu.user_revoke_moderator") }}
         </v-btn>
       </div>
diff --git a/src/components/VoiceRecorder.vue b/src/components/VoiceRecorder.vue
index ab55c6c..c42581d 100644
--- a/src/components/VoiceRecorder.vue
+++ b/src/components/VoiceRecorder.vue
@@ -114,7 +114,7 @@
                 </div>
               </v-col>
               <v-col cols="3" class="pa-0">
-                <v-btn id="btn-record-cancel" @click.stop="cancelRecording" text class="swipe-info">{{
+                <v-btn id="btn-record-cancel" @click.stop="cancelRecording" variant="text" class="swipe-info">{{
                   $t("menu.cancel")
                 }}</v-btn>
               </v-col>
diff --git a/src/components/welcome_headers/WelcomeHeaderChannel.vue b/src/components/welcome_headers/WelcomeHeaderChannel.vue
index ec63a06..f9b8741 100644
--- a/src/components/welcome_headers/WelcomeHeaderChannel.vue
+++ b/src/components/welcome_headers/WelcomeHeaderChannel.vue
@@ -5,7 +5,7 @@
         <template v-slot:link>
           <div style="position:relative;display:inline-block">
             <a @click.stop="copyPublicLink" :href="publicRoomLink" class="text-break">{{ publicRoomLink }}</a>
-            <v-btn v-if="publicRoomLinkCopied" id="btn-copy-room-link" color="#444444" depressed
+            <v-btn v-if="publicRoomLinkCopied" id="btn-copy-room-link" color="#444444" variant="flat"
               style="position:absolute;left:0;top:0" class="filled-button link-copied-in-place">{{
       $t("room_info.link_copied") }}</v-btn>
           </div>
@@ -24,7 +24,7 @@
       <a href="#" text @click.prevent="showMessageRetentionDialog = true" style="white-space: pre-line;">{{ $t("room_welcome.change") }}</a>
     </div>
     <div class="text-end">
-      <v-btn id="btn-got-it" text @click.stop="$emit('close')" class="text-transform-0">
+      <v-btn id="btn-got-it" variant="text" @click.stop="$emit('close')" class="text-transform-0">
         {{ $t("room_welcome.got_it") }}
       </v-btn>
     </div>
diff --git a/src/components/welcome_headers/WelcomeHeaderRoom.vue b/src/components/welcome_headers/WelcomeHeaderRoom.vue
index a48deb6..459740b 100644
--- a/src/components/welcome_headers/WelcomeHeaderRoom.vue
+++ b/src/components/welcome_headers/WelcomeHeaderRoom.vue
@@ -10,7 +10,7 @@
               v-if="publicRoomLinkCopied"
               id="btn-copy-room-link"
               color="#444444"
-              depressed
+              variant="flat"
               style="position:absolute;left:0;top:0"
               class="filled-button link-copied-in-place"
               >{{ $t("room_info.link_copied") }}</v-btn
@@ -30,7 +30,7 @@
       {{ roomHistoryDescription }}
     </div>
     <div class="text-end">
-      <v-btn id="btn-got-it" text @click.stop="$emit('close')" class="text-transform-0">
+      <v-btn id="btn-got-it" variant="text" @click.stop="$emit('close')" class="text-transform-0">
         {{ $t("room_welcome.got_it") }}
       </v-btn>
     </div>