modify style

src/components/desktop/BtnVerticalGroup.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="btn-vertical-group d-flex flex-column">
+        <v-btn border :key="idx"
+               :color="value === button.value ? 'primary' : 'default'"
+               :variant="value === button.value ? 'tonal' : 'outlined'" :disabled="disabled"
+               v-for="(button, idx) in buttons"
+               @click="value = button.value">
+            {{ button.name }}
+        </v-btn>
+    </div>
+</template>
+
+<script>
+export default {
+    props: [
+        'disabled',
+        'buttons',
+        'modelValue'
+    ],
+    emits: [
+        'update:modelValue'
+    ],
+    computed: {
+        value: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (value) {
+                if (value === this.modelValue) {
+                    return;
+                }
+
+                this.$emit('update:modelValue', value);
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.btn-vertical-group .v-btn:not(:first-child) {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+}
+
+.btn-vertical-group .v-btn:not(:last-child) {
+    border-bottom: 0;
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+}
+</style>

src/desktop-main.js

@@ -23,8 +23,11 @@ import { VIcon } from 'vuetify/components/VIcon';
 import { VImg } from 'vuetify/components/VImg';
 import { VInput } from 'vuetify/components/VInput';
 import { VLabel } from 'vuetify/components/VLabel';
+import { VLayout } from 'vuetify/components/VLayout';
 import { VList, VListGroup, VListImg, VListItem, VListItemAction, VListItemMedia, VListItemSubtitle, VListItemTitle, VListSubheader } from 'vuetify/components/VList';
+import { VMain } from 'vuetify/components/VMain';
 import { VMenu } from 'vuetify/components/VMenu';
+import { VNavigationDrawer } from 'vuetify/components/VNavigationDrawer';
 import { VOverlay } from 'vuetify/components/VOverlay';
 import { VPagination } from 'vuetify/components/VPagination';
 import { VProgressCircular } from 'vuetify/components/VProgressCircular';
@@ -77,6 +80,7 @@ import {
 import PinCodeInput from '@/components/common/PinCodeInput.vue';
 
 import ItemIcon from '@/components/desktop/ItemIcon.vue';
+import BtnVerticalGroup from '@/components/desktop/BtnVerticalGroup.vue';
 import AmountInput from '@/components/desktop/AmountInput.vue';
 import StepsBar from '@/components/desktop/StepsBar.vue';
 import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
@@ -132,6 +136,7 @@ const vuetify = createVuetify({
         VImg,
         VInput,
         VLabel,
+        VLayout,
         VList,
         VListGroup,
         VListImg,
@@ -141,7 +146,9 @@ const vuetify = createVuetify({
         VListItemSubtitle,
         VListItemTitle,
         VListSubheader,
+        VMain,
         VMenu,
+        VNavigationDrawer,
         VOverlay,
         VPagination,
         VProgressCircular,
@@ -168,7 +175,6 @@ const vuetify = createVuetify({
             mdi
         }
     },
-
     defaults: {
         VAlert: {
             VBtn: {
@@ -384,6 +390,7 @@ app.component('DraggableList', draggable);
 app.component('PinCodeInput', PinCodeInput);
 
 app.component('ItemIcon', ItemIcon);
+app.component('BtnVerticalGroup', BtnVerticalGroup);
 app.component('AmountInput', AmountInput);
 app.component('StepsBar', StepsBar);
 app.component('ConfirmDialog', ConfirmDialog);

src/styles/desktop/global.scss

@@ -100,8 +100,10 @@ input[type=number] {
     min-inline-size: 100%;
 }
 
-.w-100-window-container.v-window > .v-window__container {
-    width: 100%;
+.title-and-toolbar {
+    min-height: 38px;
+    flex-wrap: wrap;
+    row-gap: 1rem;
 }
 
 /** Common class for replacing the default style of vuetify **/
@@ -153,6 +155,18 @@ input[type=number] {
     height: 1rem;
 }
 
+.w-100-window-container.v-window > .v-window__container {
+    width: 100%;
+}
+
+.tab-text-truncate.v-tab > .v-btn__content {
+    overflow-x: hidden;
+}
+
+.skeleton-no-margin .v-skeleton-loader__text {
+    margin: 0;
+}
+
 /** Common class for replacing the default style of Materio **/
 .v-application,
 .text-body-1,
@@ -195,6 +209,10 @@ input[type=number] {
     }
 }
 
+.v-btn-group--density-comfortable.v-btn-group {
+    height: 38px;
+}
+
 /** Replacing the default style of @vuepic/vue-datepicker **/
 .dp__theme_light {
     --dp-primary-color: #c67e48;