chore: use disk image icon for build (#363)

This is minor, but we have a nice icon and the PD standard is more typically to use the icon for the thing you want to create (i.e. a disk image) not the thing you have now (container image). We didn't have the 'correct' container image anyway since it is not exported from PD, yet another reason to use the disk image icon. Changes the default disk image icon to be solid and the correct size for buttons, then uses it for the homepage button, and a larger version for the Build page. Signed-off-by: Tim deBoer <[email protected]>
podman-desktop · Apr 22, 2024 · 8121e85 · 8121e85
1 parent 09faa59
commit 8121e85
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 7 deletions.
diff --git a/packages/frontend/src/Build.svelte b/packages/frontend/src/Build.svelte
@@ -11,6 +11,7 @@ import type { ImageInfo } from '@podman-desktop/api';
 import { Input } from '@podman-desktop/ui-svelte';
 import EmptyScreen from './lib/upstream/EmptyScreen.svelte';
 import { router } from 'tinro';
+import DiskImageIcon from './lib/DiskImageIcon.svelte';
 
 export let imageName: string | undefined = undefined;
 export let imageTag: string | undefined = undefined;
@@ -264,9 +265,7 @@ $: if (availableArchitectures) {
 </script>
 
 <FormPage title="Build Disk Image" inProgress="{buildInProgress}" showBreadcrumb="{true}">
-  <svelte:fragment slot="icon">
-    <i class="fas fa-rocket fa-2x" aria-hidden="true"></i>
-  </svelte:fragment>
+  <DiskImageIcon slot="icon" size="30px" />
 
   <div slot="content" class="p-5 min-w-full h-fit">
     {#if success}

diff --git a/packages/frontend/src/Homepage.svelte b/packages/frontend/src/Homepage.svelte
@@ -4,7 +4,7 @@ import { router } from 'tinro';
 import type { BootcBuildInfo } from '/@shared/src/models/bootc';
 import NavPage from './lib/upstream/NavPage.svelte';
 import Button from './lib/upstream/Button.svelte';
-import { faCube, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import Table from './lib/upstream/Table.svelte';
 import { Column, Row } from './lib/upstream/table';
 import BootcColumnActions from './lib/BootcColumnActions.svelte';
@@ -111,7 +111,7 @@ const row = new Row<BootcBuildInfo>({
 
 <NavPage bind:searchTerm="{searchTerm}" title="Bootable Containers" searchEnabled="{true}">
   <svelte:fragment slot="additional-actions">
-    <Button on:click="{() => gotoBuild()}" icon="{faCube}" title="Build">Build</Button>
+    <Button on:click="{() => gotoBuild()}" icon="{DiskImageIcon}" title="Build">Build</Button>
   </svelte:fragment>
 
   <svelte:fragment slot="bottom-additional-actions">

diff --git a/packages/frontend/src/lib/DiskImageIcon.svelte b/packages/frontend/src/lib/DiskImageIcon.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-export let size = '40';
-export let solid = false;
+export let size = '13px';
+export let solid = true;
 </script>
 
 <svg