fix(home): EE-4874 homepage ui issues (#8319)

app/assets/ico/heartbeat-down.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.91895 2.19267C6.33456 0.34043 3.69255 -0.157821 1.70745 1.53828C-0.277637 3.23438 -0.557105 6.0702 1.0018 8.07617C2.17927 9.59131 5.52429 12.6331 7.0907 14.0309C7.37867 14.2878 7.52266 14.4164 7.69121 14.4669C7.83757 14.5108 8.00026 14.5108 8.14662 14.4669C8.31517 14.4164 8.45916 14.2878 8.74713 14.0309C10.3135 12.6331 13.6586 9.59131 14.836 8.07617C16.3949 6.0702 16.1496 3.21655 14.1304 1.53828C12.1112 -0.139975 9.50327 0.34043 7.91895 2.19267Z" fill="#D92D20"/>
+<path d="M8.03754 9.71338L8.03754 4.94044M8.03754 9.71338L5.90125 7.57709M8.03754 9.71338L10.1738 7.57709" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

app/assets/ico/heartbeat-up.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.91895 2.19267C6.33456 0.34043 3.69255 -0.157821 1.70745 1.53828C-0.277637 3.23438 -0.557105 6.0702 1.0018 8.07617C2.17927 9.59131 5.52429 12.6331 7.0907 14.0309C7.37867 14.2878 7.52266 14.4164 7.69121 14.4669C7.83757 14.5108 8.00026 14.5108 8.14662 14.4669C8.31517 14.4164 8.45916 14.2878 8.74713 14.0309C10.3135 12.6331 13.6586 9.59131 14.836 8.07617C16.3949 6.0702 16.1496 3.21655 14.1304 1.53828C12.1112 -0.139975 9.50327 0.34043 7.91895 2.19267Z" fill="#039855"/>
+<path d="M8.03754 4.94043L8.03754 9.71337M8.03754 4.94043L10.1738 7.07672M8.03754 4.94043L5.90125 7.07672" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

app/react/components/EdgeIndicator.tsx

@@ -27,7 +27,7 @@ export function EdgeIndicator({
     return (
       <span role="status" aria-label="edge-status">
         <EnvironmentStatusBadgeItem aria-label="unassociated">
-          <s>associated</s>
+          <span className="whitespace-nowrap">Not associated</span>
         </EnvironmentStatusBadgeItem>
       </span>
     );
@@ -41,6 +41,7 @@ export function EdgeIndicator({
     >
       <EnvironmentStatusBadgeItem
         color={isValid ? 'success' : 'danger'}
+        icon={isValid ? 'svg-heartbeatup' : 'svg-heartbeatdown'}
         aria-label="edge-heartbeat"
       >
         heartbeat

app/react/components/Svg.tsx

@@ -4,6 +4,8 @@ import darkmode from '@/assets/ico/theme/darkmode.svg?c';
 import lightmode from '@/assets/ico/theme/lightmode.svg?c';
 import highcontrastmode from '@/assets/ico/theme/highcontrastmode.svg?c';
 // general icons
+import heartbeatup from '@/assets/ico/heartbeat-up.svg?c';
+import heartbeatdown from '@/assets/ico/heartbeat-down.svg?c';
 import checked from '@/assets/ico/checked.svg?c';
 import dataflow from '@/assets/ico/dataflow-1.svg?c';
 import git from '@/assets/ico/git.svg?c';
@@ -44,6 +46,8 @@ import quay from '@/assets/ico/vendor/quay.svg?c';
 const placeholder = Placeholder;
 
 export const SvgIcons = {
+  heartbeatup,
+  heartbeatdown,
   automode,
   darkmode,
   lightmode,

app/react/components/datatables/SearchBar.tsx

@@ -32,7 +32,7 @@ export function SearchBar({
 
   return (
     <div
-      className={clsx('searchBar items-center flex min-w-[90px]', className)}
+      className={clsx('searchBar items-center flex min-w-[350px]', className)}
     >
       <Search className="searchIcon lucide shrink-0" />
       <input

app/react/portainer/environments/wizard/EnvironmentsCreationView/WizardEndpointsList/WizardEndpointsList.module.css

@@ -1,10 +1,10 @@
 .wizard-list-wrapper {
   display: grid;
-  grid-template-columns: 50px 1fr;
+  grid-template-columns: 50px 1fr 70px;
   grid-template-areas:
-    'image title'
-    'image subtitle'
-    'image type';
+    'image title title'
+    'image subtitle edgeStatus'
+    'image type type';
   border: 1px solid rgb(221, 221, 221);
   border-radius: 5px;
   margin-bottom: 10px;
@@ -13,6 +13,13 @@
   box-shadow: 0 3px 10px -2px rgb(161 170 166 / 20%);
 }
 
+.wizard-list-edge-status {
+  grid-area: edgeStatus;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
 .wizard-list-image {
   grid-area: image;
   font-size: 35px;