From 5204628c242f824ab6e5749e0c87ecf0f4b87d79 Mon Sep 17 00:00:00 2001
From: Philippe Martin <phmartin@redhat.com>
Date: Thu, 20 Jun 2024 20:48:52 +0200
Subject: [PATCH] chore: light mode for Create Service page

Signed-off-by: Philippe Martin <phmartin@redhat.com>
---
 packages/frontend/src/pages/CreateService.spec.ts |  2 +-
 packages/frontend/src/pages/CreateService.svelte  | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/pages/CreateService.spec.ts b/packages/frontend/src/pages/CreateService.spec.ts
index f2c1aa4bb..a2c9ecc83 100644
--- a/packages/frontend/src/pages/CreateService.spec.ts
+++ b/packages/frontend/src/pages/CreateService.spec.ts
@@ -243,7 +243,7 @@ test('form should be disabled when loading', async () => {
     const select = screen.getByRole('combobox', { name: 'Model select' });
     expect(select).toBeDisabled();
 
-    const input = screen.getByRole('spinbutton', { name: 'Port input' });
+    const input = screen.getByRole('textbox', { name: 'Port input' });
     expect(input).toBeDisabled();
   });
 });
diff --git a/packages/frontend/src/pages/CreateService.svelte b/packages/frontend/src/pages/CreateService.svelte
index 582285f39..c908425ec 100644
--- a/packages/frontend/src/pages/CreateService.svelte
+++ b/packages/frontend/src/pages/CreateService.svelte
@@ -14,7 +14,7 @@ import { inferenceServers } from '/@/stores/inferenceServers';
 import ContainerConnectionStatusInfo from '../lib/notification/ContainerConnectionStatusInfo.svelte';
 import type { ContainerConnectionInfo } from '@shared/src/models/IContainerConnectionInfo';
 import { checkContainerConnectionStatus } from '../utils/connectionUtils';
-import { Button, ErrorMessage, FormPage } from '@podman-desktop/ui-svelte';
+import { Button, ErrorMessage, FormPage, Input } from '@podman-desktop/ui-svelte';
 
 // List of the models available locally
 let localModels: ModelInfo[];
@@ -161,7 +161,8 @@ export function goToUpPage(): void {
       <div class="bg-[var(--pd-content-card-bg)] m-5 space-y-6 px-8 sm:pb-6 xl:pb-8 rounded-lg h-fit">
         <div class="w-full">
           <!-- model input -->
-          <label for="model" class="pt-4 block mb-2 text-sm font-bold text-gray-400">Model</label>
+          <label for="model" class="pt-4 block mb-2 text-sm font-bold text-[var(--pd-content-card-header-text)]"
+            >Model</label>
           <select
             required
             bind:value="{modelId}"
@@ -188,12 +189,13 @@ export function goToUpPage(): void {
             </div>
           {/if}
           <!-- container port input -->
-          <label for="containerPort" class="pt-4 block mb-2 text-sm font-bold text-gray-400">Container port</label>
-          <input
+          <label for="containerPort" class="pt-4 block mb-2 text-sm font-bold text-[var(--pd-content-card-header-text)]"
+            >Container port</label>
+          <Input
             type="number"
             bind:value="{containerPort}"
             on:input="{onContainerPortInput}"
-            class="w-full p-2 outline-none text-sm bg-charcoal-600 rounded-sm text-gray-700 placeholder-gray-700"
+            class="w-full"
             placeholder="8888"
             name="containerPort"
             aria-label="Port input"