Addressed feedback

apps/app/src/components/Layout/NoLoginLayout.module.scss

@@ -65,50 +65,65 @@
     transform: translateY(-50%);
   }
 
-  $btn-fill-colors: (
-    'login': (
-      rgba(#204986, 0.6),
-      rgba(#204986, 0.8),
-    ),
-    'register': (
-      rgba(bs.$success, 0.4),
-      rgba(bs.$success, 0.7),
-    ),
-    'google': (
-      rgba(#4285F4, 0.4),
-      rgba(#4285F4, 0.8),
-    ),
-    'github': (
-      rgba(#403D3E, 0.4),
-      rgba(#403D3E, 0.7),
-    ),
-    'facebook': (
-      rgba(#29487d, 0.4),
-      rgba(#29487d, 0.9),
-    ),
-    'oidc': (
-      rgba(#835B1A, 0.4),
-      rgba(#835B1A, 0.8),
-    ),
-    'saml': (
-      rgba(#138957, 0.4),
-      rgba(#138957, 0.8),
-    ),
-    'function': (
-      rgba(bs.$gray-800, 0.8),
-      rgba(black, 0.5),
-    ),
-  );
-
-  @each $label, $colors in $btn-fill-colors {
-    .btn-fill##{$label} {
-      background-color: nth($colors, 1);
-      border: 1px solid rgba(white, 0.1);
-      transition: 0.8s ease;
-      &:hover ,
-      &:focus {
-        background-color: nth($colors, 2);
-      }
+  .btn-fill {
+    border: 1px solid rgba(white, 0.1);
+    transition: 0.8s ease;
+  }
+
+  .login-btn {
+    background-color: rgba(#204986, 0.6);
+    &:hover ,
+    &:focus {
+      background-color: rgba(#204986, 0.8);
+    }
+  }
+  .register-btn {
+    background-color: rgba(bs.$success, 0.4);
+    &:hover ,
+    &:focus {
+      background-color: rgba(bs.$success, 0.8);
+    }
+  }
+  .function-btn {
+    background-color: rgba(bs.$gray-800, 0.8);
+    &:hover ,
+    &:focus {
+      background-color: rgba(black, 0.5);
+    }
+  }
+  .google-btn {
+    background-color: rgba(#4285F4, 0.4);
+    &:hover ,
+    &:focus {
+      background-color: rgba(#4285F4, 0.8);
+    }
+  }
+  .github-btn {
+    background-color: rgba(#403D3E, 0.4);
+    &:hover ,
+    &:focus {
+      background-color: rgba(#403D3E, 0.7);
+    }
+  }
+  .facebook-btn {
+    background-color: rgba(#29487d, 0.4);
+    &:hover ,
+    &:focus {
+      background-color: rgba(#29487d, 0.9);
+    }
+  }
+  .oidc-btn {
+    background-color: rgba(#835B1A, 0.4);
+    &:hover ,
+    &:focus {
+      background-color: rgba(#835B1A, 0.8);
+    }
+  }
+  .saml-btn {
+    background-color: rgba(#138957, 0.4);
+    &:hover ,
+    &:focus {
+      background-color: rgba(#138957, 0.7);
     }
   }
 
@@ -134,6 +149,7 @@
       transition: color 0.8s;
     }
   }
+
   .nologin-header,
   .nologin-dialog {
     max-width: 480px;

apps/app/src/components/LoginForm.tsx

@@ -234,8 +234,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
           <div className="input-group my-4">
             <button
               type="submit"
-              id="login"
-              className="btn btn-fill col-6 login mx-auto"
+              className="btn btn-fill login-btn col-6 login mx-auto"
               data-testid="btnSubmitForLogin"
               disabled={isLoading}
             >
@@ -276,6 +275,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
       oidc: <span className="growi-custom-icons align-bottom">openid</span>,
       saml: <span className="material-symbols-outlined align-bottom">key</span>,
     };
+    const authBtn = `${auth}-btn`;
     const signin = {
       google: 'Google',
       github: 'GitHub',
@@ -286,7 +286,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
 
     return (
       <div key={auth} className="my-2">
-        <button type="button" className="btn btn-fill col-10 col-sm-6 mx-auto" id={auth} onClick={handleLoginWithExternalAuth}>
+        <button type="button" className={`btn btn-fill ${authBtn} col-10 col-sm-6 mx-auto`} onClick={handleLoginWithExternalAuth}>
           <span className="btn-label pe-0">{authIcon[auth]}</span>
           <span className="btn-label-text">{t('Sign in with External auth', { signin: signin[auth] })}</span>
         </button>
@@ -502,8 +502,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
           <div className="input-group justify-content-center my-4">
             <button
               type="submit"
-              className="btn btn-fill col-7"
-              id="register"
+              className="btn btn-fill register-btn col-7"
               disabled={(!isMailerSetup && isEmailAuthenticationEnabled) || isLoading}
             >
               <span className="btn-label pe-0">
@@ -522,8 +521,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
           <div className="text-end col-12 mb-5">
             <a
               href="#register"
-              id="function"
-              className="d-block btn btn-fill col-10 col-sm-9 mx-auto py-1"
+              className="d-block btn btn-fill function-btn col-10 col-sm-9 mx-auto py-1"
               style={{ pointerEvents: isLoading ? 'none' : 'auto' }}
               onClick={switchForm}
             >
@@ -556,8 +554,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
                   <div className="mt-4">
                     <a
                       href="/forgot-password"
-                      id="function"
-                      className="d-block btn btn-fill col-10 col-sm-9 mx-auto py-1"
+                      className="d-block btn btn-fill function-btn col-10 col-sm-9 mx-auto py-1"
                       style={{ pointerEvents: isLoading ? 'none' : 'auto' }}
                     >
                       <span className="material-symbols-outlined me-2 fs-5">vpn_key</span>{t('forgot_password.forgot_password')}
@@ -569,8 +566,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
                   <div className="mt-2 mb-5">
                     <a
                       href="#register"
-                      id="function"
-                      className="d-block btn btn-fill col-10 col-sm-9 mx-auto py-1"
+                      className="d-block btn btn-fill register-btn function-btn col-10 col-sm-9 mx-auto py-1"
                       style={{ pointerEvents: isLoading ? 'none' : 'auto' }}
                       onClick={switchForm}
                     >