chore: use input in create volume

Use the Input component when creating a volume. Bonus fix: button should be disabled until the volume has a name (if I don't pick a name, UI hung). Fixes another minor part of podman-desktop#3234. Signed-off-by: Tim deBoer <[email protected]>
feloy · Feb 9, 2024 · 8535e73 · 8535e73
1 parent f29296e
commit 8535e73
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/packages/renderer/src/lib/volume/CreateVolume.svelte b/packages/renderer/src/lib/volume/CreateVolume.svelte
@@ -15,6 +15,7 @@ import Button from '/@/lib/ui/Button.svelte';
 import VolumeIcon from '/@/lib/images/VolumeIcon.svelte';
 import { router } from 'tinro';
 import { faPlusCircle } from '@fortawesome/free-solid-svg-icons';
+import Input from '../ui/Input.svelte';
 
 let providers: ProviderInfo[] = [];
 let providerConnections: ProviderContainerConnectionInfo[] = [];
@@ -67,11 +68,12 @@ export let volumeName = '';
         <div>
           <label for="containerBuildContextDirectory" class="block mb-2 text-sm font-bold text-gray-400"
             >Volume name:</label>
-          <input
+          <Input
+            clearable
             aria-label="Volume Name"
             disabled="{createVolumeFinished}"
             bind:value="{volumeName}"
-            class="w-full p-2 outline-none text-sm bg-charcoal-600 rounded-sm text-gray-700 placeholder-gray-700"
+            class="w-full"
             required />
         </div>
         <div class:hidden="{providerConnections.length < 2}">