From 1e7039cfdb33a612e9bf8600a1822ba6fb14375f Mon Sep 17 00:00:00 2001
From: axel7083 <42176370+axel7083@users.noreply.github.com>
Date: Tue, 7 May 2024 10:24:51 +0200
Subject: [PATCH] feat(PreferenceResource): adding light theme support for some
 preferences page (#7107)

* feat(PreferenceResource): adding light theme support for preferences tiles

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>

* feat(PreferenceResource): more light theme

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>

---------

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>
---
 ...referencesConnectionsEmptyRendering.svelte |  2 +-
 .../PreferencesProxiesRendering.svelte        | 22 +++++++++++++------
 .../PreferencesRegistriesEditing.svelte       | 15 ++++++++-----
 .../PreferencesResourcesRendering.svelte      | 10 ++++++---
 4 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/packages/renderer/src/lib/preferences/PreferencesConnectionsEmptyRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesConnectionsEmptyRendering.svelte
index b67d85c0301..369e0816f42 100644
--- a/packages/renderer/src/lib/preferences/PreferencesConnectionsEmptyRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesConnectionsEmptyRendering.svelte
@@ -6,7 +6,7 @@ export let hidden: boolean;
 </script>
 
 {#if !hidden}
-  <div class="ml-6 mt-2 text-sm text-gray-300">
+  <div class="ml-6 mt-2 text-sm">
     <Markdown markdown="{message}" />
   </div>
 {/if}
diff --git a/packages/renderer/src/lib/preferences/PreferencesProxiesRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesProxiesRendering.svelte
index ddfeb424cfc..54e0a47d0e8 100644
--- a/packages/renderer/src/lib/preferences/PreferencesProxiesRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesProxiesRendering.svelte
@@ -62,7 +62,7 @@ function validate(event: any) {
 </script>
 
 <SettingsPage title="Proxy Settings">
-  <div class="flex flex-col bg-charcoal-600 rounded-md p-3 space-y-2">
+  <div class="flex flex-col bg-[var(--pd-invert-content-card-bg)] rounded-md p-3 space-y-2">
     <!-- if proxy is not enabled, display a toggle -->
 
     <label for="toggle-proxy" class="inline-flex relative items-center mt-1 mb-4 cursor-pointer">
@@ -75,13 +75,15 @@ function validate(event: any) {
       <div
         class="w-9 h-5 rounded-full peer bg-zinc-400 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-400 after:border after:rounded-full after:h-4 after:w-4 after:transition-all border-gray-900 peer-checked:bg-violet-600">
       </div>
-      <span class="ml-3 text-sm font-medium text-gray-400"
+      <span class="ml-3 text-sm font-medium text-[var(--pd-invert-content-card-header-text)]"
         >Proxy configuration {proxyState ? 'enabled' : 'disabled'}</span>
     </label>
 
     {#if proxySettings}
       <div class="space-y-2">
-        <label for="httpProxy" class="mb-2 text-sm font-medium {proxyState ? 'text-gray-400' : 'text-gray-900'}"
+        <label
+          for="httpProxy"
+          class="mb-2 text-sm font-medium {proxyState ? 'text-[var(--pd-invert-content-card-text)]' : 'text-gray-900'}"
           >Web Proxy (HTTP):</label>
         <Input
           name="httpProxy"
@@ -96,8 +98,11 @@ function validate(event: any) {
         {/if}
       </div>
       <div class="space-y-2">
-        <label for="httpsProxy" class="pt-4 mb-2 text-sm font-medium {proxyState ? 'text-gray-400' : 'text-gray-900'}"
-          >Secure Web Proxy (HTTPS):</label>
+        <label
+          for="httpsProxy"
+          class="pt-4 mb-2 text-sm font-medium {proxyState
+            ? 'text-[var(--pd-invert-content-card-text)]'
+            : 'text-gray-900'}">Secure Web Proxy (HTTPS):</label>
         <Input
           name="httpsProxy"
           id="httpsProxy"
@@ -111,8 +116,11 @@ function validate(event: any) {
         {/if}
       </div>
       <div class="space-y-2">
-        <label for="httpProxy" class="pt-4 mb-2 text-sm font-medium {proxyState ? 'text-gray-400' : 'text-gray-900'}"
-          >Bypass proxy settings for these hosts and domains:</label>
+        <label
+          for="httpProxy"
+          class="pt-4 mb-2 text-sm font-medium {proxyState
+            ? 'text-[var(--pd-invert-content-card-text)]'
+            : 'text-gray-900'}">Bypass proxy settings for these hosts and domains:</label>
         <Input
           name="noProxy"
           id="noProxy"
diff --git a/packages/renderer/src/lib/preferences/PreferencesRegistriesEditing.svelte b/packages/renderer/src/lib/preferences/PreferencesRegistriesEditing.svelte
index d278c7f34e0..44f36a1c7ff 100644
--- a/packages/renderer/src/lib/preferences/PreferencesRegistriesEditing.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesRegistriesEditing.svelte
@@ -235,10 +235,13 @@ function removeExistingRegistry(registry: containerDesktopAPI.Registry) {
     </Button>
   </div>
 
-  <div class="container bg-charcoal-600 rounded-md p-3">
+  <div class="container bg-[var(--pd-invert-content-card-bg)] rounded-md p-3">
     <!-- Registries table start -->
     <div class="w-full border-t border-b border-gray-900" role="table" aria-label="Registries">
-      <div class="flex w-full space-x-2" role="rowgroup" aria-label="header">
+      <div
+        class="flex w-full space-x-2 text-[var(--pd-invert-content-card-header-text)]"
+        role="rowgroup"
+        aria-label="header">
         <div class="text-left py-4 text-sm font-bold w-2/5 pl-5" role="columnheader">Registry Location</div>
         <div class="text-left py-4 text-sm font-bold w-1/5" role="columnheader">Username</div>
         <div class="text-left py-4 text-sm font-bold w-1/5" role="columnheader">Password</div>
@@ -248,7 +251,7 @@ function removeExistingRegistry(registry: containerDesktopAPI.Registry) {
       {#each $registriesInfos as registry}
         <!-- containerDesktopAPI.Registry row start -->
         <div
-          class="flex flex-col w-full border-t border-gray-900"
+          class="flex flex-col w-full border-t border-gray-900 text-[var(--pd-invert-content-card-text)]"
           role="row"
           aria-label="{registry.name ? registry.name : registry.serverUrl}">
           <div class="flex flex-row items-center pt-4 pb-3 space-x-2">
@@ -380,7 +383,7 @@ function removeExistingRegistry(registry: containerDesktopAPI.Registry) {
       {#each $registriesSuggestedInfos as registry, i (registry)}
         <!-- Add new registry form start -->
         <div
-          class="flex flex-col w-full border-t border-gray-900"
+          class="flex flex-col w-full border-t border-gray-900 text-[var(--pd-invert-content-card-text)]"
           role="row"
           aria-label="{registry.name ? registry.name : registry.url}">
           <div class="flex flex-row items-center pt-4 pb-3 space-x-2">
@@ -395,7 +398,7 @@ function removeExistingRegistry(registry: containerDesktopAPI.Registry) {
                       height="24" />
                   {/if}
                   <!-- By default, just show the name, but if we go to add it, show the full URL including https -->
-                  <span class="ml-2 text-gray-700">
+                  <span class="ml-2">
                     {#if listedSuggestedRegistries[i]}
                       https://{registry.url}
                     {:else}
@@ -454,7 +457,7 @@ function removeExistingRegistry(registry: containerDesktopAPI.Registry) {
 
       {#if showNewRegistryForm}
         <!-- Add new registry form start -->
-        <div class="flex flex-col w-full border-t border-gray-900">
+        <div class="flex flex-col w-full border-t border-gray-900 text-[var(--pd-invert-content-card-text)]">
           <div class="flex flex-row items-center pt-4 pb-3 space-x-2">
             <div class="pl-5 text-sm w-2/5">
               <Input
diff --git a/packages/renderer/src/lib/preferences/PreferencesResourcesRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesResourcesRendering.svelte
index 1d9fa916b09..283132a4f99 100644
--- a/packages/renderer/src/lib/preferences/PreferencesResourcesRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesResourcesRendering.svelte
@@ -374,7 +374,7 @@ function hasAnyConfiguration(provider: ProviderInfo) {
 
     {#each providers as provider}
       <div
-        class="bg-charcoal-600 mb-5 rounded-md p-3 divide-x divide-gray-900 flex"
+        class="bg-[var(--pd-invert-content-card-bg)] mb-5 rounded-md p-3 divide-x divide-gray-900 flex"
         role="region"
         aria-label="{provider.id}">
         <div role="region" aria-label="Provider Setup">
@@ -389,7 +389,8 @@ function hasAnyConfiguration(provider: ProviderInfo) {
                   <img src="{provider.images.icon.dark}" alt="{provider.name}" class="max-w-[40px]" />
                 {/if}
               {/if}
-              <span class="my-auto text-gray-400 ml-3 break-words">{provider.name}</span>
+              <span class="my-auto text-[var(--pd-invert-content-card-header-text)] ml-3 break-words"
+                >{provider.name}</span>
             </div>
             <div class="text-center mt-10">
               <!-- Some providers have a status of 'unknown' so that they do not appear in the dashboard, this allows onboarding to still show. -->
@@ -445,7 +446,10 @@ function hasAnyConfiguration(provider: ProviderInfo) {
           </div>
         </div>
         <!-- providers columns -->
-        <div class="grow flex flex-wrap divide-gray-900 ml-2" role="region" aria-label="Provider Connections">
+        <div
+          class="grow flex flex-wrap divide-gray-900 ml-2 text-[var(--pd-invert-content-card-text)]"
+          role="region"
+          aria-label="Provider Connections">
           <PreferencesConnectionsEmptyRendering
             message="{provider.emptyConnectionMarkdownDescription}"
             hidden="{provider.containerConnections.length > 0 || provider.kubernetesConnections.length > 0}" />