refactor layout

packages/app/src/components/CompleteUserRegistration.tsx

@@ -7,7 +7,7 @@ export const CompleteUserRegistration: FC = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="noLogin-dialog mx-auto" id="noLogin-dialog">
+    <div className="nologin-dialog mx-auto" id="nologin-dialog">
       <div className="row mx-0">
         <div className="col-12 mb-3 text-center">
           <p className="alert alert-success">

packages/app/src/components/CompleteUserRegistrationForm.tsx

@@ -85,7 +85,7 @@ const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
 
   return (
     <>
-      <div className="noLogin-dialog mx-auto" id="noLogin-dialog">
+      <div className="nologin-dialog mx-auto" id="nologin-dialog">
         <div className="row mx-0">
           <div className="col-12">
 

packages/app/src/components/InstallerForm.tsx

@@ -94,7 +94,7 @@ const InstallerForm = memo((): JSX.Element => {
     : <span><i className="icon-fw icon-ban" />{ t('installer.unavaliable_user_id') }</span>;
 
   return (
-    <div data-testid="installerForm" className={`noLogin-dialog p-3 mx-auto${hasErrorClass}`}>
+    <div data-testid="installerForm" className={`nologin-dialog p-3 mx-auto${hasErrorClass}`}>
       <div className="row">
         <div className="col-md-12">
           <p className="alert alert-success">

packages/app/src/components/InvitedForm.tsx

@@ -84,7 +84,7 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
   }
 
   return (
-    <div className="noLogin-dialog px-3 pb-3 mx-auto" id="noLogin-dialog">
+    <div className="nologin-dialog px-3 pb-3 mx-auto" id="nologin-dialog">
       { formNotification() }
       <form role="form" onSubmit={submitHandler} id="invited-form">
         {/* Email Form */}

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

@@ -2,67 +2,46 @@
 
 
 .nologin :global {
-  #page-wrapper {
-    background: none;
-  }
+  height: 100vh;
 
   // layout
-  #wrapper {
+  .page-wrapper {
+    display: flex;
+    align-items: center;
     height: 100vh;
+    margin-top: 0px;
+
+    .main {
+      width: 100vw;
 
-    #page-wrapper {
-      display: flex;
-      align-items: center;
-      height: 100vh;
-      margin-top: 0px;
-
-      .main {
-        width: 100vw;
-
-        > .row {
-          margin-right: 20px;
-          margin-left: 20px;
-        }
-
-        .noLogin-header {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          padding-top: 30px;
-          padding-bottom: 10px;
-        }
-
-        .noLogin-form-errors {
-          width: 100%;
-
-          .alert {
-            padding: 5px;
-            margin-top: 10px;
-            margin-bottom: 0;
-
-            ul {
-              padding-left: 1.5em;
-            }
-          }
-        }
+      > .row {
+        margin-right: 20px;
+        margin-left: 20px;
       }
 
-      // .main
-    }
+      .nologin-header {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-top: 30px;
+        padding-bottom: 10px;
+      }
 
-    // #page-wrapper
+    }
   }
 
-  // #wrapper
-
   // styles
-  .noLogin-header {
+  .nologin-header {
     h1 {
       font-size: 22px;
       line-height: 1em;
     }
   }
 
+  .alert {
+    padding: 0.5em 1em 0.5em 2em;
+  }
+
   .input-group {
     margin-bottom: 10px;
 
@@ -132,8 +111,8 @@
       transition: color 0.8s;
     }
   }
-  .noLogin-header,
-  .noLogin-dialog {
+  .nologin-header,
+  .nologin-dialog {
     max-width: 480px;
   }
 }

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

@@ -19,25 +19,21 @@ export const NoLoginLayout = ({
     classNames.push(className);
   }
   return (
-    <RawLayout className={`${commonStyles.nologin}`}>
-      <div className="nologin">
-        <div id="wrapper">
-          <div id="page-wrapper">
-            <div className="main container-fluid">
-
-              <div className="row">
-
-                <div className="col-md-12">
-                  <div className="noLogin-header mx-auto">
-                    <GrowiLogo />
-                    <h1 className="my-3">GROWI</h1>
-                    <div className="noLogin-form-errors px-3"></div>
-                  </div>
-                  {children}
-                </div>
+    <RawLayout className={`nologin ${commonStyles.nologin}`}>
+      <div className="page-wrapper">
+        <div className="main container-fluid">
 
+          <div className="row">
+
+            <div className="col-md-12">
+              <div className="nologin-header mx-auto">
+                <GrowiLogo />
+                <h1 className="my-3">GROWI</h1>
+                <div className="noLogin-form-errors px-3"></div>
               </div>
+              {children}
             </div>
+
           </div>
         </div>
       </div>

packages/app/src/components/LoginForm.tsx

@@ -505,7 +505,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
   }
 
   return (
-    <div className="noLogin-dialog mx-auto" id="noLogin-dialog" data-testid="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">

packages/app/src/pages/login/error/[message].page.tsx

@@ -86,7 +86,7 @@ const LoginPage: NextPage<CommonProps> = () => {
   return (
     <NoLoginLayout className={classNames.join(' ')}>
       <div className="mb-4 login-form-errors text-center">
-        <div className='noLogin-dialog pb-4 mx-auto'>
+        <div className='nologin-dialog pb-4 mx-auto'>
           <div className="col-12">
             {loginErrorElm}
           </div>

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -141,7 +141,7 @@ ul.pagination {
     linear-gradient(225deg, darken(var.$growi-blue, 20%) 10%, hsla(140, 90%, 50%, 0) 80%),
     linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
 
-  .noLogin-header {
+  .nologin-header {
     background-color: rgba(black, 0.5);
 
     .logo {
@@ -154,7 +154,7 @@ ul.pagination {
     }
   }
 
-  .noLogin-dialog {
+  .nologin-dialog {
     background-color: rgba(black, 0.5);
   }
 

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -84,7 +84,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
     linear-gradient(135deg, var.$growi-green 10%, hsla(225, 95%, 50%, 0) 70%), linear-gradient(225deg, var.$growi-blue 10%, hsla(140, 90%, 50%, 0) 80%),
     linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
 
-  .noLogin-header {
+  .nologin-header {
     background-color: rgba(white, 0.5);
 
     .logo {
@@ -97,7 +97,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
     }
   }
 
-  .noLogin-dialog {
+  .nologin-dialog {
     background-color: rgba(white, 0.5);
   }
 

packages/preset-themes/src/styles/antarctic.scss

@@ -24,13 +24,12 @@
   }
 }
 
-.growi.login-page {
-  #page-wrapper {
-    background-image: url('/images/themes/antarctic/topimage.svg');
-    background-attachment: fixed;
-    background-position: center center;
-    background-size: cover;
-  }
+.nologin {
+  background: unset !important;
+  background-image: url('/images/themes/antarctic/topimage.svg');
+  background-attachment: fixed;
+  background-position: center center;
+  background-size: cover;
 }
 
 $themecolor: #000080;

packages/preset-themes/src/styles/christmas.scss

@@ -120,7 +120,6 @@ $color-link-wiki-hover: lighten($color-link-wiki, 15%);
     background: $themelight;
   }
 
-  #wrapper > #page-wrapper,
   .page-editor-preview-container {
     background-image: url('/images/themes/christmas/christmas.jpg');
     background-attachment: fixed;
@@ -129,6 +128,8 @@ $color-link-wiki-hover: lighten($color-link-wiki, 15%);
 
   // login page
   .nologin {
+    background: unset !important;
+
     .input-group {
       .input-group-text {
         color: $gray-700;
@@ -140,8 +141,8 @@ $color-link-wiki-hover: lighten($color-link-wiki, 15%);
       }
     }
 
-    .noLogin-header,
-    .noLogin-dialog {
+    .nologin-header,
+    .nologin-dialog {
       background-color: rgba(#ccc, 0.5);
     }
     .link-switch {

packages/preset-themes/src/styles/hufflepuff.scss

@@ -121,16 +121,14 @@
 
   // login and register
   .nologin {
-    #page-wrapper {
-      background-color: $themelight;
-      background-image: url('../images/themes/hufflepuff/badger-light.png');
-      background-attachment: fixed;
-      background-position: bottom;
-      background-size: cover;
-    }
-
-    .noLogin-header,
-    .noLogin-dialog {
+    background: unset !important;
+    background-image: url('../images/themes/hufflepuff/badger-light.png');
+    background-attachment: fixed;
+    background-position: bottom;
+    background-size: cover;
+
+    .nologin-header,
+    .nologin-dialog {
       background-color: rgba(black, 0.1);
     }
 
@@ -292,16 +290,14 @@
 
   // login and register
   .nologin {
-    #page-wrapper {
-      background-color: $themedark;
-      background-image: url('../images/themes/hufflepuff/badger-light.png');
-      background-attachment: fixed;
-      background-position: bottom;
-      background-size: cover;
-    }
-
-    .noLogin-header,
-    .noLogin-dialog {
+    background: unset !important;
+    background-image: url('../images/themes/hufflepuff/badger-light.png');
+    background-attachment: fixed;
+    background-position: bottom;
+    background-size: cover;
+
+    .nologin-header,
+    .nologin-dialog {
       background-color: rgba(black, 0.1);
     }
 

packages/preset-themes/src/styles/island.scss

@@ -101,11 +101,7 @@ $color-themelight: rgba(183, 226, 219, 1);
 
   // login page
   .nologin {
-    &.login-page {
-      > #wrapper > #page-wrapper {
-        background-image: unset;
-      }
-    }
+    background-image: unset !important;
   }
 
   // Button

packages/preset-themes/src/styles/nature.scss

@@ -16,7 +16,6 @@
 
 .growi:not(.login-page) {
   // add background-image
-  #page-wrapper,
   .page-editor-preview-container {
     background-attachment: fixed;
     background-position: center center;
@@ -24,14 +23,6 @@
   }
 }
 
-.growi.login-page {
-  #page-wrapper {
-    background-attachment: fixed;
-    background-position: center center;
-    background-size: cover;
-  }
-}
-
 $themecolor: #12b105;
 
 //== Light Mode

packages/preset-themes/src/styles/spring.scss

@@ -124,16 +124,14 @@ $accentcolor: #e08dbc;
 
   // login and register
   .nologin {
-    #page-wrapper {
-      background-color: $themelight;
-      background-image: url('/images/themes/spring/spring.svg');
-      background-attachment: fixed;
-      background-position: bottom;
-      background-size: cover;
-    }
+    background: unset !important;
+    background-image: url('/images/themes/spring/spring.svg');
+    background-attachment: fixed;
+    background-position: bottom;
+    background-size: cover;
 
-    .noLogin-header,
-    .noLogin-dialog {
+    .nologin-header,
+    .nologin-dialog {
       background-color: rgba(black, 0.1);
     }
 

packages/preset-themes/src/styles/theme/_apply-colors-dark.scss

@@ -141,7 +141,7 @@ ul.pagination {
     linear-gradient(225deg, darken(var.$growi-blue, 20%) 10%, hsla(140, 90%, 50%, 0) 80%),
     linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
 
-  .noLogin-header {
+  .nologin-header {
     background-color: rgba(black, 0.5);
 
     .logo {
@@ -154,7 +154,7 @@ ul.pagination {
     }
   }
 
-  .noLogin-dialog {
+  .nologin-dialog {
     background-color: rgba(black, 0.5);
   }
 

packages/preset-themes/src/styles/theme/_apply-colors-light.scss

@@ -84,7 +84,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
     linear-gradient(135deg, var.$growi-green 10%, hsla(225, 95%, 50%, 0) 70%), linear-gradient(225deg, var.$growi-blue 10%, hsla(140, 90%, 50%, 0) 80%),
     linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
 
-  .noLogin-header {
+  .nologin-header {
     background-color: rgba(white, 0.5);
 
     .logo {
@@ -97,7 +97,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
     }
   }
 
-  .noLogin-dialog {
+  .nologin-dialog {
     background-color: rgba(white, 0.5);
   }
 

packages/preset-themes/src/styles/wood.scss

@@ -23,7 +23,7 @@
 }
 
 .growi.login-page {
-  #page-wrapper {
+  .page-wrapper {
     background-image: url('/images/themes/wood/wood.jpg');
     background-attachment: fixed;
     background-position: center center;
@@ -151,10 +151,10 @@ $themelight: #f5f3ee;
 
   // login and register
   .nologin {
-    background: white;
+    background: unset !important;
 
-    .noLogin-header,
-    .noLogin-dialog {
+    .nologin-header,
+    .nologin-dialog {
       background-color: rgba(black, 0.1);
     }