[web] Add button style for copy to clipboard component

GitOrigin-RevId: e387f79c829c903660638d3781839c44da10db07

services/web/frontend/js/features/share-project-modal/components/link-sharing.tsx

@@ -313,7 +313,7 @@ function AccessToken({
   return (
     <div className="access-token">
       <code>{link}</code>
-      <CopyToClipboard content={link} tooltipId={tooltipId} />
+      <CopyToClipboard content={link} tooltipId={tooltipId} kind="button" />
     </div>
   )
 }

services/web/frontend/js/shared/components/copy-to-clipboard.tsx

@@ -3,11 +3,12 @@ import { useTranslation } from 'react-i18next'
 import OLButton from '@/shared/components/ol/ol-button'
 import OLTooltip from '@/shared/components/ol/ol-tooltip'
 import OLIconButton from '@/shared/components/ol/ol-icon-button'
+import MaterialIcon from '@/shared/components/material-icon'
 
 export const CopyToClipboard = memo<{
   content: string
   tooltipId: string
-  kind?: 'text' | 'icon'
+  kind?: 'text' | 'icon' | 'button'
   unfilled?: boolean
   onClick?: () => void
 }>(({ content, tooltipId, kind = 'icon', unfilled = false, onClick }) => {
@@ -46,6 +47,20 @@ export const CopyToClipboard = memo<{
         >
           {t('copy')}
         </OLButton>
+      ) : kind === 'button' ? (
+        <OLButton
+          onClick={handleClick}
+          size="sm"
+          variant="ghost"
+          className="copy-button copy-button-ghost"
+        >
+          {copied ? (
+            <MaterialIcon type="check" />
+          ) : (
+            <MaterialIcon type="content_copy" unfilled />
+          )}
+          {t('copy')}
+        </OLButton>
       ) : (
         <OLIconButton
           onClick={handleClick}

services/web/frontend/stylesheets/components/button.scss

@@ -369,6 +369,18 @@ a.btn:visited {
   text-decoration: none;
 }
 
+.copy-button.copy-button-ghost {
+  @include ol-button-variant(
+    $color: var(--content-primary),
+    $background: transparent,
+    $hover-background: var(--bg-light-tertiary)
+  );
+
+  .button-content {
+    gap: var(--spacing-02);
+  }
+}
+
 .btn-reset {
   @include reset-button;
 }