From 5a5be672ed365d6a179e1a281aa2b8c8741532d9 Mon Sep 17 00:00:00 2001
From: Laurent <95299697+LaurentMag@users.noreply.github.com>
Date: Thu, 1 Feb 2024 09:43:06 +0100
Subject: [PATCH] style(loader): fix loader position (#1279)

---
 yaki_admin/src/assets/style/_style.scss    |  7 ++++-
 yaki_admin/src/ui/components/LoginForm.vue | 32 ++++++++++++----------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/yaki_admin/src/assets/style/_style.scss b/yaki_admin/src/assets/style/_style.scss
index 18dc36386..ff446faee 100644
--- a/yaki_admin/src/assets/style/_style.scss
+++ b/yaki_admin/src/assets/style/_style.scss
@@ -65,6 +65,11 @@ $loader-animation-delay: 0.15s;
 $loader-fade-duration: 0.5s;
 
 // LOGGING LOADER
+
+.loading_relative_container {
+  position: relative;
+}
+
 .loader {
   width: 2.8rem;
   aspect-ratio: 1/1;
@@ -79,7 +84,7 @@ $loader-fade-duration: 0.5s;
 
   position: absolute;
 
-  top: 62%;
+  top: 40%;
   left: 44%;
 
   opacity: 0;
diff --git a/yaki_admin/src/ui/components/LoginForm.vue b/yaki_admin/src/ui/components/LoginForm.vue
index 3a5418917..e0ec5fea9 100644
--- a/yaki_admin/src/ui/components/LoginForm.vue
+++ b/yaki_admin/src/ui/components/LoginForm.vue
@@ -50,8 +50,8 @@ const openYakiWeb = () => {
 </script>
 
 <template>
-  <section class="login_form_container">
-    <div :class="['loging_from_wrapper', isLoggingError ? 'logging_error' : '']">
+  <section class="logging_form_container">
+    <div :class="['logging_from_wrapper', isLoggingError ? 'logging_error' : '']">
       <p class="text_default__title_header">Administration</p>
       <form>
         <input-text
@@ -64,16 +64,19 @@ const openYakiWeb = () => {
           @emittedInput="onInputPassword"
         />
 
-        <button-primary
-          text="SIGN IN"
-          @click.prevent="login"
-          type="submit"
-          :is-disabled="isLloggingLoading"
-        />
-        <div
-          v-show="isLloggingLoading"
-          :class="['loader', isLloggingLoading ? 'loader-animation' : '']"
-        ></div>
+        <div class="loading_relative_container">
+          <button-primary
+            text="SIGN IN"
+            @click.prevent="login"
+            type="submit"
+            :is-disabled="isLloggingLoading"
+          />
+          <div
+            v-show="isLloggingLoading"
+            :class="['loader', isLloggingLoading ? 'loader-animation' : '']"
+          ></div>
+        </div>
+
         <p class="text_default__Team_description info_text">
           * Your logging informations also are utilized on YAKI mobile. <br />
           If you've forgotten your password, you may use the mobile application or his
@@ -86,7 +89,7 @@ const openYakiWeb = () => {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-.login_form_container {
+.logging_form_container {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -100,11 +103,10 @@ const openYakiWeb = () => {
     display: flex;
     flex-direction: column;
     gap: 1.4rem;
-    position: relative;
   }
 }
 
-.loging_from_wrapper {
+.logging_from_wrapper {
   display: flex;
   flex-direction: column;
   justify-content: center;