feat: reduce height of navbar items (podman-desktop#6777)

* feat: reduce height of navbar items before having a solution for 16774 with a design, reduce height of each item from navbar and icon size related to podman-desktop#6774 Signed-off-by: Florent Benoit <[email protected]>
axel7083 · Apr 21, 2024 · f17e6e3 · f17e6e3
1 parent 7523b72
commit f17e6e3
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 15 deletions.
diff --git a/packages/renderer/src/AppNavigation.svelte b/packages/renderer/src/AppNavigation.svelte
@@ -62,6 +62,8 @@ let ingressesRoutesCount = '';
 const imageUtils = new ImageUtils();
 export let exitSettingsCallback: () => void;
 
+const iconSize = '22';
+
 onMount(async () => {
   const commandRegistry = new CommandRegistry();
   commandRegistry.init();
@@ -174,48 +176,48 @@ export let meta: TinroRouteMeta;
   <NavItem href="/" tooltip="Dashboard" bind:meta="{meta}">
     <div class="relative w-full">
       <div class="flex items-center w-full h-full">
-        <DashboardIcon size="24" />
+        <DashboardIcon size="{iconSize}" />
       </div>
       <NewContentOnDashboardBadge />
     </div>
   </NavItem>
   <NavItem href="/containers" tooltip="Containers{containerCount}" ariaLabel="Containers" bind:meta="{meta}">
-    <ContainerIcon size="24" />
+    <ContainerIcon size="{iconSize}" />
   </NavItem>
   <NavItem href="/pods" tooltip="Pods{podCount}" ariaLabel="Pods" bind:meta="{meta}">
-    <PodIcon size="24" />
+    <PodIcon size="{iconSize}" />
   </NavItem>
   <NavItem href="/images" tooltip="Images{imageCount}" ariaLabel="Images" bind:meta="{meta}">
-    <ImageIcon size="24" />
+    <ImageIcon size="{iconSize}" />
   </NavItem>
   <NavItem href="/volumes" tooltip="Volumes{volumeCount}" ariaLabel="Volumes" bind:meta="{meta}">
-    <VolumeIcon size="24" />
+    <VolumeIcon size="{iconSize}" />
   </NavItem>
   {#if contextCount > 0}
     <NavSection tooltip="Kubernetes">
-      <KubeIcon size="24" slot="icon" />
+      <KubeIcon size="{iconSize}" slot="icon" />
       <NavItem href="/deployments" tooltip="Deployments{deploymentCount}" ariaLabel="Deployments" bind:meta="{meta}">
-        <DeploymentIcon size="24" />
+        <DeploymentIcon size="{iconSize}" />
       </NavItem>
       <NavItem href="/services" tooltip="Services{serviceCount}" ariaLabel="Services" bind:meta="{meta}">
-        <ServiceIcon size="24" />
+        <ServiceIcon size="{iconSize}" />
       </NavItem>
       <NavItem
         href="/ingressesRoutes"
         tooltip="Ingresses & Routes{ingressesRoutesCount}"
         ariaLabel="Ingresses & Routes"
         bind:meta="{meta}">
-        <IngressRouteIcon size="24" />
+        <IngressRouteIcon size="{iconSize}" />
       </NavItem>
     </NavSection>
   {/if}
 
   {#if $contributions.length + $webviews.length > 0}
     <NavSection tooltip="Extensions">
-      <PuzzleIcon size="24" slot="icon" />
+      <PuzzleIcon size="{iconSize}" slot="icon" />
       {#each $contributions as contribution (contribution.id)}
         <NavItem href="/contribs/{contribution.name}" tooltip="{contribution.name}" bind:meta="{meta}">
-          <img src="{contribution.icon}" width="24" height="24" alt="{contribution.name}" />
+          <img src="{contribution.icon}" width="{iconSize}" height="{iconSize}" alt="{contribution.name}" />
         </NavItem>
       {/each}
 
@@ -230,14 +232,14 @@ export let meta: TinroRouteMeta;
     tooltip="Accounts"
     bind:meta="{meta}"
     onClick="{event => window.showAccountsMenu(event.x, event.y)}">
-    <Fa class="ml-[-3px] h-8 w-8 fa-light" icon="{faCircleUser}" size="lg" style="fa-light" />
+    <Fa class="ml-[-3px] h-6 w-6 fa-light" icon="{faCircleUser}" size="lg" style="fa-light" />
   </NavItem>
 
   <NavItem
     href="/preferences"
     tooltip="Settings"
     bind:meta="{meta}"
     onClick="{() => clickSettings(meta.url.startsWith('/preferences'))}">
-    <SettingsIcon size="24" />
+    <SettingsIcon size="{iconSize}" />
   </NavItem>
 </nav>
diff --git a/packages/renderer/src/lib/ui/NavItem.svelte b/packages/renderer/src/lib/ui/NavItem.svelte
@@ -37,7 +37,7 @@ onDestroy(() => {
   aria-label="{ariaLabel ? ariaLabel : tooltip}"
   on:click|preventDefault="{onClick}">
   <div
-    class="flex py-3 justify-center items-center cursor-pointer"
+    class="flex py-2 justify-center items-center cursor-pointer min-h-9"
     class:border-x-[4px]="{!inSection}"
     class:px-2="{inSection}"
     class:border-[var(--pd-global-nav-bg)]="{!inSection}"

diff --git a/packages/renderer/src/lib/ui/NavSection.svelte b/packages/renderer/src/lib/ui/NavSection.svelte
@@ -39,7 +39,7 @@ onMount(() => {
     <Tooltip class="flex flex-col justify-center items-center pb-1" tip="{tooltip}" right>
       <div class="flex flex-col justify-center items-center" class:text-charcoal-50="{expanded && $count < 2}">
         {#if !expanded}
-          <div class="py-3" transition:fadeSlide="{{ duration: 500 }}">
+          <div class="py-2" transition:fadeSlide="{{ duration: 500 }}">
             <slot name="icon" />
           </div>
         {/if}