feat: :sparkles: criada tela de login

src/css/app.scss

@@ -108,32 +108,32 @@ body,
 
 .input-disable {
   .q-field--outlined .q-field__control::before {
-    border: 1px solid #b9b9b9 !important;
+    border: 1px solid #565454 !important;
     transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
   }
 }
 
 .q-input-border {
   .q-field__control::before {
-    border: 1px solid #b9b9b9 !important;
+    border: 1px solid #565454 !important;
     transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
   }
 }
 
 .q-field--labeled .q-field__control,
 .q-field--focused .q-field__control {
-  border-radius: 8px !important;
+  border-radius: 4px !important;
 }
 
 .q-field--outlined.q-field--rounded .q-field__control {
-  border-radius: 8px;
+  border-radius: 4px;
 }
 
 // quasar component overrides
 .q-field__control,
 .q-item--active,
 .q-toggle__inner--truthy {
-  color: #ffd700 !important;
+  color: #ED3237 !important;
   border-radius: 8px;
 }
 
@@ -144,23 +144,23 @@ body,
   .q-field--labeled .q-field__control,
   .q-field--focused .q-field__control,
   .q-field--outlined.q-field--rounded .q-field__control {
-    color: #ffd700 !important;
+    color: #ED3237 !important;
     border-radius: 0px;
   }
 }
 
 .select-rounded {
-  border-radius: 8px;
+  border-radius: 4px;
 }
 
 .default-button-padding {
   padding: 12px 16px 12px 16px !important;
-  border-radius: 8px;
+  border-radius: 4px;
 }
 
 .q-checkbox__bg {
   border-radius: 4px !important;
-  border: 1px solid #ffd700 !important;
+  border: 1px solid #ED3237 !important;
 }
 
 .img-gradient {

src/css/quasar.variables.scss

@@ -10,18 +10,19 @@ $colors: (
   "second-2": #D1D1D1,
   "second-3": #E0E0E0,
   "second-4": #F0F0F0,
-  "text": #232323,
-  "text-2": #565454,
-  "text-3": #919191,
-  "text-4": #D5D5D5,
+  "dark": #232323,
+  "dark-2": #565454,
+  "dark-3": #919191,
+  "dark-4": #D5D5D5,
   "background": #EFEFEF,
-  "background-2": #F7F9F7,
+  "background-2": #F2F4F7,
   "background-3": #FAFBF9,
   "background-4": #F6F9FC,
   "background-secondary": #848688,
   "background-secondary-2": #A9AAAB,
   "background-secondary-3": #C1C2C3,
   "background-secondary-4": #DADADB,
+  "white": #FFFFFF,
 
 
   "green": #01EC01,
@@ -40,6 +41,8 @@ $colors: (
   "yellow-4": #FDF1C2,
 );
 
+$primary: #ED3237;
+
 @each $name, $color in $colors {
   .text-#{$name} {
     color: $color !important;

src/pages/LoginPage.vue

@@ -1,69 +1,86 @@
 <template>
-  <q-page padding class="login-page bg-background">
-    <q-card flat class="login-card q-pa-md q-pt-xl bg-grey-box">
-      <div class="text-center">
-        <q-img src="assets/logo.png" style="max-width: 250px" />
+  <q-page padding class="login-page bg-background-2">
+    <div>
+      <div class="text-center q-mb-md">
+        <q-img
+          src="../assets/logo_simmer_principal.svg"
+          style="max-width: 480px"
+        />
       </div>
 
-      <q-card-section class="text-center">
-        <div class="text-h4">Bem-vindo</div>
-      </q-card-section>
-
-      <q-form
-        ref="loginForm"
-        class="q-pa-md"
-        autocorrect="off"
-        autocapitalize="off"
-        autocomplete="off"
-        spellcheck="false"
-        @submit="submitLogin"
-      >
-        <q-card-section class="q-mt-sm">
-          <q-input
-            v-model="email"
-            filled
-            type="email"
-            label="Email"
-            lazy-rules
-            autofocus
-          />
-
-          <q-input
-            v-model="password"
-            label="Senha"
-            filled
-            :type="isPwd ? 'password' : 'text'"
-            class="q-mt-xs"
-            lazy-rules
-          >
-            <template #append>
-              <q-icon
-                :name="isPwd ? 'mdi-eye-off' : 'mdi-eye'"
-                class="cursor-pointer q-ml-md"
-                @click="isPwd = !isPwd"
-              />
-            </template>
-          </q-input>
-
-          <q-checkbox v-model="checkbox" label="Lembrar email" />
-        </q-card-section>
-
-        <q-card-actions align="right">
-          <q-btn
-            color="primary"
-            label="Login"
-            size="md"
-            padding="md"
-            type="submit"
-            :loading="submitting"
-          >
-            <template #loading>
-              <q-spinner />
-            </template>
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
+      <q-card flat class="login-card q-pa-md q-pt-md bg-dark-3 ">
+        <q-form
+          ref="loginForm"
+          class="q-pa-md"
+          autocorrect="off"
+          autocapitalize="off"
+          autocomplete="off"
+          spellcheck="false"
+          @submit="submitLogin"
+        >
+          <q-card-section class="q-mt-sm q-mx-xl q-pb-none">
+            <q-input
+              v-model="email"
+              filled
+              outlined
+              type="email"
+              label="Login"
+              lazy-rules
+              autofocus
+              dense
+              bg-color="white"
+            />
+
+            <q-input
+              v-model="password"
+              label="Senha"
+              filled
+              :type="isPwd ? 'password' : 'text'"
+              class="q-mt-md"
+              lazy-rules
+              dense
+              bg-color="white"
+            >
+              <template #append>
+                <q-icon
+                  :name="isPwd ? 'mdi-eye-off' : 'mdi-eye'"
+                  class="cursor-pointer q-ml-md"
+                  @click="isPwd = !isPwd"
+                />
+              </template>
+            </q-input>
+
+            <q-checkbox v-model="checkbox" label="Lembrar email"  />
+          </q-card-section>
+
+          <q-card-actions align="center" class="q-mx-xl q-px-md" >
+            <q-btn
+              color="primary"
+              label="Entrar"
+              padding="sm"
+              type="submit"
+              no-caps
+              class="full-width"
+              :loading="submitting"
+            >
+              <template #loading>
+                <q-spinner />
+              </template>
+            </q-btn>
+          </q-card-actions>
+        </q-form>
+      </q-card>
+
+
+      <div class="text-center q-mt-xl text-background-secondary">
+        <div>
+          <span>"A simplicidade é o último grau de sofisticação."</span>
+        </div>
+        <div>
+          <span>- Leonardo da Vinci</span>
+        </div>
+      </div>
+    </div>
   </q-page>
 </template>
 
@@ -137,8 +154,9 @@ onMounted(() => {
   align-items: center;
 
   .login-card {
-    min-width: 500px;
+    min-width: 585px;
     max-width: 500px;
+    border-radius: 12px;
   }
 }
 </style>