From 6ab4e7be7d8127e488b0440ea1fa9bf87fef551f Mon Sep 17 00:00:00 2001
From: Tim deBoer <git@tdeboer.ca>
Date: Thu, 6 Jun 2024 11:46:51 -0400
Subject: [PATCH] chore: status-colors

We have hard-coded colors for 'connections' in a few different places:

- Kubernetes resources - text in green-500 when connected.
- Kubernetes connection badge on list pages - green-600 for connected vs
  gray-900 for disconnected.
- Authentication - green-500 for signed in vs gray-500 for signed out.

This adds two new status colors and switches these places to use them.
- 'connected': green-600
- 'disconnected': gray-500

Although 'signed in' is a slightly different thing than connected I didn't
think it merited having different names or using different colors. The
choice of green-600 and gray-500 was taking a balance of what was there +
what looks better in light mode.

Signed-off-by: Tim deBoer <git@tdeboer.ca>
---
 .../PreferencesAuthenticationProvidersRendering.svelte    | 8 ++++++--
 .../PreferencesKubernetesContextsRendering.svelte         | 6 ++++--
 .../ui/KubernetesCurrentContextConnectionBadge.spec.ts    | 4 ++--
 .../lib/ui/KubernetesCurrentContextConnectionBadge.svelte | 4 ++--
 tailwind.config.cjs                                       | 2 ++
 5 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/renderer/src/lib/preferences/PreferencesAuthenticationProvidersRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesAuthenticationProvidersRendering.svelte
index 3adb1c65b2f52..0797aadf65777 100644
--- a/packages/renderer/src/lib/preferences/PreferencesAuthenticationProvidersRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesAuthenticationProvidersRendering.svelte
@@ -70,11 +70,15 @@ import SettingsPage from './SettingsPage.svelte';
                 <div class="flex flex-row items-center w-full h-full">
                   <dif>
                     <Fa
-                      class="h-3 w-3 text-md mr-2 text-{provider.accounts.length > 0 ? 'green' : 'gray'}-500"
+                      class="h-3 w-3 text-md mr-2 text-{provider.accounts.length > 0
+                        ? 'status-connected'
+                        : 'status-disconnected'}"
                       icon="{faCircle}" />
                   </dif>
                   <div
-                    class="uppercase text-xs text-{provider.accounts.length > 0 ? 'green' : 'gray'}-500"
+                    class="uppercase text-xs text-{provider.accounts.length > 0
+                      ? 'status-connected'
+                      : 'status-disconnected'}"
                     aria-label="Provider Status">
                     <span>
                       {provider.accounts.length > 0 ? 'Logged in' : 'Logged out'}
diff --git a/packages/renderer/src/lib/preferences/PreferencesKubernetesContextsRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesKubernetesContextsRendering.svelte
index ba9bd20c3fc0f..260ba90243eee 100644
--- a/packages/renderer/src/lib/preferences/PreferencesKubernetesContextsRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesKubernetesContextsRendering.svelte
@@ -103,8 +103,10 @@ async function handleDeleteContext(contextName: string) {
               <div class="flex-none w-36">
                 {#if $kubernetesContextsState.get(context.name)?.reachable}
                   <div class="flex flex-row pt-2">
-                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
-                    <div class="ml-1 font-bold text-[9px] text-green-500" aria-label="Context Reachable">REACHABLE</div>
+                    <div class="w-3 h-3 rounded-full bg-status-connected"></div>
+                    <div class="ml-1 font-bold text-[9px] text-status-connected" aria-label="Context Reachable">
+                      REACHABLE
+                    </div>
                   </div>
                   <div class="flex flex-row gap-4 mt-4">
                     <div class="text-center">
diff --git a/packages/renderer/src/lib/ui/KubernetesCurrentContextConnectionBadge.spec.ts b/packages/renderer/src/lib/ui/KubernetesCurrentContextConnectionBadge.spec.ts
index e255a90fdc911..70a8ef3dee789 100644
--- a/packages/renderer/src/lib/ui/KubernetesCurrentContextConnectionBadge.spec.ts
+++ b/packages/renderer/src/lib/ui/KubernetesCurrentContextConnectionBadge.spec.ts
@@ -90,7 +90,7 @@ test('expect badges to be green when reachable', async () => {
 
   expect(mocks.getCurrentKubeContextState).toHaveBeenCalled();
   const status = screen.getByRole('status');
-  expect(status.firstChild).toHaveClass('bg-green-600');
+  expect(status.firstChild).toHaveClass('bg-status-connected');
 });
 
 test('expect badges to be gray when not reachable', async () => {
@@ -106,7 +106,7 @@ test('expect badges to be gray when not reachable', async () => {
 
   expect(mocks.getCurrentKubeContextState).toHaveBeenCalled();
   const status = screen.getByRole('status');
-  expect(status.firstChild).toHaveClass('bg-gray-900');
+  expect(status.firstChild).toHaveClass('bg-status-disconnected');
 });
 
 test('expect no tooltip when no error', async () => {
diff --git a/packages/renderer/src/lib/ui/KubernetesCurrentContextConnectionBadge.svelte b/packages/renderer/src/lib/ui/KubernetesCurrentContextConnectionBadge.svelte
index 86874dde0ee02..85345542944b8 100644
--- a/packages/renderer/src/lib/ui/KubernetesCurrentContextConnectionBadge.svelte
+++ b/packages/renderer/src/lib/ui/KubernetesCurrentContextConnectionBadge.svelte
@@ -11,8 +11,8 @@ function getText(state?: ContextGeneralState): string {
 }
 
 function getClassColor(state?: ContextGeneralState): string {
-  if (state?.reachable) return 'bg-green-600';
-  return 'bg-gray-900';
+  if (state?.reachable) return 'bg-status-connected';
+  return 'bg-status-disconnected';
 }
 
 $: text = getText($kubernetesCurrentContextState);
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 3586efe21729e..393f7a8ab66a2 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -77,6 +77,8 @@ module.exports = {
         // If we don't know the status, use gray
         'unknown': tailwindColors.gray[100],
 
+        'connected': tailwindColors.green[600],
+        'disconnected': tailwindColors.gray[500],
       },
       // The remaining colors below are not part of our palette and are only here
       // to maintain existing code. No new use.