From 63d4cc2d62676d026cbe2e6ac758fe0fff80d892 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, 28 Nov 2023 18:00:31 +0100
Subject: [PATCH] Change header toggle buttons to secondary color

---
 src/App/Header/Authenticate.svelte               | 8 ++++----
 src/App/Header/Breadcrumbs/NodeSegment.svelte    | 2 +-
 src/App/Header/Breadcrumbs/ProjectSegment.svelte | 2 +-
 src/App/Header/Connect.svelte                    | 4 ++--
 src/App/Header/NodeInfo.svelte                   | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/App/Header/Authenticate.svelte b/src/App/Header/Authenticate.svelte
index a3a1cfb75..94bb65de7 100644
--- a/src/App/Header/Authenticate.svelte
+++ b/src/App/Header/Authenticate.svelte
@@ -26,7 +26,7 @@
   }
   .avatar {
     height: 1.5rem;
-    color: var(--color-fill-primary) !important;
+    color: var(--color-fill-secondary) !important;
     display: flex;
     gap: 0.5rem;
     align-items: center;
@@ -58,7 +58,7 @@
       let:toggle
       on:click={toggle}
       size="large"
-      variant="primary-toggle-on">
+      variant="secondary-toggle-on">
       <div class="avatar">
         <NodeId
           large
@@ -93,7 +93,7 @@
       });
     }}
     size="large"
-    variant="primary-toggle-off">
+    variant="secondary-toggle-off">
     <IconSmall name="key" />
     Authenticate
     <div class="indicator" />
@@ -107,7 +107,7 @@
       });
     }}
     size="large"
-    variant="primary-toggle-off">
+    variant="secondary-toggle-off">
     <IconSmall name="chat" />
     Authenticate
   </Button>
diff --git a/src/App/Header/Breadcrumbs/NodeSegment.svelte b/src/App/Header/Breadcrumbs/NodeSegment.svelte
index 10b1e88b7..93b896c75 100644
--- a/src/App/Header/Breadcrumbs/NodeSegment.svelte
+++ b/src/App/Header/Breadcrumbs/NodeSegment.svelte
@@ -11,7 +11,7 @@
 
 <style>
   .segment :global(a:hover) {
-    color: var(--color-fill-primary);
+    color: var(--color-fill-secondary);
   }
 </style>
 
diff --git a/src/App/Header/Breadcrumbs/ProjectSegment.svelte b/src/App/Header/Breadcrumbs/ProjectSegment.svelte
index cf1b8c48f..0bcd2b11e 100644
--- a/src/App/Header/Breadcrumbs/ProjectSegment.svelte
+++ b/src/App/Header/Breadcrumbs/ProjectSegment.svelte
@@ -18,7 +18,7 @@
     gap: 0.25rem;
   }
   .segment :global(a:hover) {
-    color: var(--color-fill-primary);
+    color: var(--color-fill-secondary);
   }
 </style>
 
diff --git a/src/App/Header/Connect.svelte b/src/App/Header/Connect.svelte
index 2c13435df..90ae502b2 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-toggle-off">
+      variant="secondary-toggle-off">
       <IconSmall name="device" />
       Connect
     </Button>
@@ -79,7 +79,7 @@
       on:click={toggle}
       title={buttonTitle[$httpdStore.state]}
       size="large"
-      variant="primary-toggle-on">
+      variant="secondary-toggle-on">
       <IconSmall name="device" />
       Connected
     </Button>
diff --git a/src/App/Header/NodeInfo.svelte b/src/App/Header/NodeInfo.svelte
index 7301321c4..58c361bf8 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-toggle-on" : "primary-toggle-off"}>
+    variant={running ? "secondary-toggle-on" : "secondary-toggle-off"}>
     <IconSmall name="broadcasting" />
     {#if running}
       Syncing