layout improvements

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;
+}

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
+      <template
-        :active="isConnecting"
+        #extension
-        indeterminate
+      >
-        absolute
+        <div class="text-center align-content-center">
-        bottom
+          Enter the password
-        color="deep-orange accent-4"
+        </div>
-      />
+      </template>
     </v-toolbar>
 
     <v-card-text class="pa-5">
       <v-text-field
         v-model="password"
-        :append-icon="show1 ? '$visibility' : '$visibility_off'"
+        :append-icon="show ? '$visibility' : '$visibility_off'"
-        :type="show1 ? 'text' : 'password'"
+        :type="show ? 'text' : 'password'"
-        label="i8n:Password"
+        label="Password"
-        @click:append="show1 = !show1"
+        @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>

app/src/views/Device.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="pa-5">
   <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>
+    <div>
       <v-text-field
         v-model="form.name"
         label="Name"
@@ -48,7 +48,7 @@
           (GMT{{ item.utcOffsetStr }}) {{ item.name }}
         </template>
       </v-autocomplete>
-      </v-card-text>
+    </div>
 
     <v-divider class="mt-12" />
     <v-card-actions>
@@ -71,7 +71,6 @@
       </v-btn>
     </v-card-actions>
   </v-card>
-  </div>
 </template>
 
 <script>

app/src/views/Playlist.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="pa-5">
   <v-card
     flat
+    rounded="lg"
   >
     <v-card-title class="display-2 mb-12 justify-center text-center">
       Playlist settings
@@ -73,16 +73,15 @@
         depressed
         @click="commitChanges"
       >
-          <v-icon left>
+        <v-icon
+          left
+        >
           $done
         </v-icon>
         Save
       </v-btn>
     </v-card-actions>
   </v-card>
-
-    - rename playlist to faces?
-  </div>
 </template>
 
 <script>

app/src/views/System.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="pa-5">
   <v-card
     flat
+    rounded="lg"
   >
     <v-card-title class="display-2 mb-12 justify-center text-center">
       System info
@@ -165,7 +165,6 @@
       </v-btn>
     </v-card-actions>
   </v-card>
-  </div>
 </template>
 
 <script>

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

app/src/views/Wifi.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="pa-5">
   <v-card
     flat
+    rounded="lg"
   >
     <v-card-title class="display-2 mb-12 justify-center text-center">
       Wifi settings
@@ -55,7 +55,7 @@
           v-for="(wifi, i) in wifiAvailable"
         >
           <div
-              v-if="wifi.ssid !== settings.system.wifi"
+            v-if="wifi.ssid !== settings.system.wifi || !stats.wifi.connected"
             :key="i"
           >
             <v-divider v-if="i > 0" />
@@ -122,6 +122,7 @@
     <v-dialog
       v-model="wifiPasswordModal"
       max-width="450"
+      _:fullscreen="$vuetify.breakpoint.mobile"
     >
       <setup-wifi-connect
         :ssid="connectSSID"
@@ -130,7 +131,6 @@
       />
     </v-dialog>
   </v-card>
-  </div>
 </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)
+        })
       },
     },
   }