From 159f7661577a850884c8e495ff8db96dba4cdff4 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, 21 Nov 2023 16:44:07 +0100
Subject: [PATCH] Tweak primary/secondary toggle button styling

---
 src/App/Header/Authenticate.svelte           |  6 +-
 src/App/Header/Connect.svelte                |  4 +-
 src/App/Header/NodeInfo.svelte               |  2 +-
 src/components/Button.svelte                 | 82 ++++++++++++++------
 src/views/projects/Header/TrackButton.svelte | 16 +---
 5 files changed, 67 insertions(+), 43 deletions(-)

diff --git a/src/App/Header/Authenticate.svelte b/src/App/Header/Authenticate.svelte
index e32faec9c..0d13f9a14 100644
--- a/src/App/Header/Authenticate.svelte
+++ b/src/App/Header/Authenticate.svelte
@@ -62,7 +62,7 @@
       let:toggle
       on:click={toggle}
       size="large"
-      variant="primary">
+      variant="primary-toggle-on">
       <div class="avatar">
         <NodeId
           large
@@ -100,7 +100,7 @@
       });
     }}
     size="large"
-    variant="primary-outline">
+    variant="primary-toggle-off">
     <IconSmall name="key" />
     Authenticate
     <div class="indicator" />
@@ -114,7 +114,7 @@
       });
     }}
     size="large"
-    variant="primary-outline">
+    variant="primary-toggle-off">
     <IconSmall name="chat" />
     Authenticate
   </Button>
diff --git a/src/App/Header/Connect.svelte b/src/App/Header/Connect.svelte
index ac2e0a233..2c13435df 100644
--- a/src/App/Header/Connect.svelte
+++ b/src/App/Header/Connect.svelte
@@ -54,7 +54,7 @@
       on:click={toggle}
       title={buttonTitle[$httpdStore.state]}
       size="large"
-      variant="primary-outline">
+      variant="primary-toggle-off">
       <IconSmall name="device" />
       Connect
     </Button>
@@ -79,7 +79,7 @@
       on:click={toggle}
       title={buttonTitle[$httpdStore.state]}
       size="large"
-      variant="primary">
+      variant="primary-toggle-on">
       <IconSmall name="device" />
       Connected
     </Button>
diff --git a/src/App/Header/NodeInfo.svelte b/src/App/Header/NodeInfo.svelte
index 4a23c45c5..7301321c4 100644
--- a/src/App/Header/NodeInfo.svelte
+++ b/src/App/Header/NodeInfo.svelte
@@ -23,7 +23,7 @@
     let:toggle
     on:click={toggle}
     size="large"
-    variant={running ? "primary" : "primary-outline"}>
+    variant={running ? "primary-toggle-on" : "primary-toggle-off"}>
     <IconSmall name="broadcasting" />
     {#if running}
       Syncing
diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index aeda1b786..bdcecb697 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -8,9 +8,11 @@
     | "gray-white"
     | "none"
     | "outline"
-    | "primary-outline"
-    | "primary"
+    | "primary-toggle-off"
+    | "primary-toggle-on"
     | "secondary"
+    | "secondary-toggle-off"
+    | "secondary-toggle-on"
     | "tab" = "gray";
   export let size: "small" | "regular" | "large" = "regular";
 
@@ -141,34 +143,64 @@
     color: var(--color-foreground-contrast);
   }
 
-  .primary-outline {
-    background-color: transparent;
-    color: var(--color-foreground-contrast);
-    border: 1px solid var(--color-border-hint);
-  }
-  .primary-outline[disabled] {
-    background-color: transparent;
-    color: var(--color-fill-gray);
-  }
-  .primary-outline:not([disabled]):hover {
-    background-color: transparent;
-    border: 1px solid var(--color-fill-primary);
-    color: var(--color-foreground-contrast);
-  }
-
-  .primary {
+  .primary-toggle-on {
     color: var(--color-fill-primary);
     background-color: var(--color-fill-merged);
     border: 1px solid var(--color-border-merged);
   }
 
-  .primary[disabled] {
+  .primary-toggle-on[disabled] {
     color: var(--color-foreground-match-background);
     background-color: var(--color-fill-primary);
   }
 
-  .primary:not([disabled]):hover {
-    border: 1px solid var(--color-fill-primary);
+  .primary-toggle-on:not([disabled]):hover {
+    border: 1px solid var(--color-border-primary);
+  }
+
+  .primary-toggle-off {
+    background-color: transparent;
+    color: var(--color-foreground-dim);
+    border: 1px solid var(--color-border-hint);
+  }
+  .primary-toggle-off[disabled] {
+    background-color: transparent;
+    color: var(--color-fill-gray);
+  }
+  .primary-toggle-off:not([disabled]):hover {
+    background-color: transparent;
+    border: 1px solid var(--color-border-primary);
+    color: var(--color-foreground-dim);
+  }
+
+  .secondary-toggle-off {
+    background-color: transparent;
+    color: var(--color-foreground-dim);
+    border: 1px solid var(--color-border-hint);
+  }
+  .secondary-toggle-off[disabled] {
+    background-color: transparent;
+    color: var(--color-fill-gray);
+  }
+  .secondary-toggle-off:not([disabled]):hover {
+    background-color: transparent;
+    border: 1px solid var(--color-fill-secondary);
+    color: var(--color-foreground-dim);
+  }
+
+  .secondary-toggle-on {
+    background-color: var(--color-fill-selected);
+    color: var(--color-foreground-emphasized);
+    border: 1px solid var(--color-border-selected);
+  }
+  .secondary-toggle-on[disabled] {
+    background-color: var(--color-fill-selected);
+    color: var(--color-fill-gray);
+  }
+  .secondary-toggle-on:not([disabled]):hover {
+    background-color: var(--color-fill-selected);
+    border: 1px solid var(--color-border-focus);
+    color: var(--color-foreground-emphasized);
   }
 
   .secondary {
@@ -223,12 +255,14 @@
   class:large={size === "large"}
   class:background={variant === "background"}
   class:dim={variant === "dim"}
-  class:gray={variant === "gray"}
   class:gray-white={variant === "gray-white"}
+  class:gray={variant === "gray"}
   class:none={variant === "none"}
   class:outline={variant === "outline"}
-  class:primary-outline={variant === "primary-outline"}
-  class:primary={variant === "primary"}
+  class:primary-toggle-off={variant === "primary-toggle-off"}
+  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:secondary={variant === "secondary"}
   class:tab={variant === "tab"}>
   <slot />
diff --git a/src/views/projects/Header/TrackButton.svelte b/src/views/projects/Header/TrackButton.svelte
index 8a1efc551..85e7b452a 100644
--- a/src/views/projects/Header/TrackButton.svelte
+++ b/src/views/projects/Header/TrackButton.svelte
@@ -37,22 +37,12 @@
     let:toggle
     on:click={toggle}
     size="large"
-    variant="outline"
+    variant={tracking ? "secondary-toggle-on" : "secondary-toggle-off"}
     title="Tracked by {trackings} {pluralize('node', trackings)}">
-    {#if tracking}
-      <div style:color="var(--color-fill-secondary)">
-        <IconSmall name="network" />
-      </div>
-    {:else}
-      <div style:color="var(--color-foreground-contrast)">
-        <IconSmall name="network" />
-      </div>
-    {/if}
+    <IconSmall name="network" />
     <span>
       {buttonTitle}
-      <span
-        style:color="var(--color-foreground-dim)"
-        style:font-weight="var(--font-weight-regular)">
+      <span style:font-weight="var(--font-weight-regular)">
         {trackings}
       </span>
     </span>