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 #3234.

Signed-off-by: Tim deBoer <git@tdeboer.ca>

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