96b422b Add hover styles to icon when the onclick prop is passed — radicle-desktop

modified src/components/AssigneeInput.svelte

@@ -122,19 +122,18 @@

     {#if allowedToEdit}
       <div class="global-flex" style:margin-left="auto">
         {#if showInput}
           <Icon onclick={addAssignee} name="checkmark" styleCursor="pointer" />
           <Icon
             onclick={addAssignee}
             name="checkmark"
             disabled={!valid || inputValue === ""} />
           <Icon
             onclick={() => {
               inputValue = "";
               showInput = false;
             }}
             name="cross"
             styleCursor="pointer" />
             name="cross" />
         {:else}
           <Icon
             name="plus"
             onclick={() => (showInput = true)}
             styleCursor="pointer"></Icon>
           <Icon name="plus" onclick={() => (showInput = true)}></Icon>
         {/if}
       </div>
     {/if}

modified src/components/Icon.svelte

@@ -4,7 +4,7 @@

   interface Props {
     size?: "16" | "32";
     onclick?: () => void;
     styleCursor?: "default" | "pointer" | "inherit";
     disabled?: boolean;
     name:
       | "arrow-left"
       | "arrow-right"

@@ -46,8 +46,8 @@

   const {
     size = "16",
     onclick = undefined,
     styleCursor = "inherit",
     name,
     disabled = false,
   }: Props = $props();
 </script>

@@ -59,14 +59,29 @@

     -webkit-user-select: none;
     user-select: none;
   }
   .hoverable {
     color: var(--color-foreground-dim);
   }
   .hoverable:not(.disabled):hover {
     color: var(--color-foreground-default);
   }
   .disabled {
     color: var(--color-foreground-disabled);
   }
 </style>
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <svg
   style:cursor={styleCursor}
   style:cursor={onclick && !disabled ? "pointer" : "inherit"}
   class:hoverable={onclick}
   class:disabled
   role="img"
   {onclick}
   onclick={() => {
     if (onclick && !disabled) {
       onclick();
     }
   }}
   aria-label={`icon-${name}`}
   width={size}
   height={size}

modified src/components/LabelInput.svelte

@@ -109,19 +109,18 @@

     {#if allowedToEdit}
       <div class="global-flex" style:margin-left="auto">
         {#if showInput}
           <Icon onclick={addLabel} name="checkmark" styleCursor="pointer" />
           <Icon
             onclick={addLabel}
             disabled={!valid || inputValue === ""}
             name="checkmark" />
           <Icon
             onclick={() => {
               inputValue = "";
               showInput = false;
             }}
             name="cross"
             styleCursor="pointer" />
             name="cross" />
         {:else}
           <Icon
             name="plus"
             onclick={() => (showInput = true)}
             styleCursor="pointer"></Icon>
           <Icon name="plus" onclick={() => (showInput = true)}></Icon>
         {/if}
       </div>
     {/if}

modified src/components/ReactionSelector.svelte

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

   {popoverPositionLeft}
   popoverPadding="0">
   {#snippet toggle(onclick)}
     <Icon name="face" {onclick} styleCursor="pointer" />
     <Icon name="face" {onclick} />
   {/snippet}
   {#snippet popover()}
     <Border variant="ghost">

modified src/components/Thread.svelte

@@ -111,7 +111,7 @@

         partial(editComment, root.id)}
       reactOnComment={reactOnComment && partial(reactOnComment, root.id)}>
       {#snippet actions()}
         <Icon name="reply" onclick={toggleReply} styleCursor="pointer" />
         <Icon name="reply" onclick={toggleReply} />
       {/snippet}
     </CommentComponent>
   </div>

modified src/views/repo/Issue.svelte

@@ -420,7 +420,6 @@

             }} />
           <div class="title-icons">
             <Icon
               styleCursor="pointer"
               name="checkmark"
               onclick={async () => {
                 if (updatedTitle.trim().length > 0) {

@@ -428,7 +427,6 @@

                 }
               }} />
             <Icon
               styleCursor="pointer"
               name="cross"
               onclick={() => {
                 updatedTitle = issue.title;

@@ -442,10 +440,7 @@

           <InlineTitle content={issue.title} fontSize="medium" />
           {#if roles.isDelegateOrAuthor( config.publicKey, repo.delegates.map(delegate => delegate.did), issue.body.author.did, )}
             <div class="title-icons">
               <Icon
                 styleCursor="pointer"
                 name="pen"
                 onclick={() => (editingTitle = !editingTitle)} />
               <Icon name="pen" onclick={() => (editingTitle = !editingTitle)} />
               <IssueStateButton issueState={issue.state} save={saveState} />
             </div>
           {/if}

@@ -511,7 +506,7 @@

           issue.body.id,
         )}>
         {#snippet actions()}
           <Icon styleCursor="pointer" name="reply" onclick={toggleReply} />
           <Icon name="reply" onclick={toggleReply} />
         {/snippet}
       </CommentComponent>
     </div>