adjust styles

apps/app/src/components/CustomNavigation/CustomNavButton.module.scss

@@ -1,39 +1,46 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
-@include bs.color-mode(light) {
-  .grw-custom-nav-tab :global {
-    .nav-title {
-      background-color: bs.$gray-100;
-    }
 
-    .active {
-      background-color: bs.$gray-500;
-    }
-    .passive {
-      background-color: white;
-      &:hover {
-        background-color: bs.$gray-100;
-      }
+.grw-custom-nav-tab :global {
+  .btn {
+    --bs-btn-border-width: 2px;
+
+    width: 110px;
+    height: 38px;
+
+    @include bs.media-breakpoint-up(md) {
+      width: 90px;
+      height: 30px;
     }
   }
 }
 
 
-@include bs.color-mode(dark) {
+// == Colors
+@include bs.color-mode(light) {
   .grw-custom-nav-tab :global {
-    .nav-title {
-      border: 2px solid bs.$gray-800;
-    }
+    .btn {
+      $bg: var(--bs-gray-500);
 
-    .active {
-      background-color: bs.$gray-800;
-    }
-    .passive {
-      background-color: bs.$gray-600;
-      &:hover {
-        background-color: rgba(bs.$gray-600, 0.1);
-      }
+      --bs-btn-border-color: #{$bg};
+      --bs-btn-hover-bg: var(--bs-gray-100);
+      --bs-btn-hover-border-color: #{$bg};
+      --bs-btn-active-color: white;
+      --bs-btn-active-bg: #{$bg};
+      --bs-btn-active-border-color: #{$bg};
     }
   }
 }
+@include bs.color-mode(dark) {
+  .grw-custom-nav-tab :global {
+    .btn {
+      $bg: var(--bs-gray-800);
 
+      --bs-btn-border-color: #{$bg};
+      --bs-btn-hover-bg: #{rgba(bs.$gray-600, 0.1)};
+      --bs-btn-hover-border-color: #{$bg};
+      --bs-btn-active-bg: #{$bg};
+      --bs-btn-active-border-color: #{$bg};
+    }
+  }
+}

apps/app/src/components/CustomNavigation/CustomNavButton.tsx

@@ -1,4 +1,5 @@
-import { memo, type ReactNode } from 'react';
+import type { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import { memo } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
@@ -7,26 +8,24 @@ import styles from './CustomNavButton.module.scss';
 const moduleClass = styles['grw-custom-nav-tab'] ?? '';
 
 
-type SwitchingButtonProps = {
-  active?: boolean,
-  children?: ReactNode,
-  onClick?: () => void,
+type SwitchingButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+    active?: boolean,
 }
+
 const SwitchingButton = memo((props: SwitchingButtonProps) => {
   const {
-    active, children, onClick,
+    active, className, children, onClick, ...rest
   } = props;
 
-  const classNames = ['btn py-1 px-2 d-flex align-items-center justify-content-center'];
-  if (active) {
-    classNames.push('active');
-  }
-
   return (
     <button
       type="button"
-      className={classNames.join(' ')}
+      className={`btn btn-sm py-1 d-flex align-items-center justify-content-center
+        ${className}
+        ${active ? 'active' : ''}
+      `}
       onClick={onClick}
+      {...rest}
     >
       {children}
     </button>
@@ -54,12 +53,14 @@ export const CustomNavTab = (props: CustomNavTabProps): JSX.Element => {
     >
       <SwitchingButton
         active={!showPreview}
+        className="px-2"
         onClick={() => onNavSelected?.(false)}
       >
         <span className="material-symbols-outlined me-1">edit_square</span>{t('Write')}
       </SwitchingButton>
       <SwitchingButton
         active={showPreview}
+        className="ps-2 pe-3"
         onClick={() => onNavSelected?.(true)}
       >
         <span className="material-symbols-outlined me-0">play_arrow</span>{t('Preview')}