Changed all static inline style to CSS classes

src/assets/css/_utilities.scss

@@ -0,0 +1,20 @@
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.text-transform-0 {
+    text-transform: none;
+}
+
+.mt-40 {
+    margin-top: 40px;
+}
+.w-100 {
+    width: 100%;
+}
+.h-100 {
+    width: 100%;
+}
+.white-space-pre {
+    white-space: pre;
+}

src/assets/css/chat.scss

@@ -1,5 +1,6 @@
 @import '~vuetify/src/styles/settings/_variables.scss';
 @import "@/assets/css/main.scss";
+@import "@/assets/css/vendors/v-emoji-picker";
 
 $admin-bg: black;
 $admin-fg: white;
@@ -37,6 +38,10 @@ $admin-fg: white;
         align-items: center;
         height: 100%;
     }
+    .chat-header-members, .chat-header-name {
+        overflow: hidden;
+        cursor: pointer;
+    }
     .num-members {
         font-family: "Inter", sans-serif;
         font-weight: 400;
@@ -116,6 +121,8 @@ $admin-fg: white;
         padding-left: $chat-standard-padding-s;
         padding-bottom: $chat-standard-padding-s;
         padding-right: $chat-standard-padding-s;
+        overflow: hidden auto;
+
         &::-webkit-scrollbar {
             width: 4px;
         }
@@ -246,6 +253,10 @@ $admin-fg: white;
     user-select: text;
 }
 
+.message-wrapper {
+    position: relative; user-select: none
+}
+
 .messageIn {
     margin: 8px;
     text-align: left;
@@ -544,9 +555,13 @@ $admin-fg: white;
         font-family: "Inter", sans-serif;
         font-weight: 400;
         font-size: 13 * $chat-text-size;
+        flex: 1 0 80px;
     }
     .play-progress {
         padding: 0px 10px;
+        flex: 1 1 100%;
+        height: 30px;
+
         .v-slider__thumb {
             display: none;
         }
@@ -794,6 +809,10 @@ $admin-fg: white;
         color: #3d6eff;
     }
 
+    .filled-button {
+        min-width: 180px !important;
+    }
+
     .v-card {
         background-color: white;
         border-radius: 20px;
@@ -909,6 +928,7 @@ $admin-fg: white;
 }
 
 .mic-button {
+    z-index: 10;
     background-color: transparent !important;
     &.waiting-for-long-tap {
         transition: background-color 0.5s;
@@ -931,6 +951,14 @@ $admin-fg: white;
     border-radius: 10px;
     background-color: black;
     overflow: hidden;
+
+    .will-cancel, .locked, .error {
+        position: absolute !important;
+        top: 0 ;
+        left: 0;
+        right: 0;
+        bottom: 0
+    }
     .will-cancel {
         background-color: #ff3300;
     }
@@ -1080,3 +1108,13 @@ $admin-fg: white;
 .recent-emoji {
     color: black;
 }
+
+.current-image-input-path {
+    max-height: 50vh;
+    background-color: #e2e2e2
+}
+
+.loading-indicator {
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.2);
+}

src/assets/css/main.scss

@@ -1,4 +1,5 @@
 @import './variables';
+@import './utilities';
 
 @font-face {
     font-family: "Inter";

src/assets/css/vendors/_v-emoji-picker.scss

@@ -0,0 +1,4 @@
+#EmojiPicker {
+    width: 100%;
+    background-color: #ffffff;
+}

src/components/BottomSheet.vue

@@ -18,7 +18,7 @@
       :style="{ top: `${isMove ? y : calcY()}px` }"
     >
       <div class="bottom-sheet-handle"><div class="bottom-sheet-handle-decoration" /></div>
-      <div ref="sheetContent" style="position:absolute;top:20px;left:0;right:0;bottom:0;overflow-y:auto;padding:20px">
+      <div ref="sheetContent" class="sheetContent">
         <slot></slot>
       </div>
     </div>
@@ -143,6 +143,14 @@ export default {
 <style lang="scss" scoped>
 @import '~vuetify/src/styles/settings/_variables.scss';
 @import '@/assets/css/variables';
+.sheetContent {
+  position:absolute;
+  top:20px;left:0;
+  right:0;
+  bottom:0;
+  overflow-y:auto;
+  padding:20px;
+}
 
 .bottom-sheet {
   position: fixed;

src/components/Chat.vue

@@ -7,7 +7,6 @@
     <div
       class="chat-content flex-grow-1 flex-shrink-1"
       ref="chatContainer"
-      style="overflow: hidden auto;"
       v-on:scroll="onScroll"
       @click="closeContextMenusIfOpen"
     >
@@ -77,7 +76,7 @@
           :ref="event.getId()"
         >
           <div
-            style="position: relative; user-select: none"
+            class="message-wrapper"
             v-on:touchstart="
               (e) => {
                 touchStart(e, event);
@@ -226,7 +225,6 @@
               small
               elevation="0"
               v-blur
-              style="z-index: 10"
               v-longTap:250="[showRecordingUI, startRecording]"
             >
               <v-icon :color="showRecorder ? 'white' : 'black'">mic</v-icon>
@@ -239,7 +237,6 @@
               small
               elevation="0"
               v-blur
-              style="z-index: 10"
               @click.stop="showNoRecordingAvailableDialog = true"
             >
               <v-icon :color="showRecorder ? 'white' : 'black'">mic</v-icon>
@@ -299,7 +296,7 @@
                 name="attachment"
                 @change="handlePickedAttachment($event)"
                 accept="image/*|audio/*|video/*|application/pdf"
-                style="display: none"
+                class="d-none"
               />
             </label>
           </v-col>
@@ -327,7 +324,7 @@
               :aspect-ratio="1"
               :src="currentImageInput.image"
               contain
-              style="max-height: 50vh; background-color: #e2e2e2"
+              class="current-image-input-path"
             />
             <div>
               file: {{ currentImageInputPath.name }}
@@ -390,7 +387,6 @@
 
     <MessageOperationsBottomSheet
       ref="messageOperationsSheet"
-      style="background-color: #f776777"
     >
       <MessageOperationsPicker
         v-on:close="showEmojiPicker = false"
@@ -405,22 +401,20 @@
       />
       <VEmojiPicker
         ref="emojiPicker"
-        style="width: 100%; background-color: #ffffff"
         @select="emojiSelected"
       />
     </MessageOperationsBottomSheet>
 
     <StickerPickerBottomSheet
       ref="stickerPickerSheet"
-      style="z-index: 10"
       v-on:selectSticker="sendSticker"
     />
 
     <!-- Loading indicator -->
     <v-container
       fluid
+      class="loading-indicator"
       fill-height
-      style="position: absolute; background-color: rgba(0, 0, 0, 0.2)"
       v-if="!initialLoadDone || loading"
     >
       <v-row align="center" justify="center">

src/components/ChatHeader.vue

@@ -4,7 +4,6 @@
       <v-col
         cols="auto"
         class="chat-header-members text-start ma-0 pa-0"
-        style="overflow: hidden; cursor: pointer"
         @click.stop="onHeaderClicked"
       >
         <v-avatar size="40" class="me-2">
@@ -13,8 +12,7 @@
       </v-col>
 
       <v-col
-        class="ma-0 pa-0 flex-shrink-1 flex-nowrap"
+        class="chat-header-name ma-0 pa-0 flex-shrink-1 flex-nowrap"
-        style="overflow: hidden; cursor: pointer"
         @click.stop="onHeaderClicked"
       >
         <div class="room-name-inline text-truncate" :title="room.name">

src/components/CreateRoom.vue

@@ -77,7 +77,7 @@
       </v-row>
     </v-container>
 
-    <v-container fluid style="margin-top: 40px">
+    <v-container fluid class="mt-40">
       <v-row align="center">
         <v-col align="center">
           <v-avatar size="50" color="#ededed" @click.stop="showAvatarPicker">
@@ -210,7 +210,7 @@
       name="avatar"
       @change="handlePickedAvatar($event)"
       accept="image/*"
-      style="display: none"
+      class="d-none"
     />
   </div>
 </template>

src/components/CreatedRoomWelcomeHeader.vue

@@ -19,9 +19,9 @@
       {{ roomHistoryDescription }}
     </div>
     <div class="text-right">
-      <v-btn id="btn-got-it" text @click.stop="$emit('close')" style="text-transform: none">{{
+      <v-btn id="btn-got-it" text @click.stop="$emit('close')" class="text-transform-0">
-        $t("room_welcome.got_it")
+        {{ $t("room_welcome.got_it") }}
-      }}</v-btn>
+      </v-btn>
     </div>
   </div>
 </template>

src/components/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <YouAre class="mt-4" v-if="!loading" />
+    <YouAre class="mt-4"  />
     <v-container fluid class="text-center mt-8">
       <v-row align="center" justify="center">
         <v-col class="text-center" cols="auto">
@@ -26,8 +26,8 @@
     <v-container
       fluid
       fill-height
-      style="position: absolute; background-color: rgba(0, 0, 0, 0.2)"
       v-if="loading"
+      class="loading-indicator"
     >
       <v-row align="center" justify="center">
         <v-col class="text-center">

src/components/Invite.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex flex-column pa-4" style="overflow: hidden">
+  <div class="d-flex flex-column pa-4 overflow-hidden invite">
     <div class="flex-grow-0 flex-shrink-0">
       <div class="room-name">{{$t('invite.title')}}</div>
       <v-btn
@@ -13,10 +13,7 @@
       </v-btn>
     </div>
 
-    <div
+    <div class="flex-grow-0 flex-shrink-0 chip-group-wrapper">
-      class="flex-grow-0 flex-shrink-0"
-      style="min-height: 100px; max-height: 30vh"
-    >
       <div class="h4">{{$t('invite.send_invites_to')}}</div>
       <div>{{ status }}</div>
       <v-chip-group active-class="primary--text" column>
@@ -32,7 +29,7 @@
     </div>
 
     <div class="flex-grow-1 flex-shrink-1">
-      <v-list class="member ma-2" style="overflow-y: auto">
+      <v-list class="member ma-2">
         <v-list-item-group multiple v-model="selectedMembers">
           <v-list-item
             v-for="member in $matrix.getAllFriends()"
@@ -168,5 +165,14 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+  @import "@/assets/css/chat.scss";
+  .invite {
+    .chip-group-wrapper {
+      min-height: 100px;
+      max-height: 30vh;
+    }
+    .member {
+      overflow-y: auto !important;
+    }
+  }
 </style>

src/components/Join.vue

@@ -38,8 +38,8 @@
         <v-row v-else class="text-center">
           <v-col>
             {{ $t("join.joining_as") }}
-            <div style="display: inline-block">
+            <div class="d-inline-block">
-              <v-avatar color="#e0e0e0" style="">
+              <v-avatar color="#e0e0e0">
                 <v-img v-if="userAvatar" :src="userAvatar" />
                 <span v-else class="white--text headline">{{
                   userAvatarLetter

src/components/MessageOperationsBottomSheet.vue

@@ -4,14 +4,7 @@
       <div
         v-show="!closed"
         @click.stop="backgroundClick"
-        style="
+        class="transition-bg"
-          position: absolute;
-          top: 0;
-          left: 0;
-          bottom: 0;
-          right: 0;
-          background-color: rgba(0, 0, 0, 0.15);
-        "
       />
     </v-fade-transition>
     <SwipeableBottomSheet
@@ -86,6 +79,14 @@ export default {
 }
 
 .message-operations-bottom-sheet {
+  .transition-bg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      background-color: rgba(0, 0, 0, 0.15);
+  }
   .pan-area {
     padding-bottom: 0px;
   }

src/components/Profile.vue

@@ -33,7 +33,7 @@
               name="avatar"
               @change="handlePickedAvatar($event)"
               accept="image/*"
-              style="display: none"
+              class="d-none"
             />
           </v-avatar>
         </v-col>

src/components/ProfileInfoPopup.vue

@@ -62,13 +62,10 @@
               <a :href="'//'+productLink">{{ productLink }}</a>
             </template>
           </i18n>
-          <div
+          <div class="text-end">
-            style="position: relative; width: 100%; height: 40px"
+            <v-btn id="btn-new-room" class="new_room" text @click="createRoom">
-            class="text-end"
+              {{ $t("profile_info_popup.new_room") }}
-          >
+            </v-btn>
-            <v-btn id="btn-new-room" class="new_room" text @click="createRoom">{{
-              $t("profile_info_popup.new_room")
-            }}</v-btn>
           </div>
         </div>
       </v-card-text>

src/components/QRCodePopup.vue

@@ -1,7 +1,11 @@
 <template>
-  <v-dialog v-model="showDialog" class="ma-0 pa-0" width="80%">
+  <v-dialog
+    v-model="showDialog"
+    class="ma-0 pa-0"
+    :width="$vuetify.breakpoint.smAndUp ? '940px' : '95%'"
+  >
     <div class="dialog-content text-center" ref="qrContainer">
-      <div class="d-flex flex-column text-center" style="align-items: center">
+      <div class="d-flex justify-center">
         <canvas ref="qr" class="qr" id="qr" :style="qrStyle"></canvas>
       </div>
       <div>{{ $t("room_info.scan_code") }}</div>

src/components/QuoteView.vue

@@ -3,21 +3,9 @@
     <transition name="slow-fade">
       <div
         v-if="mounted"
-        style="
+        class="text-center d-flex flex-column goodbye-wrapper"
-          position: fixed;
-          top: 0;
-          left: 0;
-          bottom: 0;
-          right: 0;
-          z-index: 100;
-          background-color: black;
-          align-items: center;
-          justify-content: center;
-          padding: 40px;
-        "
-        class="text-center d-flex flex-column"
       >
-        <div v-if="roomWasPurged" style="width: 28px">
+        <div v-if="roomWasPurged">
           <v-img src="@/assets/icons/trash.svg" />
         </div>
         <h2 v-if="roomWasPurged" class="white--text mt-2 mb-8">
@@ -51,16 +39,7 @@
     <transition name="slow-fade">
       <div
         v-if="mounted"
-        style="
+        class="goodbye-profile"
-          position: fixed;
-          top: 24px;
-          right: 24px;
-          z-index: 101;
-          padding: 10px 20px;
-          height: 50px;
-          border-radius: 25px;
-          background-color: #242424;
-        "
       >
         <div class="d-inline-block me-2 white--text">
           {{ $t("profile_info_popup.you_are") }}
@@ -157,22 +136,44 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+  @import "@/assets/css/chat.scss";
 
-.author {
+  .author {
-  font-size: 80%;
+    font-size: 80%;
-}
+  }
 
-.close {
+  .close {
-  position: absolute;
+    position: absolute;
-  bottom: 40px;
+    bottom: 40px;
-}
+  }
 
-.slow-fade-enter-active,
+  .slow-fade-enter-active,
-.slow-fade-leave-active {
+  .slow-fade-leave-active {
-  transition: opacity 2.5s;
+    transition: opacity 2.5s;
-}
+  }
-.slow-fade-enter, .slow-fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  .slow-fade-enter, .slow-fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
+    opacity: 0;
-}
+  }
-</style> 
+  .goodbye-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 100;
+    background-color: black;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+  }
+  .goodbye-profile {
+    position: fixed;
+    top: 24px;
+    right: 24px;
+    z-index: 101;
+    padding: 10px 20px;
+    height: 50px;
+    border-radius: 25px;
+    background-color: #242424;
+  }
+</style>

src/components/RoomInfo.vue

@@ -61,7 +61,6 @@
               color="#DEE6FF"
               depressed
               class="filled-button link-copied-in-place"
-              style="min-width: 180px"
               >{{ $t("room_info.link_copied") }}</v-btn
             >
             <v-btn
@@ -70,7 +69,6 @@
               color="black"
               depressed
               class="filled-button"
-              style="min-width: 180px"
               @click.stop="copyRoomLink"
               >{{ $t("room_info.copy_link") }}</v-btn
             >

src/components/RoomList.vue

@@ -48,7 +48,6 @@
         v-for="room in joinedRooms"
         :key="room.roomId"
         :value="room.roomId"
-        style="position: relative"
       >
         <v-list-item-avatar size="40" color="#e0e0e0">
           <v-img :src="room.avatar" />

src/components/StickerPickerBottomSheet.vue

@@ -65,13 +65,17 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/assets/css/chat.scss";
+  @import "@/assets/css/chat.scss";
 </style>
 
 <style lang="scss">
-.sticker-picker .tabs {
+  .sticker-picker  {
-  position: sticky;
+    z-index: 10;
-  top: 0px;
+
-  z-index: 1;
+    .tabs {
-}
+      position: sticky;
+      top: 0px;
+      z-index: 1;
+    }
+  }
 </style>

src/components/VoiceRecorder.vue

@@ -5,7 +5,6 @@
       :class="{ 'voice-recorder': true, ptt: ptt, row: !ptt }"
       ref="vrroot"
     >
-      <!-- <div style="background-color:red;height:60px;width:100%"/> -->
       <v-container v-if="!ptt" fluid fill-height>
         <v-row align="center" class="mt-3">
           <v-col cols="4" align="center">
@@ -69,7 +68,6 @@
         <div
           v-if="willCancel"
           class="will-cancel"
-          style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
         >
           <v-container fluid fill-height>
             <v-row align="center">
@@ -90,7 +88,6 @@
         <div
           v-if="recordingLocked"
           class="locked"
-          style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
         >
           <v-container fluid fill-height>
             <v-row align="center">
@@ -117,7 +114,6 @@
       <div
         v-if="state == states.ERROR"
         class="error"
-        style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
       >
         <v-container fluid fill-height>
           <v-row align="center">

src/components/YouAre.vue

@@ -2,11 +2,10 @@
   <div class="d-flex flex-row-reverse">
     <v-chip
       @click="viewProfile"
-      class="ma-2"
+      class="ma-2 white-space-pre"
       :color="dark ? 'black' : '#ededed'"
       :text-color="dark ? 'white' : 'black'"
       :outlined="!dark"
-      style="white-space: pre"
       >{{ $t("profile_info_popup.you_are") }}&nbsp;
       <span v-if="$matrix.currentUser.is_guest">
         <i18n path="profile_info_popup.identity_temporary" tag="span">
@@ -56,4 +55,4 @@ export default {
 
 <style lang="scss">
 @import "@/assets/css/chat.scss";
-</style> 
+</style>

src/components/messages/AudioPlayer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="audio-player d-flex flex-row" style="align-items: center">
+  <div class="audio-player d-flex flex-row align-center">
     <audio ref="player" :src="src" @durationchange="updateDuration">
       <slot></slot>
     </audio>
@@ -9,15 +9,14 @@
     <v-btn v-else id="btn-play" @click.stop="play" icon
       ><v-icon size="20">play_arrow</v-icon></v-btn
     >
-    <div class="play-time" style="flex: 1 0 80px">
+    <div class="play-time">
       {{ currentTime }} / {{ totalTime }}
     </div>
-    <v-slider 
+    <v-slider
       color="currentColor"
       track-color="#cccccc"
       class="play-progress"
       v-model="playheadPercent"
-      style="flex: 1 1 100%; height: 30px"
       min="0"
       max="100"
     />

src/components/messages/MessageIncomingFile.vue

@@ -13,7 +13,7 @@
       <div class="message">
         <span>{{ $t('message.file_prefix') }}</span>
         <span
-          style="cursor: pointer"
+         class="cursor-pointer"
           @click.stop="$emit('download')"
           v-html="linkify($sanitize(messageText))"
         />

src/components/messages/MessageIncomingVideo.vue

@@ -2,7 +2,7 @@
   <message-incoming v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
     <div class="bubble image-bubble">
       <v-responsive :aspect-ratio="16 / 9" :src="src">
-        <video :src="src" controls style="width: 100%; height: 100%">
+        <video :src="src" controls class="w-100 h-100">
           {{$t('fallbacks.video_file')}}
         </video>
         <div v-if="downloadProgress" class="download-overlay">

src/components/messages/MessageOutgoingFile.vue

@@ -14,7 +14,7 @@
       <div class="message">
         <span>{{ $t('message.file_prefix') }}</span>
         <span
-          style="cursor: pointer"
+          class="cursor-pointer"
           @click.stop="$emit('download')"
           v-html="linkify($sanitize(messageText))"
         />

src/components/messages/MessageOutgoingVideo.vue

@@ -2,7 +2,7 @@
   <message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
     <div class="bubble image-bubble">
       <v-responsive :aspect-ratio="16 / 9" class="ma-0 pa-0">
-        <video :src="src" controls style="width: 100%; height: 100%">
+        <video :src="src" controls class="w-100 h-100">
           {{$t('fallbacks.video_file')}}
         </video>
       </v-responsive>