From feead48bc6a0634318fe563ea3b04c1480954d16 Mon Sep 17 00:00:00 2001
From: Florent Benoit <fbenoit@redhat.com>
Date: Mon, 26 Feb 2024 13:25:21 +0100
Subject: [PATCH] chore(deps-dev): bump svelte-fa from 3.0.4 to 4.0.2

we were using as size parameter a pixel value while
it was not really planned by the library

now it enforces specific values
converted all px values to default em/x values

fixes https://github.com/containers/podman-desktop/pull/5555

Signed-off-by: Florent Benoit <fbenoit@redhat.com>
---
 packages/renderer/package.json                     |  2 +-
 .../src/lib/container/ContainerList.svelte         |  2 +-
 .../src/lib/dashboard/NotificationCardItem.svelte  |  4 ++--
 .../renderer/src/lib/dialogs/CustomPick.svelte     |  2 +-
 .../lib/featured/FeaturedExtensionDownload.svelte  |  2 +-
 .../src/lib/featured/FeaturedExtensions.svelte     |  4 ++--
 .../renderer/src/lib/feedback/SendFeedback.svelte  |  8 ++++----
 .../image/BuildImageFromContainerfileCard.svelte   |  6 +++---
 .../src/lib/image/ImageDetailsCheck.svelte         |  2 +-
 .../renderer/src/lib/image/PushImageModal.svelte   |  4 ++--
 .../renderer/src/lib/onboarding/Onboarding.svelte  |  2 +-
 .../src/lib/onboarding/OnboardingComponent.svelte  |  2 +-
 .../src/lib/pod/PodCreateFromContainers.svelte     |  2 +-
 .../src/lib/preferences/ExtensionIcon.svelte       |  2 +-
 .../PreferencesResourcesRendering.svelte           |  2 +-
 .../preferences/item-formats/EditableItem.svelte   |  6 +++---
 .../src/lib/task-manager/TaskManager.svelte        |  2 +-
 .../src/lib/task-manager/TaskManagerGroup.svelte   |  2 +-
 .../src/lib/task-manager/TaskManagerItem.svelte    |  4 ++--
 .../TroubleshootingDevToolsConsoleLogs.svelte      |  2 +-
 .../TroubleshootingGatherLogs.svelte               |  2 +-
 .../TroubleshootingPageStores.svelte               |  2 +-
 .../troubleshooting/TroubleshootingRepair.svelte   |  2 +-
 .../TroubleshootingRepairCleanup.svelte            |  4 ++--
 .../renderer/src/lib/ui/AuditMessageBox.svelte     |  6 +++---
 packages/renderer/src/lib/ui/Checkbox.svelte       |  8 ++++----
 packages/renderer/src/lib/ui/EmptyScreen.svelte    |  2 +-
 packages/renderer/src/lib/ui/ErrorMessage.svelte   |  4 ++--
 .../renderer/src/lib/ui/ListItemButtonIcon.svelte  | 14 ++++++++++++--
 packages/renderer/src/lib/ui/LoadingIcon.spec.ts   | 12 ++++++------
 packages/renderer/src/lib/ui/LoadingIcon.svelte    |  4 ++--
 packages/renderer/src/lib/ui/NavSection.svelte     |  2 +-
 .../renderer/src/lib/ui/ProviderResultPage.svelte  |  6 +++---
 packages/renderer/src/lib/ui/WarningMessage.svelte |  4 ++--
 packages/renderer/src/lib/webview/Webviews.svelte  |  2 +-
 .../renderer/src/lib/welcome/WelcomePage.svelte    |  2 +-
 .../LinuxControlButton.svelte                      |  4 ++--
 yarn.lock                                          |  8 ++++----
 38 files changed, 80 insertions(+), 70 deletions(-)

diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index 8fc01f42122..05499bc82ea 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -37,7 +37,7 @@
     "svelte": "4.2.12",
     "svelte-check": "^3.6.4",
     "svelte-eslint-parser": "^0.33.1",
-    "svelte-fa": "^3.0.4",
+    "svelte-fa": "^4.0.2",
     "svelte-preprocess": "^5.1.3",
     "svelte-steps": "2.4.1",
     "tailwindcss": "^3.4.1",
diff --git a/packages/renderer/src/lib/container/ContainerList.svelte b/packages/renderer/src/lib/container/ContainerList.svelte
index f392f1ebf5d..7c94d305917 100644
--- a/packages/renderer/src/lib/container/ContainerList.svelte
+++ b/packages/renderer/src/lib/container/ContainerList.svelte
@@ -497,7 +497,7 @@ function setStoppedFilter() {
                 class:rounded-bl-lg="{!containerGroup.expanded}"
                 on:click="{() => toggleContainerGroup(containerGroup)}">
                 <Fa
-                  size="12"
+                  size="0.8x"
                   class="text-gray-700 cursor-pointer"
                   icon="{containerGroup.expanded ? faChevronDown : faChevronRight}" />
               </td>
diff --git a/packages/renderer/src/lib/dashboard/NotificationCardItem.svelte b/packages/renderer/src/lib/dashboard/NotificationCardItem.svelte
index a14df969151..2dc1d1196b9 100644
--- a/packages/renderer/src/lib/dashboard/NotificationCardItem.svelte
+++ b/packages/renderer/src/lib/dashboard/NotificationCardItem.svelte
@@ -15,7 +15,7 @@ async function removeNotification(id: number) {
   <div class="flex flex-row">
     <div class="mr-3">
       {#if notification.type === 'info'}
-        <Fa size="24" class="text-purple-400" icon="{faCircleInfo}" />
+        <Fa size="1.5x" class="text-purple-400" icon="{faCircleInfo}" />
       {/if}
     </div>
     <div class="flex flex-col text-sm space-y-2">
@@ -32,7 +32,7 @@ async function removeNotification(id: number) {
     <button
       on:click="{() => removeNotification(notification.id)}"
       aria-label="{`Delete notification ${notification.id}`}">
-      <Fa size="16" icon="{faXmark}" />
+      <Fa size="1x" icon="{faXmark}" />
     </button>
   </div>
 </div>
diff --git a/packages/renderer/src/lib/dialogs/CustomPick.svelte b/packages/renderer/src/lib/dialogs/CustomPick.svelte
index d5df27f3571..5a29bca0a60 100644
--- a/packages/renderer/src/lib/dialogs/CustomPick.svelte
+++ b/packages/renderer/src/lib/dialogs/CustomPick.svelte
@@ -238,7 +238,7 @@ function dragMe(node: any) {
                           <div class="relative">
                             <div class="absolute right-0 mr-2 text-xl">
                               <button on:click="{() => setSectionVisibility((i / colsPerRow) * colsPerRow + j, true)}">
-                                <Fa size="14" icon="{faXmark}" />
+                                <Fa size="0.9x" icon="{faXmark}" />
                               </button>
                             </div>
                           </div>
diff --git a/packages/renderer/src/lib/featured/FeaturedExtensionDownload.svelte b/packages/renderer/src/lib/featured/FeaturedExtensionDownload.svelte
index 3d4171b14ed..042ff7c0e85 100644
--- a/packages/renderer/src/lib/featured/FeaturedExtensionDownload.svelte
+++ b/packages/renderer/src/lib/featured/FeaturedExtensionDownload.svelte
@@ -70,7 +70,7 @@ async function installExtension() {
   <span class="ml-0.5"></span>
   <LoadingIcon
     icon="{faDownload}"
-    iconSize="16"
+    iconSize="1x"
     loadingWidthClass="w-7"
     loadingHeightClass="h-7"
     positionTopClass="top-[2px]"
diff --git a/packages/renderer/src/lib/featured/FeaturedExtensions.svelte b/packages/renderer/src/lib/featured/FeaturedExtensions.svelte
index 93d73063290..e3b9fcf60c9 100644
--- a/packages/renderer/src/lib/featured/FeaturedExtensions.svelte
+++ b/packages/renderer/src/lib/featured/FeaturedExtensions.svelte
@@ -28,14 +28,14 @@ import FeaturedExtensionDownload from './FeaturedExtensionDownload.svelte';
           <div class="h-full w-18 flex flex-col items-end place-content-center">
             {#if featuredExtension.installed}
               <div class="text-dustypurple-700 p-1 text-center flex flex-row place-items-center">
-                <Fa class="ml-1.5 mr-2" size="18" icon="{faCheckCircle}" />
+                <Fa class="ml-1.5 mr-2" size="1.1x" icon="{faCheckCircle}" />
                 <div class="uppercase font-bold text-xs cursor-default">installed</div>
               </div>
             {:else if featuredExtension.fetchable}
               <FeaturedExtensionDownload featuredExtension="{featuredExtension}" />
             {:else}
               <div class="text-charcoal-300 p-1 text-center flex flex-row place-items-center">
-                <Fa class="ml-1.5 mr-1" size="18" icon="{faCircleXmark}" />
+                <Fa class="ml-1.5 mr-1" size="1.1x" icon="{faCircleXmark}" />
                 <div class="uppercase text-xs cursor-default font-extralight">N/A</div>
               </div>
             {/if}
diff --git a/packages/renderer/src/lib/feedback/SendFeedback.svelte b/packages/renderer/src/lib/feedback/SendFeedback.svelte
index 8c34e08d438..f4adf9a2f13 100644
--- a/packages/renderer/src/lib/feedback/SendFeedback.svelte
+++ b/packages/renderer/src/lib/feedback/SendFeedback.svelte
@@ -71,25 +71,25 @@ async function sendFeedback(): Promise<void> {
         <div class="flex space-x-4">
           <button aria-label="very-sad-smiley" on:click="{() => selectSmiley(1)}">
             <Fa
-              size="24"
+              size="1.5x"
               class="cursor-pointer {smileyRating === 1 ? 'text-violet-400' : 'text-gray-900'}"
               icon="{faFrown}" />
           </button>
           <button aria-label="sad-smiley" on:click="{() => selectSmiley(2)}">
             <Fa
-              size="24"
+              size="1.5x"
               class="cursor-pointer {smileyRating === 2 ? 'text-violet-400' : 'text-gray-900'}"
               icon="{faMeh}" />
           </button>
           <button aria-label="happy-smiley" on:click="{() => selectSmiley(3)}">
             <Fa
-              size="24"
+              size="1.5x"
               class="cursor-pointer {smileyRating === 3 ? 'text-violet-400' : 'text-gray-900'}"
               icon="{faSmile}" />
           </button>
           <button aria-label="very-happy-smiley" on:click="{() => selectSmiley(4)}">
             <Fa
-              size="24"
+              size="1.5x"
               class="cursor-pointer {smileyRating === 4 ? 'text-violet-400' : 'text-gray-900'}"
               icon="{faGrinStars}" />
           </button>
diff --git a/packages/renderer/src/lib/image/BuildImageFromContainerfileCard.svelte b/packages/renderer/src/lib/image/BuildImageFromContainerfileCard.svelte
index 8f61681757b..88d8739b993 100644
--- a/packages/renderer/src/lib/image/BuildImageFromContainerfileCard.svelte
+++ b/packages/renderer/src/lib/image/BuildImageFromContainerfileCard.svelte
@@ -86,13 +86,13 @@ onMount(() => {
       {#if !additionalItem}
         <Checkbox bind:checked="{checked}" on:click="{() => handleClick()}" />
       {:else}
-        <Fa class="text-dustypurple-700 cursor-pointer" icon="{faPlusCircle}" size="24" />
+        <Fa class="text-dustypurple-700 cursor-pointer" icon="{faPlusCircle}" size="1.5x" />
       {/if}
     </div>
     <div class="ml-2 text-sm text-left break-normal w-36">{title}</div>
     {#if isDefault}
       <Tooltip tip="Default platform of your computer">
-        <Fa size="7" class="text-dustypurple-700 cursor-pointer" icon="{faCircle}" />
+        <Fa size="0.5x" class="text-dustypurple-700 cursor-pointer" icon="{faCircle}" />
       </Tooltip>
     {/if}
   </div>
@@ -116,7 +116,7 @@ onMount(() => {
     </div>
     <div class="flex grow justify-end">
       {#if iconType === 'fontAwesome'}
-        <Fa class="text-white cursor-pointer" icon="{icon}" size="24" />
+        <Fa class="text-white cursor-pointer" icon="{icon}" size="1.5x" />
       {:else if iconType === 'unknown'}
         <svelte:component this="{icon}" class="text-gray-900 cursor-pointer" size="24" />
       {/if}
diff --git a/packages/renderer/src/lib/image/ImageDetailsCheck.svelte b/packages/renderer/src/lib/image/ImageDetailsCheck.svelte
index 50d62930ef0..b041dc88294 100644
--- a/packages/renderer/src/lib/image/ImageDetailsCheck.svelte
+++ b/packages/renderer/src/lib/image/ImageDetailsCheck.svelte
@@ -125,7 +125,7 @@ function handleAbort() {
 <ProviderResultPage providers="{providers}" results="{results}">
   <div class="flex flex-row" slot="header-info">
     <div class="w-full flex mb-4 space-x-4">
-      <Fa size="24" icon="{faStethoscope}" />
+      <Fa size="1.5x" icon="{faStethoscope}" />
       {#if aborted}
         <span>Image analysis canceled</span>
       {:else if remainingProviders > 0}
diff --git a/packages/renderer/src/lib/image/PushImageModal.svelte b/packages/renderer/src/lib/image/PushImageModal.svelte
index 4a7435c873c..dcd81a971fc 100644
--- a/packages/renderer/src/lib/image/PushImageModal.svelte
+++ b/packages/renderer/src/lib/image/PushImageModal.svelte
@@ -125,9 +125,9 @@ $: window.hasAuthconfigForImage(imageInfoToPush.name).then(result => (isAuthenti
       <div class="pb-4">
         <label for="modalImageTag" class="block mb-2 text-sm font-medium text-gray-400">Image tag</label>
         {#if isAuthenticatedForThisImage}
-          <Fa class="absolute mt-3 ml-1.5 text-green-300" size="16" icon="{faCheckCircle}" />
+          <Fa class="absolute mt-3 ml-1.5 text-green-300" size="1x" icon="{faCheckCircle}" />
         {:else}
-          <Fa class="absolute mt-3 ml-1.5 text-amber-500" size="16" icon="{faTriangleExclamation}" />
+          <Fa class="absolute mt-3 ml-1.5 text-amber-500" size="1x" icon="{faTriangleExclamation}" />
         {/if}
 
         <select
diff --git a/packages/renderer/src/lib/onboarding/Onboarding.svelte b/packages/renderer/src/lib/onboarding/Onboarding.svelte
index 095dbcfa179..d7a7c755253 100644
--- a/packages/renderer/src/lib/onboarding/Onboarding.svelte
+++ b/packages/renderer/src/lib/onboarding/Onboarding.svelte
@@ -334,7 +334,7 @@ function handleEscape({ key }: any) {
               class="flex flex-row text-xs items-center hover:underline"
               on:click="{() => setDisplayCancelSetup(true)}">
               <span class="mr-1">Skip this entire setup</span>
-              <Fa icon="{faForward}" size="12" />
+              <Fa icon="{faForward}" size="0.8x" />
             </button>
           </div>
         </div>
diff --git a/packages/renderer/src/lib/onboarding/OnboardingComponent.svelte b/packages/renderer/src/lib/onboarding/OnboardingComponent.svelte
index 9d40d5b2983..b11a02c9a48 100644
--- a/packages/renderer/src/lib/onboarding/OnboardingComponent.svelte
+++ b/packages/renderer/src/lib/onboarding/OnboardingComponent.svelte
@@ -60,7 +60,7 @@ onMount(() => {
       hideCloseButton="{true}" />
   {:else}
     <div aria-label="not supported warning" class="flex flex-row min-h-[500px] items-center justify-center">
-      <Fa size="18" class="flex text-amber-400 mr-3" icon="{faTriangleExclamation}" />
+      <Fa size="1.125x" class="flex text-amber-400 mr-3" icon="{faTriangleExclamation}" />
       <span>This extension does not provide a component of type "{component}"</span>
     </div>
   {/if}
diff --git a/packages/renderer/src/lib/pod/PodCreateFromContainers.svelte b/packages/renderer/src/lib/pod/PodCreateFromContainers.svelte
index 551f8f1978d..d249b277ad3 100644
--- a/packages/renderer/src/lib/pod/PodCreateFromContainers.svelte
+++ b/packages/renderer/src/lib/pod/PodCreateFromContainers.svelte
@@ -206,7 +206,7 @@ function updatePortExposure(port: number, checked: boolean) {
             <div class="bg-charcoal-600 border-t-2 border-amber-500 p-4 mb-2" role="alert" aria-label="warning">
               <div class="flex flex-row">
                 <div class="mr-3">
-                  <Fa size="18" class="text-amber-400" icon="{faTriangleExclamation}" />
+                  <Fa size="1.125x" class="text-amber-400" icon="{faTriangleExclamation}" />
                 </div>
                 <div class="flex flex-col">
                   <div class="text-sm text-amber-400">Possible runtime error</div>
diff --git a/packages/renderer/src/lib/preferences/ExtensionIcon.svelte b/packages/renderer/src/lib/preferences/ExtensionIcon.svelte
index e61ae8dcbe6..693f9490c1b 100644
--- a/packages/renderer/src/lib/preferences/ExtensionIcon.svelte
+++ b/packages/renderer/src/lib/preferences/ExtensionIcon.svelte
@@ -22,5 +22,5 @@ $: fade = extension.state !== 'started' ? ' brightness-50' : '';
 {#if icon}
   <img src="{icon}" alt="{extension.name}" class="max-w-10 max-h-10 {fade}" />
 {:else}
-  <Fa alt="{extension.name}" class="h-10 w-10 rounded-full text-violet-600 {fade}" size="25" icon="{faPuzzlePiece}" />
+  <Fa class="h-10 w-10 rounded-full text-violet-600 {fade}" size="1.6x" icon="{faPuzzlePiece}" />
 {/if}
diff --git a/packages/renderer/src/lib/preferences/PreferencesResourcesRendering.svelte b/packages/renderer/src/lib/preferences/PreferencesResourcesRendering.svelte
index 329ffe22e85..1b53ceb2234 100644
--- a/packages/renderer/src/lib/preferences/PreferencesResourcesRendering.svelte
+++ b/packages/renderer/src/lib/preferences/PreferencesResourcesRendering.svelte
@@ -433,7 +433,7 @@ function hasAnyConfiguration(provider: ProviderInfo) {
                           router.goto(`/preferences/default/preferences.${provider.extensionId}`);
                         }
                       }}">
-                      <Fa size="14" icon="{faGear}" />
+                      <Fa size="0.9x" icon="{faGear}" />
                     </Button>
                   {/if}
                 </div>
diff --git a/packages/renderer/src/lib/preferences/item-formats/EditableItem.svelte b/packages/renderer/src/lib/preferences/item-formats/EditableItem.svelte
index 5efb7f6a1ae..de3ecfdd626 100644
--- a/packages/renderer/src/lib/preferences/item-formats/EditableItem.svelte
+++ b/packages/renderer/src/lib/preferences/item-formats/EditableItem.svelte
@@ -78,14 +78,14 @@ function onCancelClick(e: MouseEvent) {
 
   {#if !editingInProgress}
     <Button on:click="{onSwitchToInProgress}" title="Edit" class="ml-1" padding="p-2" type="link">
-      <Fa size="12" icon="{faPencil}" />
+      <Fa size="0.8x" icon="{faPencil}" />
     </Button>
   {:else}
     <Button on:click="{onCancelClick}" title="Cancel" class="ml-3" padding="p-2" type="link">
-      <Fa size="14" class="text-red-500" icon="{faXmark}" />
+      <Fa size="0.9x" class="text-red-500" icon="{faXmark}" />
     </Button>
     <Button on:click="{onSaveClick}" title="Save" padding="p-2" disabled="{disableSaveButton}" type="link">
-      <Fa size="14" class="{`${disableSaveButton ? 'text-gray-500' : 'text-green-500'}`}" icon="{faCheck}" />
+      <Fa size="0.9x" class="{`${disableSaveButton ? 'text-gray-500' : 'text-green-500'}`}" icon="{faCheck}" />
     </Button>
   {/if}
 </div>
diff --git a/packages/renderer/src/lib/task-manager/TaskManager.svelte b/packages/renderer/src/lib/task-manager/TaskManager.svelte
index 9cb0b4118f4..78820c27cd6 100644
--- a/packages/renderer/src/lib/task-manager/TaskManager.svelte
+++ b/packages/renderer/src/lib/task-manager/TaskManager.svelte
@@ -73,7 +73,7 @@ window.events?.receive('toggle-task-manager', () => {
           </div>
           -->
           <button on:click="{() => hide()}" title="Hide (Escape)" class="cursor-pointer hover:bg-charcoal-600 p-1 ml-1">
-            <Fa icon="{faChevronDown}" size="15" />
+            <Fa icon="{faChevronDown}" size="0.9x" />
           </button>
         </div>
       </div>
diff --git a/packages/renderer/src/lib/task-manager/TaskManagerGroup.svelte b/packages/renderer/src/lib/task-manager/TaskManagerGroup.svelte
index 67960e32e26..aa9fbf07108 100644
--- a/packages/renderer/src/lib/task-manager/TaskManagerGroup.svelte
+++ b/packages/renderer/src/lib/task-manager/TaskManagerGroup.svelte
@@ -19,7 +19,7 @@ let lastItem = (a: unknown[], i: number) => i === a.length - 1;
   <div class="flex flex-row items-center w-full flex-nowrap">
     <hr class="w-3 h-[2px] my-3 {lineColor} border-0" />
     <div class="flex mx-2 flex-row items-center">
-      <Fa class="mr-1 text-purple-200" size="7" icon="{icon}" />
+      <Fa class="mr-1 text-purple-200" size="0.45x" icon="{icon}" />
       <div class="flex-nowrap uppercase font-bold text-xs">{title} ({tasks.length})</div>
     </div>
     <hr class="flex-grow flex w-max h-[2px] {lineColor} border-0" />
diff --git a/packages/renderer/src/lib/task-manager/TaskManagerItem.svelte b/packages/renderer/src/lib/task-manager/TaskManagerItem.svelte
index 0fe3fc7c58f..a97023892ee 100644
--- a/packages/renderer/src/lib/task-manager/TaskManagerItem.svelte
+++ b/packages/renderer/src/lib/task-manager/TaskManagerItem.svelte
@@ -58,7 +58,7 @@ function gotoTask(taskUI: StatefulTaskUI) {
 <div class="flex flew-row w-full py-2">
   <!-- first column is the icon-->
   <div class="flex w-3 {iconColor} justify-center">
-    <Fa size="14" icon="{icon}" />
+    <Fa size="0.875x" icon="{icon}" />
   </div>
   <!-- second column is about the task-->
   <div class="flex flex-col w-full pl-2">
@@ -71,7 +71,7 @@ function gotoTask(taskUI: StatefulTaskUI) {
           <button
             title="Clear notification"
             class="hover:bg-charcoal-800 hover:text-purple-500"
-            on:click="{() => closeCompleted(taskUI)}"><Fa size="12" icon="{faClose}" /></button>
+            on:click="{() => closeCompleted(taskUI)}"><Fa size="0.75x" icon="{faClose}" /></button>
         {/if}
       </div>
     </div>
diff --git a/packages/renderer/src/lib/troubleshooting/TroubleshootingDevToolsConsoleLogs.svelte b/packages/renderer/src/lib/troubleshooting/TroubleshootingDevToolsConsoleLogs.svelte
index 0b3bbb6cd4c..dcaee349ff8 100644
--- a/packages/renderer/src/lib/troubleshooting/TroubleshootingDevToolsConsoleLogs.svelte
+++ b/packages/renderer/src/lib/troubleshooting/TroubleshootingDevToolsConsoleLogs.svelte
@@ -26,7 +26,7 @@ function copyLogsToClipboard() {
 
 <div class="flex flex-col w-full m-4 bg-charcoal-600 p-4 rounded-lg">
   <div class="flex flex-row align-middle items-center w-full mb-4">
-    <Fa size="30" class="pr-3 text-gray-700" icon="{faFileLines}" />
+    <Fa size="1.875x" class="pr-3 text-gray-700" icon="{faFileLines}" />
     <div class="text-xl">Logs</div>
     <div class="flex flex-1 justify-end">
       <button title="Copy To Clipboard" class="ml-5" on:click="{() => copyLogsToClipboard()}"
diff --git a/packages/renderer/src/lib/troubleshooting/TroubleshootingGatherLogs.svelte b/packages/renderer/src/lib/troubleshooting/TroubleshootingGatherLogs.svelte
index ec758defaaa..3827439c901 100644
--- a/packages/renderer/src/lib/troubleshooting/TroubleshootingGatherLogs.svelte
+++ b/packages/renderer/src/lib/troubleshooting/TroubleshootingGatherLogs.svelte
@@ -17,7 +17,7 @@ async function saveLogsAsZip() {
 
 <div class="flex flex-col w-full m-4 bg-charcoal-600 p-4 rounded-lg">
   <div class="flex flex-row align-middle items-center w-full">
-    <Fa size="30" class="pr-3 text-gray-700" icon="{faFileLines}" />
+    <Fa size="1.875x" class="pr-3 text-gray-700" icon="{faFileLines}" />
     <div class="text-xl">Gather Log Files</div>
     <div class="flex flex-1 justify-end"></div>
   </div>
diff --git a/packages/renderer/src/lib/troubleshooting/TroubleshootingPageStores.svelte b/packages/renderer/src/lib/troubleshooting/TroubleshootingPageStores.svelte
index f23991bbbc6..e94b07cf047 100644
--- a/packages/renderer/src/lib/troubleshooting/TroubleshootingPageStores.svelte
+++ b/packages/renderer/src/lib/troubleshooting/TroubleshootingPageStores.svelte
@@ -27,7 +27,7 @@ onDestroy(() => {
 
 <div class="flex w-full h-fit m-4 flex-col bg-charcoal-600 p-4 rounded-lg">
   <div class="flex flex-row align-middle items-center w-full mb-4">
-    <Fa size="30" class="pr-3 text-gray-700" icon="{faDatabase}" />
+    <Fa size="1.875x" class="pr-3 text-gray-700" icon="{faDatabase}" />
     <div role="status" aria-label="stores" class="text-xl">Stores</div>
   </div>
 
diff --git a/packages/renderer/src/lib/troubleshooting/TroubleshootingRepair.svelte b/packages/renderer/src/lib/troubleshooting/TroubleshootingRepair.svelte
index adcaee310ef..b64849fff36 100644
--- a/packages/renderer/src/lib/troubleshooting/TroubleshootingRepair.svelte
+++ b/packages/renderer/src/lib/troubleshooting/TroubleshootingRepair.svelte
@@ -9,7 +9,7 @@ export let providers: ProviderInfo[] = [];
 
 <div class="flex flex-col w-full bg-charcoal-600 p-4 rounded-lg">
   <div class="flex flex-row w-full pb-2 items-center">
-    <Fa size="24" class="pr-2 text-gray-700" icon="{faWrench}" />
+    <Fa size="1.5x" class="pr-2 text-gray-700" icon="{faWrench}" />
     <div class="text-xl" aria-label="Repair">Repair</div>
   </div>
 
diff --git a/packages/renderer/src/lib/troubleshooting/TroubleshootingRepairCleanup.svelte b/packages/renderer/src/lib/troubleshooting/TroubleshootingRepairCleanup.svelte
index 3669f10125c..dd945c82a84 100644
--- a/packages/renderer/src/lib/troubleshooting/TroubleshootingRepairCleanup.svelte
+++ b/packages/renderer/src/lib/troubleshooting/TroubleshootingRepairCleanup.svelte
@@ -47,7 +47,7 @@ async function cleanup() {
   <div>
     <div class="text-gray-700 flex flex-row items-center">Clean / Purge data</div>
     <div class="text-gray-900 text-sm flex flex-row items-center pt-1">
-      <Fa class="pr-1" size="9" icon="{faWarning}" />Proceeding with this action may result in data loss, including
+      <Fa class="pr-1" size="0.8x" icon="{faWarning}" />Proceeding with this action may result in data loss, including
       existing volumes, containers, images, etc.
     </div>
   </div>
@@ -64,7 +64,7 @@ async function cleanup() {
   <div>
     {#if cleanupFailures.length > 0}
       <div class="text-red-500 text-xs flex flex-row items-center" role="alert" aria-label="error">
-        <Fa class="pr-1" size="9" icon="{faWarning}" />{cleanupFailures.length} failures
+        <Fa class="pr-1" size="1x" icon="{faWarning}" />{cleanupFailures.length} failures
       </div>
     {/if}
   </div>
diff --git a/packages/renderer/src/lib/ui/AuditMessageBox.svelte b/packages/renderer/src/lib/ui/AuditMessageBox.svelte
index 926eccde1ca..cb466e36efb 100644
--- a/packages/renderer/src/lib/ui/AuditMessageBox.svelte
+++ b/packages/renderer/src/lib/ui/AuditMessageBox.svelte
@@ -19,7 +19,7 @@ $: errorRecords = auditResult?.records.filter(record => record.type === 'error')
     <div class="bg-charcoal-600 border-t-2 border-red-500 p-4 mb-2" role="alert" aria-label="error">
       <div class="flex flex-row">
         <div class="mr-3">
-          <Fa size="18" class="text-red-400" icon="{faXmarkCircle}" />
+          <Fa size="1.1x" class="text-red-400" icon="{faXmarkCircle}" />
         </div>
         <div class="text-sm text-white">
           {record.record}
@@ -34,7 +34,7 @@ $: errorRecords = auditResult?.records.filter(record => record.type === 'error')
     <div class="bg-charcoal-600 border-t-2 border-amber-500 p-4 mb-2" role="alert" aria-label="warning">
       <div class="flex flex-row">
         <div class="mr-3">
-          <Fa size="18" class="flex text-amber-400" icon="{faTriangleExclamation}" />
+          <Fa size="1.1x" class="flex text-amber-400" icon="{faTriangleExclamation}" />
         </div>
         <div class="text-sm text-white">
           {record.record}
@@ -49,7 +49,7 @@ $: errorRecords = auditResult?.records.filter(record => record.type === 'error')
     <div class="bg-charcoal-600 border-t-2 border-purple-500 p-4 mb-2" role="alert" aria-label="info">
       <div class="flex flex-row">
         <div class="mr-3">
-          <Fa size="18" class="text-purple-500" icon="{faCircleInfo}" />
+          <Fa size="1.1x" class="text-purple-500" icon="{faCircleInfo}" />
         </div>
         <div class="text-sm text-white">
           {record.record}
diff --git a/packages/renderer/src/lib/ui/Checkbox.svelte b/packages/renderer/src/lib/ui/Checkbox.svelte
index 86b3dced281..b9a739272f7 100644
--- a/packages/renderer/src/lib/ui/Checkbox.svelte
+++ b/packages/renderer/src/lib/ui/Checkbox.svelte
@@ -37,13 +37,13 @@ function onClick(checked: boolean) {
     class:cursor-pointer="{!disabled}"
     class:cursor-not-allowed="{disabled}">
     {#if disabled}
-      <Fa size="18" icon="{faSquare}" class="text-charcoal-300" />
+      <Fa size="1.1x" icon="{faSquare}" class="text-charcoal-300" />
     {:else if indeterminate}
-      <Fa size="18" icon="{faMinusSquare}" class="text-dustypurple-500" />
+      <Fa size="1.1x" icon="{faMinusSquare}" class="text-dustypurple-500" />
     {:else if checked}
-      <Fa size="18" icon="{faCheckSquare}" class="text-purple-500" />
+      <Fa size="1.1x" icon="{faCheckSquare}" class="text-purple-500" />
     {:else}
-      <Fa size="18" icon="{faOutlineSquare}" class="text-gray-400" />
+      <Fa size="1.1x" icon="{faOutlineSquare}" class="text-gray-400" />
     {/if}
   </div>
 </label>
diff --git a/packages/renderer/src/lib/ui/EmptyScreen.svelte b/packages/renderer/src/lib/ui/EmptyScreen.svelte
index 3b839d01986..83fc317ea27 100644
--- a/packages/renderer/src/lib/ui/EmptyScreen.svelte
+++ b/packages/renderer/src/lib/ui/EmptyScreen.svelte
@@ -39,7 +39,7 @@ let copyTextDivElement: HTMLDivElement;
     <div class="flex justify-center text-gray-700 py-2">
       {#if processed}
         {#if fontAwesomeIcon}
-          <Fa icon="{icon}" size="55" />
+          <Fa icon="{icon}" size="4x" />
         {:else}
           <svelte:component this="{icon}" size="55" solid="{false}" />
         {/if}
diff --git a/packages/renderer/src/lib/ui/ErrorMessage.svelte b/packages/renderer/src/lib/ui/ErrorMessage.svelte
index d286e2497a5..f9cf3c87e9e 100644
--- a/packages/renderer/src/lib/ui/ErrorMessage.svelte
+++ b/packages/renderer/src/lib/ui/ErrorMessage.svelte
@@ -10,14 +10,14 @@ export let icon = false;
 {#if icon}
   {#if error !== undefined && error !== ''}
     <Tooltip tip="{error}" top>
-      <Fa size="18" class="cursor-pointer text-red-500 {$$props.class}" icon="{faExclamationCircle}" />
+      <Fa size="1.1x" class="cursor-pointer text-red-500 {$$props.class}" icon="{faExclamationCircle}" />
     </Tooltip>
   {/if}
 {:else}
   <div
     class="text-red-500 p-1 flex flex-row items-center {$$props.class}"
     class:opacity-0="{error === undefined || error === ''}">
-    <Fa size="18" class="cursor-pointer text-red-500" icon="{faExclamationCircle}" />
+    <Fa size="1.1x" class="cursor-pointer text-red-500" icon="{faExclamationCircle}" />
     <div role="alert" aria-label="Error Message Content" class="ml-2">{error}</div>
   </div>
 {/if}
diff --git a/packages/renderer/src/lib/ui/ListItemButtonIcon.svelte b/packages/renderer/src/lib/ui/ListItemButtonIcon.svelte
index 9631bf98e75..13a3df6984e 100644
--- a/packages/renderer/src/lib/ui/ListItemButtonIcon.svelte
+++ b/packages/renderer/src/lib/ui/ListItemButtonIcon.svelte
@@ -2,7 +2,7 @@
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import DropdownMenuItem from './DropDownMenuItem.svelte';
 import Fa from 'svelte-fa';
-import { onDestroy } from 'svelte';
+import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/motion';
 import type { ContextUI } from '../context/context';
 import { context as storeContext } from '/@/stores/context';
@@ -10,6 +10,7 @@ import { ContextKeyExpr } from '../context/contextKey';
 
 export let title: string;
 export let icon: IconDefinition | string;
+export let fontAwesomeIcon: IconDefinition | undefined = undefined;
 export let hidden = false;
 export let disabledWhen = '';
 export let enabled: boolean = true;
@@ -57,6 +58,12 @@ function computeEnabled() {
   enabled = !disabled;
 }
 
+onMount(() => {
+  if ((icon as IconDefinition)?.prefix?.startsWith('fa')) {
+    fontAwesomeIcon = icon as IconDefinition;
+  }
+});
+
 onDestroy(() => {
   // unsubscribe from the store
   if (contextsUnsubscribe) {
@@ -116,7 +123,10 @@ $: styleClass = detailed
     class:disabled="{inProgress}"
     class:hidden="{hidden}"
     disabled="{!enabled}">
-    <Fa class="h-4 w-4 {iconOffset}" icon="{icon}" />
+    {#if fontAwesomeIcon}
+      <Fa class="h-4 w-4 {iconOffset}" icon="{fontAwesomeIcon}" />
+    {/if}
+
     <div
       aria-label="spinner"
       class="w-6 h-6 rounded-full animate-spin border border-solid border-violet-500 border-t-transparent absolute {positionTopClass} {positionLeftClass}"
diff --git a/packages/renderer/src/lib/ui/LoadingIcon.spec.ts b/packages/renderer/src/lib/ui/LoadingIcon.spec.ts
index 14b596c57ca..74900ccbd55 100644
--- a/packages/renderer/src/lib/ui/LoadingIcon.spec.ts
+++ b/packages/renderer/src/lib/ui/LoadingIcon.spec.ts
@@ -29,7 +29,7 @@ test('Expect default size', async () => {
   const positionTopClass = '';
   const positionLeftClass = '';
   const loading = true;
-  const iconSize = '';
+  const iconSize = undefined;
   render(LoadingIcon, {
     icon,
     iconSize,
@@ -42,8 +42,8 @@ test('Expect default size', async () => {
   const loadingIcon = screen.getByRole('img', { hidden: true, name: '' });
   expect(loadingIcon).toBeInTheDocument();
 
-  // check the font-size attribute of the loading icon is not set
-  expect(loadingIcon).toHaveAttribute('style', expect.not.stringContaining('font-size'));
+  // check the style attribute of the loading icon is not set
+  expect(loadingIcon).not.toHaveAttribute('style');
 });
 
 test('Expect specified size', async () => {
@@ -53,7 +53,7 @@ test('Expect specified size', async () => {
   const positionTopClass = '';
   const positionLeftClass = '';
   const loading = true;
-  const iconSize = '20';
+  const iconSize = '2x';
   render(LoadingIcon, {
     icon,
     iconSize,
@@ -66,6 +66,6 @@ test('Expect specified size', async () => {
   const loadingIcon = screen.getByRole('img', { hidden: true, name: '' });
   expect(loadingIcon).toBeInTheDocument();
 
-  // check the font-size attribute of the loading icon is set to 20
-  expect(loadingIcon).toHaveAttribute('style', expect.stringContaining('font-size:20;'));
+  // check the font-size attribute of the loading icon is set to 2em
+  expect(loadingIcon).toHaveAttribute('style', expect.stringContaining('font-size: 2em;'));
 });
diff --git a/packages/renderer/src/lib/ui/LoadingIcon.svelte b/packages/renderer/src/lib/ui/LoadingIcon.svelte
index e1ce82ff1d0..e98dad9e165 100644
--- a/packages/renderer/src/lib/ui/LoadingIcon.svelte
+++ b/packages/renderer/src/lib/ui/LoadingIcon.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
-import Fa from 'svelte-fa';
+import { Fa, type IconSize } from 'svelte-fa';
 
 export let icon: IconDefinition;
 export let loadingWidthClass: string;
@@ -8,7 +8,7 @@ export let loadingHeightClass: string;
 export let positionTopClass: string;
 export let positionLeftClass: string;
 export let loading = false;
-export let iconSize = '';
+export let iconSize: IconSize | undefined = undefined;
 </script>
 
 <div>
diff --git a/packages/renderer/src/lib/ui/NavSection.svelte b/packages/renderer/src/lib/ui/NavSection.svelte
index 3e7bb301ea7..9b0df897521 100644
--- a/packages/renderer/src/lib/ui/NavSection.svelte
+++ b/packages/renderer/src/lib/ui/NavSection.svelte
@@ -62,7 +62,7 @@ onMount(() => {
             <slot name="icon" />
           </div>
         {/if}
-        <Fa size="12" icon="{expanded ? faChevronUp : faChevronDown}" />
+        <Fa size="0.8x" icon="{expanded ? faChevronUp : faChevronDown}" />
       </div>
     </Tooltip>
   </button>
diff --git a/packages/renderer/src/lib/ui/ProviderResultPage.svelte b/packages/renderer/src/lib/ui/ProviderResultPage.svelte
index 3648f46f393..6c7b192ea65 100644
--- a/packages/renderer/src/lib/ui/ProviderResultPage.svelte
+++ b/packages/renderer/src/lib/ui/ProviderResultPage.svelte
@@ -157,12 +157,12 @@ function onSeverityClicked(severity: 'critical' | 'high' | 'medium' | 'low' | 's
             {/if}
             {#if provider.state === 'failed'}
               <span class="text-red-600 mt-1">
-                <Fa size="18" icon="{faExclamationTriangle}" />
+                <Fa size="1.1x" icon="{faExclamationTriangle}" />
               </span>
             {/if}
             {#if provider.state === 'canceled'}
               <span class="text-gray-500">
-                <Fa size="18" icon="{faCircleMinus}" />
+                <Fa size="1.1x" icon="{faCircleMinus}" />
               </span>
             {/if}
             {#if provider.state === 'success'}
@@ -197,7 +197,7 @@ function onSeverityClicked(severity: 'critical' | 'high' | 'medium' | 'low' | 's
               class:text-gray-800="{result.check.severity === 'medium'}"
               class:text-gray-500="{result.check.severity === 'low'}"
               class:text-green-500="{result.check.status === 'success'}"
-              ><Fa size="18" class="mt-1" icon="{getIcon(result.check)}" />
+              ><Fa size="1.1x" class="mt-1" icon="{getIcon(result.check)}" />
             </span>
             <div class="font-bold">{result.check.name}</div>
             <div class="text-gray-900 text-sm grow text-right">Reported by {result.provider.label}</div>
diff --git a/packages/renderer/src/lib/ui/WarningMessage.svelte b/packages/renderer/src/lib/ui/WarningMessage.svelte
index da8e888ef94..f7b39a8b95f 100644
--- a/packages/renderer/src/lib/ui/WarningMessage.svelte
+++ b/packages/renderer/src/lib/ui/WarningMessage.svelte
@@ -10,14 +10,14 @@ export let icon = false;
 {#if icon}
   {#if error !== undefined && error !== ''}
     <Tooltip tip="{error}" top>
-      <Fa size="18" class="cursor-pointer text-amber-500" icon="{faTriangleExclamation}" />
+      <Fa size="1.125x" class="cursor-pointer text-amber-500" icon="{faTriangleExclamation}" />
     </Tooltip>
   {/if}
 {:else}
   <div
     class="text-amber-500 p-1 flex flex-row items-center {$$props.class}"
     class:opacity-0="{error === undefined || error === ''}">
-    <Fa size="18" class="cursor-pointer text-amber-500" icon="{faTriangleExclamation}" />
+    <Fa size="1.125x" class="cursor-pointer text-amber-500" icon="{faTriangleExclamation}" />
     <div role="alert" aria-label="Warning Message Content" class="ml-2">{error}</div>
   </div>
 {/if}
diff --git a/packages/renderer/src/lib/webview/Webviews.svelte b/packages/renderer/src/lib/webview/Webviews.svelte
index f8aaa44ccaf..bfd4b8f65aa 100644
--- a/packages/renderer/src/lib/webview/Webviews.svelte
+++ b/packages/renderer/src/lib/webview/Webviews.svelte
@@ -12,7 +12,7 @@ export let meta: TinroRouteMeta;
 {#each $webviews as webview}
   <NavItem href="/webviews/{webview.id}" bind:meta="{meta}" tooltip="{webview.name}">
     {#if !webview.icon}
-      <Fa icon="{faPuzzlePiece}" size="24" />
+      <Fa icon="{faPuzzlePiece}" size="1.5x" />
     {:else}
       <IconImage image="{webview?.icon}" alt="{webview.name}" class="max-h-6 max-w-[24px]" />
     {/if}
diff --git a/packages/renderer/src/lib/welcome/WelcomePage.svelte b/packages/renderer/src/lib/welcome/WelcomePage.svelte
index 4034307a7d3..91a57bcf84f 100644
--- a/packages/renderer/src/lib/welcome/WelcomePage.svelte
+++ b/packages/renderer/src/lib/welcome/WelcomePage.svelte
@@ -111,7 +111,7 @@ function closeWelcome() {
             <div
               class="w-4 h-4 rounded border-2 border-gray-700 peer peer-checked:bg-violet-500 peer-checked:border-violet-500">
             </div>
-            <Fa class="w-4 h-4 absolute text-zinc-700" size="10" icon="{faCheck}" />
+            <Fa class="w-4 h-4 absolute text-zinc-700" size="0.6x" icon="{faCheck}" />
             <span class="font-medium font-bold px-2">Telemetry:</span>
           </label>
           <div class="w-2/5 text-gray-400">
diff --git a/packages/renderer/src/lib/window-control-buttons/LinuxControlButton.svelte b/packages/renderer/src/lib/window-control-buttons/LinuxControlButton.svelte
index 9ca6b9a4f8c..030e613fc0e 100644
--- a/packages/renderer/src/lib/window-control-buttons/LinuxControlButton.svelte
+++ b/packages/renderer/src/lib/window-control-buttons/LinuxControlButton.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-import Fa from 'svelte-fa';
+import Fa, { type IconSize } from 'svelte-fa';
 import { onMount } from 'svelte';
 import { faMinus, faXmark, type IconDefinition } from '@fortawesome/free-solid-svg-icons';
 import { faSquare } from '@fortawesome/free-regular-svg-icons';
 
-const iconSize = '14';
+const iconSize: IconSize | undefined = '0.875x';
 
 export let name: string;
 export let action: () => void = () => {};
diff --git a/yarn.lock b/yarn.lock
index 0e11e577b72..5bc1990fbd3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15191,10 +15191,10 @@ svelte-check@^3.6.4:
     postcss "^8.4.29"
     postcss-scss "^4.0.8"
 
-svelte-fa@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/svelte-fa/-/svelte-fa-3.0.4.tgz#22543b801950fe4a9a801ba8d4769a53d80c0782"
-  integrity sha512-y04vEuAoV1wwVDItSCzPW7lzT6v1bj/y1p+W1V+NtIMpQ+8hj8MBkx7JFD7JHSnalPU1QiI8BVfguqheEA3nPg==
+svelte-fa@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/svelte-fa/-/svelte-fa-4.0.2.tgz#f73aab661bf1758d726f06db321f0ffb8e2f40d6"
+  integrity sha512-lza8Jfii6jcpMQB73mBStONxaLfZsUS+rKJ/hH6WxsHUd+g68+oHIL9yQTk4a0uY9HQk78T/CPvQnED0msqJfg==
 
 svelte-hmr@^0.15.3:
   version "0.15.3"