Modified the styles

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

@@ -0,0 +1,213 @@
+@use '~/styles/bootstrap/init' as *;
+
+
+.nologin :global {
+  #page-wrapper {
+    background: none;
+  }
+
+  // layout
+  #wrapper {
+    height: 100vh;
+
+    #page-wrapper {
+      display: flex;
+      align-items: center;
+      height: 100vh;
+      margin-top: 0px;
+
+      .main {
+        width: 100vw;
+
+        > .row {
+          margin-right: 20px;
+          margin-left: 20px;
+        }
+
+        .login-header {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding-top: 30px;
+          padding-bottom: 10px;
+        }
+
+        .login-form-errors {
+          width: 100%;
+
+          .alert {
+            padding: 5px;
+            margin-top: 10px;
+            margin-bottom: 0;
+
+            ul {
+              padding-left: 1.5em;
+            }
+          }
+        }
+      }
+
+      // .main
+    }
+
+    // #page-wrapper
+  }
+
+  // #wrapper
+
+  // styles
+  .login-header {
+    h1 {
+      font-size: 22px;
+      line-height: 1em;
+    }
+  }
+
+  .dropdown-with-icon {
+    .dropdown-toggle {
+      @extend .form-control;
+    }
+    i {
+      @extend .input-group-text;
+      margin-right: -1px;
+    }
+  }
+
+  .input-group {
+    margin-bottom: 10px;
+
+    .input-group-text {
+      text-align: center;
+      border: none;
+      border-radius: 0;
+    }
+  }
+
+  .input-group:not(.has-error) {
+    .form-control {
+      border: transparent;
+    }
+  }
+
+  // .collapse-external-auth {
+  //   overflow: hidden;
+  // }
+
+  $btn-fill-colors: (
+    'login': (
+      rgba($danger, 0.4),
+      rgba(#7e4153, 0.7),
+    ),
+    'register': (
+      rgba($success, 0.4),
+      rgba(#3f7263, 0.7),
+    ),
+    'google': (
+      rgba(#24292e, 0.4),
+      $gray-700,
+    ),
+    'github': (
+      rgba(lighten(black, 20%), 0.4),
+      $gray-700,
+    ),
+    'facebook': (
+      rgba(#29487d, 0.4),
+      $gray-700,
+    ),
+    'twitter': (
+      rgba(#1da1f2, 0.4),
+      $gray-700,
+    ),
+    'oidc': (
+      rgba(#24292e, 0.4),
+      $gray-700,
+    ),
+    'saml': (
+      rgba(#55a79a, 0.4),
+      $gray-700,
+    ),
+    'basic': (
+      rgba(#24292e, 0.4),
+      $gray-700,
+    ),
+  );
+
+  @each $label, $colors in $btn-fill-colors {
+    .btn-fill##{$label} {
+      .btn-label {
+        background-color: nth($colors, 1);
+      }
+      .eff {
+        background-color: nth($colors, 2);
+      }
+    }
+  }
+
+  // footer link text
+  .link-growi-org {
+    font-size: smaller;
+    font-weight: bold;
+
+    &,
+    .growi,
+    .org {
+      transition: color 0.8s;
+    }
+  }
+
+  // .link-switch {
+  //   color: $gray-200;
+
+  //   &:hover {
+  //     color: white;
+  //   }
+  // }
+}
+
+// .login-page {
+//   // layout
+//   .main .row .login-header,
+//   .login-dialog {
+//     width: 320px;
+//   }
+
+//   .link-growi-org {
+//     position: absolute;
+//     bottom: 9px;
+//     z-index: 3;
+//   }
+
+//   // 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;
+//   }
+// }
+
+// .invited,
+// .nologin.error {
+//   .main .row {
+//     @media (min-width: 510px) {
+//       .offset-sm-4 {
+//         margin-left: calc(50% - 240px);
+//       }
+
+//       .col-sm-4 {
+//         width: 480px;
+//       }
+//     }
+//   }
+// }
+
+.login-header,
+.login-dialog {
+  max-width: 480px;
+}
+
+.nologin.error {
+  .alert h2 {
+    line-height: 1em;
+  }
+
+}

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

@@ -1,9 +1,14 @@
-import Head from 'next/head';
 import React, { ReactNode } from 'react';
-import { Provider } from 'unstated';
+
+import Head from 'next/head';
+
 import { useGrowiTheme } from '~/stores/context';
 import { useNextThemes } from '~/stores/use-next-themes';
 
+import { RawLayout } from './RawLayout';
+
+import styles from './Installer.module.scss';
+
 type Props = {
   title: string,
   className?: string,
@@ -11,27 +16,40 @@ type Props = {
 }
 
 export const NoLoginLayout = ({
-  children, title, className
+  children, title, className,
 }: Props): JSX.Element => {
   const classNames: string[] = ['wrapper'];
   if (className != null) {
     classNames.push(className);
   }
-  const { data: growiTheme } = useGrowiTheme();
-
-  const { resolvedTheme } = useNextThemes();
-
   return (
-    <>
-    <Head>
-      <title>{title}</title>
-      <meta charSet="utf-8" />
-    </Head>
-
-    </>
-  )
-
-
-
-}
-
+    <RawLayout title={title} className={`${styles.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="login-header mx-auto">
+                    <div className="logo"></div>
+                    <h1 className="my-3">GROWI</h1>
+                    <div className="login-form-errors px-3"></div>
+                  </div>
+                </div>
+
+                <div className="col-md-12">
+                  <div id="installer-form-container">
+                    {children}
+                  </div>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </RawLayout>
+  );
+};

packages/app/src/pages/admin/[[...path]].page.tsx

@@ -12,7 +12,7 @@ import { CrowiRequest } from '~/interfaces/crowi-request';
 import PluginUtils from '~/server/plugins/plugin-utils';
 import ConfigLoader from '~/server/service/config-loader';
 import {
-  useCurrentUser, /* useSearchServiceConfigured, */ /* useIsMailerSetup*/ useIsSearchServiceReachable, useSiteUrl,
+  useCurrentUser, /* useSearchServiceConfigured, */ /* useIsMailerSetup */ useIsSearchServiceReachable, useSiteUrl,
 } from '~/stores/context';
 
 import {

packages/app/src/pages/installer.page.tsx

@@ -6,6 +6,7 @@ import {
 } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 
+import { NoLoginLayout } from '~/components/Layout/NoLoginLayout';
 import { RawLayout } from '~/components/Layout/RawLayout';
 
 import InstallerForm from '../components/InstallerForm';
@@ -46,36 +47,9 @@ const InstallerPage: NextPage<Props> = (props: Props) => {
   const classNames: string[] = [];
 
   return (
-    <>
-      <RawLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
-        <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="login-header mx-auto">
-                      <div className="logo"></div>
-                      <h1 className="my-3">GROWI</h1>
-                      <div className="login-form-errors px-3"></div>
-                    </div>
-                  </div>
-
-                  <div className="col-md-12">
-                    <div id="installer-form-container">
-                      <InstallerForm />
-                    </div>
-                  </div>
-
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </RawLayout>
-    </>
+    <NoLoginLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
+      <InstallerForm />
+    </NoLoginLayout>
   );
 };
 

packages/app/src/styles/_login.scss

@@ -1,7 +1,7 @@
 @use '~/styles/bootstrap/init' as bs;
 
 
-.nologin {
+.installer {
   #page-wrapper {
     background: none;
   }