wip pagination

src/authentification/components/Forms/Login/Login.js

@@ -96,7 +96,7 @@ const Login = () => {
         <section className={`header-less-page ${styles.authPage}`}>
 
             {/* Spinner to display when the app is waiting for the api*/}
-            {isLoading && <Spinner fixed className={"bg-secondary"} />}
+            {isLoading && <Spinner fixed className={"bg-primary-lighter"} />}
 
             <form onSubmit={authSubmitHandler} className="bg-primary-lighter rounded">
                 <div className={"d-flex flex-column"}>

src/authentification/components/Forms/Register/Register.js

@@ -156,7 +156,7 @@ const Register = () => {
     return (
         <>
 
-            { isLoading && <Spinner className={"bg-secondary"} />}
+            { isLoading && <Spinner className={"bg-primary-lighter"} />}
 
             <form className="bg-primary-lighter rounded form-box-shadow p-4" onSubmit={submitHandler}>
 

src/common/widgets/loading/DefaultSpinner.module.scss

@@ -7,7 +7,7 @@
     width: 100%;
     height: 100%;
     background-color: opacify($secondary, 0.631);
-    z-index: $zindex-popover;
+    z-index: $zindex-tooltip;
 
     display: flex;
     justify-content: center;

src/hooks/useFormUtils/useFormUtils.js

@@ -138,7 +138,7 @@ export const useFormUtils = ( initialState, actions ) => {
                         { innerMessage }
                     </div>
                 }
-                { isLoading && <Spinner className={"bg-secondary"} fixed={fixedSpinner} /> }
+                { isLoading && <Spinner className={"bg-primary-lighter"} fixed={fixedSpinner} /> }
             </>
         )
 

src/hooks/useModal/Modal/Modal.module.scss

@@ -1,21 +1,13 @@
-/*
-
-        Styling for the Modal component
-
-*/
+//Styling for the Modal component
 
 .modal {
-
     border: none;
     border-radius: 0.25rem;
     padding: 2rem;           /* Default */
     margin: auto;
     overflow: auto;
 
-    /*
-        Width
-    */
-    width: 95%;                             /* Prevent from touching the sides */
+    width: 95%;/* Prevent from touching the sides */
 
     &.default-width {
         max-width: 50ch;                        /* Fallback value if the navigator doesn't support the clamp */
@@ -26,18 +18,12 @@
     box-shadow:  1px 1px 3px 2px rgba(0,0,0,0.27);
 
     &.transparent-background::backdrop{
-
         background: rgb(43, 43, 87);
         opacity: 0.5;
-
     }
 
     .modal__close-button--container {
         display: flex;
         justify-content: flex-end;
     }
-
-
-
-
 }