WIP: implement PageCreateButton

apps/app/src/components/Sidebar/PageCreateButton/CreateButton.module.scss

@@ -0,0 +1,32 @@
+@use '~/styles/variables' as var;
+
+@use '../button-styles';
+
+.btn-create :global {
+  @extend %btn-primary-basis;
+
+  padding: 0 3px;
+
+  .icon {
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+  }
+}
+
+// == Colors
+.btn-create {
+  background-color: transparent !important;
+}
+
+.btn-create :global {
+  svg {
+    fill: var(--bs-btn-bg);
+  }
+}
+
+.btn-create:hover :global {
+  svg {
+    fill: var(--bs-btn-hover-bg);
+  }
+}

apps/app/src/components/Sidebar/PageCreateButton/CreateButton.tsx

@@ -0,0 +1,24 @@
+import type { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+
+import { Hexagon } from './Hexagon';
+
+import styles from './CreateButton.module.scss';
+
+const moduleClass = styles['btn-create'];
+
+
+type Props = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
+
+export const CreateButton = (props: Props): JSX.Element => {
+  return (
+    <button
+      type="button"
+      {...props}
+      className={`${moduleClass} btn btn-primary`}
+      data-testid="grw-sidebar-nav-page-create-button"
+    >
+      <Hexagon />
+      <span className="icon material-symbols-outlined position-absolute">edit</span>
+    </button>
+  );
+};

apps/app/_obsolete/src/components/Sidebar/NavigationResizeHexagon.tsx → apps/app/src/components/Sidebar/PageCreateButton/Hexagon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const NavigationResizeHexagon = React.memo((): JSX.Element => (
+export const Hexagon = React.memo((): JSX.Element => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 27.691 23.999"
@@ -14,4 +14,3 @@ export const NavigationResizeHexagon = React.memo((): JSX.Element => (
     </g>
   </svg>
 ));
-NavigationResizeHexagon.displayName = 'NavigationResizeHexagon';

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

@@ -0,0 +1,6 @@
+@use '~/styles/variables' as var;
+
+@use '../button-styles';
+
+.grw-page-create-button :global {
+}

apps/app/src/components/Sidebar/PageCreateButton.tsx → apps/app/src/components/Sidebar/PageCreateButton/PageCreateButton.tsx

@@ -7,6 +7,13 @@ import { toastError } from '~/client/util/toastr';
 import { useSWRxCurrentPage } from '~/stores/page';
 import loggerFactory from '~/utils/logger';
 
+import styles from './PageCreateButton.module.scss';
+import { Hexagon } from './Hexagon';
+import { CreateButton } from './CreateButton';
+
+const moduleClass = styles['grw-page-create-button'];
+
+
 const logger = loggerFactory('growi:cli:PageCreateButton');
 
 export const PageCreateButton = React.memo((): JSX.Element => {
@@ -65,26 +72,19 @@ export const PageCreateButton = React.memo((): JSX.Element => {
     // router.push(`${router.pathname}/__template#edit`);
   }, [router]);
 
-  // TODO: update button design
-  // https://redmine.weseek.co.jp/issues/132683
   // TODO: i18n
   // https://redmine.weseek.co.jp/issues/132681
   return (
     <div
-      className="d-flex flex-row"
+      className={`${moduleClass} d-flex flex-row`}
       onMouseEnter={onMouseEnterHandler}
       onMouseLeave={onMouseLeaveHandler}
     >
-      <div className="btn-group">
-        <button
-          className="d-block btn btn-primary"
+      <div className="btn-group flex-grow-1">
+        <CreateButton
           onClick={onCreateNewPageButtonHandler}
-          type="button"
-          data-testid="grw-sidebar-nav-page-create-button"
           disabled={isCreating}
-        >
-          <i className="material-symbols-outlined">edit</i>
-        </button>
+        />
       </div>
       {isHovered && (
         <div className="btn-group dropend">

apps/app/src/components/Sidebar/PageCreateButton/index.ts

@@ -0,0 +1 @@
+export * from './PageCreateButton';