chore: disk image icon (#289)

We have an icon for disk images now. Renamed the file to be clear, updated the
image, and changed the two references.

Signed-off-by: Tim deBoer <git@tdeboer.ca>

packages/frontend/src/Homepage.svelte

@@ -12,7 +12,7 @@ import { bootcClient } from './api/client';
 import SimpleColumn from './lib/upstream/SimpleColumn.svelte';
 import BootcStatus from './lib/BootcStatus.svelte';
 import { searchPattern, filtered } from './stores/historyInfo';
-import BootcIcon from './lib/BootcIcon.svelte';
+import DiskImageIcon from './lib/DiskImageIcon.svelte';
 import FilteredEmptyScreen from './lib/upstream/FilteredEmptyScreen.svelte';
 import BootcEmptyScreen from './lib/BootcEmptyScreen.svelte';
 import BootcFolderColumn from './lib/BootcFolderColumn.svelte';
@@ -137,7 +137,7 @@ const row = new Row<BootcBuildInfo>({
     </Table>
 
     {#if $filtered.length === 0 && searchTerm}
-      <FilteredEmptyScreen icon="{BootcIcon}" kind="images" bind:searchTerm="{searchTerm}" />
+      <FilteredEmptyScreen icon="{DiskImageIcon}" kind="images" bind:searchTerm="{searchTerm}" />
     {:else if history.length === 0}
       <BootcEmptyScreen />
     {/if}

packages/frontend/src/lib/BootcStatus.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 import BootcStatusIcon from './BootcStatusIcon.svelte';
-import BootcIcon from './BootcIcon.svelte';
+import DiskImageIcon from './DiskImageIcon.svelte';
 import type { BootcBuildInfo } from '/@shared/src/models/bootc';
 
 export let object: BootcBuildInfo;
 </script>
 
-<BootcStatusIcon icon="{BootcIcon}" status="{object.status}" />
+<BootcStatusIcon icon="{DiskImageIcon}" status="{object.status}" />

packages/frontend/src/lib/DiskImageIcon.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+export let size = '40';
+export let solid = false;
+</script>
+
+<svg
+  width="{size}"
+  height="{size}"
+  class="{$$props.class}"
+  style="{$$props.style}"
+  viewBox="0 0 16 16"
+  version="1.1"
+  xml:space="preserve"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+  {#if solid}
+    <g clip-path="url(#clip0_48_55)">
+      <path d="M0.750545 3.89536H0.75531V3.91601H0.750545V3.89536Z" fill="currentColor"></path>
+      <path
+        d="M11.4252 8.2478C13.3901 8.2478 14.9834 9.84105 14.9834 11.806C14.9834 13.771 13.3901 15.3642 11.4252 15.3642C9.46024 15.3642 7.86699 13.771 7.86699 11.806C7.86699 9.84105 9.46024 8.2478 11.4252 8.2478ZM11.8954 9.0627C11.8954 8.90226 11.7651 8.772 11.6015 8.772H11.2108C11.0487 8.772 10.9169 8.90226 10.9169 9.0627V11.968C10.9169 12.1285 11.0471 12.2587 11.2108 12.2587H11.6015C11.7635 12.2587 11.8954 12.1285 11.8954 11.968V9.0627ZM11.3998 14.8718C13.0677 14.875 14.4719 13.5279 14.4751 11.8759C14.4751 10.8672 13.9366 9.97449 13.1678 9.42805C13.0248 9.32797 12.8262 9.36927 12.7405 9.52177L12.5467 9.8617C12.4752 9.98878 12.5085 10.1492 12.6277 10.2366C13.1344 10.6099 13.4585 11.1992 13.4585 11.8695C13.4585 12.9862 12.5483 13.9044 11.4061 13.9044C10.264 13.9044 9.34587 13.0069 9.35381 11.8584C9.35699 11.231 9.65562 10.6258 10.1862 10.2366C10.3053 10.1492 10.3371 9.98878 10.2656 9.86329L10.0718 9.52336C9.98603 9.37404 9.78906 9.32797 9.64609 9.42963C8.87568 9.97448 8.37531 10.8656 8.37531 11.8727C8.37531 13.5279 9.72869 14.8702 11.3998 14.875V14.8718Z"
+        fill="currentColor"></path>
+      <path
+        d="M1.77037 3.22819C1.77037 3.02646 1.84979 2.83266 1.99276 2.6897L4.08479 0.596075C4.22775 0.453112 4.42155 0.373688 4.62328 0.373688H4.81549V3.42199H1.76878V3.22978L1.77037 3.22819Z"
+        fill="currentColor"></path>
+      <path
+        d="M9.90179 6.42898V6.47822L6.85191 7.73948L3.80202 6.47822V6.47663L6.85191 5.19949L9.90179 6.42898Z"
+        fill="currentColor"></path>
+      <path d="M6.34363 11.2453L3.80205 9.95065V7.48215L6.34363 8.56549V11.2453Z" fill="currentColor"></path>
+      <path
+        d="M7.35229 8.48767L9.89386 7.49963V8.59251C8.97572 9.03093 8.2752 9.849 7.99721 10.845L7.35229 11.1659V8.48767Z"
+        fill="currentColor"></path>
+      <path
+        d="M1.77513 4.94377V4.42275H5.07441C5.49377 4.42275 5.83529 4.07964 5.83529 3.66028V0.357819H11.1662C11.5872 0.357819 11.9271 0.699343 11.9271 1.12029V8.28276C11.7619 8.25894 11.5951 8.24782 11.4236 8.24782C11.252 8.24782 11.0836 8.26052 10.9168 8.28435V6.47189C10.9168 6.14784 10.7199 5.85715 10.4228 5.74437L7.11878 4.48311C6.94564 4.41639 6.75502 4.41639 6.58347 4.4847L3.27942 5.74595C2.98237 5.85874 2.7854 6.14943 2.7854 6.47189V10.1127C2.7854 10.405 2.94743 10.675 3.20635 10.8069L6.51039 12.4891C6.72484 12.5987 6.97741 12.5987 7.19185 12.4891L7.87808 12.1078C7.96227 13.1102 8.46264 13.995 9.20605 14.589L2.53442 14.6017C2.11347 14.6017 1.77354 14.2602 1.77354 13.8393H1.7656V4.94377H1.77354H1.77513Z"
+        fill="currentColor"></path>
+    </g>
+    <defs>
+      <clipPath id="clip0_48_55">
+        <rect width="15" height="16" fill="white" transform="matrix(-1 0 0 1 15 0)"></rect>
+      </clipPath>
+    </defs>
+  {:else}
+    <g clip-path="url(#clip0_48_54)">
+      <path
+        d="M1.1551 4.54258V3.29329C1.1551 3.06516 1.24909 2.84634 1.4155 2.68494L3.85622 0.322942C4.02264 0.161544 4.24914 0.0715332 4.48489 0.0715332H12.1075C12.5975 0.0715332 12.9951 0.456406 12.9951 0.93129V9.31314C12.8302 9.29141 12.6607 9.28055 12.4881 9.28055C12.3155 9.28055 12.1707 9.29141 12.0166 9.31003V1.81122C12.0166 1.39997 11.6853 1.06631 11.277 1.06631H6.09509V4.29272C6.09509 4.70242 5.76227 5.03763 5.35548 5.03763H2.14741V14.2373C2.14741 14.6486 2.4787 14.9823 2.88702 14.9823L9.36017 14.9698C9.60363 15.3625 9.9195 15.7054 10.2862 15.9801H2.04263C1.55264 15.9801 1.1551 15.5953 1.1551 15.1204V4.65742H1.14739V4.54258H1.1551ZM2.14741 4.04441H5.10894V1.06631H4.9225C4.72681 1.06631 4.53728 1.1439 4.39861 1.28357L2.36467 3.32898C2.22599 3.46866 2.14741 3.65799 2.14741 3.85508V4.04286V4.04441Z"
+        fill="currentColor"></path>
+      <path
+        d="M10.7701 10.6493C10.0228 11.1816 9.53739 12.0523 9.53739 13.0362C9.53739 14.6532 10.8502 15.9646 12.4712 15.9693C14.0891 15.9724 15.4512 14.6564 15.4543 13.0424C15.4543 12.0569 14.9319 11.1847 14.1862 10.6509C14.0475 10.5531 13.8549 10.5935 13.7717 10.7424L13.5837 11.0746C13.5143 11.1987 13.5467 11.3554 13.6623 11.4408C14.1538 11.8055 14.4681 12.3813 14.4681 13.0362C14.4681 14.1272 13.5852 15.0242 12.4773 15.0242C11.3695 15.0242 10.4789 14.1473 10.4866 13.0253C10.4896 12.4123 10.7793 11.821 11.294 11.4408C11.4095 11.3554 11.4403 11.1987 11.371 11.0761L11.183 10.744C11.0998 10.5981 10.9088 10.5531 10.7701 10.6524V10.6493ZM12.0028 13.1308V10.2924C12.0028 10.1356 12.1291 10.0084 12.2878 10.0084H12.6669C12.824 10.0084 12.9519 10.1356 12.9519 10.2924V13.1308C12.9519 13.2876 12.8256 13.4148 12.6669 13.4148H12.2878C12.1307 13.4148 12.0028 13.2876 12.0028 13.1308Z"
+        fill="currentColor"></path>
+      <path
+        d="M3.60968 6.32262L6.81466 5.09041C6.98108 5.02367 7.16598 5.02367 7.33393 5.08885L10.5389 6.32107C10.8271 6.43125 11.0181 6.7168 11.0181 7.03184V9.56921C10.6514 9.73061 10.277 10.0084 10.0243 10.2614V8.03592L7.5589 9.00121V11.6177L9.7839 10.505C9.37403 10.9659 9.18605 11.371 9.04429 11.9948L7.40481 12.9105C7.1968 13.0175 6.9518 13.0175 6.74379 12.9105L3.5388 11.267C3.28764 11.1397 3.13047 10.8744 3.13047 10.5888V7.03184C3.13047 6.71525 3.32154 6.4328 3.60968 6.32262ZM4.11508 10.4321L6.58045 11.6969V9.08036L4.11508 8.02196V10.4336V10.4321ZM4.11508 7.0396L7.07353 8.27181L10.032 7.0396V6.99149L7.07353 5.79187L4.11508 7.03805V7.0396Z"
+        fill="currentColor"></path>
+    </g>
+    <defs>
+      <clipPath id="clip0_48_54">
+        <rect width="14.5263" height="16" fill="white" transform="matrix(-1 0 0 1 15.5263 0)"></rect>
+      </clipPath>
+    </defs>
+  {/if}
+</svg>