fix(ui): global align icons style (#1615)

libs/domains/clusters/feature/src/lib/cluster-action-toolbar/cluster-action-toolbar.tsx

@@ -43,7 +43,7 @@ function MenuManageDeployment({ cluster, clusterStatus }: { cluster: Cluster; cl
   const tooltipClusterNeedUpdate = displayYellowColor && (
     <Tooltip side="bottom" content="Configuration has changed and needs to be applied">
       <div className="absolute right-2">
-        <Icon iconName="circle-exclamation" />
+        <Icon iconName="circle-exclamation" iconStyle="regular" />
       </div>
     </Tooltip>
   )

libs/domains/clusters/feature/src/lib/cluster-delete-modal/__snapshots__/cluster-delete-modal.spec.tsx.snap

@@ -222,7 +222,7 @@ exports[`ClusterDeleteModal should match snapshot 1`] = `
             >
               <i
                 aria-hidden="true"
-                class="fa-solid fa-triangle-exclamation "
+                class="fa-regular fa-triangle-exclamation "
               />
             </div>
             <div

libs/domains/clusters/feature/src/lib/cluster-delete-modal/cluster-delete-modal.tsx

@@ -171,7 +171,7 @@ export function ClusterDeleteModal({ cluster }: ClusterDeleteModalProps) {
                 {cluster.is_demo && (
                   <Callout.Root className="mt-3 text-xs" color="sky">
                     <Callout.Icon>
-                      <Icon iconName="info-circle" iconStyle="light" />
+                      <Icon iconName="info-circle" iconStyle="regular" />
                     </Callout.Icon>
                     <Callout.Text>
                       <p>The best way to delete your cluster is via our CLI!</p>
@@ -222,7 +222,7 @@ export function ClusterDeleteModal({ cluster }: ClusterDeleteModalProps) {
           {kubernetes !== 'SELF_MANAGED' && clusterDeleteMode !== ClusterDeleteMode.DELETE_QOVERY_CONFIG && (
             <Callout.Root className="mt-3 text-xs" color="yellow">
               <Callout.Icon>
-                <Icon iconName="triangle-exclamation" />
+                <Icon iconName="triangle-exclamation" iconStyle="regular" />
               </Callout.Icon>
               <Callout.Text>
                 <p>Please note that you will have to manually delete on your cloud account:</p>

libs/domains/clusters/feature/src/lib/cluster-installation-guide-modal/cluster-installation-guide-modal.tsx

@@ -28,7 +28,7 @@ export function ClusterInstallationGuideModal({ cluster, type, onClose }: Cluste
         {type === 'ON_PREMISE' && (
           <Callout.Root color="sky">
             <Callout.Icon>
-              <Icon iconName="circle-info" />
+              <Icon iconName="circle-info" iconStyle="regular" />
             </Callout.Icon>
             <Callout.Text className="text-xs">
               This cluster has been created via Qovery CLI.
@@ -76,7 +76,7 @@ export function ClusterInstallationGuideModal({ cluster, type, onClose }: Cluste
       {type === 'MANAGED' && (
         <Callout.Root color="sky">
           <Callout.Icon>
-            <Icon iconName="circle-info" />
+            <Icon iconName="circle-info" iconStyle="regular" />
           </Callout.Icon>
           <Callout.Text className="text-xs">
             Note: You can access again this installation guide and the configuration file by opening the “Installation

libs/domains/organizations/feature/src/lib/git-token-list/__snapshots__/git-token-list.spec.tsx.snap

@@ -80,23 +80,23 @@ exports[`GitTokenList should match snapshot 1`] = `
                 </span>
                 <i
                   aria-hidden="true"
-                  class="fa-solid fa-layer-group "
+                  class="fa-regular fa-layer-group "
                 />
               </button>
               <button
                 class="inline-flex items-center shrink-0 font-medium transition focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none outline-brand-500 text-sm h-9 px-3 rounded border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none bg-neutral-100 dark:bg-neutral-500 hover:[&:not(:active):not(:disabled)]:bg-white dark:hover:[&:not(:active):not(:disabled)]:bg-neutral-400 mr-2"
               >
                 <i
                   aria-hidden="true"
-                  class="fa-solid fa-gear "
+                  class="fa-regular fa-gear "
                 />
               </button>
               <button
                 class="inline-flex items-center shrink-0 font-medium transition focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none outline-brand-500 text-sm h-9 px-3 rounded border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none bg-neutral-100 dark:bg-neutral-500 hover:[&:not(:active):not(:disabled)]:bg-white dark:hover:[&:not(:active):not(:disabled)]:bg-neutral-400"
               >
                 <i
                   aria-hidden="true"
-                  class="fa-solid fa-trash "
+                  class="fa-regular fa-trash-can "
                 />
               </button>
             </div>
@@ -172,23 +172,23 @@ exports[`GitTokenList should match snapshot 1`] = `
                 </span>
                 <i
                   aria-hidden="true"
-                  class="fa-solid fa-layer-group "
+                  class="fa-regular fa-layer-group "
                 />
               </button>
               <button
                 class="inline-flex items-center shrink-0 font-medium transition focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none outline-brand-500 text-sm h-9 px-3 rounded border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none bg-neutral-100 dark:bg-neutral-500 hover:[&:not(:active):not(:disabled)]:bg-white dark:hover:[&:not(:active):not(:disabled)]:bg-neutral-400 mr-2"
               >
                 <i
                   aria-hidden="true"
-                  class="fa-solid fa-gear "
+                  class="fa-regular fa-gear "
                 />
               </button>
               <button
                 class="inline-flex items-center shrink-0 font-medium transition focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none outline-brand-500 text-sm h-9 px-3 rounded border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none bg-neutral-100 dark:bg-neutral-500 hover:[&:not(:active):not(:disabled)]:bg-white dark:hover:[&:not(:active):not(:disabled)]:bg-neutral-400"
               >
                 <i
                   aria-hidden="true"
-                  class="fa-solid fa-trash "
+                  class="fa-regular fa-trash-can "
                 />
               </button>
             </div>

libs/domains/organizations/feature/src/lib/git-token-list/git-token-list.tsx

@@ -43,7 +43,7 @@ export function GitTokenList() {
                     {gitToken.description && (
                       <Tooltip content={gitToken.description}>
                         <span className="ml-1 cursor-pointer">
-                          <Icon iconName="circle-info" className="ml-1 cursor-pointer text-neutral-350" />
+                          <Icon iconName="circle-info" iconStyle="regular" className="ml-1 cursor-pointer" />
                         </span>
                       </Tooltip>
                     )}
@@ -91,7 +91,7 @@ export function GitTokenList() {
                   <span className="absolute -right-1 -top-1 flex h-3 w-3 items-center justify-center rounded-full bg-brand-500 text-3xs font-bold leading-[0] text-white">
                     {gitToken.associated_services_count}
                   </span>
-                  <Icon iconName="layer-group" />
+                  <Icon iconName="layer-group" iconStyle="regular" />
                 </Button>
                 <Button
                   variant="surface"
@@ -111,7 +111,7 @@ export function GitTokenList() {
                     })
                   }}
                 >
-                  <Icon iconName="gear" />
+                  <Icon iconName="gear" iconStyle="regular" />
                 </Button>
                 <Button
                   variant="surface"
@@ -132,7 +132,7 @@ export function GitTokenList() {
                     })
                   }}
                 >
-                  <Icon iconName="trash" />
+                  <Icon iconName="trash-can" iconStyle="regular" />
                 </Button>
               </div>
             </li>

libs/domains/service-helm/feature/src/lib/networking-setting/networking-setting.tsx

@@ -65,9 +65,9 @@ export function NetworkingSetting({ ports, onUpdatePorts, isSetting = false, chi
           title="Networking"
           description="You can expose publicly over HTTP/gRPC the Kubernetes services deployed."
         >
-          <Button className="gap-2" size="lg" variant="solid" color="brand" onClick={onAddPort}>
-            Add port
-            <Icon iconName="plus-circle" />
+          <Button className="gap-2" size="md" variant="solid" color="brand" onClick={onAddPort}>
+            Add Port
+            <Icon iconName="plus-circle" iconStyle="regular" />
           </Button>
         </SettingsHeading>
       ) : (

libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/__snapshots__/values-override-arguments-setting.spec.tsx.snap

@@ -24,7 +24,7 @@ exports[`ValuesOverrideArgumentsSetting should match snapshot 1`] = `
         <button
           class="inline-flex items-center shrink-0 font-medium transition focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none outline-neutral-500 text-sm h-11 px-5 rounded bg-brand-500 active:bg-brand-600 hover:bg-brand-400 text-white disabled:text-brand-300 disabled:bg-brand-100 gap-2"
         >
-          Add variable
+          Add Variable
           <i
             aria-hidden="true"
             class="fa-solid fa-plus-circle "

libs/domains/service-helm/feature/src/lib/values-override-arguments-setting/values-override-arguments-setting.tsx

@@ -192,7 +192,7 @@ export function ValuesOverrideArgumentsSetting({
         >
           <Button
             className="gap-2"
-            size="lg"
+            size="md"
             onClick={() =>
               append({
                 key: '',
@@ -201,8 +201,8 @@ export function ValuesOverrideArgumentsSetting({
               })
             }
           >
-            Add variable
-            <Icon iconName="plus-circle" />
+            Add Variable
+            <Icon iconName="plus-circle" iconStyle="regular" />
           </Button>
         </SettingsHeading>
       ) : (
@@ -225,7 +225,7 @@ export function ValuesOverrideArgumentsSetting({
                 })
               }
             >
-              Add variable
+              Add Variable
               <Icon iconName="plus-circle" />
             </Button>
           </div>

libs/domains/services/feature/src/lib/last-commit/__snapshots__/last-commit.spec.tsx.snap

@@ -8,7 +8,7 @@ exports[`LastCommit should match snapshot 1`] = `
       data-state="closed"
     >
       <button
-        class="inline-flex items-center shrink-0 font-medium transition focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none outline-brand-500 text-xs h-6 px-2 rounded border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none bg-neutral-100 dark:bg-neutral-500 hover:[&:not(:active):not(:disabled)]:bg-white dark:hover:[&:not(:active):not(:disabled)]:bg-neutral-400 group justify-between"
+        class="inline-flex items-center shrink-0 font-medium transition focus-visible:[&:not(:active)]:outline-2 outline-0 shadow-sm disabled:shadow-none active:shadow-none outline-brand-500 text-xs h-6 px-2 rounded border border-neutral-250 dark:border-neutral-400 text-neutral-400 dark:text-white hover:[&:not(:active)]:border-neutral-300 dark:hover:[&:not(:active):not(:disabled)]:border-neutral-350 active:bg-neutral-150 disabled:text-neutral-300 disabled:bg-neutral-100 disabled:border-none bg-neutral-100 dark:bg-neutral-500 hover:[&:not(:active):not(:disabled)]:bg-white dark:hover:[&:not(:active):not(:disabled)]:bg-neutral-400 group justify-between gap-1"
         type="button"
       >
         <i
@@ -17,7 +17,7 @@ exports[`LastCommit should match snapshot 1`] = `
         />
         <i
           aria-hidden="true"
-          class="fa-solid fa-code-commit w-4 group-hover:hidden"
+          class="fa-regular fa-code-commit w-4 group-hover:hidden"
         />
         ddd1cee
       </button>

libs/domains/services/feature/src/lib/last-commit/last-commit.tsx

@@ -77,14 +77,11 @@ export function LastCommit({ className, service, gitRepository }: LastCommitProp
             variant="surface"
             color="neutral"
             size="xs"
-            className={twMerge(
-              `group relative justify-between ${delta > 0 ? 'w-[98px] pr-[26px]' : 'gap-1'}`,
-              className
-            )}
+            className={twMerge(`group relative justify-between ${delta > 0 ? 'w-[104px] pr-7' : 'gap-1'}`, className)}
             onClick={deployCommitVersion}
           >
-            <Icon iconName="rotate-right" className="hidden w-4 group-hover:inline" />
-            <Icon iconName="code-commit" className="w-4 group-hover:hidden" />
+            <Icon iconName="rotate-right" iconStyle="regular" className="hidden w-4 group-hover:inline" />
+            <Icon iconName="code-commit" iconStyle="regular" className="w-4 group-hover:hidden" />
             {deployedCommit.git_commit_id.substring(0, 7)}
             <span className="absolute -right-[1px] -top-[1px] bottom-0 flex h-[calc(100%+2px)] min-w-[22px] items-center justify-center rounded-br rounded-tr bg-brand-500 px-1 text-white">
               {delta}
@@ -97,10 +94,10 @@ export function LastCommit({ className, service, gitRepository }: LastCommitProp
               variant="surface"
               color="neutral"
               size="xs"
-              className={twMerge('group justify-between', className)}
+              className={twMerge('group justify-between gap-1', className)}
             >
               <Icon iconName="copy" className="hidden w-4 group-hover:inline" />
-              <Icon iconName="code-commit" className="w-4 group-hover:hidden" />
+              <Icon iconName="code-commit" iconStyle="regular" className="w-4 group-hover:hidden" />
               {deployedCommit.git_commit_id.substring(0, 7)}
             </Button>
           </CopyToClipboard>

libs/domains/services/feature/src/lib/pod-statuses-callout/pod-statuses-callout.tsx

@@ -120,7 +120,7 @@ export function PodStatusesCallout({ environmentId, serviceId }: PodStatusesCall
         .map(({ id, icon, color, children, title, description: description }, index) => (
           <Callout.Root color={color} key={id}>
             <Callout.Icon>
-              <Icon name={icon} />
+              <Icon name={icon} iconStyle="regular" />
             </Callout.Icon>
             <Callout.Text>
               <Callout.TextHeading>

libs/domains/services/feature/src/lib/pods-metrics/pods-metrics.tsx

@@ -148,7 +148,7 @@ export function PodsMetrics({ environmentId, serviceId, children }: PodsMetricsP
                 </div>
               ) : (
                 <span className="max-w-full truncate">
-                  <Icon className="mr-2" iconName="code-commit" />
+                  <Icon className="mr-2" iconName="code-commit" iconStyle="regular" />
                   {value.substring(0, 7)}
                 </span>
               )}

libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap

@@ -134,9 +134,9 @@ exports[`SelectCommitModal should match snapshot 1`] = `
                       <div
                         class="mr-1 w-4"
                       >
-                        <span
-                          class="icon-solid-code-commit shrink-0 mr-1"
-                          role="img"
+                        <i
+                          aria-hidden="true"
+                          class="fa-regular fa-code-commit mr-1"
                         />
                       </div>
                       123
@@ -249,9 +249,9 @@ exports[`SelectCommitModal should match snapshot 1`] = `
                       <div
                         class="mr-1 w-4"
                       >
-                        <span
-                          class="icon-solid-code-commit shrink-0 mr-1"
-                          role="img"
+                        <i
+                          aria-hidden="true"
+                          class="fa-regular fa-code-commit mr-1"
                         />
                       </div>
                       456

libs/domains/services/feature/src/lib/service-access-modal/service-access-modal.tsx

@@ -59,7 +59,7 @@ function SectionDatabaseConnectionUri({ service }: { service: Database }) {
         onClick={() => handleCopyCredentials(masterCredentials!)}
       >
         Copy connection URI
-        <Icon className="text-sm" iconName="key" iconStyle="light" />
+        <Icon className="text-sm" iconName="key" iconStyle="regular" />
       </Button>
     </div>
   )
@@ -235,7 +235,7 @@ export function ServiceAccessModal({ service, organizationId, projectId, onClose
                                     <span>
                                       <Icon
                                         iconName="circle-info"
-                                        iconStyle="solid"
+                                        iconStyle="regular"
                                         className="ml-2 text-neutral-350"
                                       />
                                     </span>

libs/domains/services/feature/src/lib/service-action-toolbar/__snapshots__/service-action-toolbar.spec.tsx.snap

@@ -139,7 +139,7 @@ exports[`ServiceActionToolbar should match manage deployment snapshot 1`] = `
         >
           <i
             aria-hidden="true"
-            class="fa-solid fa-circle-exclamation "
+            class="fa-regular fa-circle-exclamation "
           />
         </div>
       </div>

libs/domains/services/feature/src/lib/service-action-toolbar/service-action-toolbar.tsx

@@ -103,7 +103,7 @@ function MenuManageDeployment({
   const tooltipServiceNeedUpdate = displayYellowColor && (
     <Tooltip side="bottom" content="Configuration has changed and needs to be applied">
       <div className="absolute right-2">
-        <Icon iconName="circle-exclamation" />
+        <Icon iconName="circle-exclamation" iconStyle="regular" />
       </div>
     </Tooltip>
   )

libs/domains/services/feature/src/lib/service-details/__snapshots__/service-details.spec.tsx.snap

@@ -23,7 +23,7 @@ exports[`ServiceDetails should match application snapshot 1`] = `
           >
             <i
               aria-hidden="true"
-              class="fa-solid fa-gear text-base text-neutral-300"
+              class="fa-regular fa-gear text-base text-neutral-350"
             />
           </a>
         </div>
@@ -83,7 +83,7 @@ exports[`ServiceDetails should match application snapshot 1`] = `
           >
             <i
               aria-hidden="true"
-              class="fa-solid fa-gear text-base text-neutral-300"
+              class="fa-regular fa-gear text-base text-neutral-350"
             />
           </a>
         </div>
@@ -116,7 +116,7 @@ exports[`ServiceDetails should match database snapshot 1`] = `
           >
             <i
               aria-hidden="true"
-              class="fa-solid fa-gear text-base text-neutral-300"
+              class="fa-regular fa-gear text-base text-neutral-350"
             />
           </a>
         </div>
@@ -176,7 +176,7 @@ exports[`ServiceDetails should match database snapshot 1`] = `
           >
             <i
               aria-hidden="true"
-              class="fa-solid fa-gear text-base text-neutral-300"
+              class="fa-regular fa-gear text-base text-neutral-350"
             />
           </a>
         </div>
@@ -209,7 +209,7 @@ exports[`ServiceDetails should match job snapshot 1`] = `
           >
             <i
               aria-hidden="true"
-              class="fa-solid fa-gear text-base text-neutral-300"
+              class="fa-regular fa-gear text-base text-neutral-350"
             />
           </a>
         </div>
@@ -269,7 +269,7 @@ exports[`ServiceDetails should match job snapshot 1`] = `
           >
             <i
               aria-hidden="true"
-              class="fa-solid fa-gear text-base text-neutral-300"
+              class="fa-regular fa-gear text-base text-neutral-350"
             />
           </a>
         </div>