From 3f7813c428cc8e5f7ed8adc6e9435a3e72d7989d Mon Sep 17 00:00:00 2001
From: Thomas Ballmann <mail@i-2xdream.de>
Date: Sun, 16 May 2021 17:28:01 +0200
Subject: [PATCH] vuetify 2.5 fixes

---
 app/.eslintrc.js                            |   2 +-
 app/src/components/DeviceCard.vue           |   4 +-
 app/src/components/ScreenCard.vue           |   2 +-
 app/src/components/Setup/BasePanel.vue      |   2 +-
 app/src/components/Weather/Card.vue         |   4 +-
 app/src/components/Weather/FindLocation.vue |   2 +-
 app/src/plugins/vuetify.js                  | 160 ++++++++++----------
 app/src/views/Device.vue                    |   2 +-
 app/src/views/Playlist.vue                  |   2 +-
 app/src/views/Setup/Done.vue                |   2 +-
 app/src/views/Setup/Start.vue               |   2 +-
 app/src/views/System.vue                    |   6 +-
 app/src/views/Weather.vue                   |   2 +-
 app/src/views/Wifi.vue                      |   2 +-
 14 files changed, 97 insertions(+), 97 deletions(-)

diff --git a/app/.eslintrc.js b/app/.eslintrc.js
index 6a078b8..937983d 100644
--- a/app/.eslintrc.js
+++ b/app/.eslintrc.js
@@ -10,5 +10,5 @@ module.exports = {
   extends: 'vuetify',
   // add your custom rules here
   rules: {
-  }
+  },
 }
diff --git a/app/src/components/DeviceCard.vue b/app/src/components/DeviceCard.vue
index 535f57d..ecc9c88 100644
--- a/app/src/components/DeviceCard.vue
+++ b/app/src/components/DeviceCard.vue
@@ -12,7 +12,7 @@
           color="secondary lighten-3"
           size="24"
         >
-          <span class="white--text headline caption">{{ stats.wifi.channel }}</span>
+          <span class="white--text text-h5 text-caption">{{ stats.wifi.channel }}</span>
         </v-avatar>
       </v-list-item-avatar>
     </v-list-item>
@@ -43,7 +43,7 @@
         <v-progress-circular
           :rotate="-90"
           :value="fsUsage"
-          class="caption"
+          class="text-caption"
         >
           {{ fsUsage }}
         </v-progress-circular>
diff --git a/app/src/components/ScreenCard.vue b/app/src/components/ScreenCard.vue
index ea17870..bbd9d5f 100644
--- a/app/src/components/ScreenCard.vue
+++ b/app/src/components/ScreenCard.vue
@@ -44,7 +44,7 @@
       >
         {{ playlistRemainingCountdown }}
       </v-progress-circular>
-      <span class="headline pl-3">{{ playlistCurrent }}</span>
+      <span class="text-h5 pl-3">{{ playlistCurrent }}</span>
     </v-card-actions>
   </v-card>
 </template>
diff --git a/app/src/components/Setup/BasePanel.vue b/app/src/components/Setup/BasePanel.vue
index 8736684..9f5bbac 100644
--- a/app/src/components/Setup/BasePanel.vue
+++ b/app/src/components/Setup/BasePanel.vue
@@ -38,7 +38,7 @@
           </div>
 
           <v-card-title
-            class="display-1 font-weight-bold mb-12 px-0 justify-center text-center"
+            class="text-h4 font-weight-bold mb-12 px-0 justify-center text-center"
           >
             <slot name="headline" />
           </v-card-title>
diff --git a/app/src/components/Weather/Card.vue b/app/src/components/Weather/Card.vue
index f61820e..592e9ad 100644
--- a/app/src/components/Weather/Card.vue
+++ b/app/src/components/Weather/Card.vue
@@ -9,7 +9,7 @@
     >
       <v-list-item two-line>
         <v-list-item-content v-if="weather">
-          <v-list-item-title class="headline">
+          <v-list-item-title class="text-h5">
             {{ weather.name }}
           </v-list-item-title>
           <v-list-item-subtitle>{{ new Date(weather.dt *1000).toLocaleString(undefined, {weekday:'short', hour: 'numeric'}) }}, {{ weather.weather[0].description }}</v-list-item-subtitle>
@@ -20,7 +20,7 @@
         <v-card-text>
           <v-row align="center">
             <v-col
-              class="display-3"
+              class="text-h2"
               cols="6"
             >
               {{ currentTemp }} &deg;C
diff --git a/app/src/components/Weather/FindLocation.vue b/app/src/components/Weather/FindLocation.vue
index 5991408..4baefac 100644
--- a/app/src/components/Weather/FindLocation.vue
+++ b/app/src/components/Weather/FindLocation.vue
@@ -19,7 +19,7 @@
       <v-list-item-avatar
         v-if="item.weather"
         color="grey lighten-2"
-        class="headline font-weight-light white--text"
+        class="text-h5 font-weight-light white--text"
       >
         <img
           width="64"
diff --git a/app/src/plugins/vuetify.js b/app/src/plugins/vuetify.js
index 36d9227..9ea7aa4 100644
--- a/app/src/plugins/vuetify.js
+++ b/app/src/plugins/vuetify.js
@@ -6,92 +6,92 @@ import Vuetify from 'vuetify/lib'
 // @see https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/services/icons/presets/mdi-svg.ts
 const MY_ICONS = {
     // system icons
-    // complete: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/check/baseline.svg')},
-    // cancel: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/cancel/baseline.svg')},
-    close: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/close/baseline.svg') },
-    // delete: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/delete/baseline.svg')},
-    clear: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/clear/baseline.svg') },
-    success: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/check_circle/baseline.svg') },
-    info: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/info/baseline.svg') },
-    // warning: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/priority_high/baseline.svg')},
-    error: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/warning/baseline.svg') },
-    prev: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/chevron_left/baseline.svg') },
-    next: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/chevron_right/baseline.svg') },
-    // checkboxOn: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/check_box/baseline.svg')},
-    // checkboxOff: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/check_box_outline_blank/baseline.svg')},
-    // checkboxIndeterminate: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/indeterminate_check_box/baseline.svg')},
-    // delimiter: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/fiber_manual_record/baseline.svg')}, // for carousel
-    // sort: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/arrow_upward/baseline.svg')},
-    // expand: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/keyboard_arrow_down/baseline.svg')},
-    menu: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/menu/baseline.svg') },
-    // subgroup: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/arrow_drop_down/baseline.svg')},
-    dropdown: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/arrow_drop_down/baseline.svg') },
-    radioOn: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/radio_button_checked/baseline.svg') },
-    radioOff: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/radio_button_unchecked/baseline.svg') },
-    // edit: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/edit/baseline.svg')},
-    // ratingEmpty: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/star_border/baseline.svg')},
-    // ratingFull: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/star/baseline.svg')},
-    // ratingHalf: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/star_half/baseline.svg')},
-    // loading: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/cached/baseline.svg')},
-    // first: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/first_page/baseline.svg')},
-    // last: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/last_page/baseline.svg')},
-    // unfold: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/unfold_more/baseline.svg')},
-    // file: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/attach_file/baseline.svg')},
-    // plus: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/add/baseline.svg')},
-    // minus: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/remove/baseline.svg')},
+    // complete: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/check/baseline.svg')},
+    // cancel: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/cancel/baseline.svg')},
+    close: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/close/baseline.svg') },
+    // delete: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/delete/baseline.svg')},
+    clear: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/clear/baseline.svg') },
+    success: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/check_circle/baseline.svg') },
+    info: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/info/baseline.svg') },
+    // warning: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/priority_high/baseline.svg')},
+    error: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/warning/baseline.svg') },
+    prev: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/chevron_left/baseline.svg') },
+    next: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/chevron_right/baseline.svg') },
+    // checkboxOn: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/check_box/baseline.svg')},
+    // checkboxOff: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/check_box_outline_blank/baseline.svg')},
+    // checkboxIndeterminate: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/indeterminate_check_box/baseline.svg')},
+    // delimiter: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/fiber_manual_record/baseline.svg')}, // for carousel
+    // sort: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/arrow_upward/baseline.svg')},
+    // expand: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/keyboard_arrow_down/baseline.svg')},
+    menu: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/menu/baseline.svg') },
+    // subgroup: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/arrow_drop_down/baseline.svg')},
+    dropdown: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/arrow_drop_down/baseline.svg') },
+    radioOn: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/radio_button_checked/baseline.svg') },
+    radioOff: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/radio_button_unchecked/baseline.svg') },
+    // edit: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/edit/baseline.svg')},
+    // ratingEmpty: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/star_border/baseline.svg')},
+    // ratingFull: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/star/baseline.svg')},
+    // ratingHalf: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/star_half/baseline.svg')},
+    // loading: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/cached/baseline.svg')},
+    // first: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/first_page/baseline.svg')},
+    // last: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/last_page/baseline.svg')},
+    // unfold: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/unfold_more/baseline.svg')},
+    // file: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/attach_file/baseline.svg')},
+    // plus: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/add/baseline.svg')},
+    // minus: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/remove/baseline.svg')},
 
     // app icons
-    // save: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/save/baseline.svg')},
-    // more_vert: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/more_vert/baseline.svg')},
-    // reorder: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/reorder/baseline.svg')},
-    // preview: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/remove_red_eye/baseline.svg')},
-    // search: {component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/search/baseline.svg')},
-    memory: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/memory/baseline.svg') },
-    lock: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/lock/baseline.svg') },
-    settings: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/settings/baseline.svg') },
-    storage: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/sd_storage/baseline.svg') },
-    // playlist: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/live_tv/baseline.svg') },
-    slideshow: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/slideshow/baseline.svg') },
-    support: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/support/baseline.svg') },
-    device: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/video_label/baseline.svg') },
-    update: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/update/baseline.svg') },
-    launch: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/launch/baseline.svg') },
-    translate: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/translate/baseline.svg') },
-    access_time: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/access_time/baseline.svg') },
-    language: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/language/baseline.svg') },
-    palette: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/palette/baseline.svg') },
-    sentiment_satisfied_alt: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/sentiment_satisfied_alt/baseline.svg') },
-    file: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/insert_drive_file/baseline.svg') },
-    calendar_today: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/calendar_today/baseline.svg') },
-    dashboard: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/dashboard/baseline.svg') },
-    done: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/done/baseline.svg') },
-    link: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/link/baseline.svg') },
-    help: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/help/baseline.svg') },
-    vpn_key: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/vpn_key/baseline.svg') },
-    place: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/place/baseline.svg') },
-    monochrome_photos: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/monochrome_photos/baseline.svg') },
+    // save: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/save/baseline.svg')},
+    // more_vert: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/more_vert/baseline.svg')},
+    // reorder: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/reorder/baseline.svg')},
+    // preview: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/remove_red_eye/baseline.svg')},
+    // search: {component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/search/baseline.svg')},
+    memory: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/memory/baseline.svg') },
+    lock: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/lock/baseline.svg') },
+    settings: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/settings/baseline.svg') },
+    storage: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/sd_storage/baseline.svg') },
+    // playlist: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/live_tv/baseline.svg') },
+    slideshow: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/slideshow/baseline.svg') },
+    support: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/support/baseline.svg') },
+    device: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/video_label/baseline.svg') },
+    update: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/update/baseline.svg') },
+    launch: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/launch/baseline.svg') },
+    translate: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/translate/baseline.svg') },
+    access_time: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/access_time/baseline.svg') },
+    language: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/language/baseline.svg') },
+    palette: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/palette/baseline.svg') },
+    sentiment_satisfied_alt: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/sentiment_satisfied_alt/baseline.svg') },
+    file: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/insert_drive_file/baseline.svg') },
+    calendar_today: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/calendar_today/baseline.svg') },
+    dashboard: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/dashboard/baseline.svg') },
+    done: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/done/baseline.svg') },
+    link: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/link/baseline.svg') },
+    help: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/help/baseline.svg') },
+    vpn_key: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/vpn_key/baseline.svg') },
+    place: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/place/baseline.svg') },
+    monochrome_photos: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/monochrome_photos/baseline.svg') },
 
     // wifi
-    wifi: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/wifi/baseline.svg') },
-    signalWifiOff: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/signal_wifi_off/baseline.svg') },
-    signalWifi0: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/signal_wifi_0_bar/baseline.svg') },
-    signalWifi1: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/signal_wifi_1_bar/baseline.svg') },
-    signalWifi1Lock: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/signal_wifi_1_bar_lock/baseline.svg') },
-    signalWifi2: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/signal_wifi_2_bar/baseline.svg') },
-    signalWifi2Lock: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/signal_wifi_2_bar_lock/baseline.svg') },
-    signalWifi3: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/signal_wifi_3_bar/baseline.svg') },
-    signalWifi3Lock: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/signal_wifi_3_bar_lock/baseline.svg') },
-    signalWifi4: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/signal_wifi_4_bar/baseline.svg') },
-    signalWifi4Lock: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/signal_wifi_4_bar_lock/baseline.svg') },
+    wifi: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/wifi/baseline.svg') },
+    signalWifiOff: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/signal_wifi_off/baseline.svg') },
+    signalWifi0: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/signal_wifi_0_bar/baseline.svg') },
+    signalWifi1: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/signal_wifi_1_bar/baseline.svg') },
+    signalWifi1Lock: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/signal_wifi_1_bar_lock/baseline.svg') },
+    signalWifi2: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/signal_wifi_2_bar/baseline.svg') },
+    signalWifi2Lock: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/signal_wifi_2_bar_lock/baseline.svg') },
+    signalWifi3: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/signal_wifi_3_bar/baseline.svg') },
+    signalWifi3Lock: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/signal_wifi_3_bar_lock/baseline.svg') },
+    signalWifi4: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/signal_wifi_4_bar/baseline.svg') },
+    signalWifi4Lock: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/signal_wifi_4_bar_lock/baseline.svg') },
 
     // setup
-    wb_sunny: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/wb_sunny/baseline.svg') },
-    open_in_new: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/open_in_new/baseline.svg') },
-    face: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/face/baseline.svg') },
-    autorenew: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/autorenew/baseline.svg') },
-    check: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/check/baseline.svg') },
-    visibility: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/visibility/baseline.svg') },
-    visibility_off: { component: () => import(/* webpackChunkName: "icons" */'!vue-svg-loader!@material-icons/svg/svg/visibility_off/baseline.svg') },
+    wb_sunny: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/wb_sunny/baseline.svg') },
+    open_in_new: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/open_in_new/baseline.svg') },
+    face: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/face/baseline.svg') },
+    autorenew: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/autorenew/baseline.svg') },
+    check: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/check/baseline.svg') },
+    visibility: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/visibility/baseline.svg') },
+    visibility_off: { component: () => import(/* webpackChunkName: "icons" */'@material-icons/svg/svg/visibility_off/baseline.svg') },
 }
 
 Vue.use(Vuetify)
diff --git a/app/src/views/Device.vue b/app/src/views/Device.vue
index bcf2d69..a9418cc 100644
--- a/app/src/views/Device.vue
+++ b/app/src/views/Device.vue
@@ -3,7 +3,7 @@
     flat
     rounded="lg"
   >
-    <v-card-title class="display-2 mb-12 justify-center text-center">
+    <v-card-title class="text-h3 mb-12 justify-center text-center">
       Device settings
     </v-card-title>
 
diff --git a/app/src/views/Playlist.vue b/app/src/views/Playlist.vue
index 4dd71d4..5ab0c14 100644
--- a/app/src/views/Playlist.vue
+++ b/app/src/views/Playlist.vue
@@ -3,7 +3,7 @@
     flat
     rounded="lg"
   >
-    <v-card-title class="display-2 mb-12 justify-center text-center">
+    <v-card-title class="text-h3 mb-12 justify-center text-center">
       Playlist settings
     </v-card-title>
 
diff --git a/app/src/views/Setup/Done.vue b/app/src/views/Setup/Done.vue
index 1adf085..693c968 100644
--- a/app/src/views/Setup/Done.vue
+++ b/app/src/views/Setup/Done.vue
@@ -1,7 +1,7 @@
 <template>
   <setup-panel>
     <v-card-title
-      class="display-2 font-weight-bold mb-12 px-0 justify-center text-center"
+      class="text-h3 font-weight-bold mb-12 px-0 justify-center text-center"
     >
       <span class="mr-5">Hello</span> <span class="text-decoration-underline">{{ settings.device.name }}</span>
     </v-card-title>
diff --git a/app/src/views/Setup/Start.vue b/app/src/views/Setup/Start.vue
index dfe0d41..05c9f80 100644
--- a/app/src/views/Setup/Start.vue
+++ b/app/src/views/Setup/Start.vue
@@ -1,7 +1,7 @@
 <template>
   <setup-panel>
     <v-card-title
-      class="display-2 font-weight-bold mb-12 px-0 justify-center text-center"
+      class="text-h3 font-weight-bold mb-12 px-0 justify-center text-center"
     >
       Hello paperdash
     </v-card-title>
diff --git a/app/src/views/System.vue b/app/src/views/System.vue
index 2918667..3039af9 100644
--- a/app/src/views/System.vue
+++ b/app/src/views/System.vue
@@ -3,7 +3,7 @@
     flat
     rounded="lg"
   >
-    <v-card-title class="display-2 mb-12 justify-center text-center">
+    <v-card-title class="text-h3 mb-12 justify-center text-center">
       System info
     </v-card-title>
 
@@ -71,7 +71,7 @@
         <v-progress-circular
           :rotate="-90"
           :value="getFSUsage"
-          class="caption"
+          class="text-caption"
         >
           {{ getFSUsage }}
         </v-progress-circular>
@@ -107,7 +107,7 @@
         <v-progress-circular
           :rotate="-90"
           :value="getMemoryUsage"
-          class="caption"
+          class="text-caption"
         >
           {{ getMemoryUsage }}
         </v-progress-circular>
diff --git a/app/src/views/Weather.vue b/app/src/views/Weather.vue
index b282fad..85acbda 100644
--- a/app/src/views/Weather.vue
+++ b/app/src/views/Weather.vue
@@ -3,7 +3,7 @@
     flat
     rounded="lg"
   >
-    <v-card-title class="display-2 mb-12 justify-center text-center">
+    <v-card-title class="text-h3 mb-12 justify-center text-center">
       Weather settings
     </v-card-title>
 
diff --git a/app/src/views/Wifi.vue b/app/src/views/Wifi.vue
index 1fcaae2..c629b07 100644
--- a/app/src/views/Wifi.vue
+++ b/app/src/views/Wifi.vue
@@ -3,7 +3,7 @@
     flat
     rounded="lg"
   >
-    <v-card-title class="display-2 mb-12 justify-center text-center">
+    <v-card-title class="text-h3 mb-12 justify-center text-center">
       Wifi settings
     </v-card-title>