Design Polish — radicle-explorer

modified public/colors.css

@@ -13,7 +13,7 @@

   --color-foreground-primary-hover: #ff80ff;
   --color-foreground-success: #4fa877;
   --color-foreground-red: #aa5078;
   --color-foreground-yellow: #e5c001;
   --color-foreground-yellow: #b29401;
   --color-foreground-disabled: #9b9bb1;
   --color-border-hint: #dbdbff;
   --color-border-default: #dbdbff;

@@ -50,6 +50,8 @@

   --color-fill-warning: #ffffe5;
   --color-fill-counter: #dbdbff;
   --color-fill-counter-emphasized: #dbdbff;
   --color-fill-delegate: #ffe5ff;
   --color-fill-private: #fff5d6;
 }
 :root[data-theme="dark"] {

@@ -104,4 +106,6 @@

   --color-fill-warning: #191500;
   --color-fill-counter: #393a46;
   --color-fill-counter-emphasized: #232563;
   --color-fill-delegate: #3d003d;
   --color-fill-private: #4c4000;
 }

modified src/components/Button.svelte

@@ -296,6 +296,8 @@

     color: var(--color-foreground-contrast);
     border: 1px solid var(--color-border-hint);
     border-radius: 4px 4px 0 0;
     font-weight: normal;
     letter-spacing: 0.3px;
   }
   .tab[disabled] {

modified src/components/CopyableId.svelte

@@ -11,13 +11,16 @@

 <style>
   .id {
     cursor: pointer;
     color: var(--color-fill-secondary);
     color: var(--color-foreground-emphasized);
     overflow-wrap: anywhere;
     display: flex;
     align-items: center;
     gap: 0.125rem;
     width: fit-content;
   }
   .id:hover {
     color: var(--color-foreground-emphasized-hover);
   }
 </style>
 <!-- svelte-ignore a11y-click-events-have-key-events -->

@@ -31,7 +34,8 @@

   <span
     class="txt-overflow"
     class:global-commit={style === "commit"}
     class:global-oid={style === "oid"}>
     class:global-oid={style === "oid"}
     style="color: inherit">
     <slot>{id}</slot>
   </span>
   <Clipboard bind:this={clipboard} text={id} />

modified src/components/HoverPopover.svelte

@@ -13,7 +13,7 @@

     if (visible) {
       onShow();
     }
   }, 150);
   }, 500);
 </script>
 <style>

modified src/components/IconSmall.svelte

@@ -51,6 +51,7 @@

     | "patch"
     | "plus"
     | "settings"
     | "share"
     | "user";
 </script>

@@ -201,9 +202,8 @@

   {:else if name === "clipboard"}
     <path
       fill-rule="evenodd"
       d="M6 2.5A1.5 1.5 0 017.5 1h6A1.5 1.5 0 0115 2.5v6a1.5 1.5 0 01-1.5 1.5H10v3.5A1.5 1.5 0 018.5 15h-6A1.5 1.5 0 011 13.5v-6A1.5 1.5 0 012.5 6H6V2.5zM6 7H2.5a.5.5 0 00-.5.5v6a.5.5 0 00.5.5h6a.5.5 0 00.5-.5V10H7.5A1.5 1.5 0 016 8.5V7zm1.5 2a.5.5 0 01-.5-.5v-6a.5.5 0 01.5-.5h6a.5.5 0 01.5.5v6a.5.5 0 01-.5.5h-6z"
       clip-rule="evenodd">
     </path>
       clip-rule="evenodd"
       d="M5 3.5C5 2.67157 5.67157 2 6.5 2H12.5C13.3284 2 14 2.67157 14 3.5V9.5C14 10.3284 13.3284 11 12.5 11H11V12.5C11 13.3284 10.3284 14 9.5 14H3.5C2.67157 14 2 13.3284 2 12.5V6.5C2 5.67157 2.67157 5 3.5 5H5V3.5ZM5 6H3.5C3.22386 6 3 6.22386 3 6.5V12.5C3 12.7761 3.22386 13 3.5 13H9.5C9.77614 13 10 12.7761 10 12.5V11H6.5C5.67157 11 5 10.3284 5 9.5V6ZM6.5 10C6.22386 10 6 9.77614 6 9.5V3.5C6 3.22386 6.22386 3 6.5 3H12.5C12.7761 3 13 3.22386 13 3.5V9.5C13 9.77614 12.7761 10 12.5 10H6.5Z" />
   {:else if name === "collapse"}
     <path
       fill-rule="evenodd"

@@ -258,9 +258,8 @@

   {:else if name === "download"}
     <path
       fill-rule="evenodd"
       d="M3.5 8a.5.5 0 00-.5.5v4A1.5 1.5 0 004.5 14h8a1.5 1.5 0 001.5-1.5v-4a.5.5 0 00-1 0v4a.5.5 0 01-.5.5h-8a.5.5 0 01-.5-.5v-4a.5.5 0 00-.5-.5z"
       clip-rule="evenodd">
     </path>
       clip-rule="evenodd"
       d="M8 7.71891L10.2789 6.09009C10.5086 5.92587 10.819 5.99243 10.9722 6.23876C11.1254 6.4851 11.0633 6.81792 10.8335 6.98214L8.38828 8.72991C7.88444 9.09003 7.22805 9.09003 6.72421 8.72991L4.27894 6.98214C4.04918 6.81792 3.9871 6.4851 4.14027 6.23876C4.29344 5.99243 4.60387 5.92587 4.83363 6.09009L7 7.63851L7 3C7 2.72386 7.22386 2.5 7.5 2.5C7.77614 2.5 8 2.72386 8 3L8 7.71891ZM2.55624 8C2.2801 8 2.05624 8.22386 2.05624 8.5V12.5C2.05624 13.3284 2.72782 14 3.55624 14L11.5562 14C12.3847 14 13.0562 13.3284 13.0562 12.5V8.5C13.0562 8.22386 12.8324 8 12.5562 8C12.2801 8 12.0562 8.22386 12.0562 8.5V12.5C12.0562 12.7761 11.8324 13 11.5562 13L3.55624 13C3.2801 13 3.05624 12.7761 3.05624 12.5L3.05624 8.5C3.05624 8.22386 2.83239 8 2.55624 8Z" />
     <path
       fill-rule="evenodd"
       d="M8.5 8.5A.5.5 0 009 8V3a.5.5 0 00-1 0v5a.5.5 0 00.5.5z"

@@ -454,9 +453,8 @@

   {:else if name === "network"}
     <path
       fill-rule="evenodd"
       d="M5.5 3a1 1 0 11-2 0 1 1 0 012 0zm1 0A2 2 0 015 4.937v2.126c.308.08.587.23.818.433L9.65 4.76A2 2 0 1112 5.937v5.126a2 2 0 11-2.42 1.375L5.95 10.38A2 2 0 114 7.063V4.937A2 2 0 116.5 3zm-.064 6.506l3.656 2.073c.248-.245.56-.426.908-.516V5.937a1.994 1.994 0 01-.751-.377L6.382 8.322a1.996 1.996 0 01.054 1.184zM3.5 9a1 1 0 112 0 1 1 0 01-2 0zm9-5a1 1 0 11-2 0 1 1 0 012 0zm-1 8a1 1 0 100 2 1 1 0 000-2z"
       clip-rule="evenodd">
     </path>
       clip-rule="evenodd"
       d="M6 4C6 4.55228 5.55228 5 5 5C4.44772 5 4 4.55228 4 4C4 3.44772 4.44772 3 5 3C5.55228 3 6 3.44772 6 4ZM7 4C7 4.9319 6.36264 5.71493 5.50006 5.93698V8.06302C5.8119 8.1433 6.0943 8.29688 6.32779 8.50432L9.13526 6.72449C9.04792 6.49985 9 6.25552 9 6C9 4.89543 9.89543 4 11 4C12.1046 4 13 4.89543 13 6C13 6.93192 12.3626 7.71497 11.5 7.93699V11.063C12.3626 11.285 13 12.0681 13 13C13 14.1046 12.1046 15 11 15C9.89543 15 9 14.1046 9 13C9 12.9239 9.00425 12.8489 9.01252 12.775L6.45484 11.3724C6.09018 11.7588 5.57325 12 5 12C3.89543 12 3 11.1046 3 10C3 9.06806 3.63742 8.28499 4.50006 8.06299V5.93701C3.63742 5.71501 3 4.93194 3 4C3 2.89543 3.89543 2 5 2C6.10457 2 7 2.89543 7 4ZM6.93782 10.4968L9.37527 11.8334C9.64466 11.4589 10.0404 11.1813 10.5 11.063V7.93699C10.2094 7.8622 9.94439 7.72374 9.72068 7.53738L6.88648 9.33415C6.96 9.54244 7 9.76655 7 10C7 10.1715 6.97842 10.3379 6.93782 10.4968ZM12 6C12 6.55228 11.5523 7 11 7C10.4477 7 10 6.55228 10 6C10 5.44772 10.4477 5 11 5C11.5523 5 12 5.44772 12 6ZM12 13C12 13.5523 11.5523 14 11 14C10.4477 14 10 13.5523 10 13C10 12.4477 10.4477 12 11 12C11.5523 12 12 12.4477 12 13ZM5 11C5.55228 11 6 10.5523 6 10C6 9.44772 5.55228 9 5 9C4.44772 9 4 9.44772 4 10C4 10.5523 4.44772 11 5 11Z" />
   {:else if name === "patch"}
     <path
       fill-rule="evenodd"

@@ -490,6 +488,15 @@

       d="M9.5 12H14C14.2761 12 14.5 12.2239 14.5 12.5C14.5 12.7761 14.2761 13 14 13H8.5C7.94772 13 7.5 12.5523 7.5 12C7.5 11.4477 7.94772 11 8.5 11C9.05229 11 9.5 11.4477 9.5 12Z" />
     <path
       d="M8 8C7.72386 8 7.5 8.22386 7.5 8.5C7.5 8.77614 7.72386 9 8 9H14C14.2761 9 14.5 8.77614 14.5 8.5C14.5 8.22386 14.2761 8 14 8H8Z" />
   {:else if name === "share"}
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M3.00001 11.8177L3.00001 12.8333C3.00001 13.4777 3.52235 14 4.16668 14L11.7761 14C12.4204 14 12.9427 13.4777 12.9427 12.8333L12.9427 8.16667C12.9427 7.52234 12.4204 7 11.7761 7L10.4558 7C10.1811 7.00223 9.9592 7.22557 9.9592 7.50073C9.9592 7.77728 10.1834 8.00146 10.4599 8.00146C10.4729 8.00146 10.4858 8.00097 10.4985 8L11.7761 8C11.8681 8 11.9427 8.07462 11.9427 8.16667L11.9427 12.8333C11.9427 12.9254 11.8681 13 11.7761 13L4.16668 13C4.07463 13 4.00001 12.9254 4.00001 12.8333L4.00001 8.16667C4.00001 8.07462 4.07463 8 4.16668 8L5.42271 8C5.43545 8.00097 5.44832 8.00146 5.4613 8.00146C5.73785 8.00146 5.96204 7.77728 5.96204 7.50073C5.96204 7.23296 5.75185 7.01428 5.48746 7.00067L5.4613 7L4.16668 7C3.52234 7 3.00001 7.52233 3.00001 8.16667L3.00001 9.18226L3 9.18498L3 11.815L3.00001 11.8177Z" />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M10.9596 5.37141C10.7643 5.56667 10.4477 5.56667 10.2525 5.37141L8.43937 3.55829L8.43937 10.5C8.43937 10.7761 8.21551 11 7.93937 11C7.66322 11 7.43937 10.7761 7.43937 10.5L7.43937 3.5583L5.62626 5.37141C5.431 5.56668 5.11441 5.56667 4.91915 5.37141C4.72389 5.17615 4.72389 4.85957 4.91915 4.66431L7.11441 2.46904C7.57002 2.01343 8.30872 2.01343 8.76433 2.46904L10.9596 4.66431C11.1549 4.85957 11.1549 5.17615 10.9596 5.37141Z" />
   {:else if name === "user"}
     <path
       fill-rule="evenodd"

modified src/components/ProjectCard.svelte

@@ -114,21 +114,10 @@

     display: flex;
     align-items: center;
     justify-content: center;
     width: 1.5rem;
     height: 1.5rem;
     border-radius: 50%;
     overflow: hidden;
     position: relative;
   }
   .badge-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     opacity: 0.25;
     padding: 0.25rem;
   }
   h4,

@@ -166,26 +155,26 @@

         <h4 use:twemoji>{name}</h4>
         <div class="badges">
           {#if isPrivate}
             <div title="Private" class="badge">
               <div
                 class="badge-background"
                 style:background-color="var(--color-fill-yellow)" />
             <div
               title="Private"
               class="badge"
               style="background-color: var(--color-fill-private); color: var(--color-foreground-yellow)">
               <IconSmall name="lock" />
             </div>
           {/if}
           {#if isDelegate}
             <div title="Delegate" class="badge">
               <div
                 class="badge-background"
                 style:background-color="var(--color-foreground-primary)" />
             <div
               title="Delegate"
               class="badge"
               style="background-color: var(--color-fill-delegate); color: var(--color-foreground-primary)">
               <IconSmall name="badge" />
             </div>
           {/if}
           {#if isSeeding}
             <div title="Seeding" class="badge">
               <div
                 class="badge-background"
                 style:background-color="var(--color-fill-secondary)" />
             <div
               title="Seeding"
               class="badge"
               style="background-color: var(--color-fill-counter-emphasized); color: var(--color-foreground-emphasized)">
               <IconSmall name="network" />
             </div>
           {/if}

modified src/views/projects/Header/ShareButton.svelte

@@ -10,6 +10,7 @@

   import Command from "@app/components/Command.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import Loading from "@app/components/Loading.svelte";
   import IconButton from "@app/components/IconButton.svelte";
   export let preferredSeeds: string[];
   export let publicExplorer: string;

@@ -72,6 +73,7 @@

     gap: 0.5rem;
     width: 100%;
     min-width: 0;
     margin-right: 0.5rem;
   }
   .help {

@@ -122,21 +124,33 @@

               {path.replace("/nodes/", "")}
             </span>
           </div>
           <div style="display: flex; gap: 0.5rem; align-items: center;">
           <div style="display: flex; align-items: center;">
             {#if state === "found"}
               <Clipboard
                 text={formatPublicExplorer(
                   publicExplorer,
                   seed.node.hostname,
                   seed.project,
                   path,
                 )} />
               <a href={path} target="_blank">
                 <IconSmall name="arrow-box-up-right" />
               </a>
               <IconButton>
                 <Clipboard
                   text={formatPublicExplorer(
                     publicExplorer,
                     seed.node.hostname,
                     seed.project,
                     path,
                   )} />
               </IconButton>
               <IconButton>
                 <a
                   href={path}
                   target="_blank"
                   style=" width: 1.5rem;
                 height: 1.5rem; display: flex; align-items: center; justify-content: center;">
                   <IconSmall name="arrow-box-up-right" />
                 </a>
               </IconButton>
             {:else}
               <IconSmall name="clipboard" />
               <IconSmall name="arrow-box-up-right" />
               <IconButton>
                 <IconSmall name="clipboard" />
               </IconButton>
               <IconButton>
                 <IconSmall name="arrow-box-up-right" />
               </IconButton>
             {/if}
           </div>
         </li>

modified src/views/projects/Share.svelte

@@ -15,15 +15,18 @@

   export let baseUrl: BaseUrl;
   const caption = "Link to seed";
   let icon: "link" | "checkmark" = "link";
   let linkIcon: "link" | "checkmark" = "link";
   let shareIcon: "share" | "checkmark" = "share";
   const restoreIcon = debounce(() => {
     icon = "link";
     linkIcon = "link";
     shareIcon = "share";
   }, 800);
   async function copy(text: string) {
     await toClipboard(text);
     icon = "checkmark";
     linkIcon = "checkmark";
     shareIcon = "checkmark";
     restoreIcon();
   }
 </script>

@@ -39,7 +42,7 @@

       slot="toggle"
       let:toggle
       on:click={toggle}>
       <IconSmall name={icon} />
       <IconSmall name={linkIcon} />
       {caption}
     </Button>
     <ShareButton {publicExplorer} {preferredSeeds} slot="popover" />

@@ -52,7 +55,7 @@

       void copy(
         new URL(publicExplorer).origin.concat(window.location.pathname),
       )}>
     <IconSmall name={icon} />
     {caption}
     <IconSmall name={shareIcon} />
     {shareIcon === "share" ? "Share" : "Link copied"}
   </Button>
 {/if}