Display: Fix styles for the login form

Author: AngelFQC

assets/css/scss/atoms/_input_text.scss

@@ -1,5 +1,5 @@
 .p-inputtext {
-  @apply text-body-2 text-gray-90 bg-white px-3 py-2.5 border border-solid border-gray-50 transition appearance-none rounded-lg outline-transparent w-full;
+  @apply text-body-2 text-gray-90 bg-white px-3 py-2.5 border border-solid border-gray-50 transition-colors appearance-none rounded-lg outline-transparent w-full;
 
   &:enabled {
     @apply hover:border-primary
@@ -15,9 +15,12 @@
   }
 
   &.p-variant-filled {
-    &:enabled {
-      &:hover {}
-      &:focus {}
+    @apply bg-support-1;
+
+    &:enabled { }
+
+    &.p-filled {
+      @apply text-primary;
     }
   }
 

assets/css/scss/atoms/_password.scss

@@ -47,7 +47,7 @@
   }
 
   &-toggle-mask-icon {
-    @apply inset-y-3.5 right-3.5 text-gray-90 absolute w-4 h-4;
+    @apply inset-y-0 right-4 text-gray-90 absolute w-4 h-full;
   }
 
   &:has(&-mask-icon) &-input {

assets/vue/components/Login.vue

@@ -6,7 +6,7 @@
     />
 
     <form
-      class="login-section__form p-input-filled"
+      class="login-section__form"
       @submit.prevent="onSubmitLoginForm"
     >
       <div class="field">
@@ -15,6 +15,7 @@
           v-model="login"
           :placeholder="t('Username')"
           type="text"
+          variant="filled"
         />
       </div>
 
@@ -25,14 +26,19 @@
           :placeholder="t('Password')"
           input-id="password"
           toggle-mask
+          variant="filled"
         />
       </div>
 
-      <div v-if="requires2FA" class="field">
+      <div
+        v-if="requires2FA"
+        class="field"
+      >
         <InputText
           v-model="totp"
           :placeholder="t('Enter 2FA code')"
           type="text"
+          variant="filled"
         />
       </div>