From 6930a9dac01becd001b73a5f209e909f4bffb053 Mon Sep 17 00:00:00 2001
From: Thomas Ballmann <mail@i-2xdream.de>
Date: Fri, 4 Dec 2020 21:21:42 +0100
Subject: [PATCH] layout improvements

---
 app/src/assets/app.css                  |   5 +
 app/src/components/SetupWifiConnect.vue |  39 +--
 app/src/views/Device.vue                | 135 ++++++-----
 app/src/views/Playlist.vue              | 157 ++++++------
 app/src/views/System.vue                | 305 ++++++++++++------------
 app/src/views/Weather.vue               |   1 +
 app/src/views/Wifi.vue                  | 250 +++++++++----------
 7 files changed, 452 insertions(+), 440 deletions(-)

diff --git a/app/src/assets/app.css b/app/src/assets/app.css
index 3c3c3e6..7be9580 100644
--- a/app/src/assets/app.css
+++ b/app/src/assets/app.css
@@ -1,3 +1,8 @@
 .v-icon {
 	fill: currentColor;
+}
+
+.v-btn__content .v-icon--left, .v-btn__content .v-icon--right {
+	width: 24px !important;
+	height: 24px !important;
 }
\ No newline at end of file
diff --git a/app/src/components/SetupWifiConnect.vue b/app/src/components/SetupWifiConnect.vue
index ebc5ec7..be12a28 100644
--- a/app/src/components/SetupWifiConnect.vue
+++ b/app/src/components/SetupWifiConnect.vue
@@ -2,8 +2,14 @@
   <v-card flat>
     <v-toolbar
       dark
-      color="primary"
+      flat
+      color="orange darken-2"
+      class="pr-0 mr-0"
     >
+      <v-toolbar-title>
+        {{ ssid }}
+      </v-toolbar-title>
+      <v-spacer />
       <v-btn
         icon
         dark
@@ -11,38 +17,36 @@
       >
         <v-icon>$close</v-icon>
       </v-btn>
-      <v-toolbar-title class="pl-0">
-        Enter the password for "{{ ssid }}"
-      </v-toolbar-title>
 
-      <v-progress-linear
-        :active="isConnecting"
-        indeterminate
-        absolute
-        bottom
-        color="deep-orange accent-4"
-      />
+      <template
+        #extension
+      >
+        <div class="text-center align-content-center">
+          Enter the password
+        </div>
+      </template>
     </v-toolbar>
 
     <v-card-text class="pa-5">
       <v-text-field
         v-model="password"
-        :append-icon="show1 ? '$visibility' : '$visibility_off'"
-        :type="show1 ? 'text' : 'password'"
-        label="i8n:Password"
-        @click:append="show1 = !show1"
+        :append-icon="show ? '$visibility' : '$visibility_off'"
+        :type="show ? 'text' : 'password'"
+        label="Password"
+        @click:append="show = !show"
       />
     </v-card-text>
 
     <v-card-actions>
       <v-spacer />
       <v-btn
+        block
         depressed
         :disabled="password === ''"
         color="primary"
         @click="onConnect(ssid, password)"
       >
-        i8n:Join
+        Join
       </v-btn>
     </v-card-actions>
   </v-card>
@@ -61,9 +65,8 @@
       },
     },
     data: () => ({
-      isConnecting: false,
       password: '',
-      show1: false,
+      show: false,
     }),
   }
 </script>
diff --git a/app/src/views/Device.vue b/app/src/views/Device.vue
index 2aaf64c..f3f44fb 100644
--- a/app/src/views/Device.vue
+++ b/app/src/views/Device.vue
@@ -1,77 +1,76 @@
 <template>
-  <div class="pa-5">
-    <v-card
-      flat
-    >
-      <v-card-title class="display-2 mb-12 justify-center text-center">
-        Device settings
-      </v-card-title>
+  <v-card
+    flat
+    rounded="lg"
+  >
+    <v-card-title class="display-2 mb-12 justify-center text-center">
+      Device settings
+    </v-card-title>
 
-      <v-card-text>
-        <v-text-field
-          v-model="form.name"
-          label="Name"
-          prepend-icon="$sentiment_satisfied_alt"
-        />
+    <div>
+      <v-text-field
+        v-model="form.name"
+        label="Name"
+        prepend-icon="$sentiment_satisfied_alt"
+      />
 
-        <v-select
-          v-model="form.theme"
-          disabled
-          :items="optionsTheme"
-          label="Appearance"
-          prepend-icon="$palette"
-        />
+      <v-select
+        v-model="form.theme"
+        disabled
+        :items="optionsTheme"
+        label="Appearance"
+        prepend-icon="$palette"
+      />
 
-        <v-select
-          v-model="form.language"
-          disabled
-          :items="getAvailableLanguages"
-          item-text="native"
-          item-value="code"
-          label="Language"
-          prepend-icon="$translate"
-        />
+      <v-select
+        v-model="form.language"
+        disabled
+        :items="getAvailableLanguages"
+        item-text="native"
+        item-value="code"
+        label="Language"
+        prepend-icon="$translate"
+      />
 
-        <v-autocomplete
-          v-model="form.timezone"
-          :items="getAvailableTimezonesSorted"
-          item-value="name"
-          item-text="name"
-          label="Timezone"
-          prepend-icon="$access_time"
-          return-object
-        >
-          <template #item="{ item }">
-            (GMT{{ item.utcOffsetStr }}) {{ item.name }}
-          </template>
-          <template #selection="{item}">
-            (GMT{{ item.utcOffsetStr }}) {{ item.name }}
-          </template>
-        </v-autocomplete>
-      </v-card-text>
+      <v-autocomplete
+        v-model="form.timezone"
+        :items="getAvailableTimezonesSorted"
+        item-value="name"
+        item-text="name"
+        label="Timezone"
+        prepend-icon="$access_time"
+        return-object
+      >
+        <template #item="{ item }">
+          (GMT{{ item.utcOffsetStr }}) {{ item.name }}
+        </template>
+        <template #selection="{item}">
+          (GMT{{ item.utcOffsetStr }}) {{ item.name }}
+        </template>
+      </v-autocomplete>
+    </div>
 
-      <v-divider class="mt-12" />
-      <v-card-actions>
-        <v-btn
-          text
-          @click="resetChanges"
-        >
-          Restore
-        </v-btn>
-        <v-spacer />
-        <v-btn
-          :loading="isProcessing"
-          depressed
-          @click="commitChanges"
-        >
-          <v-icon left>
-            $done
-          </v-icon>
-          Save
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </div>
+    <v-divider class="mt-12" />
+    <v-card-actions>
+      <v-btn
+        text
+        @click="resetChanges"
+      >
+        Restore
+      </v-btn>
+      <v-spacer />
+      <v-btn
+        :loading="isProcessing"
+        depressed
+        @click="commitChanges"
+      >
+        <v-icon left>
+          $done
+        </v-icon>
+        Save
+      </v-btn>
+    </v-card-actions>
+  </v-card>
 </template>
 
 <script>
diff --git a/app/src/views/Playlist.vue b/app/src/views/Playlist.vue
index 34cee28..d832e29 100644
--- a/app/src/views/Playlist.vue
+++ b/app/src/views/Playlist.vue
@@ -1,88 +1,87 @@
 <template>
-  <div class="pa-5">
-    <v-card
-      flat
-    >
-      <v-card-title class="display-2 mb-12 justify-center text-center">
-        Playlist settings
-      </v-card-title>
+  <v-card
+    flat
+    rounded="lg"
+  >
+    <v-card-title class="display-2 mb-12 justify-center text-center">
+      Playlist settings
+    </v-card-title>
 
-      <v-card-text class="pb-0">
-        <v-row>
-          <v-col
-            cols="3"
-            class="text-center mt-2 pb-0"
-          >
-            <v-icon>$wb_sunny</v-icon>
-            <br>Forecast
-          </v-col>
-          <v-col
-            cols="6"
-            class="text-center pb-0"
-          >
-            <v-text-field
-              v-model="form.timer"
-              :disabled="!isSettingSupported('playlist.timer')"
-              label="Switch every"
-              :rules="[rules.minValue]"
-              type="number"
-              dense
-              rounded
-              filled
-              suffix="seconds"
-              class="text--right"
-            />
-          </v-col>
-          <v-col
-            cols="3"
-            class="text-center mt-2 pb-0"
-          >
-            <v-icon>$calendar_today</v-icon>
-            <br>Calendar
-          </v-col>
-        </v-row>
-      </v-card-text>
+    <v-card-text class="pb-0">
+      <v-row>
+        <v-col
+          cols="3"
+          class="text-center mt-2 pb-0"
+        >
+          <v-icon>$wb_sunny</v-icon>
+          <br>Forecast
+        </v-col>
+        <v-col
+          cols="6"
+          class="text-center pb-0"
+        >
+          <v-text-field
+            v-model="form.timer"
+            :disabled="!isSettingSupported('playlist.timer')"
+            label="Switch every"
+            :rules="[rules.minValue]"
+            type="number"
+            dense
+            rounded
+            filled
+            suffix="seconds"
+            class="text--right"
+          />
+        </v-col>
+        <v-col
+          cols="3"
+          class="text-center mt-2 pb-0"
+        >
+          <v-icon>$calendar_today</v-icon>
+          <br>Calendar
+        </v-col>
+      </v-row>
+    </v-card-text>
 
-      <v-divider class="mt-12 mx-3" />
+    <v-divider class="mt-12 mx-3" />
 
-      <v-card-subtitle>
-        Service
-      </v-card-subtitle>
-      <v-card-text>
-        <v-combobox
-          v-model="form.images"
-          :disabled="!isSettingSupported('playlist.images')"
-          :items="['https://api.paperdash.io/image/']"
-          label="Image provider"
-          prepend-icon="$link"
-          append-outer-icon="$help"
-        />
-      </v-card-text>
+    <v-card-subtitle>
+      Service
+    </v-card-subtitle>
+    <v-card-text>
+      <v-combobox
+        v-model="form.images"
+        :disabled="!isSettingSupported('playlist.images')"
+        :items="['https://api.paperdash.io/image/']"
+        label="Image provider"
+        prepend-icon="$link"
+        append-outer-icon="$help"
+      />
+    </v-card-text>
 
-      <v-divider class="mt-12" />
-      <v-card-actions>
-        <v-btn
-          text
-          @click="resetChanges"
+    <v-divider class="mt-12" />
+    <v-card-actions>
+      <v-btn
+        text
+        @click="resetChanges"
+      >
+        Restore
+      </v-btn>
+      <v-spacer />
+      <v-btn
+        :loading="isProcessing"
+        depressed
+        @click="commitChanges"
+      >
+        <v-icon
+          left
         >
-          Restore
-        </v-btn>
-        <v-spacer />
-        <v-btn
-          :loading="isProcessing"
-          depressed
-          @click="commitChanges"
-        >
-          <v-icon left>
-            $done
-          </v-icon>
-          Save
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-
-    - rename playlist to faces?
-  </div>
+          $done
+        </v-icon>
+        Save
+      </v-btn>
+    </v-card-actions>
+  </v-card>
 </template>
 
 <script>
diff --git a/app/src/views/System.vue b/app/src/views/System.vue
index c31817b..e999306 100644
--- a/app/src/views/System.vue
+++ b/app/src/views/System.vue
@@ -1,171 +1,170 @@
 <template>
-  <div class="pa-5">
-    <v-card
-      flat
-    >
-      <v-card-title class="display-2 mb-12 justify-center text-center">
-        System info
-      </v-card-title>
+  <v-card
+    flat
+    rounded="lg"
+  >
+    <v-card-title class="display-2 mb-12 justify-center text-center">
+      System info
+    </v-card-title>
 
-      <v-list-item>
-        <v-list-item-icon class="mr-3">
-          <v-icon>$info</v-icon>
-        </v-list-item-icon>
+    <v-list-item>
+      <v-list-item-icon class="mr-3">
+        <v-icon>$info</v-icon>
+      </v-list-item-icon>
+      <v-list-item-content>
+        <v-list-item-title>Software</v-list-item-title>
+      </v-list-item-content>
+      <v-list-item-action>
+        <update-dialog
+          :current-firmware="new Date(stats.firmware.created *1000)"
+          :current-app="new Date(stats.app.created *1000)"
+        >
+          <template #activator="{ on }">
+            <v-btn
+              outlined
+              color="primary"
+              v-on="on"
+            >
+              Update
+            </v-btn>
+          </template>
+        </update-dialog>
+      </v-list-item-action>
+    </v-list-item>
+    <v-divider class="mx-4" />
+    <v-list
+      class="pb-0"
+    >
+      <v-list-item three-line>
         <v-list-item-content>
-          <v-list-item-title>Software</v-list-item-title>
+          <v-list-item-title>Firmware</v-list-item-title>
+          <v-list-item-subtitle class="text--disabled">
+            Rev: {{ stats.firmware.rev }}
+          </v-list-item-subtitle>
+          <v-list-item-subtitle class="text--disabled">
+            Build: {{ new Date(stats.firmware.created * 1000).toLocaleString() }}
+          </v-list-item-subtitle>
         </v-list-item-content>
-        <v-list-item-action>
-          <update-dialog
-            :current-firmware="new Date(stats.firmware.created *1000)"
-            :current-app="new Date(stats.app.created *1000)"
-          >
-            <template #activator="{ on }">
-              <v-btn
-                outlined
-                color="primary"
-                v-on="on"
-              >
-                Update
-              </v-btn>
-            </template>
-          </update-dialog>
-        </v-list-item-action>
       </v-list-item>
-      <v-divider class="mx-4" />
-      <v-list
-        class="pb-0"
-      >
-        <v-list-item three-line>
-          <v-list-item-content>
-            <v-list-item-title>Firmware</v-list-item-title>
-            <v-list-item-subtitle class="text--disabled">
-              Rev: {{ stats.firmware.rev }}
-            </v-list-item-subtitle>
-            <v-list-item-subtitle class="text--disabled">
-              Build: {{ new Date(stats.firmware.created * 1000).toLocaleString() }}
-            </v-list-item-subtitle>
-          </v-list-item-content>
-        </v-list-item>
 
-        <v-list-item three-line>
-          <v-list-item-content>
-            <v-list-item-title>App</v-list-item-title>
-            <v-list-item-subtitle class="text--disabled">
-              Rev: {{ stats.app.rev }}
-            </v-list-item-subtitle>
-            <v-list-item-subtitle class="text--disabled">
-              Build: {{ new Date(stats.app.created * 1000).toLocaleString() }}
-            </v-list-item-subtitle>
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-
-      <v-list-item class="mt-10">
-        <v-list-item-icon class="mr-3">
-          <v-icon>$storage</v-icon>
-        </v-list-item-icon>
+      <v-list-item three-line>
         <v-list-item-content>
-          <v-list-item-title>Storage</v-list-item-title>
-        </v-list-item-content>
-        <v-list-item-avatar>
-          <v-progress-circular
-            :rotate="-90"
-            :value="fsUsage"
-            class="caption"
-          >
-            {{ fsUsage }}
-          </v-progress-circular>
-        </v-list-item-avatar>
-      </v-list-item>
-      <v-divider class="mx-4" />
-      <v-list
-        class="pb-0"
-      >
-        <v-list-item>
-          <v-list-item-title>Total</v-list-item-title>
-          <v-list-item-subtitle class="text-right">
-            {{ fs.total | prettyBytes }}
+          <v-list-item-title>App</v-list-item-title>
+          <v-list-item-subtitle class="text--disabled">
+            Rev: {{ stats.app.rev }}
           </v-list-item-subtitle>
-        </v-list-item>
-
-        <v-list-item>
-          <v-list-item-title>Free</v-list-item-title>
-          <v-list-item-subtitle class="text-right">
-            {{ fs.free | prettyBytes }}
+          <v-list-item-subtitle class="text--disabled">
+            Build: {{ new Date(stats.app.created * 1000).toLocaleString() }}
           </v-list-item-subtitle>
-        </v-list-item>
-      </v-list>
-      <v-progress-linear
-        v-if="0"
-        height="25"
-        :value="fsUsage"
-        dark
-        rounded
-      >
-        <template #default="{ value }">
-          <strong>{{ Math.ceil(value) }}%</strong>
-        </template>
-      </v-progress-linear>
-
-      <v-list-item class="mt-10">
-        <v-list-item-icon class="mr-3">
-          <v-icon>$memory</v-icon>
-        </v-list-item-icon>
-        <v-list-item-content>
-          <v-list-item-title>Memory</v-list-item-title>
         </v-list-item-content>
-        <v-list-item-avatar>
-          <v-progress-circular
-            :rotate="-90"
-            :value="memoryUsage"
-            class="caption"
-          >
-            {{ memoryUsage }}
-          </v-progress-circular>
-        </v-list-item-avatar>
       </v-list-item>
+    </v-list>
 
-      <v-divider class="mx-4" />
-      <v-list
-        class="pb-0"
-      >
-        <v-list-item>
-          <v-list-item-title>Total</v-list-item-title>
-          <v-list-item-subtitle class="text-right">
-            {{ memory.total | prettyBytes }}
-          </v-list-item-subtitle>
-        </v-list-item>
+    <v-list-item class="mt-10">
+      <v-list-item-icon class="mr-3">
+        <v-icon>$storage</v-icon>
+      </v-list-item-icon>
+      <v-list-item-content>
+        <v-list-item-title>Storage</v-list-item-title>
+      </v-list-item-content>
+      <v-list-item-avatar>
+        <v-progress-circular
+          :rotate="-90"
+          :value="fsUsage"
+          class="caption"
+        >
+          {{ fsUsage }}
+        </v-progress-circular>
+      </v-list-item-avatar>
+    </v-list-item>
+    <v-divider class="mx-4" />
+    <v-list
+      class="pb-0"
+    >
+      <v-list-item>
+        <v-list-item-title>Total</v-list-item-title>
+        <v-list-item-subtitle class="text-right">
+          {{ fs.total | prettyBytes }}
+        </v-list-item-subtitle>
+      </v-list-item>
 
-        <v-list-item>
-          <v-list-item-title>Free</v-list-item-title>
-          <v-list-item-subtitle class="text-right">
-            {{ memory.free | prettyBytes }}
-          </v-list-item-subtitle>
-        </v-list-item>
-      </v-list>
-      <v-progress-linear
-        v-if="0"
-        height="25"
-        :value="memoryUsage"
-        dark
-        rounded
-      >
-        <template #default="{ value }">
-          <strong>{{ Math.ceil(value) }}%</strong>
-        </template>
-      </v-progress-linear>
+      <v-list-item>
+        <v-list-item-title>Free</v-list-item-title>
+        <v-list-item-subtitle class="text-right">
+          {{ fs.free | prettyBytes }}
+        </v-list-item-subtitle>
+      </v-list-item>
+    </v-list>
+    <v-progress-linear
+      v-if="0"
+      height="25"
+      :value="fsUsage"
+      dark
+      rounded
+    >
+      <template #default="{ value }">
+        <strong>{{ Math.ceil(value) }}%</strong>
+      </template>
+    </v-progress-linear>
 
-      <v-divider class="mt-12" />
-      <v-card-actions>
-        <v-btn
-          depressed
-          disabled
+    <v-list-item class="mt-10">
+      <v-list-item-icon class="mr-3">
+        <v-icon>$memory</v-icon>
+      </v-list-item-icon>
+      <v-list-item-content>
+        <v-list-item-title>Memory</v-list-item-title>
+      </v-list-item-content>
+      <v-list-item-avatar>
+        <v-progress-circular
+          :rotate="-90"
+          :value="memoryUsage"
+          class="caption"
         >
-          factory reset
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </div>
+          {{ memoryUsage }}
+        </v-progress-circular>
+      </v-list-item-avatar>
+    </v-list-item>
+
+    <v-divider class="mx-4" />
+    <v-list
+      class="pb-0"
+    >
+      <v-list-item>
+        <v-list-item-title>Total</v-list-item-title>
+        <v-list-item-subtitle class="text-right">
+          {{ memory.total | prettyBytes }}
+        </v-list-item-subtitle>
+      </v-list-item>
+
+      <v-list-item>
+        <v-list-item-title>Free</v-list-item-title>
+        <v-list-item-subtitle class="text-right">
+          {{ memory.free | prettyBytes }}
+        </v-list-item-subtitle>
+      </v-list-item>
+    </v-list>
+    <v-progress-linear
+      v-if="0"
+      height="25"
+      :value="memoryUsage"
+      dark
+      rounded
+    >
+      <template #default="{ value }">
+        <strong>{{ Math.ceil(value) }}%</strong>
+      </template>
+    </v-progress-linear>
+
+    <v-divider class="mt-12" />
+    <v-card-actions>
+      <v-btn
+        depressed
+        disabled
+      >
+        factory reset
+      </v-btn>
+    </v-card-actions>
+  </v-card>
 </template>
 
 <script>
diff --git a/app/src/views/Weather.vue b/app/src/views/Weather.vue
index ba54b9a..809eb84 100644
--- a/app/src/views/Weather.vue
+++ b/app/src/views/Weather.vue
@@ -1,6 +1,7 @@
 <template>
   <v-card
     flat
+    rounded="lg"
   >
     <v-card-title class="display-2 mb-12 justify-center text-center">
       Weather settings
diff --git a/app/src/views/Wifi.vue b/app/src/views/Wifi.vue
index 2b94d9b..c8e08a5 100644
--- a/app/src/views/Wifi.vue
+++ b/app/src/views/Wifi.vue
@@ -1,136 +1,136 @@
 <template>
-  <div class="pa-5">
-    <v-card
-      flat
-    >
-      <v-card-title class="display-2 mb-12 justify-center text-center">
-        Wifi settings
-      </v-card-title>
-
-      <v-list>
-        <template v-if="stats.wifi.connected">
-          <v-list-item
-            class="px-1"
-          >
-            <v-list-item-icon class="mr-2 ml-2">
+  <v-card
+    flat
+    rounded="lg"
+  >
+    <v-card-title class="display-2 mb-12 justify-center text-center">
+      Wifi settings
+    </v-card-title>
+
+    <v-list>
+      <template v-if="stats.wifi.connected">
+        <v-list-item
+          class="px-1"
+        >
+          <v-list-item-icon class="mr-2 ml-2">
+            <v-icon>
+              $check
+            </v-icon>
+          </v-list-item-icon>
+
+          <v-list-item-content dark>
+            <v-list-item-title v-text="stats.wifi.ssid" />
+            <v-list-item-subtitle v-text="stats.wifi.mac" />
+          </v-list-item-content>
+
+          <v-list-item-icon>
+            <v-icon
+              v-if="stats.wifi.secure"
+              class="mx-2"
+            >
+              $lock
+            </v-icon>
+            <v-icon class="mx-2">
+              {{ stats.wifi.rssi | wifiIcon(0) }}
+            </v-icon>
+            <v-btn
+              icon
+              disabled
+            >
               <v-icon>
-                $check
-              </v-icon>
-            </v-list-item-icon>
-
-            <v-list-item-content dark>
-              <v-list-item-title v-text="stats.wifi.ssid" />
-              <v-list-item-subtitle v-text="stats.wifi.mac" />
-            </v-list-item-content>
-
-            <v-list-item-icon>
-              <v-icon
-                v-if="stats.wifi.secure"
-                class="mx-2"
-              >
-                $lock
+                $info
               </v-icon>
-              <v-icon class="mx-2">
-                {{ stats.wifi.rssi | wifiIcon(0) }}
-              </v-icon>
-              <v-btn
-                icon
-                disabled
-              >
-                <v-icon>
-                  $info
-                </v-icon>
-              </v-btn>
-            </v-list-item-icon>
-          </v-list-item>
-          <v-divider />
-        </template>
-        <v-subheader class="pl-0 mt-5">
-          Networks
-        </v-subheader>
+            </v-btn>
+          </v-list-item-icon>
+        </v-list-item>
+        <v-divider />
+      </template>
+      <v-subheader class="pl-0 mt-5">
+        Networks
+      </v-subheader>
 
-        <template v-if="!isLoading">
-          <template
+      <template v-if="!isLoading">
+        <template
 
-            v-for="(wifi, i) in wifiAvailable"
+          v-for="(wifi, i) in wifiAvailable"
+        >
+          <div
+            v-if="wifi.ssid !== settings.system.wifi || !stats.wifi.connected"
+            :key="i"
           >
-            <div
-              v-if="wifi.ssid !== settings.system.wifi"
-              :key="i"
+            <v-divider v-if="i > 0" />
+
+            <v-list-item
+              class="px-1"
+              @click="onWifiSelect(wifi)"
             >
-              <v-divider v-if="i > 0" />
-
-              <v-list-item
-                class="px-1"
-                @click="onWifiSelect(wifi)"
-              >
-                <v-list-item-icon class="mr-2 ml-2">
-                  <v-icon v-if="wifi.ssid === settings.system.wifi">
-                    $check
-                  </v-icon>
-
-                  <v-progress-circular
-                    v-if="wifi.ssid === connectingSSID"
-                    :size="24"
-                    :width="2"
-                    color="grey "
-                    indeterminate
-                  />
-                </v-list-item-icon>
-
-                <v-list-item-content dark>
-                  <v-list-item-title v-text="wifi.ssid" />
-                  <v-list-item-subtitle v-text="wifi.bssid" />
-                </v-list-item-content>
-
-                <v-list-item-icon>
-                  <v-icon
-                    v-if="wifi.secure"
-                    class="mx-2"
-                  >
-                    $lock
-                  </v-icon>
-                  <v-icon class="mx-2">
-                    {{ wifi.rssi | wifiIcon(0) }}
-                  </v-icon>
-                  <v-icon class="ml-3">
-                    $next
-                  </v-icon>
-                </v-list-item-icon>
-              </v-list-item>
-            </div>
-          </template>
-        </template>
+              <v-list-item-icon class="mr-2 ml-2">
+                <v-icon v-if="wifi.ssid === settings.system.wifi">
+                  $check
+                </v-icon>
 
-        <v-skeleton-loader
-          v-else
-          type="list-item-two-line,list-item-two-line,list-item-two-line"
-        />
+                <v-progress-circular
+                  v-if="wifi.ssid === connectingSSID"
+                  :size="24"
+                  :width="2"
+                  color="grey "
+                  indeterminate
+                />
+              </v-list-item-icon>
+
+              <v-list-item-content dark>
+                <v-list-item-title v-text="wifi.ssid" />
+                <v-list-item-subtitle v-text="wifi.bssid" />
+              </v-list-item-content>
+
+              <v-list-item-icon>
+                <v-icon
+                  v-if="wifi.secure"
+                  class="mx-2"
+                >
+                  $lock
+                </v-icon>
+                <v-icon class="mx-2">
+                  {{ wifi.rssi | wifiIcon(0) }}
+                </v-icon>
+                <v-icon class="ml-3">
+                  $next
+                </v-icon>
+              </v-list-item-icon>
+            </v-list-item>
+          </div>
+        </template>
+      </template>
 
-        <v-divider />
+      <v-skeleton-loader
+        v-else
+        type="list-item-two-line,list-item-two-line,list-item-two-line"
+      />
 
-        <v-btn
-          text
-          color="primary"
-          class="_px-0 my-2"
-          disabled
-        >
-          Choose Another Network
-        </v-btn>
-      </v-list>
+      <v-divider />
 
-      <v-dialog
-        v-model="wifiPasswordModal"
-        max-width="450"
+      <v-btn
+        text
+        color="primary"
+        class="_px-0 my-2"
+        disabled
       >
-        <setup-wifi-connect
-          :ssid="connectSSID"
-          :on-connect="onWifiConnect"
-          @cancel="wifiPasswordModal = false"
-        />
-      </v-dialog>
-    </v-card>
-  </div>
+        Choose Another Network
+      </v-btn>
+    </v-list>
+
+    <v-dialog
+      v-model="wifiPasswordModal"
+      max-width="450"
+      _:fullscreen="$vuetify.breakpoint.mobile"
+    >
+      <setup-wifi-connect
+        :ssid="connectSSID"
+        :on-connect="onWifiConnect"
+        @cancel="wifiPasswordModal = false"
+      />
+    </v-dialog>
+  </v-card>
 </template>
 
 <script>
@@ -174,7 +174,13 @@
         this.connectingSSID = ssid
         this.wifiPasswordModal = false
 
-        apiDevice.wifiConnect(ssid, password, () => {})
+        apiDevice.wifiConnect(ssid, password, () => {
+          setTimeout(() => {
+            // phone should be back in regular wifi
+            // search for device via mDNS
+            window.location = 'http://paperdash-display.local'
+          }, 3000)
+        })
       },
     },
   }