Reply FB

apps/app/src/components/Icons/GrowiLogo.jsx

@@ -1,34 +1,40 @@
 import React, { memo } from 'react';
 
+import styles from './GrowiLogo.module.scss';
+
+const moduleClass = styles['grw-logo'];
+
 const GrowiLogo = memo(() => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="32"
-    height="32"
-    viewBox="0 0 226.44 196.11"
-  >
-    <path
-      d="M56.61 196.11L169.83 196.11 226.44 98.06 188.7 98.06 150.96 163.43 75.48 163.43 56.61 196.11z"
-      className="group2"
+  <div className={`${moduleClass}`}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 226.44 196.11"
     >
-    </path>
-    <path
+      <path
+        d="M56.61 196.11L169.83 196.11 226.44 98.06 188.7 98.06 150.96 163.43 75.48 163.43 56.61 196.11z"
+        className="group2"
+      >
+      </path>
+      <path
       // eslint-disable-next-line max-len
-      d="M75.48 98.05L94.35 65.37 150.96 65.38 207.57 65.37 207.57 65.38 226.44 98.06 169.83 98.06 113.22 98.06 94.39 130.66 94.3 130.66 84.92 114.4 75.48 98.05z"
-      className="group1"
-    >
-    </path>
-    <path
-      d="M0 98.06L56.6 0 113.22 0.01 169.83 0.01 169.83 0.01 188.69 32.68 132.09 32.69 75.47 32.69 18.86 130.74 0 98.06z"
-      className="group1"
-    >
-    </path>
-    <path
-      d="M75.48 163.43L56.61 130.74 37.71 163.46 47.15 179.81 56.54 196.07 56.63 196.07 75.48 163.43z"
-      className="group1"
-    >
-    </path>
-  </svg>
+        d="M75.48 98.05L94.35 65.37 150.96 65.38 207.57 65.37 207.57 65.38 226.44 98.06 169.83 98.06 113.22 98.06 94.39 130.66 94.3 130.66 84.92 114.4 75.48 98.05z"
+        className="group1"
+      >
+      </path>
+      <path
+        d="M0 98.06L56.6 0 113.22 0.01 169.83 0.01 169.83 0.01 188.69 32.68 132.09 32.69 75.47 32.69 18.86 130.74 0 98.06z"
+        className="group1"
+      >
+      </path>
+      <path
+        d="M75.48 163.43L56.61 130.74 37.71 163.46 47.15 179.81 56.54 196.07 56.63 196.07 75.48 163.43z"
+        className="group1"
+      >
+      </path>
+    </svg>
+  </div>
 ));
 
 GrowiLogo.displayName = 'GrowiLogo';

apps/app/src/components/Icons/GrowiLogo.module.scss

@@ -0,0 +1,20 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core/scss/growi-official-colors';
+@use '~/styles/variables' as var;
+
+.grw-logo :global {
+  fill: var(--grw-app-title-color, var(--bs-tertiary-color));
+  // set transition for fill
+  transition: fill 0.8s ease-out;
+
+  &:hover {
+    .group1 {
+      fill: growi-official-colors.$growi-green;
+    }
+
+    .group2 {
+      fill: growi-official-colors.$growi-blue;
+    }
+  }
+}
+

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

@@ -1,5 +1,4 @@
 @use '@growi/core/scss/bootstrap/init' as *;
-@use '@growi/core/scss/growi-official-colors';
 @use '~/styles/mixins';
 
 $slack-work-space-name-card-background: #fff5ff;
@@ -21,27 +20,6 @@ $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 {
     .ss-container img {
       padding: 0.5em;

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

@@ -33,7 +33,7 @@ const AdminLayout = ({
 
         <header className="py-0 container-fluid">
           <h1 className="p-3 fs-2 d-flex align-items-center">
-            <Link href="/" className="grw-logo d-block mb-1 me-2">
+            <Link href="/" className="d-block mb-1 me-2">
               <GrowiLogo />
             </Link>
             {componentTitle}

apps/app/src/components/Sidebar/AppTitle/AppTitle.module.scss

@@ -85,27 +85,6 @@
 
 // == Colors
 .grw-app-title :global {
-  .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;
-        }
-      }
-    }
-  }
-
   .grw-site-name {
     --bs-link-color-rgb: var(--grw-app-title-color-rgb, var(--bs-tertiary-color-rgb));
     --bs-link-opacity: 0.5;