From dabfab083ee180a5357f5b8cc67659e01f8bc99f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Thu, 9 Nov 2023 15:34:35 +0100
Subject: [PATCH] Tweak icons

- use key icon in connect/authenticate modal
- use person without hat for contributors
- use +- icon for diffs
- use color to distinguish between track/tracking states
---
 src/components/Icon.svelte                   |  6 ++
 src/components/IconSmall.svelte              | 60 ++++----------------
 src/modals/ConnectModal.svelte               |  2 +-
 src/views/projects/Header/TrackButton.svelte |  8 ++-
 4 files changed, 23 insertions(+), 53 deletions(-)

diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte
index f42358066..5d77f0b0f 100644
--- a/src/components/Icon.svelte
+++ b/src/components/Icon.svelte
@@ -32,6 +32,7 @@
     | "fork"
     | "gear"
     | "issue"
+    | "key"
     | "keyboard"
     | "magnifying-glass"
     | "moon"
@@ -559,6 +560,11 @@
       d="M10.5 12C10.5 12.8284 11.1716 13.5 12 13.5C12.8284 13.5 13.5
     12.8284 13.5 12C13.5 11.1716 12.8284 10.5 12 10.5C11.1716 10.5 10.5 11.1716
     10.5 12Z" />
+  {:else if name === "key"}
+    <path
+      d="M5.35355 4.62301C5.15829 4.42775 4.84171 4.42775 4.64645 4.62301C4.45118 4.81827 4.45118 5.13485 4.64645 5.33012L5.85315 6.53682C5.79221 6.55519 5.73209 6.57675 5.67303 6.60146C4.98399 6.88979 4.49766 7.58129 4.50001 8.48694C4.50265 9.50641 4.8933 10.5267 5.6716 11.305C7.2337 12.8671 9.76636 12.8671 11.3285 11.305C12.8906 9.74289 12.8906 7.21023 11.3285 5.64814C10.5479 4.86758 9.52397 4.47696 8.50157 4.47656C8.22543 4.47646 8.00149 4.70023 8.00138 4.97637C8.00127 5.25251 8.22504 5.47646 8.50119 5.47656C9.26934 5.47686 10.0358 5.76965 10.6213 6.35524C11.7929 7.52682 11.7929 9.42631 10.6213 10.5979C9.44977 11.7695 7.55028 11.7695 6.37871 10.5979C5.79479 10.014 5.50199 9.25028 5.50001 8.48435C5.49865 7.96116 5.76233 7.64811 6.05905 7.52395C6.36035 7.39787 6.75557 7.44 7.08471 7.76838L7.64645 8.33012C7.71967 8.40334 7.80996 8.44911 7.90451 8.46741C7.98216 8.48245 8.06269 8.47896 8.13901 8.45695C8.21757 8.4343 8.29166 8.39202 8.35357 8.33012C8.54883 8.13486 8.54883 7.81827 8.35356 7.62301L5.35355 4.62301Z" />
+    <path
+      d="M13.3536 12.623C13.1583 12.4277 12.8417 12.4277 12.6465 12.623C12.4512 12.8183 12.4512 13.1349 12.6465 13.3301L14.8246 15.5082C14.7596 15.5325 14.6987 15.5708 14.6465 15.623L12.6465 17.623C12.4512 17.8183 12.4512 18.1349 12.6465 18.3301C12.8417 18.5254 13.1583 18.5254 13.3536 18.3301L15.3536 16.3301C15.4058 16.2779 15.4441 16.217 15.4684 16.152L16.7929 17.4766L14.6465 19.623C14.4512 19.8183 14.4512 20.1349 14.6465 20.3301C14.8417 20.5254 15.1583 20.5254 15.3536 20.3301L17.5 18.1837L18.6465 19.3301C18.8417 19.5254 19.1583 19.5254 19.3536 19.3301C19.5488 19.1349 19.5488 18.8183 19.3536 18.623L13.3536 12.623Z" />
   {:else if name === "keyboard"}
     <path
       fill-rule="evenodd"
diff --git a/src/components/IconSmall.svelte b/src/components/IconSmall.svelte
index b45934bc3..4dd2a14a7 100644
--- a/src/components/IconSmall.svelte
+++ b/src/components/IconSmall.svelte
@@ -33,8 +33,6 @@
     | "network"
     | "patch"
     | "plus"
-    | "tracking-on"
-    | "tracking-off"
     | "user";
 </script>
 
@@ -193,29 +191,13 @@
     </path>
   {:else if name === "diff"}
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M12.0014 12C12.5537 12 13.0014 11.5523 13.0014 11C13.0014 10.4477 12.5537 10 12.0014 10C11.4491 10 11.0014 10.4477 11.0014 11C11.0014 11.5523 11.4491 12 12.0014 12ZM12.0014 13C13.106 13 14.0014 12.1046 14.0014 11C14.0014 9.89543 13.106 9 12.0014 9C10.8968 9 10.0014 9.89543 10.0014 11C10.0014 12.1046 10.8968 13 12.0014 13Z" />
+      d="M8 4.5C8 4.22386 8.22386 4 8.5 4C8.77614 4 9 4.22386 9 4.5V6H10.5C10.7761 6 11 6.22386 11 6.5C11 6.77614 10.7761 7 10.5 7H9V8.5C9 8.77614 8.77614 9 8.5 9C8.22386 9 8 8.77614 8 8.5V7H6.5C6.22386 7 6 6.77614 6 6.5C6 6.22386 6.22386 6 6.5 6H8V4.5Z" />
+    <path
+      d="M11 11.5C11 11.2239 10.7761 11 10.5 11H6.5C6.22386 11 6 11.2239 6 11.5C6 11.7761 6.22386 12 6.5 12H10.5C10.7761 12 11 11.7761 11 11.5Z" />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M10.0667 2.14645C10.262 2.34171 10.262 2.65829 10.0667 2.85355L8.42024 4.5L10.0667 6.14645C10.262 6.34171 10.262 6.65829 10.0667 6.85355C9.87143 7.04882 9.55484 7.04882 9.35958 6.85355L7.35958 4.85355C7.16432 4.65829 7.16432 4.34171 7.35958 4.14645L9.35958 2.14645C9.55484 1.95118 9.87143 1.95118 10.0667 2.14645Z" />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M7.50421 4.49999C7.50421 4.77613 7.72807 4.99999 8.00421 4.99999L11.3242 4.99998C11.4163 4.99998 11.4909 5.0746 11.4909 5.16665L11.5014 9.32074C11.5014 9.59688 11.7252 9.82074 12.0014 9.82074C12.2775 9.82074 12.5014 9.59688 12.5014 9.32074L12.4909 5.16665C12.4909 4.52232 11.9685 3.99998 11.3242 3.99998L8.00421 3.99999C7.72807 3.99999 7.50421 4.22385 7.50421 4.49999Z" />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M4 4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6C4.55228 6 5 5.55228 5 5C5 4.44772 4.55228 4 4 4ZM4 3C2.89543 3 2 3.89543 2 5C2 6.10457 2.89543 7 4 7C5.10457 7 6 6.10457 6 5C6 3.89543 5.10457 3 4 3Z" />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M6.43612 13.8536C6.24086 13.6583 6.24086 13.3417 6.43612 13.1464L8.08257 11.5L6.43612 9.85355C6.24086 9.65829 6.24086 9.34171 6.43612 9.14645C6.63138 8.95118 6.94796 8.95118 7.14323 9.14645L9.14323 11.1464C9.33849 11.3417 9.33849 11.6583 9.14323 11.8536L7.14323 13.8536C6.94796 14.0488 6.63138 14.0488 6.43612 13.8536Z" />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M8.49856 11.5C8.49856 11.2239 8.27471 11 7.99856 11L4.67857 11C4.58652 11 4.5119 10.9254 4.5119 10.8333L4.50139 6.5C4.50139 6.22385 4.27753 6 4.00139 6C3.72525 6 3.50139 6.22385 3.50139 6.5L3.5119 10.8333C3.5119 11.4777 4.03423 12 4.67857 12L7.99856 12C8.27471 12 8.49856 11.7761 8.49856 11.5Z" />
+      d="M3 3C3 1.89543 3.89543 1 5 1H12C13.1046 1 14 1.89543 14 3V13C14 14.1046 13.1046 15 12 15H5C3.89543 15 3 14.1046 3 13V3ZM5 2H12C12.5523 2 13 2.44772 13 3V13C13 13.5523 12.5523 14 12 14H5C4.44772 14 4 13.5523 4 13V3C4 2.44772 4.44772 2 5 2Z" />
   {:else if name === "download"}
     <path
       fill-rule="evenodd"
@@ -377,37 +359,15 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M13.1667 8C13.1667 8.27614 12.9428 8.5 12.6667 8.5L3.33334 8.5C3.0572 8.5 2.83334 8.27614 2.83334 8C2.83334 7.72386 3.0572 7.5 3.33334 7.5L12.6667 7.5C12.9428 7.5 13.1667 7.72386 13.1667 8Z" />
-  {:else if name === "tracking-on"}
-    <path
-      d="M1 1H4.26667C4.5244 1 4.73333 1.20893 4.73333 1.46667C4.73333 1.7244 4.5244 1.93333 4.26667 1.93333H1.93333V4.26667C1.93333 4.5244 1.7244 4.73333 1.46667 4.73333C1.20893 4.73333 1 4.5244 1 4.26667V1Z" />
-    <path
-      d="M15 1V4.26667C15 4.5244 14.7911 4.73333 14.5333 4.73333C14.2756 4.73333 14.0667 4.5244 14.0667 4.26667V1.93333L11.7333 1.93333C11.4756 1.93333 11.2667 1.7244 11.2667 1.46667C11.2667 1.20893 11.4756 1 11.7333 1H15Z" />
-    <path
-      d="M11.7333 15H15V11.7333C15 11.4756 14.7911 11.2667 14.5333 11.2667C14.2756 11.2667 14.0667 11.4756 14.0667 11.7333V14.0667H11.7333C11.4756 14.0667 11.2667 14.2756 11.2667 14.5333C11.2667 14.7911 11.4756 15 11.7333 15Z" />
-    <path
-      d="M1 15V11.7333C1 11.4756 1.20893 11.2667 1.46667 11.2667C1.7244 11.2667 1.93333 11.4756 1.93333 11.7333L1.93333 14.0667H4.26667C4.5244 14.0667 4.73333 14.2756 4.73333 14.5333C4.73333 14.7911 4.5244 15 4.26667 15H1Z" />
-    <path
-      d="M9.86667 8C9.86667 9.03093 9.03093 9.86667 8 9.86667C6.96907 9.86667 6.13333 9.03093 6.13333 8C6.13333 6.96907 6.96907 6.13333 8 6.13333C9.03093 6.13333 9.86667 6.96907 9.86667 8Z" />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M8.46667 2.41917C11.1872 2.64361 13.3564 4.81276 13.5808 7.53333H14.5333C14.7911 7.53333 15 7.74227 15 8C15 8.25773 14.7911 8.46667 14.5333 8.46667H13.5808C13.3564 11.1872 11.1872 13.3564 8.46667 13.5808V14.5333C8.46667 14.7911 8.25773 15 8 15C7.74227 15 7.53333 14.7911 7.53333 14.5333V13.5808C4.81276 13.3564 2.64361 11.1872 2.41917 8.46667H1.46667C1.20893 8.46667 1 8.25773 1 8C1 7.74227 1.20893 7.53333 1.46667 7.53333H2.41917C2.64361 4.81276 4.81276 2.64361 7.53333 2.41917V1.46667C7.53333 1.20893 7.74227 1 8 1C8.25773 1 8.46667 1.20893 8.46667 1.46667V2.41917ZM12.6437 8.4661C12.425 10.6713 10.6713 12.425 8.4661 12.6437C8.45412 12.3966 8.25003 12.2 8 12.2C7.74997 12.2 7.54588 12.3966 7.5339 12.6437C5.32872 12.425 3.575 10.6713 3.35632 8.46611C3.60338 8.45413 3.8 8.25003 3.8 8C3.8 7.74997 3.60338 7.54587 3.35632 7.53389C3.575 5.32872 5.32872 3.575 7.53389 3.35632C7.54587 3.60338 7.74997 3.8 8 3.8C8.25003 3.8 8.45413 3.60338 8.46611 3.35632C10.6713 3.575 12.425 5.32872 12.6437 7.5339C12.3966 7.54588 12.2 7.74997 12.2 8C12.2 8.25003 12.3966 8.45412 12.6437 8.4661Z" />
-  {:else if name === "tracking-off"}
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M11.7333 8C11.7333 10.0619 10.0619 11.7333 8 11.7333C5.93814 11.7333 4.26667 10.0619 4.26667 8C4.26667 5.93814 5.93814 4.26667 8 4.26667C10.0619 4.26667 11.7333 5.93814 11.7333 8ZM10.8 8C10.8 9.5464 9.5464 10.8 8 10.8C6.4536 10.8 5.2 9.5464 5.2 8C5.2 6.4536 6.4536 5.2 8 5.2C9.5464 5.2 10.8 6.4536 10.8 8Z" />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M8.46667 2.41917V1.46667C8.46667 1.20893 8.25773 1 8 1C7.74227 1 7.53333 1.20893 7.53333 1.46667V2.41917C4.81276 2.64361 2.64361 4.81276 2.41917 7.53333H1.46667C1.20893 7.53333 1 7.74227 1 8C1 8.25773 1.20893 8.46667 1.46667 8.46667H2.41917C2.64361 11.1872 4.81276 13.3564 7.53333 13.5808V14.5333C7.53333 14.7911 7.74227 15 8 15C8.25773 15 8.46667 14.7911 8.46667 14.5333V13.5808C11.1872 13.3564 13.3564 11.1872 13.5808 8.46667H14.5333C14.7911 8.46667 15 8.25773 15 8C15 7.74227 14.7911 7.53333 14.5333 7.53333H13.5808C13.3564 4.81276 11.1872 2.64361 8.46667 2.41917ZM7.53389 3.35632C7.54587 3.60338 7.74997 3.8 8 3.8C8.25003 3.8 8.45413 3.60338 8.46611 3.35632C10.6713 3.575 12.425 5.32872 12.6437 7.5339C12.3966 7.54588 12.2 7.74997 12.2 8C12.2 8.25003 12.3966 8.45412 12.6437 8.4661C12.425 10.6713 10.6713 12.425 8.4661 12.6437C8.45412 12.3966 8.25003 12.2 8 12.2C7.74997 12.2 7.54588 12.3966 7.5339 12.6437C5.32872 12.425 3.575 10.6713 3.35632 8.46611C3.60338 8.45413 3.8 8.25003 3.8 8C3.8 7.74997 3.60338 7.54587 3.35632 7.53389C3.575 5.32871 5.32871 3.575 7.53389 3.35632Z" />
   {:else if name === "user"}
     <path
-      d="M12.8336 5.28766C12.1895 5.93182 3.99733 12.0026 3.99733 12.0026C3.99733 12.0026 10.0681 3.8105 10.7123 3.16634C11.3564 2.52219 12.3535 2.47487 12.9393 3.06066C13.5251 3.64645 13.4778 4.64351 12.8336 5.28766Z" />
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11 4C11 5.65685 9.65685 7 8 7C6.34315 7 5 5.65685 5 4C5 2.34315 6.34315 1 8 1C9.65685 1 11 2.34315 11 4ZM10 4C10 5.10457 9.10457 6 8 6C6.89543 6 6 5.10457 6 4C6 2.89543 6.89543 2 8 2C9.10457 2 10 2.89543 10 4Z" />
     <path
-      d="M6.30412 3.33188C5.94755 3.68845 2.7071 8.34312 2.7071 8.34312C2.7071 8.34312 7.36177 5.10266 7.71833 4.7461C8.0749 4.38953 8.04737 3.7839 7.65685 3.39337C7.26632 3.00285 6.66069 2.97532 6.30412 3.33188Z" />
-    <path
-      d="M11.2539 8.28164C10.8973 8.6382 7.65684 13.2929 7.65684 13.2929C7.65684 13.2929 12.3115 10.0524 12.6681 9.69585C13.0246 9.33929 12.9971 8.73365 12.6066 8.34313C12.2161 7.9526 11.6104 7.92507 11.2539 8.28164Z" />
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 8C4.68629 8 2 10.6117 2 13.8333V14C2 14.5523 2.44772 15 3 15H13C13.5523 15 14 14.5523 14 14V13.8333C14 10.6117 11.3137 8 8 8ZM3 13.8333C3 11.1903 5.21183 9 8 9C10.7882 9 13 11.1903 13 13.8333V14H3L3 13.8333Z" />
   {:else}
     {unreachable(name)}
   {/if}
diff --git a/src/modals/ConnectModal.svelte b/src/modals/ConnectModal.svelte
index 378c46815..36351a70c 100644
--- a/src/modals/ConnectModal.svelte
+++ b/src/modals/ConnectModal.svelte
@@ -86,7 +86,7 @@
 </style>
 
 <Modal title="Connect and authenticate">
-  <Icon name="review" size="48" slot="icon" />
+  <Icon name="key" size="48" slot="icon" />
 
   <svelte:fragment slot="subtitle">
     Complete the steps below to browse projects on your local machine,
diff --git a/src/views/projects/Header/TrackButton.svelte b/src/views/projects/Header/TrackButton.svelte
index 03dff0775..ec1972bf1 100644
--- a/src/views/projects/Header/TrackButton.svelte
+++ b/src/views/projects/Header/TrackButton.svelte
@@ -39,9 +39,13 @@
     variant="outline"
     title="Tracked by {trackings} {pluralize('node', trackings)}">
     {#if tracking}
-      <IconSmall name="tracking-on" />
+      <div style:color="var(--color-fill-secondary)">
+        <IconSmall name="network" />
+      </div>
     {:else}
-      <IconSmall name="tracking-off" />
+      <div style:color="var(--color-foreground-contrast)">
+        <IconSmall name="network" />
+      </div>
     {/if}
     <span>
       {buttonTitle}