refactor styles

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

@@ -26,8 +26,14 @@
         padding-top: 30px;
         padding-bottom: 10px;
       }
+    }
 
+    .link-growi-org {
+      position: absolute;
+      bottom: 9px;
+      z-index: 3;
     }
+
   }
 
   // styles
@@ -115,6 +121,7 @@
   .nologin-dialog {
     max-width: 480px;
   }
+
 }
 
 .link-switch {

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

@@ -1,27 +1,12 @@
-@use '~/styles/bootstrap/init' as bs;
-
-
-.login-page {
-  // layout
-  .main .row .login-header,
-  .login-dialog {
-    width: 320px;
-  }
-
-  .link-growi-org {
-    position: absolute;
-    bottom: 9px;
-    z-index: 3;
-  }
-
+.login-form :global {
   // To adjust the behavior, this problem is not solved.
   // See https://github.com/AaronCCWong/react-card-flip/issues/56
   .react-card-front,
   .react-card-back {
     height: 0% !important;
   }
-}
 
-.collapse-external-auth {
-  overflow: hidden;
+  .collapse-external-auth {
+    overflow: hidden;
+  }
 }

packages/app/src/components/LoginForm.tsx

@@ -16,6 +16,10 @@ import { toArrayIfNot } from '~/utils/array-utils';
 
 import { CompleteUserRegistration } from './CompleteUserRegistration';
 
+
+import styles from './LoginForm.module.scss';
+
+
 type LoginFormProps = {
   username?: string,
   name?: string,
@@ -505,39 +509,41 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
   }
 
   return (
-    <div className="nologin-dialog mx-auto" id="nologin-dialog" data-testid="login-form">
-      <div className="row mx-0">
-        <div className="col-12">
-          <ReactCardFlip isFlipped={isRegistering} flipDirection="horizontal" cardZIndex="3">
-            <div className="front">
-              {isLocalOrLdapStrategiesEnabled && renderLocalOrLdapLoginForm()}
-              {isSomeExternalAuthEnabled && renderExternalAuthLoginForm()}
-              {isLocalOrLdapStrategiesEnabled && isPasswordResetEnabled && (
-                <div className="text-right mb-2">
-                  <a href="/forgot-password" className="d-block link-switch">
-                    <i className="icon-key"></i> {t('forgot_password.forgot_password')}
-                  </a>
-                </div>
-              )}
-              {/* Sign up link */}
-              {isRegistrationEnabled && (
-                <div className="text-right mb-2">
-                  <a href="#register" id="register" className="link-switch" onClick={switchForm}>
-                    <i className="ti ti-check-box"></i> {t('Sign up is here')}
-                  </a>
-                </div>
-              )}
-            </div>
-            <div className="back">
-              {/* Register form for /login#register */}
-              {isRegistrationEnabled && renderRegisterForm()}
-            </div>
-          </ReactCardFlip>
+    <div className={`login-form ${styles['login-form']}`}>
+      <div className="nologin-dialog mx-auto" id="nologin-dialog" data-testid="login-form">
+        <div className="row mx-0">
+          <div className="col-12">
+            <ReactCardFlip isFlipped={isRegistering} flipDirection="horizontal" cardZIndex="3">
+              <div className="front">
+                {isLocalOrLdapStrategiesEnabled && renderLocalOrLdapLoginForm()}
+                {isSomeExternalAuthEnabled && renderExternalAuthLoginForm()}
+                {isLocalOrLdapStrategiesEnabled && isPasswordResetEnabled && (
+                  <div className="text-right mb-2">
+                    <a href="/forgot-password" className="d-block link-switch">
+                      <i className="icon-key"></i> {t('forgot_password.forgot_password')}
+                    </a>
+                  </div>
+                )}
+                {/* Sign up link */}
+                {isRegistrationEnabled && (
+                  <div className="text-right mb-2">
+                    <a href="#register" id="register" className="link-switch" onClick={switchForm}>
+                      <i className="ti ti-check-box"></i> {t('Sign up is here')}
+                    </a>
+                  </div>
+                )}
+              </div>
+              <div className="back">
+                {/* Register form for /login#register */}
+                {isRegistrationEnabled && renderRegisterForm()}
+              </div>
+            </ReactCardFlip>
+          </div>
         </div>
+        <a href="https://growi.org" className="link-growi-org pl-3">
+          <span className="growi">GROWI</span>.<span className="org">ORG</span>
+        </a>
       </div>
-      <a href="https://growi.org" className="link-growi-org pl-3">
-        <span className="growi">GROWI</span>.<span className="org">ORG</span>
-      </a>
     </div>
   );
 

packages/app/src/pages/login/index.module.scss

@@ -0,0 +1,9 @@
+// layout
+.login-page :global {
+
+  .nologin-header,
+  .nologin-dialog {
+    width: 320px;
+  }
+
+}

packages/app/src/pages/login/index.page.tsx

@@ -20,6 +20,9 @@ import {
 } from '~/stores/context';
 
 
+import styles from './index.module.scss';
+
+
 type Props = CommonProps & {
   registrationMode: RegistrationMode,
   pageWithMetaStr: string,
@@ -43,7 +46,7 @@ const LoginPage: NextPage<Props> = (props: Props) => {
   useCurrentPathname(props.currentPathname);
 
   const title = generateCustomTitle(props, 'GROWI');
-  const classNames: string[] = ['login-page'];
+  const classNames: string[] = ['login-page', styles['login-page']];
 
   return (
     <NoLoginLayout className={classNames.join(' ')}>