chore: use input component in extension pages

Use the Input component when installing Podman or Docker extensions. Fixes another minor part of #3234. Signed-off-by: Tim deBoer <git@tdeboer.ca>
containers · Feb 9, 2024 · 1bcd5b5 · 1bcd5b5
1 parent f29296e
commit 1bcd5b5
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/packages/renderer/src/lib/docker-extension/PreferencesPageDockerExtensions.svelte b/packages/renderer/src/lib/docker-extension/PreferencesPageDockerExtensions.svelte
@@ -6,6 +6,7 @@ import ErrorMessage from '../ui/ErrorMessage.svelte';
 import SettingsPage from '../preferences/SettingsPage.svelte';
 import Button from '../ui/Button.svelte';
 import { faArrowCircleDown } from '@fortawesome/free-solid-svg-icons';
+import Input from '../ui/Input.svelte';
 
 export let ociImage: string | undefined = undefined;
 
@@ -69,14 +70,12 @@ function deleteContribution(extensionName: string) {
     <div class="container w-full mt-4 flex-col">
       <div class="flex flex-col mb-4">
         <label for="ociImage" class="block mb-2 text-sm font-medium text-gray-400">Image name:</label>
-        <input
+        <Input
           name="ociImage"
           id="ociImage"
           aria-label="OCI Image Name"
-          type="text"
           bind:value="{ociImage}"
           placeholder="Name of the Image"
-          class="text-sm rounded-sm focus:ring-purple-500 focus:border-purple-500 block p-2.5 bg-charcoal-800 border-gray-900 placeholder-gray-400 text-white"
           required />
       </div>
     </div>

diff --git a/packages/renderer/src/lib/preferences/PreferencesExtensionList.svelte b/packages/renderer/src/lib/preferences/PreferencesExtensionList.svelte
@@ -10,6 +10,7 @@ import ConnectionStatus from '../ui/ConnectionStatus.svelte';
 import FeaturedExtensions from '../featured/FeaturedExtensions.svelte';
 import Button from '../ui/Button.svelte';
 import ExtensionIcon from './ExtensionIcon.svelte';
+import Input from '../ui/Input.svelte';
 
 export let ociImage: string | undefined = undefined;
 
@@ -85,17 +86,16 @@ async function updateExtension(extension: ExtensionInfo, ociUri: string) {
 
       <div class="flex flex-col w-full">
         <div
-          class="flex flex-row mb-2 w-full space-x-8 items-center"
+          class="flex flex-row mb-2 w-full space-x-4 items-center"
           role="region"
           aria-label="Install Extension From OCI">
-          <input
+          <Input
             name="ociImage"
             id="ociImage"
             aria-label="OCI Image Name"
-            type="text"
             bind:value="{ociImage}"
             placeholder="Name of the Image"
-            class="w-1/2 p-2 outline-none text-sm bg-charcoal-800 rounded-sm text-gray-700 placeholder-gray-700"
+            class="w-1/2"
             required />
 
           <Button