feat: adiciona tela de login

src/components/defaults/DefaultInput.vue

@@ -1,16 +1,11 @@
 <template>
   <div class="column" :class="attrs.class" :style="attrs.style">
-    <div v-if="label || $slots.label" class="q-pl-xs">
-      <slot name="label">
-        <span>{{ label }}</span>
-      </slot>
-      <span v-if="required" class="text-negative q-ml-xs">*</span>
-    </div>
     <div class="col">
       <q-input
         ref="inputRef"
         v-model="model"
         v-bind="inputAttrs"
+        :label
         :error="!!error"
         :error-message="errorMessage"
         :rules

src/css/app.scss

@@ -1,5 +1,10 @@
 @use "sass:map";
 @use "src/css/quasar.variables.scss";
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap');
+
+body {
+  font-family: "Inter", sans-serif;
+}
 
 .flex-grow {
   flex-grow: 1;

src/css/quasar.variables.scss

@@ -13,6 +13,7 @@ $colors: (
   "primary-3": #809f94,
   "primary-4": #c0cfca,
 
+  
   "secondary": #ff8340,
   "secondary-2": #ffa270,
   "secondary-3": #ffc1a0,
@@ -49,6 +50,8 @@ $colors: (
   "declined-2": #ff6a6d,
   "declined-3": #ff9c9e,
   "declined-4": #ffcecf,
+
+  "warning": #BF6A02,
 );
 
 @each $name, $color in $colors {

src/layouts/LoginLayout.vue

@@ -5,3 +5,5 @@
     </q-page-container>
   </q-layout>
 </template>
+
+<script setup></script>

src/pages/login/LoginPage.vue

@@ -1,18 +1,38 @@
 <template>
-  <q-page class="column">
+  <q-page class="column justify-center items-center login-page">
     <div
       flat
-      class="column justify-around items-center flex-grow full-width full-height z-top"
+      class="column justify-center items-center flex-grow full-width z-top bg-background"
+      style="
+        max-width: 659px;
+        max-height: 738px;
+        width: 100%;
+        height: 100%;
+        border-radius: 15px;
+      "
     >
-      <div class="column flex-center full-width q-px-md">
-        <q-img :src="Logo" style="max-width: 650px" />
-        <div class="text-h5 q-mt-xl">{{ $t("auth.login") }}</div>
+      <div class="column flex-center full-width">
+        <q-img
+          :src="Logo"
+          style="max-width: 611px; max-height: 171px; height: 100%; width: 100%"
+        />
+        <div class="text-h4 q-mt-xl text-primary" style="font-weight: 400">
+          Faça seu Login
+        </div>
+
+        <div
+          class="items-center full-width q-px-lg q-mt-xl"
+          style="display: flex; gap: 12px"
+        >
+          <div class="bg-primary" style="height: 1px; flex: 1"></div>
+          <q-icon name="mdi-chevron-down" size="lg" color="warning" />
+          <div class="bg-primary" style="height: 1px; flex: 1"></div>
+        </div>
       </div>
 
       <q-form
         ref="formRef"
-        class="full-width q-pa-md q-pb-xl"
-        style="max-width: 400px"
+        class="full-width q-px-lg column q-gutter-y-md q-mt-xs"
         autocorrect="off"
         autocapitalize="off"
         autocomplete="off"
@@ -24,28 +44,27 @@
           v-model:error="validationErrors.email"
           type="email"
           lazy-rules
-          autofocus
           :label="$t('common.terms.email')"
           :rules="[inputRules.required, inputRules.email]"
         />
+
         <DefaultPasswordInput
           v-model="form.password"
           v-model:error="validationErrors.password"
           :rules="[inputRules.required, inputRules.min(6)]"
           :label="$t('common.terms.password')"
         />
-        <q-checkbox
-          v-model="checkbox"
-          size="xs"
-          label="Lembrar email"
-          class="q-mb-md"
-          style="margin-left: -6px"
-        />
+
+        <span
+          class="q-ma-xs text-body2 text-primary"
+          style="letter-spacing: 0.25px"
+          >Esqueceu sua senha?</span
+        >
         <div>
           <q-btn
-            class="full-width"
-            color="primary"
-            :label="$t('auth.sign-in')"
+            class="full-width q-mt-md"
+            color="primary-2"
+            label="Entrar"
             size="md"
             padding="sm"
             type="submit"
@@ -56,7 +75,6 @@
             </template>
           </q-btn>
         </div>
-        <div style="height: 160px"></div>
       </q-form>
     </div>
   </q-page>
@@ -123,6 +141,9 @@ onBeforeMount(() => {
 
 <style lang="scss" scoped>
 .login-page {
-  position: relative;
+  background-image: url("background.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 </style>