Improve clipboard buttons

Signed-off-by: Alexis Sellier <self@cloudhead.io>

src/Clipboard.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import Icon from '@app/Icon.svelte';
+  import { toClipboard } from '@app/utils';
+
+  export let text: string;
+  export let small = false;
+</script>
+
+<style>
+  .clipboard {
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .clipboard.small {
+    width: 24px;
+    height: 24px;
+  }
+  .clipboard:hover :global(svg) {
+    stroke: var(--color-foreground-90);
+  }
+  .clipboard:active :global(svg) {
+    stroke: var(--color-positive);
+  }
+  .clipboard:hover {
+    border-radius: 1.5rem;
+  }
+</style>
+
+<span class="clipboard" class:small on:click={() => toClipboard(text)}>
+  {#if small}
+    <Icon name="clipboard-small" width={12} height={12} />
+  {:else}
+    <Icon name="clipboard" width={16} height={16} />
+  {/if}
+</span>

src/Icon.svelte

@@ -44,8 +44,9 @@
       data: `<path fill-rule="evenodd" d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z"></path>`
     },
     {
-      name: "small-clipboard",
+      name: "clipboard-small",
       size: 12,
+      offset: { x: -1, y: 1 },
       data: `<svg width="12" height="12" viewBox="0 0 12 12" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"><line x1="3.5" y1="1" x2="3.5" y2="10"/><line x1="6.5" y1="1" x2="6.5" y2="4"/><line x1="9.5" y1="5" x2="9.5" y2="10"/><line x1="7" y1="1.5" x2="4" y2="1.5"/><line x1="9.64645" y1="4.35355" x2="6.64644" y2="1.35355"/><line x1="10" y1="9.5" x2="4" y2="9.5"/><line x1="10" y1="4.5" x2="6" y2="4.5"/><line x1="1.5" y1="4" x2="1.5" y2="12"/><line x1="7" y1="11.5" x2="1" y2="11.5"/></svg>`
     },
     {
@@ -67,6 +68,11 @@
   svg.clickable {
     cursor: pointer;
   }
+  span {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
 </style>
 
 {#if svg}

src/base/projects/Project.svelte

@@ -3,8 +3,8 @@
   import type { Config } from '@app/config';
   import * as proj from '@app/project';
   import Avatar from '@app/Avatar.svelte';
-  import Icon from '@app/Icon.svelte';
-  import { formatProfile, formatSeedId, setOpenGraphMetaTag, toClipboard } from '@app/utils';
+  import Clipboard from '@app/Clipboard.svelte';
+  import { formatProfile, formatSeedId, setOpenGraphMetaTag } from '@app/utils';
   import { browserStore } from '@app/project';
 
   import Header from '@app/base/projects/Header.svelte';
@@ -53,9 +53,9 @@
     padding: 0 2rem 0 8rem;
   }
   .title {
-    display: inline-flex;
+    display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: left;
     font-size: 2rem;
     margin-bottom: 0.5rem;
   }
@@ -64,6 +64,10 @@
     margin: 0 0.5rem;
     font-weight: normal;
   }
+  .title .peer-id {
+    color: var(--color-foreground-subtle);
+    font-weight: normal;
+  }
   .org-avatar {
     display: inline-block;
     width: 2rem;
@@ -74,6 +78,10 @@
     font-size: 0.75rem;
     color: var(--color-foreground-faded);
     overflow-wrap: anywhere;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    gap: 0.125rem;
   }
   .description {
     margin: 1rem 0 1.5rem 0;
@@ -114,13 +122,14 @@
     {/if}
     <Link to={rootPath()}>{project.name}</Link>
     {#if peer}
-      <span class="divider" title={peer}>/ {formatSeedId(peer)}
-        <Icon name="clipboard" width={16} height={16} class="clickable" on:click={() => toClipboard(peer ?? "")}/>
+      <span class="peer-id">
+        <span class="divider">/</span><span title={peer}>{formatSeedId(peer)}</span><Clipboard text={peer} />
       </span>
     {/if}
   </div>
-  <div class="urn" on:click={() => toClipboard(project.urn)}>{project.urn}
-    <Icon name="small-clipboard" width={12} height={12} class="clickable" on:click={() => toClipboard(project.urn)}/>
+  <div class="urn">
+    <span>{project.urn}</span>
+    <Clipboard small text={project.urn} />
   </div>
   <div class="description">{project.description}</div>
 </header>