From ccd93d0dce467e703faca0e282e2c414dc7d7c24 Mon Sep 17 00:00:00 2001
From: Tim deBoer <git@tdeboer.ca>
Date: Tue, 6 Aug 2024 09:56:10 -0400
Subject: [PATCH] chore: light mode for delete button, remove drop down

We cannot complete #376 because the issue to provide the component has stalled:
https://github.com/containers/podman-desktop/issues/6898

In the meantime we can do two things:
- Pick up light mode support by copying the current code from Podman Desktop.
- Remove the menu property, so that we can remove the unused dependency on the
  the DropdownMenuItem component. (if we need dropdown support in the future,
  we should use/require the component)

Related to #376.
Part of #536.
Fixes #371.

Signed-off-by: Tim deBoer <git@tdeboer.ca>
---
 .../src/lib/upstream/DropDownMenuItem.svelte  | 27 ----------
 .../lib/upstream/ListItemButtonIcon.svelte    | 51 ++++++++-----------
 2 files changed, 22 insertions(+), 56 deletions(-)
 delete mode 100644 packages/frontend/src/lib/upstream/DropDownMenuItem.svelte

diff --git a/packages/frontend/src/lib/upstream/DropDownMenuItem.svelte b/packages/frontend/src/lib/upstream/DropDownMenuItem.svelte
deleted file mode 100644
index 6eaca0c3..00000000
--- a/packages/frontend/src/lib/upstream/DropDownMenuItem.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
-import Fa from 'svelte-fa';
-
-export let title: string;
-export let icon: IconDefinition | string;
-export let enabled = true;
-export let hidden = false;
-export let onClick: () => void = () => {};
-
-const enabledClasses = 'hover:bg-black hover:text-purple-500 hover:rounded-md text-gray-400 hover:cursor-pointer';
-const disabledClasses = 'text-gray-900 bg-charcoal-800';
-</script>
-
-{#if !hidden}
-  <!-- Use a div + onclick so there's no "blind spots" for when clicking-->
-  <div class={`p-3 ${enabled ? enabledClasses : disabledClasses}`} role="none" on:click={onClick}>
-    <span title={title} class="group flex items-center text-sm no-underline whitespace-nowrap" tabindex="-1">
-      {#if typeof icon === 'string'}
-        <span role="img" aria-label={title} class="{icon} h-4 w-4"></span>
-      {:else}
-        <Fa class="h-4 w-4 text-md" icon={icon} />
-      {/if}
-      {#if title}<span class="ml-2">{title}</span>{/if}
-    </span>
-  </div>
-{/if}
diff --git a/packages/frontend/src/lib/upstream/ListItemButtonIcon.svelte b/packages/frontend/src/lib/upstream/ListItemButtonIcon.svelte
index 2bc86c9c..ca7ce7d6 100644
--- a/packages/frontend/src/lib/upstream/ListItemButtonIcon.svelte
+++ b/packages/frontend/src/lib/upstream/ListItemButtonIcon.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
-import DropdownMenuItem from './DropDownMenuItem.svelte';
 import Fa from 'svelte-fa';
 import { onMount } from 'svelte';
 
@@ -10,7 +9,6 @@ export let fontAwesomeIcon: IconDefinition | undefined = undefined;
 export let hidden = false;
 export let enabled: boolean = true;
 export let onClick: () => void = () => {};
-export let menu = false;
 export let detailed = false;
 export let inProgress = false;
 export let iconOffset = '';
@@ -27,13 +25,13 @@ onMount(() => {
 });
 
 const buttonDetailedClass =
-  'text-gray-400 bg-charcoal-800 hover:text-violet-600 font-medium rounded-lg text-sm inline-flex items-center px-3 py-2 text-center';
+  'text-[var(--pd-action-button-details-text)] bg-[var(--pd-action-button-details-bg)] hover:text-[var(--pd-action-button-details-hover-text)] font-medium rounded-lg text-sm inline-flex items-center px-3 py-2 text-center';
 const buttonDetailedDisabledClass =
-  'text-gray-900 bg-charcoal-800 font-medium rounded-lg text-sm inline-flex items-center px-3 py-2 text-center';
+  'text-[var(--pd-action-button-details-disabled-text)] bg-[var(--pd-action-button-details-disabled-bg)] font-medium rounded-lg text-sm inline-flex items-center px-3 py-2 text-center';
 const buttonClass =
-  'm-0.5 text-gray-400 hover:bg-charcoal-600 hover:text-violet-600 font-medium rounded-full inline-flex items-center px-2 py-2 text-center';
+  'text-[var(--pd-action-button-text)] hover:bg-[var(--pd-action-button-hover-bg)] hover:text-[var(--pd-action-button-hover-text)] font-medium rounded-full inline-flex items-center px-2 py-2 text-center';
 const buttonDisabledClass =
-  'm-0.5 text-gray-900 font-medium rounded-full inline-flex items-center px-2 py-2 text-center';
+  'text-[var(--pd-action-button-disabled-text)] font-medium rounded-full inline-flex items-center px-2 py-2 text-center';
 
 $: styleClass = detailed
   ? enabled && !inProgress
@@ -45,27 +43,22 @@ $: styleClass = detailed
 </script>
 
 <!-- If menu = true, use the menu, otherwise implement the button -->
-{#if menu}
-  <!-- enabled menu -->
-  <DropdownMenuItem title={title} icon={icon} enabled={enabled} hidden={hidden} onClick={onClick} />
-{:else}
-  <!-- enabled button -->
-  <button
-    title={title}
-    aria-label={title}
-    on:click={onClick}
-    class="{styleClass} relative"
-    class:disabled={inProgress}
-    class:hidden={hidden}
-    disabled={!enabled}>
-    {#if fontAwesomeIcon}
-      <Fa class="h-4 w-4 {iconOffset}" icon={fontAwesomeIcon} />
-    {/if}
+<!-- enabled button -->
+<button
+  title={title}
+  aria-label={title}
+  on:click={onClick}
+  class="{styleClass} relative"
+  class:disabled={inProgress}
+  class:hidden={hidden}
+  disabled={!enabled}>
+  {#if fontAwesomeIcon}
+    <Fa class="h-4 w-4 {iconOffset}" icon={fontAwesomeIcon} />
+  {/if}
 
-    <div
-      aria-label="spinner"
-      class="w-6 h-6 rounded-full animate-spin border border-solid border-violet-500 border-t-transparent absolute {positionTopClass} {positionLeftClass}"
-      class:hidden={!inProgress}>
-    </div>
-  </button>
-{/if}
+  <div
+    aria-label="spinner"
+    class="w-6 h-6 rounded-full animate-spin border border-solid border-[var(--pd-action-button-spinner)] border-t-transparent absolute {positionTopClass} {positionLeftClass}"
+    class:hidden={!inProgress}>
+  </div>
+</button>