update login button styles

apps/app/src/components/LoginForm.module.scss

@@ -46,12 +46,16 @@
     right: 2%;
     transform: translateY(-50%);
   }
-  .login-btn {
-    background-color: rgba(#204986, 0.6);
-    &:hover ,
-    &:focus {
-      background-color: rgba(#204986, 0.8);
-    }
+}
+
+
+// Buttons
+.login-form :global {
+
+  .btn.login-btn {
+    --bs-btn-bg: #{rgba(#204986, 0.6)};
+    --bs-btn-hover-bg: #{rgba(#204986, 0.8)};
+    --bs-btn-active-bg: #{rgba(#204986, 0.8)};
   }
   .function-btn {
     background-color: rgba(bs.$gray-800, 0.8);
@@ -95,5 +99,4 @@
       background-color: rgba(#138957, 0.7);
     }
   }
-
 }

apps/app/src/components/LoginForm.tsx

@@ -18,6 +18,9 @@ import { CompleteUserRegistration } from './CompleteUserRegistration';
 
 import styles from './LoginForm.module.scss';
 
+const moduleClass = styles['login-form'];
+
+
 type LoginFormProps = {
   username?: string,
   name?: string,
@@ -234,18 +237,18 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
           <div className="input-group my-4">
             <button
               type="submit"
-              className="btn btn-fill login-btn col-6 login mx-auto"
+              className="btn btn-secondary login-btn col-6 login mx-auto d-flex justify-content-between"
               data-testid="btnSubmitForLogin"
               disabled={isLoading}
             >
-              <span className="btn-label pe-0">
+              <span>
                 {isLoading ? (
                   <LoadingSpinner />
                 ) : (
                   <span className="material-symbols-outlined">login</span>
                 )}
               </span>
-              <span className="btn-label-text">{t('Sign in')}</span>
+              <span className="flex-grow-1">{t('Sign in')}</span>
             </button>
           </div>
         </form>
@@ -542,7 +545,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
   }
 
   return (
-    <div className={`login-form ${styles['login-form']}`}>
+    <div className={moduleClass}>
       <div className="nologin-dialog mx-auto rounded-4 rounded-top-0" id="nologin-dialog" data-testid="login-form">
         <div className="row mx-0">
           <div className="col-12 px-md-4">

apps/app/src/styles/atoms/_buttons.scss

@@ -2,58 +2,6 @@
 
 @use '../mixins';
 
-// fill button style
-.btn.btn-fill {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  min-width: 130px;
-  padding: 0px;
-  overflow: hidden;
-  color: white;
-  text-align: center;
-  background-color: rgba(lighten(black, 15%), 0.5);
-  border: none;
-
-  &:not(:disabled) {
-    cursor: pointer;
-  }
-
-  .btn-label {
-    position: relative;
-    z-index: 1;
-    padding: 9px 15px;
-    color: white;
-    text-decoration: none;
-  }
-
-  .btn-label-text {
-    position: relative;
-    z-index: 1;
-    margin: auto;
-    color: white;
-    text-align: center;
-    text-decoration: none;
-  }
-
-  // effect
-  .eff {
-    position: absolute;
-    top: -50px;
-    left: 0px;
-    z-index: 0;
-    width: 100%;
-    height: 100%;
-    transition: all 0.5s ease;
-  }
-
-  &:hover {
-    .eff {
-      top: 0;
-    }
-  }
-}
-
 // define disabled button w/o pointer-events, see _override-bootstrap.scss
 .btn.disabled,
 .btn[disabled],