From b6e663e688c65e4cef17a69d1748575242c0434d Mon Sep 17 00:00:00 2001
From: Tim deBoer <git@tdeboer.ca>
Date: Fri, 16 Feb 2024 12:40:24 -0500
Subject: [PATCH] chore: use components in quickpick

The quickpick was using an unstyled checkbox and button, this just
switches it to use the Checkbox and Button components.

Checkbox required the ability to set the class. I also replaced two
violets with purple to match our normal selection color - although
it'll probably be replaced by variables soon, this will make it
match in the meantime and easier to find.

Signed-off-by: Tim deBoer <git@tdeboer.ca>
---
 .../renderer/src/lib/dialogs/QuickPickInput.svelte   | 12 ++++++------
 packages/renderer/src/lib/ui/Checkbox.svelte         |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/renderer/src/lib/dialogs/QuickPickInput.svelte b/packages/renderer/src/lib/dialogs/QuickPickInput.svelte
index fdcf66197d13..357241e1823f 100644
--- a/packages/renderer/src/lib/dialogs/QuickPickInput.svelte
+++ b/packages/renderer/src/lib/dialogs/QuickPickInput.svelte
@@ -3,6 +3,8 @@ import { onDestroy, onMount, tick } from 'svelte';
 import type { InputBoxOptions, QuickPickOptions } from './quickpick-input';
 import Markdown from '/@/lib/markdown/Markdown.svelte';
 import { tabWithinParent } from './dialog-utils';
+import Button from '/@/lib/ui/Button.svelte';
+import Checkbox from '/@/lib/ui/Checkbox.svelte';
 
 const ENTER = 'Enter';
 const ESCAPE = 'Escape';
@@ -332,9 +334,7 @@ function handleMousedown(e: MouseEvent) {
               placeholder="{placeHolder}" />
           {/if}
           {#if quickPickCanPickMany}
-            <button
-              on:click="{() => validateQuickPick()}"
-              class="text-gray-400 bg-violet-600 border border-charcoal-600 focus:outline-none px-1">OK</button>
+            <Button on:click="{() => validateQuickPick()}" class="px-1">OK</Button>
           {/if}
         </div>
 
@@ -353,15 +353,15 @@ function handleMousedown(e: MouseEvent) {
           {#each quickPickFilteredItems as item, i}
             <div
               class="flex w-full flex-row {i === quickPickSelectedFilteredIndex
-                ? 'bg-violet-500'
+                ? 'bg-purple-500'
                 : 'hover:bg-charcoal-600'} ">
               {#if quickPickCanPickMany}
-                <input type="checkbox" class="mx-1 outline-none" bind:checked="{item.checkbox}" />
+                <Checkbox class="mx-1 my-auto" bind:checked="{item.checkbox}" />
               {/if}
               <button
                 on:click="{() => clickQuickPickItem(item, i)}"
                 class="text-gray-400 text-left relative my-1 w-full {i === quickPickSelectedFilteredIndex
-                  ? 'bg-violet-500'
+                  ? 'bg-purple-500'
                   : ''} px-1">
                 <div class="flex flex-col w-full">
                   <!-- first row is Value + optional description-->
diff --git a/packages/renderer/src/lib/ui/Checkbox.svelte b/packages/renderer/src/lib/ui/Checkbox.svelte
index 98f8b4afce95..86b3dced2816 100644
--- a/packages/renderer/src/lib/ui/Checkbox.svelte
+++ b/packages/renderer/src/lib/ui/Checkbox.svelte
@@ -20,7 +20,7 @@ function onClick(checked: boolean) {
 }
 </script>
 
-<label>
+<label class="{$$props.class || ''}">
   <input
     aria-label="{title}"
     type="checkbox"