Dialogs and Vuetify styling changes

src/components/StickerPickerBottomSheet.vue

@@ -5,17 +5,14 @@
       centered
       class="tabs"
       show-arrows
+      slider-color="primary"
     >
-      <v-tabs-slider></v-tabs-slider>
-
-      <v-tab v-for="pack in packs" :key="pack">
+      <v-tab v-for="(pack,ipack) in packs" :key="'pack-' + ipack" :value="'pack-' + ipack">
         {{ pack }}
-        <v-icon>mdi-phone</v-icon>
       </v-tab>
     </v-tabs>
-
-    <v-tabs-items v-model="currentStickerPack" class="tab-items">
-      <v-tab-item v-for="pack in packs" :key="pack">
+    <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-container fluid>
             <v-row>
@@ -25,8 +22,8 @@
             </v-row>
           </v-container>
         </v-card>
-      </v-tab-item>
-    </v-tabs-items>
+      </v-window-item>
+    </v-tabs-window>
   </BottomSheet>
 </template>
 
@@ -40,17 +37,14 @@ export default {
   },
   data() {
     return {
-      currentStickerPack: 'tab-0',
+      currentStickerPack: 'pack-0',
+      packs: [],
     };
   },
-  computed: {
-    packs() {
-      return stickers.getPacks();
-    }
-  },
   mounted() {},
   methods: {
     open() {
+      this.packs = stickers.getPacks();
       this.$refs.sheet.open();
     },
     stickersInPack(pack) {
@@ -69,6 +63,10 @@ export default {
 </style>
 
 <style lang="scss">
+  .sheetContent {
+    top: 40px !important;
+    padding: 0 20px 20px 20px !important;
+  }
   .sticker-picker  {
     z-index: 10;
 
@@ -76,6 +74,7 @@ export default {
       position: sticky;
       top: 0px;
       z-index: 1;
+      background: white;
     }
   }
 </style>