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>

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-->

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"