chore: replace colors by using color registry in CommandPalette and Q…

…uickPickInput (podman-desktop#9647) * chore: use color registry for hard coded colors Signed-off-by: Sonia Sandler <[email protected]>
SoniaSandler · Nov 4, 2024 · b7ba284 · b7ba284
1 parent 813437d
commit b7ba284
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/packages/renderer/src/lib/dialogs/CommandPalette.svelte b/packages/renderer/src/lib/dialogs/CommandPalette.svelte
@@ -165,30 +165,30 @@ async function onInputChange() {
 <svelte:window on:keydown={handleKeydown} on:mousedown={handleMousedown} />
 
 {#if display}
-  <div class="fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-60 h-full z-50"></div>
+  <div class="fixed top-0 left-0 right-0 bottom-0 bg-[var(--pd-modal-fade)] opacity-60 h-full z-50"></div>
 
   <div class="absolute m-auto left-0 right-0 z-50">
     <div class="flex justify-center items-center mt-1">
       <div
         bind:this={outerDiv}
-        class="bg-charcoal-800 w-[700px] max-h-fit shadow-sm p-2 rounded shadow-zinc-700 text-sm">
+        class="bg-[var(--pd-content-card-bg)] w-[700px] max-h-fit shadow-sm p-2 rounded shadow-[var(--pd-input-field-stroke)] text-sm">
         <div class="w-full flex flex-row">
           <input
             bind:this={inputElement}
             aria-label="Command palette command input"
             type="text"
             bind:value={inputValue}
             on:input={() => onInputChange()}
-            class="px-1 w-full text-gray-400 bg-zinc-700 border border-charcoal-600 focus:outline-none" />
+            class="px-1 w-full text-[var(--pd-input-field-focused-text)] bg-[var(--pd-input-field-focused-bg)] border border-[var(--pd-input-field-stroke)] focus:outline-none" />
         </div>
         <ul class="max-h-[50vh] overflow-y-auto flex flex-col">
           {#each filteredCommandInfoItems as item, i}
             <li class="flex w-full flex-row" bind:this={scrollElements[i]} aria-label={item.id}>
               <button
                 on:click={() => clickOnItem(item, i)}
-                class="text-gray-400 text-left relative my-0.5 mr-2 w-full {i === selectedFilteredIndex
-                  ? 'bg-violet-500 selected'
-                  : 'hover:bg-charcoal-600'}  px-1">
+                class="text-[var(--pd-dropdown-item-text)] text-left relative my-0.5 mr-2 w-full {i === selectedFilteredIndex
+                  ? 'bg-[var(--pd-modal-dropdown-highlight)] selected'
+                  : 'hover:bg-[var(--pd-dropdown-bg)]'}  px-1">
                 <div class="flex flex-col w-full">
                   <div class="flex flex-row w-full max-w-[700px] truncate">
                     <div class="text-xs">{item.title}</div>

diff --git a/packages/renderer/src/lib/dialogs/QuickPickInput.svelte b/packages/renderer/src/lib/dialogs/QuickPickInput.svelte
@@ -288,7 +288,7 @@ function handleKeydown(e: KeyboardEvent) {
     <div class="flex justify-center items-center mt-1">
       <div
         bind:this={outerDiv}
-        class="w-[700px] {mode === 'InputBox' ? 'h-fit' : ''} shadow-sm p-2 rounded shadow-zinc-700 text-sm overflow-hidden">
+        class="w-[700px] {mode === 'InputBox' ? 'h-fit' : ''} shadow-sm p-2 rounded shadow-[var(--pd-input-field-stroke)] text-sm overflow-hidden">
         {#if title}
           <div
             aria-label="title"
@@ -303,7 +303,7 @@ function handleKeydown(e: KeyboardEvent) {
               on:input={event => onInputChange(event)}
               bind:value={inputValue}
               class="px-1 w-full h-20 text-[var(--pd-input-select-hover-text)] border {validationError
-                ? 'border-red-700'
+                ? 'border-[var(--pd-input-field-stroke-error)]'
                 : 'bg-[var(--pd-input-field-focused-bg)] border-[var(--pd-input-field-focused-bg)]'} focus:outline-none"
               placeholder={placeHolder}></textarea>
           {:else}
@@ -313,7 +313,7 @@ function handleKeydown(e: KeyboardEvent) {
               type="text"
               bind:value={inputValue}
               class="px-1 w-full text-[var(--pd-input-select-hover-text)] border {validationError
-                ? 'border-red-700'
+                ? 'border-[var(--pd-input-field-stroke-error)]'
                 : 'bg-[var(--pd-input-field-focused-bg)] border-[var(--pd-input-field-focused-bg)]'} focus:outline-none"
               placeholder={placeHolder} />
           {/if}
@@ -324,7 +324,7 @@ function handleKeydown(e: KeyboardEvent) {
 
         {#if mode === 'InputBox'}
           {#if validationError}
-            <div class="text-[var(--pd-modal-dropdown-text)] border border-red-700 relative w-full bg-red-700 px-1">
+            <div class="text-[var(--pd-modal-dropdown-text)] border border-[var(--pd-input-field-stroke-error)] relative w-full bg-[var(--pd-input-field-stroke-error)] px-1">
               {validationError}
             </div>
           {:else}