From 16a1821fff2db27d23301c2e787b6af41ad45f9e 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, 24 Oct 2023 15:25:43 +0200
Subject: [PATCH] Update Track button copy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>
---
 src/views/projects/Header/TrackButton.svelte | 29 ++++++++++++++++----
 tests/e2e/project.spec.ts                    |  2 +-
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/views/projects/Header/TrackButton.svelte b/src/views/projects/Header/TrackButton.svelte
index 45a21710e..6d007dbcd 100644
--- a/src/views/projects/Header/TrackButton.svelte
+++ b/src/views/projects/Header/TrackButton.svelte
@@ -21,12 +21,19 @@
     font-weight: var(--font-weight-regular);
     margin-bottom: 0.75rem;
   }
+  code {
+    font-family: var(--font-family-monospace);
+    font-size: var(--font-size-small);
+    background-color: var(--color-fill-ghost);
+    border-radius: var(--border-radius-tiny);
+    padding: 0.125rem 0.25rem;
+  }
 </style>
 
 <Popover
   popoverPositionTop="3rem"
   popoverPositionRight="0"
-  popoverWidth="26rem">
+  popoverWidth="33rem">
   <Button
     slot="toggle"
     size="large"
@@ -57,10 +64,22 @@
         Radicle CLI
       </a>
       to {command} this project.
-      <br />
-      <br />
-      Tracking means subscribing to updates from this repository. It also helps with
-      increasing its availability over the Radicle network.
+      {#if command === "track"}
+        <br />
+        <br />
+        The
+        <code>track</code>
+        command serves a dual purpose:
+        <ul style:padding="0 1rem" style:margin-top="0.5rem">
+          <li>
+            Keeps your local Radicle node in sync with updates from this
+            project.
+          </li>
+          <li>
+            Propagates them across the Radicle network to other peers like you.
+          </li>
+        </ul>
+      {/if}
     </div>
     <Command command={`rad ${command} ${projectId}`} />
   </svelte:fragment>
diff --git a/tests/e2e/project.spec.ts b/tests/e2e/project.spec.ts
index 887f11c60..beb213771 100644
--- a/tests/e2e/project.spec.ts
+++ b/tests/e2e/project.spec.ts
@@ -65,7 +65,7 @@ test("navigate to project", async ({ page }) => {
   await expect(page.getByText("Git test repository")).toBeVisible();
 
   // Number of nodes tracking this project.
-  await expect(page.getByText("3 nodes")).toBeVisible();
+  await expect(page.getByText("Tracking 3")).toBeVisible();
 });
 
 test("show source tree at specific revision", async ({ page }) => {