From 1f7e8724da24360fe8201a39b6fe9ca9fba8238c Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Tue, 8 Dec 2020 16:52:52 -0400
Subject: [PATCH] Update styles

---
 web/src/components/ThemeToggleBtn.vue         |  9 +++----
 web/src/components/UserMenu.vue               | 22 +++++++---------
 web/src/components/UserPresenceStatusList.vue | 18 +++++++++----
 web/src/views/UserPresence.vue                | 26 +++++++++++++------
 4 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/web/src/components/ThemeToggleBtn.vue b/web/src/components/ThemeToggleBtn.vue
index c4e36e9..d927e65 100755
--- a/web/src/components/ThemeToggleBtn.vue
+++ b/web/src/components/ThemeToggleBtn.vue
@@ -1,9 +1,8 @@
 <template>
-  <v-btn text rounded icon @click="$vuetify.theme.dark = !$vuetify.theme.dark">
-    <v-icon v-if="$vuetify.theme.dark" color="blue darken-1"
-      >mdi-lightbulb</v-icon
-    >
-    <v-icon v-else color="yellow darken-3">mdi-lightbulb-on</v-icon>
+  <v-btn text @click="$vuetify.theme.dark = !$vuetify.theme.dark">
+    <v-icon :color="$vuetify.theme.dark ? 'blue darken-1' : 'yellow darken-4'">
+      mdi-theme-light-dark
+    </v-icon>
   </v-btn>
 </template>
 <script>
diff --git a/web/src/components/UserMenu.vue b/web/src/components/UserMenu.vue
index c48f153..bec10f5 100755
--- a/web/src/components/UserMenu.vue
+++ b/web/src/components/UserMenu.vue
@@ -5,9 +5,8 @@
         rounded
         :block="block"
         :class="{ 'py-7': big }"
-        depressed
-        color="primary darken-1"
         outlined
+        color="primary darken-1"
         style="text-transform: initial"
         v-on="on"
       >
@@ -25,20 +24,22 @@
           </v-list-item-avatar>
 
           <v-list-item-content>
-            <v-list-item-title>{{ me.displayName }}</v-list-item-title>
+            <v-list-item-title class="title">{{
+              me.displayName
+            }}</v-list-item-title>
             <v-list-item-subtitle v-if="me.title"
               >{{ me.title.capitalize() || '' }}
             </v-list-item-subtitle>
           </v-list-item-content>
-          <v-list-item-action
-            ><v-btn icon><v-icon>mdi-close</v-icon></v-btn></v-list-item-action
-          >
+          <v-list-item-action>
+            <v-btn icon><v-icon>mdi-close</v-icon></v-btn>
+          </v-list-item-action>
         </v-list-item>
       </v-list>
 
       <v-divider />
 
-      <v-list nav dense>
+      <v-list nav>
         <v-list-item v-for="item in nav" :key="item.to" :to="item.to">
           <v-list-item-icon>
             <v-icon>{{ item.icon }}</v-icon>
@@ -49,12 +50,9 @@
 
       <v-card-actions>
         <ThemeToggleBtn />
-
         <v-spacer />
-
-        <v-btn color="error" text large @click="doLogout">
-          <v-icon left>mdi-logout</v-icon>
-          Sair
+        <v-btn color="error darken-2" depressed @click="doLogout">
+          <v-icon left>mdi-logout</v-icon> Sair
         </v-btn>
       </v-card-actions>
     </v-card>
diff --git a/web/src/components/UserPresenceStatusList.vue b/web/src/components/UserPresenceStatusList.vue
index 399234f..831cd64 100644
--- a/web/src/components/UserPresenceStatusList.vue
+++ b/web/src/components/UserPresenceStatusList.vue
@@ -12,7 +12,11 @@
         md="6"
         lg="3"
       >
-        <v-card outlined class="border-highlight">
+        <v-card
+          outlined
+          class="border-highlight"
+          :class="{ online: userPresence.wifiDevices[0].isOnline }"
+        >
           <v-list three-line>
             <v-list-item>
               <v-list-item-avatar size="52px" style="overflow: visible">
@@ -101,8 +105,12 @@ export default {
 }
 </script>
 
-<style scoped lang="sass">
-.border-highlight
-  box-shadow: 1.5px 1.5px 12px rgba(0, 0, 0, 0.05)
-  border-left: 3px solid grey
+<style scoped lang="scss">
+.border-highlight {
+  box-shadow: 1.5px 1.5px 12px rgba(0, 0, 0, 0.05);
+  border-left: 3px solid grey;
+}
+.online {
+  border-left-color: #4caf50;
+}
 </style>
diff --git a/web/src/views/UserPresence.vue b/web/src/views/UserPresence.vue
index e580da1..9dd3473 100644
--- a/web/src/views/UserPresence.vue
+++ b/web/src/views/UserPresence.vue
@@ -5,7 +5,7 @@
       :loading="$apollo.queries.userPresence.loading"
       class="mt-6 search"
       label="Pesquisar"
-      hint="Usuário ou AP (Ex.: jose, pp, sala 102)"
+      hint="Ex.: jose, pp, sala 102, 10.7."
       prepend-icon="mdi-account-search"
       clearable
       filled
@@ -42,18 +42,28 @@
 
     <v-row class="mt-6">
       <v-col>
-        <v-alert class="fill-height" color="info" outlined icon="mdi-alert">
+        <v-alert
+          class="fill-height"
+          color="info darken-2"
+          icon="mdi-alert"
+          dark
+        >
           A lista de pessoas mostrada aqui é obtida através do uso da rede
-          Wireless. Este método não é preciso (podendo não indicar alguém
-          presente ou indicando alguém que deixou um dispositivo no campus). Use
-          esta lista com a devida cautela.
+          <strong>Wi-Fi</strong> Este método não é preciso, podendo não indicar
+          alguém presente ou indicar alguém que deixou um dispositivo no campus.
+          Use esta lista com a <strong>devida cautela</strong>.
         </v-alert>
       </v-col>
 
       <v-col>
-        <v-alert class="fill-height" color="accent" outlined icon="mdi-update">
-          A lista é atualizada automaticamente. Não é necessário atualizar a
-          página.
+        <v-alert
+          class="fill-height"
+          color="info darken-2"
+          icon="mdi-update"
+          dark
+        >
+          A lista é atualizada automaticamente. Não é necessário
+          <strong>atualizar</strong> a página.
         </v-alert>
       </v-col>
     </v-row>