From 4d259a944d6d0d096097468d518c009f4502cb72 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: Tue, 13 Feb 2024 08:46:30 +0000
Subject: [PATCH] Tweak NodeInfo button wording

Sync -> Offline
Syncing -> Online
---
 src/App/Header.svelte              |  2 +-
 src/App/Header/Authenticate.svelte | 12 ++---------
 src/App/Header/NodeInfo.svelte     | 26 ++++++++++-------------
 src/components/Button.svelte       | 26 +++++------------------
 src/components/IconSmall.svelte    | 34 +++++++++++++++++++-----------
 5 files changed, 41 insertions(+), 59 deletions(-)

diff --git a/src/App/Header.svelte b/src/App/Header.svelte
index 143315ca6..77bab29a6 100644
--- a/src/App/Header.svelte
+++ b/src/App/Header.svelte
@@ -67,7 +67,7 @@
           let:toggle
           on:click={toggle}
           title={buttonTitle[$httpdStore.state]}
-          variant="naked-toggle-off">
+          variant="naked-toggle">
           <IconSmall name="device" />
           Connect
         </Button>
diff --git a/src/App/Header/Authenticate.svelte b/src/App/Header/Authenticate.svelte
index d71c6af0b..a27a07890 100644
--- a/src/App/Header/Authenticate.svelte
+++ b/src/App/Header/Authenticate.svelte
@@ -41,11 +41,7 @@
 
 {#if $httpdStore.state === "authenticated"}
   <Popover popoverPositionTop="3rem" popoverPositionRight="0">
-    <Button
-      slot="toggle"
-      let:toggle
-      on:click={toggle}
-      variant="naked-toggle-on">
+    <Button slot="toggle" let:toggle on:click={toggle} variant="naked-toggle">
       <div class="peer-info">
         <div style:height="1.25rem" style:margin-right="0.5rem">
           <Avatar nodeId={$httpdStore.session.publicKey} />
@@ -72,11 +68,7 @@
   </Popover>
 {:else}
   <Popover popoverPositionTop="3rem" popoverPositionRight="0">
-    <Button
-      slot="toggle"
-      let:toggle
-      on:click={toggle}
-      variant="naked-toggle-off">
+    <Button slot="toggle" let:toggle on:click={toggle} variant="naked-toggle">
       <IconSmall name="key" />
       Authenticate
     </Button>
diff --git a/src/App/Header/NodeInfo.svelte b/src/App/Header/NodeInfo.svelte
index b600cc41f..71a7b56e3 100644
--- a/src/App/Header/NodeInfo.svelte
+++ b/src/App/Header/NodeInfo.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import Button from "@app/components/Button.svelte";
   import Command from "@app/components/Command.svelte";
-  import ExternalLink from "@app/components/ExternalLink.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import Popover from "@app/components/Popover.svelte";
 
@@ -18,32 +17,29 @@
 </style>
 
 <Popover popoverPositionTop="3rem" popoverPositionRight="0">
-  <Button
-    slot="toggle"
-    let:toggle
-    on:click={toggle}
-    variant={running ? "naked-toggle-on" : "naked-toggle-off"}>
-    <IconSmall name="broadcasting" />
+  <Button slot="toggle" let:toggle on:click={toggle} variant={"naked-toggle"}>
     {#if running}
-      Syncing
+      <IconSmall name="online" />
+      Online
     {:else}
-      Sync
+      <IconSmall name="offline" />
+      Offline
     {/if}
   </Button>
 
   <div slot="popover" style:width="18rem">
     {#if running}
       <div class="label">
-        Use the
-        <ExternalLink href="https://radicle.xyz/#try">Radicle CLI</ExternalLink>
-        to stop your node.
+        Your node is running and syncing with the network.
+      </div>
+      <div class="label">
+        Shut down your node if you want to stop sharing and receiving updates.
       </div>
       <Command command="rad node stop" fullWidth />
     {:else}
+      <div class="label">Your node is not running.</div>
       <div class="label">
-        Use the
-        <ExternalLink href="https://radicle.xyz/#try">Radicle CLI</ExternalLink>
-        to start your node.
+        Start your node to seed, clone or share your changes.
       </div>
       <Command command="rad node start" fullWidth />
     {/if}
diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index 0e6421d12..79e8e2a27 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -16,8 +16,7 @@
     | "secondary-toggle-on"
     | "secondary-mobile"
     | "secondary-mobile-toggle"
-    | "naked-toggle-off"
-    | "naked-toggle-on"
+    | "naked-toggle"
     | "tab"
     | "tab-active" = "gray";
   export let size: "small" | "regular" | "large" = "regular";
@@ -224,34 +223,20 @@
     border: 1px solid var(--color-border-focus);
   }
 
-  .naked-toggle-off {
+  .naked-toggle {
     background-color: transparent;
     color: var(--color-foreground-contrast);
     border: 1px solid transparent;
   }
-  .naked-toggle-off[disabled] {
+  .naked-toggle[disabled] {
     background-color: transparent;
     color: var(--color-fill-gray);
   }
-  .naked-toggle-off:not([disabled]):hover {
+  .naked-toggle:not([disabled]):hover {
     background-color: transparent;
     border: 1px solid var(--color-fill-secondary);
   }
 
-  .naked-toggle-on {
-    background-color: transparent;
-    color: var(--color-foreground-emphasized);
-    border: 1px solid transparent;
-  }
-  .naked-toggle-on[disabled] {
-    background-color: transparent;
-    color: var(--color-fill-gray);
-  }
-  .naked-toggle-on:not([disabled]):hover {
-    background-color: transparent;
-    border: 1px solid var(--color-border-focus);
-  }
-
   .secondary {
     color: var(--color-foreground-match-background);
     background-color: var(--color-fill-secondary);
@@ -364,8 +349,7 @@
   class:primary-toggle-on={variant === "primary-toggle-on"}
   class:secondary-toggle-off={variant === "secondary-toggle-off"}
   class:secondary-toggle-on={variant === "secondary-toggle-on"}
-  class:naked-toggle-off={variant === "naked-toggle-off"}
-  class:naked-toggle-on={variant === "naked-toggle-on"}
+  class:naked-toggle={variant === "naked-toggle"}
   class:secondary={variant === "secondary"}
   class:secondary-mobile={variant === "secondary-mobile"}
   class:secondary-mobile-toggle={variant === "secondary-mobile-toggle"}
diff --git a/src/components/IconSmall.svelte b/src/components/IconSmall.svelte
index d438335b5..a06423184 100644
--- a/src/components/IconSmall.svelte
+++ b/src/components/IconSmall.svelte
@@ -8,7 +8,6 @@
     | "arrow-reply"
     | "badge"
     | "branch"
-    | "broadcasting"
     | "brush"
     | "chat"
     | "checkbox-checked"
@@ -48,6 +47,8 @@
     | "menu"
     | "more"
     | "network"
+    | "offline"
+    | "online"
     | "patch"
     | "plus"
     | "settings"
@@ -134,17 +135,6 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M8.83331 3.58333L8.83331 2.25L9.83331 2.25L9.83331 3.58333C9.83331 3.85948 9.60946 4.08333 9.33331 4.08333C9.05717 4.08333 8.83331 3.85948 8.83331 3.58333Z" />
-  {:else if name === "broadcasting"}
-    <path
-      d="M4.51041 2.85355C4.70567 2.65829 4.70567 2.34171 4.51041 2.14645C4.31515 1.95118 3.99856 1.95118 3.8033 2.14645C1.3989 4.55085 1.3989 8.44916 3.8033 10.8536C3.99856 11.0488 4.31515 11.0488 4.51041 10.8536C4.70567 10.6583 4.70567 10.3417 4.51041 10.1465C2.49653 8.13258 2.49653 4.86743 4.51041 2.85355Z" />
-    <path
-      d="M12.5104 2.14645C12.3152 1.95118 11.9986 1.95118 11.8033 2.14645C11.608 2.34171 11.608 2.65829 11.8033 2.85355C13.8172 4.86743 13.8172 8.13258 11.8033 10.1465C11.608 10.3417 11.608 10.6583 11.8033 10.8536C11.9986 11.0488 12.3152 11.0488 12.5104 10.8536C14.9148 8.44916 14.9148 4.55085 12.5104 2.14645Z" />
-    <path
-      d="M6.01041 4.35355C6.20567 4.15829 6.20567 3.84171 6.01041 3.64645C5.81515 3.45118 5.49856 3.45118 5.3033 3.64645C3.72733 5.22242 3.72733 7.77758 5.3033 9.35356C5.49856 9.54882 5.81515 9.54882 6.01041 9.35356C6.20567 9.1583 6.20567 8.84171 6.01041 8.64645C4.82496 7.461 4.82496 5.539 6.01041 4.35355Z" />
-    <path
-      d="M11.0104 3.64645C10.8152 3.45118 10.4986 3.45118 10.3033 3.64645C10.108 3.84171 10.108 4.15829 10.3033 4.35355C11.4888 5.539 11.4888 7.461 10.3033 8.64645C10.108 8.84171 10.108 9.1583 10.3033 9.35356C10.4986 9.54882 10.8152 9.54882 11.0104 9.35356C12.5864 7.77758 12.5864 5.22242 11.0104 3.64645Z" />
-    <path
-      d="M8.92309 8.34797C9.64744 8.04729 10.1569 7.33314 10.1569 6.5C10.1569 5.39543 9.26143 4.5 8.15686 4.5C7.05229 4.5 6.15686 5.39543 6.15686 6.5C6.15686 7.33314 6.66629 8.0473 7.39065 8.34798L5.65202 14.4332C5.57759 14.6937 5.74329 14.9348 6.02212 14.9718C6.30095 15.0087 6.58732 14.8275 6.66175 14.567L8.15687 9.33407L9.65198 14.5669C9.7264 14.8274 10.0128 15.0087 10.2916 14.9717C10.5704 14.9348 10.7361 14.6936 10.6617 14.4331L8.92309 8.34797Z" />
   {:else if name === "chat"}
     <path
       fill-rule="evenodd"
@@ -455,6 +445,26 @@
       fill-rule="evenodd"
       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 === "offline"}
+    <path
+      d="M2.21803 11.0448C2.05026 10.8255 2.09207 10.5117 2.31141 10.3439L2.97907 9.83324C1.44084 7.44877 1.71567 4.23437 3.80358 2.14646C3.99884 1.9512 4.31542 1.9512 4.51068 2.14646C4.70595 2.34172 4.70595 2.65831 4.51068 2.85357C2.78185 4.5824 2.53715 7.23336 3.77659 9.22323L4.67273 8.53778C3.76723 6.99185 3.97751 4.97253 5.30358 3.64646C5.49884 3.4512 5.81542 3.4512 6.01068 3.64646C6.20595 3.84172 6.20595 4.15831 6.01068 4.35357C5.04408 5.32017 4.86563 6.77647 5.47534 7.92388L6.31548 7.28127C6.21353 7.04126 6.15714 6.77722 6.15714 6.50002C6.15714 5.39545 7.05257 4.50002 8.15714 4.50002C8.62359 4.50002 9.05275 4.6597 9.39292 4.92739L10.2416 4.27825C10.1111 4.08389 10.1318 3.81823 10.3036 3.64646C10.4988 3.4512 10.8154 3.4512 11.0107 3.64646L11.0352 3.67121L11.9313 2.98583C11.8897 2.94117 11.8471 2.89708 11.8036 2.85357C11.6083 2.65831 11.6083 2.34172 11.8036 2.14646C11.9988 1.9512 12.3154 1.9512 12.5107 2.14646C12.5857 2.2215 12.6584 2.29799 12.7288 2.37585L13.2686 1.96297C13.4879 1.7952 13.8017 1.83701 13.9695 2.05634C14.1372 2.27568 14.0954 2.58949 13.8761 2.75726L13.337 3.1696C13.3384 3.1717 13.3397 3.17379 13.3411 3.17589C13.316 3.18898 13.2918 3.20438 13.2686 3.22213L12.5395 3.77976C12.5395 3.77972 12.5395 3.7798 12.5395 3.77976L11.6432 4.46515C11.6432 4.46511 11.6433 4.46519 11.6432 4.46515L10.8406 5.07926C10.8405 5.07922 10.8406 5.0793 10.8406 5.07926L10.0001 5.72193C10.0001 5.72188 10.0002 5.72197 10.0001 5.72193L6.92416 8.07486C6.92412 8.07483 6.9242 8.07488 6.92416 8.07486L6.07453 8.72456C6.0745 8.72452 6.07455 8.7246 6.07453 8.72456L4.38525 10.0167C4.38522 10.0166 4.38528 10.0167 4.38525 10.0167L3.58782 10.6268C3.58779 10.6267 3.58785 10.6268 3.58782 10.6268L2.91894 11.1382C2.69961 11.306 2.3858 11.2642 2.21803 11.0448Z" />
+    <path
+      d="M7.16102 9.15268L5.6523 14.4332C5.57787 14.6937 5.74357 14.9348 6.0224 14.9718C6.30122 15.0087 6.58759 14.8275 6.66202 14.567L8.15714 9.33408L9.65225 14.567C9.72668 14.8275 10.013 15.0087 10.2919 14.9717C10.5707 14.9348 10.7364 14.6936 10.662 14.4331L8.92336 8.34799C9.53166 8.09548 9.98839 7.55137 10.1191 6.89007L7.16102 9.15268Z" />
+    <path
+      d="M11.165 6.09007C11.288 6.99718 11.0008 7.94923 10.3036 8.64647C10.1083 8.84173 10.1083 9.15831 10.3036 9.35358C10.4988 9.54884 10.8154 9.54884 11.0107 9.35358C12.0769 8.28735 12.4218 6.77293 12.0453 5.41676L11.165 6.09007Z" />
+    <path
+      d="M12.9891 4.69489C13.6727 6.52825 13.2775 8.6725 11.8036 10.1465C11.6083 10.3417 11.6083 10.6583 11.8036 10.8536C11.9988 11.0488 12.3154 11.0488 12.5107 10.8536C14.3462 9.01802 14.7805 6.31182 13.8135 4.0643L12.9891 4.69489Z" />
+  {:else if name === "online"}
+    <path
+      d="M4.51041 2.85355C4.70567 2.65829 4.70567 2.34171 4.51041 2.14645C4.31515 1.95118 3.99856 1.95118 3.8033 2.14645C1.3989 4.55085 1.3989 8.44916 3.8033 10.8536C3.99856 11.0488 4.31515 11.0488 4.51041 10.8536C4.70567 10.6583 4.70567 10.3417 4.51041 10.1465C2.49653 8.13258 2.49653 4.86743 4.51041 2.85355Z" />
+    <path
+      d="M12.5104 2.14645C12.3152 1.95118 11.9986 1.95118 11.8033 2.14645C11.608 2.34171 11.608 2.65829 11.8033 2.85355C13.8172 4.86743 13.8172 8.13258 11.8033 10.1465C11.608 10.3417 11.608 10.6583 11.8033 10.8536C11.9986 11.0488 12.3152 11.0488 12.5104 10.8536C14.9148 8.44916 14.9148 4.55085 12.5104 2.14645Z" />
+    <path
+      d="M6.01041 4.35355C6.20567 4.15829 6.20567 3.84171 6.01041 3.64645C5.81515 3.45118 5.49856 3.45118 5.3033 3.64645C3.72733 5.22242 3.72733 7.77758 5.3033 9.35356C5.49856 9.54882 5.81515 9.54882 6.01041 9.35356C6.20567 9.1583 6.20567 8.84171 6.01041 8.64645C4.82496 7.461 4.82496 5.539 6.01041 4.35355Z" />
+    <path
+      d="M11.0104 3.64645C10.8152 3.45118 10.4986 3.45118 10.3033 3.64645C10.108 3.84171 10.108 4.15829 10.3033 4.35355C11.4888 5.539 11.4888 7.461 10.3033 8.64645C10.108 8.84171 10.108 9.1583 10.3033 9.35356C10.4986 9.54882 10.8152 9.54882 11.0104 9.35356C12.5864 7.77758 12.5864 5.22242 11.0104 3.64645Z" />
+    <path
+      d="M8.92309 8.34797C9.64744 8.04729 10.1569 7.33314 10.1569 6.5C10.1569 5.39543 9.26143 4.5 8.15686 4.5C7.05229 4.5 6.15686 5.39543 6.15686 6.5C6.15686 7.33314 6.66629 8.0473 7.39065 8.34798L5.65202 14.4332C5.57759 14.6937 5.74329 14.9348 6.02212 14.9718C6.30095 15.0087 6.58732 14.8275 6.66175 14.567L8.15687 9.33407L9.65198 14.5669C9.7264 14.8274 10.0128 15.0087 10.2916 14.9717C10.5704 14.9348 10.7361 14.6936 10.6617 14.4331L8.92309 8.34797Z" />
   {:else if name === "patch"}
     <path
       fill-rule="evenodd"