Merge pull request #758 from Adamant-im/feat/ui-same-back-buttons

chore: use the same style for back button as it was in chat room

Author: bludnic

src/components/AppToolbarCentered.vue

@@ -3,10 +3,7 @@
     <v-row justify="center" no-gutters>
       <container>
         <v-toolbar ref="toolbar" :flat="flat" :height="height">
-          <v-btn v-if="showBack" icon size="small" @click="goBack">
-            <v-icon :icon="mdiArrowLeft" size="x-large" />
-          </v-btn>
-
+          <back-button v-if="showBack" @click="goBack" />
           <v-toolbar-title v-if="title" class="a-text-regular-enlarged">
             <div>{{ title }}</div>
             <div v-if="subtitle" class="body-1">
@@ -21,8 +18,10 @@
 
 <script>
 import { mdiArrowLeft } from '@mdi/js'
+import BackButton from '@/components/common/BackButton/BackButton.vue'
 
 export default {
+  components: { BackButton },
   props: {
     title: {
       type: String,
@@ -96,16 +95,6 @@ export default {
   :deep(.v-toolbar-title:not(:first-child)) {
     margin-inline-start: 0;
   }
-
-  :deep(.v-toolbar__content > .v-btn:first-child) {
-    margin-inline-start: 4px;
-  }
-
-  :deep(.v-btn:hover) {
-    > .v-btn__overlay {
-      opacity: 0;
-    }
-  }
 }
 
 .app-toolbar--fixed {

src/components/Chat/ChatToolbar.vue

@@ -1,6 +1,6 @@
 <template>
   <v-toolbar flat height="56" :class="`${className}`" color="transparent">
-    <v-btn icon @click="goBack">
+    <back-button @click="goBack">
       <v-badge
         v-if="numOfNewMessages > 0"
         :value="numOfNewMessages"
@@ -9,8 +9,7 @@
         :content="numOfNewMessages > 99 ? '99+' : numOfNewMessages"
       >
       </v-badge>
-      <v-icon :icon="mdiArrowLeft" />
-    </v-btn>
+    </back-button>
     <div v-if="!isWelcomeChat(partnerId)">
       <slot name="avatar-toolbar" />
     </div>
@@ -44,8 +43,10 @@
 import partnerName from '@/mixins/partnerName'
 import { isAdamantChat, isWelcomeChat } from '@/lib/chat/meta/utils'
 import { mdiArrowLeft } from '@mdi/js'
+import BackButton from '@/components/common/BackButton/BackButton.vue'
 
 export default {
+  components: { BackButton },
   mixins: [partnerName],
   props: {
     partnerId: {
@@ -140,13 +141,6 @@ export default {
     }
   }
 
-  :deep(.v-toolbar__content > .v-btn:first-child) {
-    width: 36px;
-    height: 36px;
-    margin: 0 12px;
-    border-radius: 50%;
-  }
-
   :deep(.v-text-field) {
     @include mixins.a-text-regular-enlarged-bold();
 
@@ -181,13 +175,6 @@ export default {
       margin-bottom: 0;
     }
   }
-
-  :deep(.v-btn) {
-    &:hover > .v-btn__overlay {
-      opacity: 0.2;
-      transition: all 0.4s ease;
-    }
-  }
 }
 
 /** Themes **/

src/components/common/BackButton/BackButton.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-btn :class="className" icon>
+    <slot />
+    <v-icon :icon="mdiArrowLeft" />
+  </v-btn>
+</template>
+
+<script setup lang="ts">
+import { mdiArrowLeft } from '@mdi/js'
+
+const className = 'back-button'
+</script>
+
+<style lang="scss">
+.back-button {
+  &:first-child {
+    width: 36px;
+    height: 36px;
+    margin: 0 12px !important;
+    border-radius: 50%;
+  }
+
+  &:hover > .v-btn__overlay {
+    opacity: 0.2;
+    transition: all 0.4s ease;
+  }
+}
+</style>