chore: light mode for delete button, remove drop down (#709)

We cannot complete #376 because the issue to provide the component has stalled:
podman-desktop/podman-desktop#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 <[email protected]>

Author: deboer-tim

packages/frontend/src/lib/upstream/DropDownMenuItem.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>