From 42e0da7c2c7e534209e339259bfb2bfba12f75a8 Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Wed, 16 Dec 2020 10:33:23 -0400
Subject: [PATCH] Layout changes

---
 web/src/views/UserPresence.vue | 34 +++++++++++++---------------------
 1 file changed, 13 insertions(+), 21 deletions(-)

diff --git a/web/src/views/UserPresence.vue b/web/src/views/UserPresence.vue
index 47790f3..12e99fa 100644
--- a/web/src/views/UserPresence.vue
+++ b/web/src/views/UserPresence.vue
@@ -30,10 +30,12 @@
     </v-toolbar>
     <v-container fluid class="mb-12">
       <div v-if="stats" class="text-center my-4">
-        <v-chip color="primary" class="mr-1" dark>
-          {{ stats.onlineUsers }}
-        </v-chip>
-        usuários online.
+        <span>
+          <v-chip color="primary" class="mr-1" dark>
+            {{ stats.onlineUsers }}
+          </v-chip>
+          usuários online.
+        </span>
         <v-scale-transition>
           <span v-if="search">
             <v-chip color="primary" class="ml-2 mr-1" dark>
@@ -42,7 +44,7 @@
                   presence => presence.wifiDevices[0].isOnline
                 ).length
               }}
-              / {{ userPresence.length }}
+              de {{ userPresence.length }}
             </v-chip>
             na sua pesquisa.
           </span>
@@ -101,26 +103,16 @@
 
       <v-row class="mt-6">
         <v-col cols="12" md="6">
-          <v-alert
-            class="fill-height"
-            color="primary darken-1"
-            icon="mdi-alert"
-            dark
-          >
-            A lista de pessoas mostrada aqui é obtida através do uso da rede
-            <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 type="info" icon="mdi-alert" border="left" text>
+            A lista de usuários é obtida através do uso da rede
+            <strong>Wi-Fi</strong>. Ela pode não mostrar 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 cols="12" md="6">
-          <v-alert
-            class="fill-height"
-            color="primary darken-1"
-            icon="mdi-update"
-            dark
-          >
+          <v-alert type="info" icon="mdi-update" text border="left">
             A lista é atualizada automaticamente. Não é necessário
             <strong>atualizar</strong> a página.
           </v-alert>