From 8b8cacfeb2240136ec1c7c7fe5590b1f2f6f5cb4 Mon Sep 17 00:00:00 2001
From: Florent Benoit <fbenoit@redhat.com>
Date: Thu, 13 Oct 2022 10:36:29 +0200
Subject: [PATCH] feat: update styles for preferences

Change-Id: I6f485bc5e0d8d174b401b03e8feadd7c50ff1309
Signed-off-by: Florent Benoit <fbenoit@redhat.com>
---
 .../PreferencesPageDockerExtensions.svelte    |  2 +-
 ...erencesContainerConnectionRendering.svelte |  2 +-
 .../PreferencesExtensionRendering.svelte      |  2 +-
 .../lib/preferences/PreferencesPage.svelte    | 73 ++++++++++---------
 .../PreferencesProviderRendering.svelte       |  2 +-
 .../PreferencesProxiesRendering.svelte        |  2 +-
 .../PreferencesRegistriesRendering.svelte     |  2 +-
 .../preferences/PreferencesRendering.svelte   |  3 +-
 .../PreferencesRenderingItem.svelte           |  8 +-
 .../PreferencesRenderingItemFormat.svelte     |  4 +-
 10 files changed, 51 insertions(+), 49 deletions(-)

diff --git a/packages/renderer/src/lib/docker-extension/PreferencesPageDockerExtensions.svelte b/packages/renderer/src/lib/docker-extension/PreferencesPageDockerExtensions.svelte
index 1897bb0dac3..eeafbacfe01 100644
--- a/packages/renderer/src/lib/docker-extension/PreferencesPageDockerExtensions.svelte
+++ b/packages/renderer/src/lib/docker-extension/PreferencesPageDockerExtensions.svelte
@@ -38,7 +38,7 @@ function deleteContribution(extensionName: string) {
 }
 </script>
 
-<div class="flex flex-col h-min">
+<div class="flex flex-col h-min bg-zinc-800">
   <div class="flex flex-1 flex-col p-2 ">
     <p class="capitalize text-xl">Docker Desktop Extensions</p>
     <p class="text-xs">There is an ongoing support of Docker Desktop UI extensions from Podman Desktop.</p>
diff --git a/packages/renderer/src/lib/preferences/PreferencesContainerConnectionRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesContainerConnectionRendering.svelte
index 0c969d78467..7e093a2a42a 100644
--- a/packages/renderer/src/lib/preferences/PreferencesContainerConnectionRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesContainerConnectionRendering.svelte
@@ -122,7 +122,7 @@ async function stopReceivingLogs(provider: ProviderInfo): Promise<void> {
 }
 </script>
 
-<div class="flex flex-1 flex-col">
+<div class="flex flex-1 flex-col bg-zinc-800 px-2">
   <div class="flex flex-row align-middle my-4">
     <div class="capitalize text-xl">{connectionName} settings</div>
     {#if providerInfo?.containerProviderConnectionCreation}
diff --git a/packages/renderer/src/lib/preferences/PreferencesExtensionRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesExtensionRendering.svelte
index e9c7ef8a318..bc3a24c2207 100644
--- a/packages/renderer/src/lib/preferences/PreferencesExtensionRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesExtensionRendering.svelte
@@ -16,7 +16,7 @@ async function startExtension() {
 }
 </script>
 
-<div class="flex flex-1 flex-col">
+<div class="flex flex-1 flex-col bg-zinc-800 px-2">
   {#if extensionInfo}
     <div class="pl-1 py-2">
       <h1 class="capitalize text-xl">{extensionInfo.name} Extension</h1>
diff --git a/packages/renderer/src/lib/preferences/PreferencesPage.svelte b/packages/renderer/src/lib/preferences/PreferencesPage.svelte
index 63543812d13..de4e2277d43 100644
--- a/packages/renderer/src/lib/preferences/PreferencesPage.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesPage.svelte
@@ -14,6 +14,7 @@ import PreferencesExtensionRendering from './PreferencesExtensionRendering.svelt
 import PreferencesRegistriesRendering from './PreferencesRegistriesRendering.svelte';
 import PreferencesPageDockerExtensions from '../docker-extension/PreferencesPageDockerExtensions.svelte';
 import PreferencesProxiesRendering from './PreferencesProxiesRendering.svelte';
+import NavPage from '../ui/NavPage.svelte';
 
 let properties: IConfigurationPropertyRecordedSchema[];
 let defaultPrefPageId: string;
@@ -30,38 +31,40 @@ onMount(async () => {
 });
 </script>
 
-<div class="flex h-full">
-  <Route path="/">
-    {#if defaultPrefPageId !== undefined}
-      <PreferencesRendering key="{defaultPrefPageId}" properties="{properties}" />
-    {:else}
-      empty
-    {/if}
-  </Route>
-  <Route path="/default/:key" let:meta>
-    <PreferencesRendering key="{meta.params.key}" properties="{properties}" />
-  </Route>
-  <Route path="/ddExtensions" let:meta>
-    <PreferencesPageDockerExtensions />
-  </Route>
-  <Route path="/extensions" let:meta />
-  <Route path="/extension/:extensionId" let:meta>
-    <PreferencesExtensionRendering extensionId="{meta.params.extensionId}" />
-  </Route>
-  <Route path="/provider/:providerInternalId" let:meta>
-    <PreferencesProviderRendering providerInternalId="{meta.params.providerInternalId}" properties="{properties}" />
-  </Route>
-  <Route path="/registries">
-    <PreferencesRegistriesRendering />
-  </Route>
-  <Route path="/proxies">
-    <PreferencesProxiesRendering />
-  </Route>
-  <Route path="/container-connection/" let:meta />
-  <Route path="/container-connection/:provider/:connection" let:meta>
-    <PreferencesContainerConnectionRendering
-      providerInternalId="{meta.params.provider}"
-      connection="{meta.params.connection}"
-      properties="{properties}" />
-  </Route>
-</div>
+<NavPage searchEnabled="{false}" title="Preferences" subtitle="&nbsp;">
+  <div slot="empty" class="flex h-full px-3 py-3 bg-zinc-700">
+    <Route path="/">
+      {#if defaultPrefPageId !== undefined}
+        <PreferencesRendering key="{defaultPrefPageId}" properties="{properties}" />
+      {:else}
+        empty
+      {/if}
+    </Route>
+    <Route path="/default/:key" let:meta>
+      <PreferencesRendering key="{meta.params.key}" properties="{properties}" />
+    </Route>
+    <Route path="/ddExtensions" let:meta>
+      <PreferencesPageDockerExtensions />
+    </Route>
+    <Route path="/extensions" let:meta />
+    <Route path="/extension/:extensionId" let:meta>
+      <PreferencesExtensionRendering extensionId="{meta.params.extensionId}" />
+    </Route>
+    <Route path="/provider/:providerInternalId" let:meta>
+      <PreferencesProviderRendering providerInternalId="{meta.params.providerInternalId}" properties="{properties}" />
+    </Route>
+    <Route path="/registries">
+      <PreferencesRegistriesRendering />
+    </Route>
+    <Route path="/proxies">
+      <PreferencesProxiesRendering />
+    </Route>
+    <Route path="/container-connection/" let:meta />
+    <Route path="/container-connection/:provider/:connection" let:meta>
+      <PreferencesContainerConnectionRendering
+        providerInternalId="{meta.params.provider}"
+        connection="{meta.params.connection}"
+        properties="{properties}" />
+    </Route>
+  </div>
+</NavPage>
diff --git a/packages/renderer/src/lib/preferences/PreferencesProviderRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesProviderRendering.svelte
index 1076c7340e4..39e4573aa33 100644
--- a/packages/renderer/src/lib/preferences/PreferencesProviderRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesProviderRendering.svelte
@@ -60,7 +60,7 @@ async function stopReceivingLogs(provider: ProviderInfo): Promise<void> {
 }
 </script>
 
-<div class="flex flex-1 flex-col">
+<div class="flex flex-1 flex-col bg-zinc-800 px-2 py-1">
   <h1 class="capitalize text-xl">{providerInfo?.name} Provider</h1>
 
   <!-- Manage lifecycle-->
diff --git a/packages/renderer/src/lib/preferences/PreferencesProxiesRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesProxiesRendering.svelte
index 548754f5203..2bd5007c334 100644
--- a/packages/renderer/src/lib/preferences/PreferencesProxiesRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesProxiesRendering.svelte
@@ -8,7 +8,7 @@ function updateProvider(provider: ProviderInfo) {
 }
 </script>
 
-<div class="flex flex-1 flex-col p-2">
+<div class="flex flex-1 flex-col p-2 bg-zinc-800">
   <h1 class="capitalize text-xl">Proxy settings</h1>
 
   <div class="container mx-auto">
diff --git a/packages/renderer/src/lib/preferences/PreferencesRegistriesRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesRegistriesRendering.svelte
index 038f0c41ac7..4f8b20b378f 100644
--- a/packages/renderer/src/lib/preferences/PreferencesRegistriesRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesRegistriesRendering.svelte
@@ -39,7 +39,7 @@ function toggleRegistryModal(): void {
 }
 </script>
 
-<div class="flex flex-1 flex-col p-2">
+<div class="flex flex-1 flex-col p-2 bg-zinc-800">
   <h1 class="capitalize text-xl">Registries</h1>
 
   <div class="container mx-auto pt-4">
diff --git a/packages/renderer/src/lib/preferences/PreferencesRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesRendering.svelte
index 09b6ede57a9..52f7c66091d 100644
--- a/packages/renderer/src/lib/preferences/PreferencesRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesRendering.svelte
@@ -12,9 +12,8 @@ $: matchingRecords = properties.filter(property => property.parentId.startsWith(
 </script>
 
 <div class="flex flex-1 flex-col">
-  <h1 class="capitalize text-xl">{title}</h1>
   <table class="divide-y divide-gray-800 mt-2 min-w-full">
-    <tbody class="bg-gray-800 divide-y divide-gray-200 ">
+    <tbody class="bg-zinc-800 divide-y-8 divide-zinc-700 ">
       {#each matchingRecords as record}
         <tr>
           <td>
diff --git a/packages/renderer/src/lib/preferences/PreferencesRenderingItem.svelte b/packages/renderer/src/lib/preferences/PreferencesRenderingItem.svelte
index 9a9dd73817b..a9826fd15a2 100644
--- a/packages/renderer/src/lib/preferences/PreferencesRenderingItem.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesRenderingItem.svelte
@@ -45,11 +45,11 @@ $: {
 }
 </script>
 
-<div class="flex flex-col px-2">
+<div class="flex flex-col px-2 pt-2">
   <div class="flex">
-    <div>{recordUI.breadCrumb}</div>
-    <div class="ml-2">{recordUI.title}</div>
+    <div class="capitalize">{recordUI.breadCrumb}</div>
+    <div class="pl-2 text-violet-400">{recordUI.title}</div>
   </div>
-  <div class="mb-1">{recordUI.description}</div>
+  <div class="pt-2 text-gray-400">{recordUI.description}</div>
   <PreferencesRenderingItemFormat showUpdate="{true}" record="{recordUI.original}" />
 </div>
diff --git a/packages/renderer/src/lib/preferences/PreferencesRenderingItemFormat.svelte b/packages/renderer/src/lib/preferences/PreferencesRenderingItemFormat.svelte
index 9e4853abe31..2da859c046b 100644
--- a/packages/renderer/src/lib/preferences/PreferencesRenderingItemFormat.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesRenderingItemFormat.svelte
@@ -95,8 +95,8 @@ function update(record: IConfigurationPropertyRecordedSchema) {
 }
 </script>
 
-<div class="flex flex-row mb-2 px-4">
-  <div class="flex flex-col mx-2 flex-1 pf-c-form__group-control">
+<div class="flex flex-row mb-2 pt-2">
+  <div class="flex flex-col mx-2 w-full text-start justify-center items-start pf-c-form__group-control">
     {#if record.type === 'boolean'}
       <input
         on:input="{event => checkValue(record, event)}"