Change header layout

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

@@ -16,10 +16,13 @@
       width: 100vw;
 
       .nologin-header {
-        display: flex;
-        align-items: center;
         padding-top: 30px;
         padding-bottom: 10px;
+        border-radius: 16px 16px 0 0;
+      }
+
+      .growi-logo-type {
+        letter-spacing: .5rem;
       }
 
     }
@@ -27,13 +30,6 @@
   }
 
   // styles
-  .nologin-header {
-    h1 {
-      font-size: 22px;
-      line-height: 1em;
-    }
-  }
-
   .alert {
     padding: 0.5em 1em 0.5em 2em;
   }
@@ -138,19 +134,19 @@
       linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
 
     .nologin-header {
-      background-color: rgba(white, 0.5);
+      background-color: rgba(white, 0.3);
 
       svg {
-        color: var(--bs-body-color);
+        color: white;
       }
 
       .logo {
-        color: rgba(black, 0.5);
+        color: white;
         background-color: rgba(black, 0);
       }
 
       h1 {
-        color: rgba(black, 0.5);
+        color: white;
       }
     }
 
@@ -206,24 +202,23 @@
     // background color
     $color-gradient: #3c465c;
     background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
-      linear-gradient(135deg, darken(var.$growi-green, 30%) 10%, hsla(225, 95%, 50%, 0) 70%),
-      linear-gradient(225deg, darken(var.$growi-blue, 20%) 10%, hsla(140, 90%, 50%, 0) 80%),
+      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 {
-      background-color: rgba(black, 0.5);
+      background-color: rgba(black, 0.3);
 
       svg {
-        color: var(--bs-body-color);
+        color: white;
       }
 
       .logo {
-        color: rgba(white, 0.5);
+        color: white;
         background-color: rgba(white, 0);
       }
 
       h1 {
-        color: rgba(white, 0.5);
+        color: white;
       }
     }
 

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

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 
 import { useAppTitle } from '~/stores/context';
 
@@ -32,9 +33,12 @@ export const NoLoginLayout = ({
           <div className="row">
 
             <div className="col-md-12 position-relative">
-              <div className="nologin-header mx-auto flex-column">
-                <GrowiLogo />
-                <h1 className="my-3">{ appTitle ?? 'GROWI' }</h1>
+              <div className="nologin-header mx-auto">
+                <div className="d-flex justify-content-center align-items-center">
+                  <GrowiLogo />
+                  <h1 className="growi-logo-type fs-3 my-3 ms-3">GROWI</h1>
+                </div>
+                <h2 className="fs-4 text-center">{ appTitle }</h2>
                 <div className="noLogin-form-errors px-3"></div>
               </div>
               {children}

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

@@ -3,7 +3,7 @@
 
   .nologin-header,
   .nologin-dialog {
-    width: 320px;
+    width: 420px;
   }
 
 }