style: :lipstick: style (login) refatoração do fluxo de recuperar senha

foi refatorado o fluxo de alterar senha para se adequar ao layout do sistema

fase:dev | origin:escopo

src/pages/login/ForgotPasswordPage.vue

@@ -3,50 +3,52 @@
     <div class="login-overlay" />
 
     <div class="login-card column items-center">
-      <q-img :src="Logo" class="login-logo q-mb-lg" />
-
-      <UserTypeBadge :tipo="tipo" />
-
-      <p class="login-title">{{ $t("auth.forgot_password_title") }}</p>
-      <p class="login-description">{{ $t("auth.forgot_password_description") }}</p>
-
-      <q-form
-        ref="formRef"
-        class="full-width"
-        autocomplete="off"
-        @submit="onSubmit"
-      >
-        <DefaultInput
-          v-model="form.email"
-          v-model:error="validationErrors.email"
-          type="email"
-          autofocus
-          :label="$t('common.terms.email')"
-          :rules="[inputRules.required, inputRules.email]"
-        >
-          <template #append>
-            <q-icon name="mdi-account-outline" color="grey-5" />
-          </template>
-        </DefaultInput>
-
-        <q-btn
-          class="full-width q-mt-sm login-btn"
-          color="secondary"
-          :label="$t('auth.continue')"
-          type="submit"
-          unelevated
-          :loading
+      <div class="column items-center fields-card">
+        <q-img :src="Logo" class="login-logo q-mb-lg" />
+
+        <UserTypeBadge :tipo="tipo" />
+
+        <p class="login-title">{{ $t("auth.forgot_password_title") }}</p>
+        <p class="login-description">{{ $t("auth.forgot_password_description") }}</p>
+
+        <q-form
+          ref="formRef"
+          class="full-width"
+          autocomplete="off"
+          @submit="onSubmit"
         >
-          <template #loading>
-            <q-spinner />
-          </template>
-        </q-btn>
-      </q-form>
-
-      <a href="#" class="login-link q-mt-md" @click.prevent="goBack">
-        <q-icon name="mdi-arrow-left" size="12px" class="q-mr-xs" />
-        {{ $t("auth.back_to_site") }}
-      </a>
+          <DefaultInput
+            v-model="form.email"
+            v-model:error="validationErrors.email"
+            type="email"
+            autofocus
+            :label="$t('common.terms.email')"
+            :rules="[inputRules.required, inputRules.email]"
+          >
+            <template #append>
+              <q-icon name="mdi-account-outline" color="grey-5" />
+            </template>
+          </DefaultInput>
+
+          <q-btn
+            class="full-width q-mt-sm login-btn"
+            color="violet-normal"
+            :label="$t('auth.continue')"
+            type="submit"
+            unelevated
+            :loading
+          >
+            <template #loading>
+              <q-spinner />
+            </template>
+          </q-btn>
+        </q-form>
+
+        <a href="#" class="login-link q-mt-md" @click.prevent="goBack">
+          <q-icon name="mdi-arrow-left" size="12px" class="q-mr-xs" />
+          {{ $t("auth.back_to_site") }}
+        </a>
+      </div>
     </div>
   </q-page>
 </template>
@@ -92,7 +94,8 @@ const goBack = () => router.push({ name: "LoginPage" });
 </script>
 
 <style lang="scss" scoped>
-@use "src/css/quasar.variables.scss";
+@use "sass:map";
+@use "src/css/quasar.variables.scss" as *;
 
 .login-page {
   min-height: 100dvh;
@@ -101,51 +104,68 @@ const goBack = () => router.push({ name: "LoginPage" });
   background-position: center;
   position: relative;
 }
+
 .login-overlay {
   position: absolute;
   inset: 0;
-  background: rgba(74, 20, 140, 0.72);
+  background: rgba(74, 20, 140, 0.48);
   z-index: 0;
 }
+
 .login-card {
-  position: relative;
   z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(100% - 32px);
+  min-height: calc(100dvh - 32px);
+  background: rgba(255, 255, 255, 0.747);
+  border-radius: 16px;
+  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.15);
+}
+
+.fields-card {
   width: 100%;
-  max-width: 400px;
-  padding: 32px 24px 40px;
+  max-width: 600px;
+  padding: 32px;
+  border-radius: 12px;
 }
+
 .login-logo {
-  width: 180px;
-  filter: brightness(0) invert(1);
+  width: 380px;
 }
+
 .login-title {
-  color: #fff;
+  color: map.get($colors, "violet-normal");
   font-size: 18px;
   font-weight: 700;
   margin: 0 0 8px;
   text-align: center;
 }
+
 .login-description {
-  color: rgba(255, 255, 255, 0.8);
+  color: map.get($colors, "text-2");
   font-size: 13px;
   text-align: center;
   margin: 0 0 20px;
 }
+
 .login-btn {
   height: 44px;
   font-size: 15px;
   font-weight: 600;
+  letter-spacing: 0.5px;
 }
+
 .login-link {
-  color: rgba(255, 255, 255, 0.75);
+  color: map.get($colors, "violet-normal");
   font-size: 13px;
   text-decoration: none;
   cursor: pointer;
-  &:hover { color: #fff; text-decoration: underline; }
-}
-:deep(.q-field) {
-  .q-field__control { background: rgba(255, 255, 255, 0.12) !important; border-radius: 8px; }
-  .q-field__label, .q-field__native, .q-field__input { color: #fff !important; }
-  .q-field__bottom { color: rgba(255, 100, 100, 0.9) !important; }
+
+  &:hover {
+    color: map.get($colors, "violet-normal-hover");
+    text-decoration: underline;
+  }
 }
 </style>

src/pages/login/ResetPasswordPage.vue

@@ -3,48 +3,50 @@
     <div class="login-overlay" />
 
     <div class="login-card column items-center">
-      <q-img :src="Logo" class="login-logo q-mb-lg" />
-
-      <UserTypeBadge :tipo="tipo" />
-
-      <p class="login-title">{{ $t("auth.new_password_title") }}</p>
-
-      <q-form
-        ref="formRef"
-        class="full-width"
-        autocomplete="off"
-        @submit="onSubmit"
-      >
-        <DefaultPasswordInput
-          v-model="form.password"
-          v-model:error="validationErrors.password"
-          :label="$t('common.terms.password')"
-          :rules="[inputRules.required, inputRules.password]"
-          :hint="$t('auth.password_hint')"
-        />
-        <DefaultPasswordInput
-          v-model="form.password_confirmation"
-          v-model:error="validationErrors.password_confirmation"
-          :label="$t('auth.confirm_password')"
-          :rules="[inputRules.required, (v) => v === form.password || $t('validation.rules.same_password')]"
-        />
-
-        <q-btn
-          class="full-width q-mt-sm login-btn"
-          color="secondary"
-          :label="$t('auth.confirm')"
-          type="submit"
-          unelevated
-          :loading
+      <div class="column items-center fields-card">
+        <q-img :src="Logo" class="login-logo q-mb-lg" />
+
+        <UserTypeBadge :tipo="tipo" />
+
+        <p class="login-title">{{ $t("auth.new_password_title") }}</p>
+
+        <q-form
+          ref="formRef"
+          class="full-width"
+          autocomplete="off"
+          @submit="onSubmit"
         >
-          <template #loading><q-spinner /></template>
-        </q-btn>
-      </q-form>
-
-      <a href="#" class="login-link q-mt-md" @click.prevent="goBack">
-        <q-icon name="mdi-arrow-left" size="12px" class="q-mr-xs" />
-        {{ $t("auth.back_to_site") }}
-      </a>
+          <DefaultPasswordInput
+            v-model="form.password"
+            v-model:error="validationErrors.password"
+            :label="$t('common.terms.password')"
+            :rules="[inputRules.required, inputRules.password]"
+            :hint="$t('auth.password_hint')"
+          />
+          <DefaultPasswordInput
+            v-model="form.password_confirmation"
+            v-model:error="validationErrors.password_confirmation"
+            :label="$t('auth.confirm_password')"
+            :rules="[inputRules.required, (v) => v === form.password || $t('validation.rules.same_password')]"
+          />
+
+          <q-btn
+            class="full-width q-mt-sm login-btn"
+            color="violet-normal"
+            :label="$t('auth.confirm')"
+            type="submit"
+            unelevated
+            :loading
+          >
+            <template #loading><q-spinner /></template>
+          </q-btn>
+        </q-form>
+
+        <a href="#" class="login-link q-mt-md" @click.prevent="goBack">
+          <q-icon name="mdi-arrow-left" size="12px" class="q-mr-xs" />
+          {{ $t("auth.back_to_site") }}
+        </a>
+      </div>
     </div>
   </q-page>
 </template>
@@ -94,24 +96,71 @@ const goBack = () => router.push({ name: "LoginPage" });
 </script>
 
 <style lang="scss" scoped>
-@use "src/css/quasar.variables.scss";
+@use "sass:map";
+@use "src/css/quasar.variables.scss" as *;
 
 .login-page {
   min-height: 100dvh;
   background-image: url("src/assets/pessoas_fundo.jpg");
-  background-size: cover; background-position: center; position: relative;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+}
+
+.login-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(74, 20, 140, 0.48);
+  z-index: 0;
+}
+
+.login-card {
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(100% - 32px);
+  min-height: calc(100dvh - 32px);
+  background: rgba(255, 255, 255, 0.747);
+  border-radius: 16px;
+  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.15);
+}
+
+.fields-card {
+  width: 100%;
+  max-width: 600px;
+  padding: 32px;
+  border-radius: 12px;
+}
+
+.login-logo {
+  width: 380px;
+}
+
+.login-title {
+  color: map.get($colors, "violet-normal");
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0 0 20px;
+  text-align: center;
 }
-.login-overlay { position: absolute; inset: 0; background: rgba(74,20,140,0.72); z-index: 0; }
-.login-card { position: relative; z-index: 1; width: 100%; max-width: 400px; padding: 32px 24px 40px; }
-.login-logo { width: 180px; filter: brightness(0) invert(1); }
-.login-title { color: #fff; font-size: 18px; font-weight: 700; margin: 0 0 20px; text-align: center; }
-.login-btn { height: 44px; font-size: 15px; font-weight: 600; }
-.login-link { color: rgba(255,255,255,0.75); font-size: 13px; text-decoration: none; cursor: pointer;
-  &:hover { color: #fff; text-decoration: underline; }
+
+.login-btn {
+  height: 44px;
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
 }
-:deep(.q-field) {
-  .q-field__control { background: rgba(255,255,255,0.12) !important; border-radius: 8px; }
-  .q-field__label, .q-field__native, .q-field__input { color: #fff !important; }
-  .q-field__bottom { color: rgba(255,100,100,0.9) !important; }
+
+.login-link {
+  color: map.get($colors, "violet-normal");
+  font-size: 13px;
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover {
+    color: map.get($colors, "violet-normal-hover");
+    text-decoration: underline;
+  }
 }
 </style>

src/pages/login/VerifyCodePage.vue

@@ -3,66 +3,68 @@
     <div class="login-overlay" />
 
     <div class="login-card column items-center">
-      <q-img :src="Logo" class="login-logo q-mb-lg" />
+      <div class="column items-center fields-card">
+        <q-img :src="Logo" class="login-logo q-mb-lg" />
 
-      <UserTypeBadge :tipo="tipo" />
+        <UserTypeBadge :tipo="tipo" />
 
-      <p class="login-title">{{ $t("auth.enter_code_title") }}</p>
+        <p class="login-title">{{ $t("auth.enter_code_title") }}</p>
 
-      <div class="email-box q-mb-lg">
-        <q-icon name="mdi-email-outline" size="16px" class="q-mr-xs" />
-        <span>{{ email }}</span>
-      </div>
+        <div class="email-box q-mb-lg">
+          <q-icon name="mdi-email-outline" size="16px" class="q-mr-xs" />
+          <span>{{ email }}</span>
+        </div>
 
-      <q-form
-        ref="formRef"
-        class="full-width"
-        autocomplete="off"
-        @submit="onSubmit"
-      >
-        <DefaultInput
-          v-model="form.codigo"
-          v-model:error="validationErrors.codigo"
-          autofocus
-          :label="$t('common.terms.code')"
-          mask="######"
-          :rules="[inputRules.required, (v) => (v && v.length === 6) || $t('validation.rules.code_length')]"
+        <q-form
+          ref="formRef"
+          class="full-width"
+          autocomplete="off"
+          @submit="onSubmit"
         >
-          <template #append>
-            <q-icon name="mdi-numeric" color="grey-5" />
-          </template>
-        </DefaultInput>
+          <DefaultInput
+            v-model="form.codigo"
+            v-model:error="validationErrors.codigo"
+            autofocus
+            :label="$t('common.terms.code')"
+            mask="######"
+            :rules="[inputRules.required, (v) => (v && v.length === 6) || $t('validation.rules.code_length')]"
+          >
+            <template #append>
+              <q-icon name="mdi-numeric" color="grey-5" />
+            </template>
+          </DefaultInput>
+
+          <q-btn
+            class="full-width q-mt-sm login-btn"
+            color="violet-normal"
+            :label="$t('auth.verify')"
+            type="submit"
+            unelevated
+            :loading
+          >
+            <template #loading><q-spinner /></template>
+          </q-btn>
+        </q-form>
 
         <q-btn
-          class="full-width q-mt-sm login-btn"
-          color="secondary"
-          :label="$t('auth.verify')"
-          type="submit"
-          unelevated
-          :loading
-        >
-          <template #loading><q-spinner /></template>
-        </q-btn>
-      </q-form>
-
-      <q-btn
-        flat
-        :label="$t('common.actions.resend_email')"
-        color="white"
-        class="q-mt-md resend-btn"
-        :loading="resending"
-        @click="onResend"
-      />
-
-      <div class="column items-center q-mt-sm">
-        <a href="#" class="login-link" @click.prevent="goToLogin">
-          {{ $t("auth.remember_password") }}
-          <strong>{{ $t("auth.do_login") }}</strong>
-        </a>
-        <a href="#" class="login-link q-mt-xs" @click.prevent="goBack">
-          <q-icon name="mdi-arrow-left" size="12px" class="q-mr-xs" />
-          {{ $t("auth.back_to_site") }}
-        </a>
+          flat
+          :label="$t('common.actions.resend_email')"
+          color="violet-normal"
+          class="q-mt-md resend-btn"
+          :loading="resending"
+          @click="onResend"
+        />
+
+        <div class="column items-center q-mt-sm">
+          <a href="#" class="login-link" @click.prevent="goToLogin">
+            {{ $t("auth.remember_password") }}
+            <strong>{{ $t("auth.do_login") }}</strong>
+          </a>
+          <a href="#" class="login-link q-mt-xs" @click.prevent="goBack">
+            <q-icon name="mdi-arrow-left" size="12px" class="q-mr-xs" />
+            {{ $t("auth.back_to_site") }}
+          </a>
+        </div>
       </div>
     </div>
   </q-page>
@@ -124,30 +126,87 @@ const goBack    = () => router.push({ name: "LoginPage" });
 </script>
 
 <style lang="scss" scoped>
-@use "src/css/quasar.variables.scss";
+@use "sass:map";
+@use "src/css/quasar.variables.scss" as *;
 
 .login-page {
   min-height: 100dvh;
   background-image: url("src/assets/pessoas_fundo.jpg");
-  background-size: cover; background-position: center; position: relative;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+}
+
+.login-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(74, 20, 140, 0.48);
+  z-index: 0;
+}
+
+.login-card {
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(100% - 32px);
+  min-height: calc(100dvh - 32px);
+  background: rgba(255, 255, 255, 0.747);
+  border-radius: 16px;
+  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.15);
+}
+
+.fields-card {
+  width: 100%;
+  max-width: 600px;
+  padding: 32px;
+  border-radius: 12px;
+}
+
+.login-logo {
+  width: 380px;
 }
-.login-overlay { position: absolute; inset: 0; background: rgba(74,20,140,0.72); z-index: 0; }
-.login-card { position: relative; z-index: 1; width: 100%; max-width: 400px; padding: 32px 24px 40px; }
-.login-logo { width: 180px; filter: brightness(0) invert(1); }
-.login-title { color: #fff; font-size: 18px; font-weight: 700; margin: 0 0 16px; text-align: center; }
+
+.login-title {
+  color: map.get($colors, "violet-normal");
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0 0 16px;
+  text-align: center;
+}
+
 .email-box {
-  display: flex; align-items: center;
-  background: rgba(255,255,255,0.15); border-radius: 8px; padding: 8px 16px;
-  color: #fff; font-size: 14px;
+  display: flex;
+  align-items: center;
+  background: map.get($colors, "violet-light");
+  border-radius: 8px;
+  padding: 8px 16px;
+  color: map.get($colors, "violet-normal");
+  font-size: 14px;
+  font-weight: 500;
 }
-.login-btn { height: 44px; font-size: 15px; font-weight: 600; }
-.resend-btn { font-size: 13px; text-decoration: underline; }
-.login-link { color: rgba(255,255,255,0.75); font-size: 13px; text-decoration: none; cursor: pointer;
-  &:hover { color: #fff; text-decoration: underline; }
+
+.login-btn {
+  height: 44px;
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
 }
-:deep(.q-field) {
-  .q-field__control { background: rgba(255,255,255,0.12) !important; border-radius: 8px; }
-  .q-field__label, .q-field__native, .q-field__input { color: #fff !important; }
-  .q-field__bottom { color: rgba(255,100,100,0.9) !important; }
+
+.resend-btn {
+  font-size: 13px;
+  text-decoration: underline;
+}
+
+.login-link {
+  color: map.get($colors, "violet-normal");
+  font-size: 13px;
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover {
+    color: map.get($colors, "violet-normal-hover");
+    text-decoration: underline;
+  }
 }
 </style>

src/pages/login/VerifyEmailPage.vue

@@ -3,39 +3,41 @@
     <div class="login-overlay" />
 
     <div class="login-card column items-center">
-      <q-img :src="Logo" class="login-logo q-mb-lg" />
-
-      <UserTypeBadge :tipo="tipo" />
-
-      <p class="login-title">{{ $t("auth.verify_email_title") }}</p>
-      <p class="login-description">
-        {{ $t("auth.verify_email_description") }}
-      </p>
-
-      <div class="email-box q-mb-lg">
-        <q-icon name="mdi-email-outline" size="16px" class="q-mr-xs" />
-        <span>{{ email }}</span>
-      </div>
-
-      <q-btn
-        class="full-width login-btn"
-        color="secondary"
-        :label="$t('auth.enter_code')"
-        unelevated
-        @click="goToCode"
-      />
-
-      <p class="login-hint q-mt-md">
-        {{ $t("auth.no_email_hint") }}
-        <a href="#" class="login-link" @click.prevent="resend">
-          {{ $t("auth.check_spam") }}
+      <div class="column items-center fields-card">
+        <q-img :src="Logo" class="login-logo q-mb-lg" />
+
+        <UserTypeBadge :tipo="tipo" />
+
+        <p class="login-title">{{ $t("auth.verify_email_title") }}</p>
+        <p class="login-description">
+          {{ $t("auth.verify_email_description") }}
+        </p>
+
+        <div class="email-box q-mb-lg">
+          <q-icon name="mdi-email-outline" size="16px" class="q-mr-xs" />
+          <span>{{ email }}</span>
+        </div>
+
+        <q-btn
+          class="full-width login-btn"
+          color="violet-normal"
+          :label="$t('auth.enter_code')"
+          unelevated
+          @click="goToCode"
+        />
+
+        <p class="login-hint q-mt-md">
+          {{ $t("auth.no_email_hint") }}
+          <a href="#" class="login-link" @click.prevent="resend">
+            {{ $t("auth.check_spam") }}
+          </a>
+        </p>
+
+        <a href="#" class="login-link q-mt-sm" @click.prevent="goBack">
+          <q-icon name="mdi-arrow-left" size="12px" class="q-mr-xs" />
+          {{ $t("auth.back_to_site") }}
         </a>
-      </p>
-
-      <a href="#" class="login-link q-mt-sm" @click.prevent="goBack">
-        <q-icon name="mdi-arrow-left" size="12px" class="q-mr-xs" />
-        {{ $t("auth.back_to_site") }}
-      </a>
+      </div>
     </div>
   </q-page>
 </template>
@@ -62,7 +64,8 @@ const goBack = () => router.push({ name: "LoginPage" });
 </script>
 
 <style lang="scss" scoped>
-@use "src/css/quasar.variables.scss";
+@use "sass:map";
+@use "src/css/quasar.variables.scss" as *;
 
 .login-page {
   min-height: 100dvh;
@@ -71,28 +74,87 @@ const goBack = () => router.push({ name: "LoginPage" });
   background-position: center;
   position: relative;
 }
+
 .login-overlay {
-  position: absolute; inset: 0;
-  background: rgba(74, 20, 140, 0.72);
+  position: absolute;
+  inset: 0;
+  background: rgba(74, 20, 140, 0.48);
   z-index: 0;
 }
+
 .login-card {
-  position: relative; z-index: 1;
-  width: 100%; max-width: 400px;
-  padding: 32px 24px 40px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(100% - 32px);
+  min-height: calc(100dvh - 32px);
+  background: rgba(255, 255, 255, 0.747);
+  border-radius: 16px;
+  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.15);
+}
+
+.fields-card {
+  width: 100%;
+  max-width: 600px;
+  padding: 32px;
+  border-radius: 12px;
+}
+
+.login-logo {
+  width: 380px;
+}
+
+.login-title {
+  color: map.get($colors, "violet-normal");
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0 0 8px;
+  text-align: center;
 }
-.login-logo { width: 180px; filter: brightness(0) invert(1); }
-.login-title { color: #fff; font-size: 18px; font-weight: 700; margin: 0 0 8px; text-align: center; }
-.login-description { color: rgba(255,255,255,0.8); font-size: 13px; text-align: center; margin: 0 0 16px; }
+
+.login-description {
+  color: map.get($colors, "text-2");
+  font-size: 13px;
+  text-align: center;
+  margin: 0 0 16px;
+}
+
 .email-box {
-  display: flex; align-items: center;
-  background: rgba(255,255,255,0.15);
-  border-radius: 8px; padding: 8px 16px;
-  color: #fff; font-size: 14px;
+  display: flex;
+  align-items: center;
+  background: map.get($colors, "violet-light");
+  border-radius: 8px;
+  padding: 8px 16px;
+  color: map.get($colors, "violet-normal");
+  font-size: 14px;
+  font-weight: 500;
 }
-.login-btn { height: 44px; font-size: 15px; font-weight: 600; width: 100%; }
-.login-hint { color: rgba(255,255,255,0.65); font-size: 12px; text-align: center; margin: 0; }
-.login-link { color: rgba(255,255,255,0.75); font-size: 13px; text-decoration: none; cursor: pointer;
-  &:hover { color: #fff; text-decoration: underline; }
+
+.login-btn {
+  height: 44px;
+  font-size: 15px;
+  font-weight: 600;
+  width: 100%;
+  letter-spacing: 0.5px;
+}
+
+.login-hint {
+  color: map.get($colors, "text-2");
+  font-size: 12px;
+  text-align: center;
+  margin: 0;
+}
+
+.login-link {
+  color: map.get($colors, "violet-normal");
+  font-size: 13px;
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover {
+    color: map.get($colors, "violet-normal-hover");
+    text-decoration: underline;
+  }
 }
 </style>

src/pages/login/components/UserTypeBadge.vue

@@ -24,11 +24,14 @@ const tipoData = computed(() => tipoMap[props.tipo] ?? tipoMap.administrador);
 </script>
 
 <style lang="scss" scoped>
+@use "sass:map";
+@use "src/css/quasar.variables.scss" as *;
+
 .badge-pill {
-  background: rgba(255, 255, 255, 0.2);
-  border: 1.5px solid rgba(255, 255, 255, 0.45);
+  background: map.get($colors, "violet-light");
+  border: 1.5px solid map.get($colors, "violet-light-active");
   border-radius: 999px;
-  color: #fff;
+  color: map.get($colors, "violet-normal");
 }
 .badge-label {
   font-size: 13px;