Refactor classes

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

@@ -6,24 +6,19 @@
   height: 100vh;
 
   // layout
-  .page-wrapper {
-    display: flex;
-    align-items: center;
-    height: 100vh;
-    margin-top: 0px;
-
-    .main {
-      width: 100vw;
-
-      .nologin-header {
-        padding-top: 30px;
-        padding-bottom: 10px;
-      }
+  .main {
+    width: 100vw;
 
-      .growi-logo-type {
-        letter-spacing: .5rem;
+    .nologin-header {
+      padding-top: 30px;
+      padding-bottom: 10px;
+      svg {
+        fill: white;
       }
+    }
 
+    .growi-logo-type {
+      letter-spacing: .5rem;
     }
 
   }
@@ -47,36 +42,11 @@
     }
   }
 
-  .input-container {
-    width: 89%;
-    @include bs.media-breakpoint-down(sm) {
-      width: 86%;
-    }
-  }
-
-  .ldap-space {
-    padding-right: 76px;
-  }
-
-  .input-ldap {
-    position: absolute;
-    top: 45%;
-    right: 2%;
-    transform: translateY(-50%);
-  }
-
   .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 ,
@@ -84,59 +54,6 @@
       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);
-    }
-  }
-
-  .text-line {
-    &:before,
-    &:after {
-      flex-grow: 1;
-      height: 1px;
-      margin:0 1em;
-      content: '';
-      background: rgba(white,0.5);
-    }
-  }
 
   // footer link text
   .link-growi-org {
@@ -181,19 +98,6 @@
 
     .nologin-header {
       background-color: rgba(white, 0.3);
-
-      svg {
-        fill: white;
-      }
-
-      .logo {
-        color: white;
-        background-color: rgba(black, 0);
-      }
-
-      h1 {
-        color: white;
-      }
     }
 
     .nologin-dialog {
@@ -248,19 +152,6 @@
 
     .nologin-header {
       background-color: rgba(black, 0.3);
-
-      svg {
-        fill: white;
-      }
-
-      .logo {
-        color: white;
-        background-color: rgba(white, 0);
-      }
-
-      h1 {
-        color: white;
-      }
     }
 
     .nologin-dialog {

apps/app/src/components/Layout/NoLoginLayout.tsx

@@ -27,7 +27,7 @@ export const NoLoginLayout = ({
 
   return (
     <RawLayout className={`nologin ${commonStyles.nologin} ${classNames}`}>
-      <div className="page-wrapper flex-row">
+      <div className="d-flex align-items-center vh-100 mt-0 flex-row">
         <div className="main container-fluid">
 
           <div className="row">
@@ -36,7 +36,7 @@ export const NoLoginLayout = ({
               <div className="nologin-header mx-auto rounded-4 rounded-bottom-0">
                 <div className="d-flex justify-content-center align-items-center">
                   <GrowiLogo />
-                  <h1 className="growi-logo-type fs-3 my-3 ms-3">GROWI</h1>
+                  <h1 className="growi-logo-type text-white fs-3 my-3 ms-3">GROWI</h1>
                 </div>
                 {appTitle !== 'GROWI' ? (
                   <h2 className="fs-4 text-center text-white">{ appTitle }</h2>

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

@@ -1,3 +1,5 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
 .login-form :global {
   // To adjust the behavior, this problem is not solved.
   // See https://github.com/AaronCCWong/react-card-flip/issues/56
@@ -15,4 +17,83 @@
     bottom: 9px;
     z-index: 3;
   }
+
+  .text-line {
+    &:before,
+    &:after {
+      flex-grow: 1;
+      height: 1px;
+      margin:0 1em;
+      content: '';
+      background: rgba(white,0.5);
+    }
+  }
+
+  .input-container {
+    width: 89%;
+    @include bs.media-breakpoint-down(sm) {
+      width: 86%;
+    }
+  }
+
+  .ldap-space {
+    padding-right: 76px;
+  }
+
+  .input-ldap {
+    position: absolute;
+    top: 45%;
+    right: 2%;
+    transform: translateY(-50%);
+  }
+  .login-btn {
+    background-color: rgba(#204986, 0.6);
+    &:hover ,
+    &:focus {
+      background-color: rgba(#204986, 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);
+    }
+  }
+
 }