From 9e1aa36bb143d373833b7fb7d88a0c714e197dcf Mon Sep 17 00:00:00 2001
From: Luca Stocchi <49404737+lstocchi@users.noreply.github.com>
Date: Thu, 6 Jun 2024 11:15:23 +0200
Subject: [PATCH] chore: light mode for help page (#7345) (#7471)

Signed-off-by: lstocchi <lstocchi@redhat.com>
---
 packages/main/src/plugin/color-registry.ts    |  4 ++
 .../renderer/src/lib/help/HelpPage.svelte     | 66 +++++++++----------
 2 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/packages/main/src/plugin/color-registry.ts b/packages/main/src/plugin/color-registry.ts
index 57169a7d996..31403b83f89 100644
--- a/packages/main/src/plugin/color-registry.ts
+++ b/packages/main/src/plugin/color-registry.ts
@@ -926,5 +926,9 @@ export class ColorRegistry {
       dark: colorPalette.white + '2',
       light: colorPalette.black + '2',
     });
+    this.registerColor(`${button}help-link-text`, {
+      dark: colorPalette.gray[100],
+      light: colorPalette.charcoal[900],
+    });
   }
 }
diff --git a/packages/renderer/src/lib/help/HelpPage.svelte b/packages/renderer/src/lib/help/HelpPage.svelte
index 2b6a261188b..a27178308fe 100644
--- a/packages/renderer/src/lib/help/HelpPage.svelte
+++ b/packages/renderer/src/lib/help/HelpPage.svelte
@@ -25,41 +25,41 @@ $: contributedLinks = $providerInfos
   <div slot="content" class="flex flex-col min-w-full h-fit">
     <div class="min-w-full flex-1 px-5 pb-5 space-y-5">
       <!-- Getting Started -->
-      <div class="bg-charcoal-600 px-3 pt-3 pb-3 rounded-lg">
-        <div class="text-lg">Getting Started</div>
+      <div class="bg-[var(--pd-global-nav-bg)] px-3 pt-3 pb-3 rounded-lg">
+        <div class="text-[var(--pd-content-header)] text-lg">Getting Started</div>
         <div class="grid grid-cols-1 md:grid-cols-2 py-3">
           <button
-            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2"
+            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2 text-[var(--pd-button-help-link-text)]"
             on:click="{() => window.openExternal('https://podman-desktop.io/docs/intro')}"
             title="https://podman-desktop.io/docs/intro">
-            <p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">Getting started</p>
+            <p class="py-2 md:text-ellipsis md:overflow-hidden">Getting started</p>
             <i
               class="opacity-0 group-hover:opacity-100 fas fa-solid fa-external-link-alt ml-2 transition-opacity delay-150 duration-150 ease-in-out"
               aria-hidden="true"></i>
           </button>
           <button
-            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:place-content-end md:ml-2"
+            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:place-content-end md:ml-2 text-[var(--pd-button-help-link-text)]"
             on:click="{() => window.openExternal('https://podman-desktop.io/docs/troubleshooting')}"
             title="https://podman-desktop.io/docs/troubleshooting">
-            <p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">Troubleshooting guide</p>
+            <p class="py-2 md:text-ellipsis md:overflow-hidden">Troubleshooting guide</p>
             <i
               class="opacity-0 group-hover:opacity-100 fas fa-solid fa-external-link-alt ml-2 transition-opacity delay-150 duration-150 ease-in-out"
               aria-hidden="true"></i>
           </button>
           <button
-            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2"
+            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2 text-[var(--pd-button-help-link-text)]"
             on:click="{() => window.openExternal('https://podman-desktop.io/features')}"
             title="https://podman-desktop.io/features">
-            <p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">View all features</p>
+            <p class="py-2 md:text-ellipsis md:overflow-hidden">View all features</p>
             <i
               class="opacity-0 group-hover:opacity-100 fas fa-solid fa-external-link-alt ml-2 transition-opacity delay-150 duration-150 ease-in-out"
               aria-hidden="true"></i>
           </button>
           <button
-            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:place-content-end md:ml-2"
+            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:place-content-end md:ml-2 text-[var(--pd-button-help-link-text)]"
             on:click="{() => window.openExternal('https://podman-desktop.io/extend')}"
             title="https://podman-desktop.io/extend">
-            <p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">Extend podman desktop</p>
+            <p class="py-2 md:text-ellipsis md:overflow-hidden">Extend podman desktop</p>
             <i
               class="opacity-0 group-hover:opacity-100 fas fa-solid fa-external-link-alt ml-2 transition-opacity delay-150 duration-150 ease-in-out"
               aria-hidden="true"></i>
@@ -71,18 +71,18 @@ $: contributedLinks = $providerInfos
       {#if contributedLinks.size > 0}
         {#each [...contributedLinks] as [group, links]}
           {#if links.length > 0}
-            <div class="bg-charcoal-600 px-3 pt-3 pb-3 rounded-lg">
-              <div class="text-lg">{group}</div>
+            <div class="bg-[var(--pd-global-nav-bg)] px-3 pt-3 pb-3 rounded-lg">
+              <div class="text-[var(--pd-content-header)] text-lg">{group}</div>
               <div class="grid grid-cols-1 md:grid-cols-2 py-3">
                 {#each links as link, index}
                   {@const evenItems = index % 2 !== 0}
                   <button
-                    class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer {evenItems
+                    class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer text-[var(--pd-button-help-link-text)] {evenItems
                       ? 'md:place-content-end md:ml-2'
                       : 'md:border-r-2'}"
                     on:click="{() => window.openExternal(link.url)}"
                     title="{link.url}">
-                    <p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">
+                    <p class="py-2 md:text-ellipsis md:overflow-hidden">
                       {link.title}
                     </p>
                     <i
@@ -97,33 +97,33 @@ $: contributedLinks = $providerInfos
       {/if}
 
       <!-- Get in Touch -->
-      <div class="bg-charcoal-600 px-3 pt-3 pb-3 rounded-lg">
-        <div class="text-lg">Get in Touch</div>
+      <div class="bg-[var(--pd-global-nav-bg)] px-3 pt-3 pb-3 rounded-lg">
+        <div class="text-[var(--pd-content-header)] text-lg">Get in Touch</div>
         <div class="grid grid-cols-1 md:grid-cols-2 py-3">
           <button
-            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2"
+            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2 text-[var(--pd-button-help-link-text)]"
             on:click="{() => window.openExternal('https://github.com/containers/podman-desktop/issues/new/choose')}"
             title="https://github.com/containers/podman-desktop/issues/new/choose">
-            <p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">Report a bug</p>
+            <p class="py-2 md:text-ellipsis md:overflow-hidden">Report a bug</p>
             <i
               class="opacity-0 group-hover:opacity-100 fas fa-solid fa-exclamation-triangle ml-2 transition-opacity delay-150 duration-150 ease-in-out"
               aria-hidden="true"></i>
           </button>
           <button
-            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:place-content-end md:ml-2"
+            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:place-content-end md:ml-2 text-[var(--pd-button-help-link-text)]"
             on:click="{() =>
               window.openExternal('https://github.com/containers/podman-desktop/discussions/categories/general')}"
             title="https://github.com/containers/podman-desktop/discussions/categories/general">
-            <p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">Create a GitHub discussion</p>
+            <p class="py-2 md:text-ellipsis md:overflow-hidden">Create a GitHub discussion</p>
             <i
               class="opacity-0 group-hover:opacity-100 fas fa-solid fa-exclamation-triangle ml-2 transition-opacity delay-150 duration-150 ease-in-out"
               aria-hidden="true"></i>
           </button>
           <button
-            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2"
+            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2 text-[var(--pd-button-help-link-text)]"
             on:click="{() => window.events.send('display-feedback', '')}"
             title="Share your Feedback">
-            <p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">Share your Feedback</p>
+            <p class="py-2 md:text-ellipsis md:overflow-hidden">Share your Feedback</p>
             <i
               class="opacity-0 group-hover:opacity-100 fas fa-solid fa-comment ml-2 transition-opacity delay-150 duration-150 ease-in-out"
               aria-hidden="true"></i>
@@ -132,43 +132,41 @@ $: contributedLinks = $providerInfos
       </div>
 
       <!-- Communication -->
-      <div class="bg-charcoal-600 px-3 pt-3 pb-3 rounded-lg">
-        <div class="text-lg">Communication</div>
+      <div class="bg-[var(--pd-global-nav-bg)] px-3 pt-3 pb-3 rounded-lg">
+        <div class="text-[var(--pd-content-header)] text-lg">Communication</div>
         <div class="grid grid-cols-1 md:grid-cols-2 py-3">
           <button
-            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2"
+            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2 text-[var(--pd-button-help-link-text)]"
             on:click="{() => window.openExternal('https://discord.com/invite/x5GzFF6QH4')}"
             title="https://discordapp.com/invite/TCTB38RWpf">
-            <p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">Discord: Join #general channel</p>
+            <p class="py-2 md:text-ellipsis md:overflow-hidden">Discord: Join #general channel</p>
             <i
               class="opacity-0 group-hover:opacity-100 fas fa-solid fa-comments ml-2 transition-opacity delay-150 duration-150 ease-in-out"
               aria-hidden="true"></i>
           </button>
           <button
-            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:place-content-end md:ml-2"
+            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:place-content-end md:ml-2 text-[var(--pd-button-help-link-text)]"
             on:click="{() => window.openExternal('https://libera.chat')}"
             title="https://libera.chat">
-            <p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">
-              Libera.Chat: Join #podman-desktop channel
-            </p>
+            <p class="py-2 md:text-ellipsis md:overflow-hidden">Libera.Chat: Join #podman-desktop channel</p>
             <i
               class="opacity-0 group-hover:opacity-100 fas fa-solid fa-comments ml-2 transition-opacity delay-150 duration-150 ease-in-out"
               aria-hidden="true"></i>
           </button>
           <button
-            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2"
+            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:border-r-2 text-[var(--pd-button-help-link-text)]"
             on:click="{() => window.openExternal('https://fedora.im')}"
             title="https://fedora.im">
-            <p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">Matrix: Join #podman-desktop channel</p>
+            <p class="py-2 md:text-ellipsis md:overflow-hidden">Matrix: Join #podman-desktop channel</p>
             <i
               class="opacity-0 group-hover:opacity-100 fas fa-solid fa-comments ml-2 transition-opacity delay-150 duration-150 ease-in-out"
               aria-hidden="true"></i>
           </button>
           <button
-            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:place-content-end md:ml-2"
+            class="group flex items-baseline md:text-right w-full md:whitespace-nowrap pr-2 cursor-pointer md:place-content-end md:ml-2 text-[var(--pd-button-help-link-text)]"
             on:click="{() => window.openExternal('https://slack.k8s.io')}"
             title="https://slack.k8s.io">
-            <p class="text-gray-100 py-2 md:text-ellipsis md:overflow-hidden">Slack: Join #podman-desktop channel</p>
+            <p class="py-2 md:text-ellipsis md:overflow-hidden">Slack: Join #podman-desktop channel</p>
             <i
               class="opacity-0 group-hover:opacity-100 fas fa-solid fa-comments ml-2 transition-opacity delay-150 duration-150 ease-in-out"
               aria-hidden="true"></i>