adjust CopyDropdown styles

apps/app/src/components/Common/CopyDropdown/CopyDropdown.jsx

@@ -110,10 +110,10 @@ export const CopyDropdown = (props) => {
 
   return (
     <>
-      <Dropdown className={`${styles['grw-copy-dropdown']} grw-copy-dropdown d-print-none`} isOpen={dropdownOpen} toggle={toggleDropdown}>
+      <Dropdown className={`${styles['grw-copy-dropdown']} grw-copy-dropdown d-print-none`} isOpen={dropdownOpen} size="sm" toggle={toggleDropdown}>
         <DropdownToggle
-          caret
-          className={dropdownToggleClassName}
+          caret={isShareLinkMode}
+          className={`btn-copy ${dropdownToggleClassName}`}
         >
           <span id={dropdownToggleId}>{children}</span>
         </DropdownToggle>

apps/app/src/components/Common/CopyDropdown/CopyDropdown.module.scss

@@ -1,4 +1,12 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+@use '@growi/ui/scss/atoms/btn-muted';
+
 .grw-copy-dropdown :global {
+  .btn.btn-copy {
+    @include btn-muted.colorize(bs.$gray-500);
+  }
+
   .dropdown-menu {
     min-width: 310px;
 

apps/app/src/components/Common/PagePathNav/PagePathNav.module.scss

@@ -1,5 +1,7 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
+@use '@growi/ui/scss/atoms/btn-muted';
+
 .grw-mr-02em {
   margin-right: 0.2em;
 }
@@ -19,3 +21,8 @@
   }
 }
 
+.grw-page-path-nav :global {
+  .btn-copy {
+    @include btn-muted.colorize(bs.$orange);
+  }
+}

apps/app/src/components/Common/PagePathNav/PagePathNav.tsx

@@ -76,7 +76,6 @@ export const PagePathNav: FC<Props> = (props: Props) => {
   }
 
   const copyDropdownId = `copydropdown-${pageId}`;
-  const copyDropdownToggleClassName = 'd-block btn-outline-secondary btn-copy border-0 text-muted p-2';
 
   return (
     <div>
@@ -87,7 +86,7 @@ export const PagePathNav: FC<Props> = (props: Props) => {
         </h1>
         { pageId != null && !isNotFound && (
           <div className="mx-2">
-            <CopyDropdown pageId={pageId} pagePath={pagePath} dropdownToggleId={copyDropdownId} dropdownToggleClassName={copyDropdownToggleClassName}>
+            <CopyDropdown pageId={pageId} pagePath={pagePath} dropdownToggleId={copyDropdownId} dropdownToggleClassName="p-2">
               <i className="ti ti-clipboard"></i>
             </CopyDropdown>
           </div>

packages/ui/scss/atoms/_btn-muted.scss

@@ -12,6 +12,8 @@
   --bs-btn-active-color: #{$color-active};
   --bs-btn-active-bg: transparent;
 
+  --bs-btn-border-width: 0;
+
   &:hover {
     --bs-btn-active-bg: rgba(#{$color-active-rgb}, 0.2);
   }