Просмотр исходного кода

Add growi icon button for return

satof3 2 лет назад
Родитель
Сommit
546da33cd6

+ 22 - 0
apps/app/src/components/Layout/Admin.module.scss

@@ -1,4 +1,5 @@
 @use '@growi/core/scss/bootstrap/init' as *;
 @use '@growi/core/scss/bootstrap/init' as *;
+@use '@growi/core/scss/growi-official-colors';
 @use '~/styles/mixins';
 @use '~/styles/mixins';
 
 
 $slack-work-space-name-card-background: #fff5ff;
 $slack-work-space-name-card-background: #fff5ff;
@@ -20,6 +21,27 @@ $slack-work-space-name-card-border: #efc1f6;
     }
     }
   }
   }
 
 
+  .grw-logo {
+    // set transition for fill
+    svg, svg * {
+      transition: fill 0.8s ease-out;
+    }
+
+    fill: var(--grw-app-title-color, var(--bs-tertiary-color));
+
+    &:hover {
+      svg {
+        .group1 {
+          fill: growi-official-colors.$growi-green;
+        }
+
+        .group2 {
+          fill: growi-official-colors.$growi-blue;
+        }
+      }
+    }
+  }
+
   .admin-customize {
   .admin-customize {
     .ss-container img {
     .ss-container img {
       padding: 0.5em;
       padding: 0.5em;

+ 18 - 2
apps/app/src/components/Layout/AdminLayout.tsx

@@ -1,8 +1,11 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 
 
 import dynamic from 'next/dynamic';
 import dynamic from 'next/dynamic';
+import Link from 'next/link';
 
 
 import { AdminNavigation } from '../Admin/Common/AdminNavigation';
 import { AdminNavigation } from '../Admin/Common/AdminNavigation';
+import GrowiLogo from '../Icons/GrowiLogo';
 
 
 import { RawLayout } from './RawLayout';
 import { RawLayout } from './RawLayout';
 
 
@@ -29,7 +32,20 @@ const AdminLayout = ({
       <div className={`admin-page ${styles['admin-page']}`}>
       <div className={`admin-page ${styles['admin-page']}`}>
 
 
         <header className="py-0 container-fluid">
         <header className="py-0 container-fluid">
-          <h1 className="p-3 fs-2">{componentTitle}</h1>
+          {/* <div className="p-3 fs-2 d-flex align-items-center">
+            <Link href="/" className="grw-logo d-block me-2">
+              <GrowiLogo />
+            </Link>
+            <h1 className="fs-2">
+              {componentTitle}
+            </h1>
+          </div> */}
+          <h1 className="p-3 fs-2 d-flex align-items-center">
+            <Link href="/" className="grw-logo d-block mb-1 me-2">
+              <GrowiLogo />
+            </Link>
+            {componentTitle}
+          </h1>
         </header>
         </header>
         <div id="main" className="main">
         <div id="main" className="main">
           <div className="container-fluid">
           <div className="container-fluid">