Merge branch 'dev/7.0.x' into feat/132492-132493-create-create-new-page-button

apps/app/src/components/CompleteUserRegistrationForm.tsx

@@ -111,16 +111,12 @@ const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
               <input type="hidden" name="token" value={token} />
 
               <div className="input-group">
-                <div>
-                  <span className="input-group-text"><i className="icon-envelope"></i></span>
-                </div>
+                <span className="input-group-text"><i className="icon-envelope"></i></span>
                 <input type="text" className="form-control" placeholder={t('Email')} disabled value={email} />
               </div>
 
               <div className="input-group" id="input-group-username">
-                <div>
-                  <span className="input-group-text"><i className="icon-user"></i></span>
-                </div>
+                <span className="input-group-text"><i className="icon-user"></i></span>
                 <input
                   type="text"
                   className="form-control"
@@ -138,9 +134,7 @@ const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
               )}
 
               <div className="input-group">
-                <div>
-                  <span className="input-group-text"><i className="icon-tag"></i></span>
-                </div>
+                <span className="input-group-text"><i className="icon-tag"></i></span>
                 <input
                   type="text"
                   className="form-control"
@@ -154,9 +148,7 @@ const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
               </div>
 
               <div className="input-group">
-                <div>
-                  <span className="input-group-text"><i className="icon-lock"></i></span>
-                </div>
+                <span className="input-group-text"><i className="icon-lock"></i></span>
                 <input
                   type="password"
                   className="form-control"

apps/app/src/components/InstallerForm.tsx

@@ -147,9 +147,7 @@ const InstallerForm = memo((): JSX.Element => {
           </div>
 
           <div className={`input-group mb-3${hasErrorClass}`}>
-            <div>
-              <span className="input-group-text"><i className="icon-user" /></span>
-            </div>
+            <span className="input-group-text"><i className="icon-user" /></span>
             <input
               data-testid="tiUsername"
               type="text"
@@ -163,9 +161,7 @@ const InstallerForm = memo((): JSX.Element => {
           <p className="form-text">{ unavailableUserId }</p>
 
           <div className="input-group mb-3">
-            <div>
-              <span className="input-group-text"><i className="icon-tag" /></span>
-            </div>
+            <span className="input-group-text"><i className="icon-tag" /></span>
             <input
               data-testid="tiName"
               type="text"
@@ -177,9 +173,7 @@ const InstallerForm = memo((): JSX.Element => {
           </div>
 
           <div className="input-group mb-3">
-            <div>
-              <span className="input-group-text"><i className="icon-envelope" /></span>
-            </div>
+            <span className="input-group-text"><i className="icon-envelope" /></span>
             <input
               data-testid="tiEmail"
               type="email"
@@ -191,9 +185,7 @@ const InstallerForm = memo((): JSX.Element => {
           </div>
 
           <div className="input-group mb-3">
-            <div>
-              <span className="input-group-text"><i className="icon-lock" /></span>
-            </div>
+            <span className="input-group-text"><i className="icon-lock" /></span>
             <input
               data-testid="tiPassword"
               type="password"

apps/app/src/components/InvitedForm.tsx

@@ -82,11 +82,9 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
       <form role="form" onSubmit={submitHandler} id="invited-form">
         {/* Email Form */}
         <div className="input-group">
-          <div>
-            <span className="input-group-text">
-              <i className="icon-envelope"></i>
-            </span>
-          </div>
+          <span className="input-group-text">
+            <i className="icon-envelope"></i>
+          </span>
           <input
             type="text"
             className="form-control"
@@ -99,11 +97,9 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
         </div>
         {/* UserID Form */}
         <div className="input-group" id="input-group-username">
-          <div>
-            <span className="input-group-text">
-              <i className="icon-user"></i>
-            </span>
-          </div>
+          <span className="input-group-text">
+            <i className="icon-user"></i>
+          </span>
           <input
             type="text"
             className="form-control"
@@ -115,11 +111,9 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
         </div>
         {/* Name Form */}
         <div className="input-group">
-          <div>
-            <span className="input-group-text">
-              <i className="icon-tag"></i>
-            </span>
-          </div>
+          <span className="input-group-text">
+            <i className="icon-tag"></i>
+          </span>
           <input
             type="text"
             className="form-control"
@@ -131,11 +125,9 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
         </div>
         {/* Password Form */}
         <div className="input-group">
-          <div>
-            <span className="input-group-text">
-              <i className="icon-lock"></i>
-            </span>
-          </div>
+          <span className="input-group-text">
+            <i className="icon-lock"></i>
+          </span>
           <input
             type="password"
             className="form-control"

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

@@ -1,4 +1,5 @@
-@use '@growi/core/scss/bootstrap/init' as *;
+@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core/scss/growi-official-colors' as var;
 
 
 .nologin :global {
@@ -16,11 +17,11 @@
 
       .nologin-header {
         display: flex;
-        flex-direction: column;
         align-items: center;
         padding-top: 30px;
         padding-bottom: 10px;
       }
+
     }
 
   }
@@ -55,32 +56,32 @@
 
   $btn-fill-colors: (
     'login': (
-      rgba($danger, 0.4),
+      rgba(bs.$danger, 0.4),
       rgba(#7e4153, 0.7),
     ),
     'register': (
-      rgba($success, 0.4),
+      rgba(bs.$success, 0.4),
       rgba(#3f7263, 0.7),
     ),
     'google': (
       rgba(#24292e, 0.4),
-      $gray-700,
+      bs.$gray-700,
     ),
     'github': (
       rgba(lighten(black, 20%), 0.4),
-      $gray-700,
+      bs.$gray-700,
     ),
     'facebook': (
       rgba(#29487d, 0.4),
-      $gray-700,
+      bs.$gray-700,
     ),
     'oidc': (
       rgba(#24292e, 0.4),
-      $gray-700,
+      bs.$gray-700,
     ),
     'saml': (
       rgba(#55a79a, 0.4),
-      $gray-700,
+      bs.$gray-700,
     ),
   );
 
@@ -114,7 +115,7 @@
 }
 
 .link-switch {
-  color: $gray-200;
+  color: bs.$gray-200;
 
   &:hover {
     color: white;
@@ -126,3 +127,149 @@
     line-height: 1em;
   }
 }
+
+// Light mode color
+@include bs.color-mode(light) {
+  .nologin :global {
+    // background color
+    $color-gradient: #3c465c;
+    background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
+      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(white, 0.5);
+
+      svg {
+        color: var(--bs-body-color);
+      }
+
+      .logo {
+        color: rgba(black, 0.5);
+        background-color: rgba(black, 0);
+      }
+
+      h1 {
+        color: rgba(black, 0.5);
+      }
+    }
+
+    .nologin-dialog {
+      background-color: rgba(white, 0.5);
+      .link-switch {
+        color: #1939b8;
+        &:hover {
+          color: lighten(#1939b8,20%);
+        }
+      }
+    }
+
+    .input-group {
+      .input-group-text {
+        color: darken(white, 30%);
+        background-color: rgba(bs.$gray-700, 0.7);
+      }
+
+      .form-control {
+        color: white;
+        background-color: rgba(bs.$gray-600, 0.7);
+        box-shadow: unset;
+
+        &::placeholder {
+          color: darken(white, 30%);
+        }
+      }
+    }
+
+    .link-growi-org {
+      color: rgba(black, 0.4);
+
+      &:hover,
+      &.focus {
+        color: black;
+
+        .growi {
+          color: darken(var.$growi-green, 20%);
+        }
+
+        .org {
+          color: darken(var.$growi-blue, 15%);
+        }
+      }
+    }
+  }
+}
+
+// Dark mode color
+@include bs.color-mode(dark) {
+  .nologin :global {
+    // 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(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
+
+    .nologin-header {
+      background-color: rgba(black, 0.5);
+
+      svg {
+        color: var(--bs-body-color);
+      }
+
+      .logo {
+        color: rgba(white, 0.5);
+        background-color: rgba(white, 0);
+      }
+
+      h1 {
+        color: rgba(white, 0.5);
+      }
+    }
+
+    .nologin-dialog {
+      background-color: rgba(black, 0.5);
+      .link-switch {
+        color: #7b9bd5;
+        &:hover {
+          color: lighten(#7b9bd5,10%);
+        }
+      }
+    }
+
+    .input-group {
+      .input-group-text {
+        color: darken(white, 30%);
+        background-color: rgba(bs.$gray-700, 0.7);
+      }
+
+      .form-control {
+        color: white;
+        background-color: rgba(#505050, 0.7);
+        box-shadow: unset;
+
+        &::placeholder {
+          color: darken(white, 30%);
+        }
+      }
+    }
+
+    .link-growi-org {
+      color: rgba(white, 0.4);
+
+      &:hover,
+      &.focus {
+        color: rgba(white, 0.7);
+
+        .growi {
+          color: darken(var.$growi-green, 5%);
+        }
+
+        .org {
+          color: darken(var.$growi-blue, 5%);
+        }
+      }
+    }
+
+  }
+}

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

@@ -26,13 +26,13 @@ export const NoLoginLayout = ({
 
   return (
     <RawLayout className={`nologin ${commonStyles.nologin} ${classNames}`}>
-      <div className="page-wrapper">
+      <div className="page-wrapper flex-row">
         <div className="main container-fluid">
 
           <div className="row">
 
-            <div className="col-md-12">
-              <div className="nologin-header mx-auto">
+            <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-form-errors px-3"></div>

apps/app/src/components/LoginForm.tsx

@@ -195,11 +195,9 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
 
         <form role="form" onSubmit={handleLoginWithLocalSubmit} id="login-form">
           <div className="input-group">
-            <div>
-              <span className="input-group-text">
-                <i className="icon-user"></i>
-              </span>
-            </div>
+            <span className="input-group-text">
+              <i className="icon-user"></i>
+            </span>
             <input
               type="text"
               className="form-control rounded-0"
@@ -209,20 +207,16 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
               name="usernameForLogin"
             />
             {isLdapStrategySetup && (
-              <div>
-                <small className="input-group-text text-success">
-                  <i className="icon-fw icon-check"></i> LDAP
-                </small>
-              </div>
+              <small className="input-group-text text-success">
+                <i className="icon-fw icon-check"></i> LDAP
+              </small>
             )}
           </div>
 
           <div className="input-group">
-            <div>
-              <span className="input-group-text">
-                <i className="icon-lock"></i>
-              </span>
-            </div>
+            <span className="input-group-text">
+              <i className="icon-lock"></i>
+            </span>
             <input
               type="password"
               className="form-control rounded-0"
@@ -311,7 +305,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
             type="button"
             className="btn btn-secondary btn-external-auth-tab btn-sm rounded-0 mb-3"
             data-bs-toggle={isExternalAuthCollapsible ? 'collapse' : ''}
-            data-target="#external-auth"
+            data-bs-target="#external-auth"
             aria-expanded="false"
             aria-controls="external-auth"
           >
@@ -421,11 +415,9 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
           {!isEmailAuthenticationEnabled && (
             <div>
               <div className="input-group" id="input-group-username">
-                <div>
-                  <span className="input-group-text">
-                    <i className="icon-user"></i>
-                  </span>
-                </div>
+                <span className="input-group-text">
+                  <i className="icon-user"></i>
+                </span>
                 {/* username */}
                 <input
                   type="text"
@@ -441,11 +433,9 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
                 <span id="help-block-username"></span>
               </p>
               <div className="input-group">
-                <div>
-                  <span className="input-group-text">
-                    <i className="icon-tag"></i>
-                  </span>
-                </div>
+                <span className="input-group-text">
+                  <i className="icon-tag"></i>
+                </span>
                 {/* name */}
                 <input
                   type="text"
@@ -461,11 +451,9 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
           )}
 
           <div className="input-group">
-            <div>
-              <span className="input-group-text">
-                <i className="icon-envelope"></i>
-              </span>
-            </div>
+            <span className="input-group-text">
+              <i className="icon-envelope"></i>
+            </span>
             {/* email */}
             <input
               type="email"
@@ -497,11 +485,9 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
           {!isEmailAuthenticationEnabled && (
             <div>
               <div className="input-group">
-                <div>
-                  <span className="input-group-text">
-                    <i className="icon-lock"></i>
-                  </span>
-                </div>
+                <span className="input-group-text">
+                  <i className="icon-lock"></i>
+                </span>
                 {/* Password */}
                 <input
                   type="password"

apps/app/src/components/Navbar/GrowiNavbarBottom.tsx

@@ -52,7 +52,7 @@ export const GrowiNavbarBottom = (): JSX.Element => {
                 <a
                   role="button"
                   className="nav-link btn-lg"
-                  data-target="#grw-global-search-collapse"
+                  data-bs-target="#grw-global-search-collapse"
                   data-bs-toggle="collapse"
                 >
                   <i className="icon-magnifier"></i>

apps/app/src/components/PageEditor/HandsontableModal.tsx

@@ -459,7 +459,7 @@ export const HandsontableModal = (): JSX.Element => {
             type="button"
             className="me-4 data-import-button btn btn-secondary"
             data-bs-toggle="collapse"
-            data-target="#collapseDataImport"
+            data-bs-target="#collapseDataImport"
             aria-expanded={isDataImportAreaExpanded}
             onClick={toggleDataImportArea}
           >