fix(ui): fix health status loading and paddings

frontend/app/components/Header/HealthStatus/HealthModal/Footer.tsx

@@ -6,7 +6,7 @@ function Footer({ isSetup }: { isSetup?: boolean }) {
   return (
     <div className={cn(
       'flex w-full p-4 items-center justify-center',
-      'bg-gray-lightest gap-4',
+      'bg-gray-lightest gap-8',
       !isSetup ? 'border-t border-figmaColors-divider' : ''
     )}>
       <a

frontend/app/components/Header/HealthStatus/HealthModal/HealthModal.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 // @ts-ignore
 import slide from 'App/svg/cheers.svg';
-import { Button } from 'UI';
+import { Button, Loader } from 'UI';
 import Footer from './Footer';
 import { getHighest } from 'App/constants/zindex';
 import Category from 'Components/Header/HealthStatus/ServiceCategory';
 import SubserviceHealth from 'Components/Header/HealthStatus/SubserviceHealth/SubserviceHealth';
 import { IServiceStats } from '../HealthStatus';
-import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
 function HealthModal({
   getHealth,
@@ -74,7 +73,7 @@ function HealthModal({
         >
           <div className={'text-xl font-semibold'}>Installation Status</div>
           <Button
-            loading={isLoading}
+            disabled={isLoading}
             onClick={getHealth}
             icon={'arrow-repeat'}
             variant={'text-primary'}
@@ -83,58 +82,48 @@ function HealthModal({
           </Button>
         </div>
 
-        <div className={'flex w-full'}>
-          <div className={'flex flex-col h-full'} style={{ flex: 1 }}>
-            {isLoading ? (
-                <Category onClick={() => null} name={"Loading health status"} isLoading />
-              )
-              : Object.keys(healthResponse.healthMap).map((service) => (
-                <React.Fragment key={service}>
-                  <Category
-                    onClick={() => setSelectedService(service)}
-                    healthOk={healthResponse.healthMap[service].healthOk}
-                    name={healthResponse.healthMap[service].name}
-                    isSelectable
-                    isSelected={selectedService === service}
-                  />
-                </React.Fragment>
-              ))}
-          </div>
-          <div
-            className={
-              'bg-gray-lightest border-l w-fit border-figmaColors-divider overflow-y-scroll relative'
-            }
-            style={{ flex: 2, height: 420 }}
-          >
-            {isLoading ? (
-              <div
-                style={{
-                  position: 'absolute',
-                  top: 'calc(50% - 28px)',
-                  left: 'calc(50% - 28px)',
-                }}
-              >
-                <AnimatedSVG name={ICONS.LOADER} size={56} />
-              </div>
-            ) : selectedService ? (
-              <ServiceStatus service={healthResponse.healthMap[selectedService]} />
-            ) : <img src={slide} width={392} />
-            }
-          </div>
-        </div>
-        {isSetup ? (
-          <div className={'p-4 mt-auto w-full border-t border-figmaColors-divider'}>
-            <Button
-              disabled={!healthResponse?.overallHealth}
-              loading={isLoading}
-              variant={'primary'}
-              className={'ml-auto'}
-              onClick={() => setPassed?.()}
+        <Loader loading={isLoading}>
+          <div className={'flex w-full'}>
+            <div className={'flex flex-col h-full'} style={{ flex: 1 }}>
+              {isLoading ? null
+                : Object.keys(healthResponse.healthMap).map((service) => (
+                  <React.Fragment key={service}>
+                    <Category
+                      onClick={() => setSelectedService(service)}
+                      healthOk={healthResponse.healthMap[service].healthOk}
+                      name={healthResponse.healthMap[service].name}
+                      isSelectable
+                      isSelected={selectedService === service}
+                    />
+                  </React.Fragment>
+                ))}
+            </div>
+            <div
+              className={
+                'bg-gray-lightest border-l w-fit border-figmaColors-divider overflow-y-scroll relative'
+              }
+              style={{ flex: 2, height: 420 }}
             >
-              Create Account
-            </Button>
+              {isLoading ? null : selectedService ? (
+                <ServiceStatus service={healthResponse.healthMap[selectedService]} />
+              ) : <img src={slide} width={392} />
+              }
+            </div>
           </div>
-        ) : null}
+          {isSetup ? (
+            <div className={'p-4 mt-auto w-full border-t border-figmaColors-divider'}>
+              <Button
+                disabled={!healthResponse?.overallHealth}
+                loading={isLoading}
+                variant={'primary'}
+                className={'ml-auto'}
+                onClick={() => setPassed?.()}
+              >
+                Create Account
+              </Button>
+            </div>
+          ) : null}
+        </Loader>
         <Footer isSetup={isSetup} />
       </div>
     </div>
@@ -144,8 +133,8 @@ function HealthModal({
 function ServiceStatus({ service }: { service: Record<string, any> }) {
   const { subservices } = service;
   return (
-    <div className={'p-2'}>
-      <div className={'border border-light-gray'}>
+    <div className={'p-4'}>
+      <div className={'border rounded border-light-gray'}>
         {Object.keys(subservices).map((subservice: string) => (
           <React.Fragment key={subservice}>
             <SubserviceHealth name={subservice} subservice={subservices[subservice]} />

frontend/app/components/Header/HealthStatus/HealthStatus.tsx

@@ -59,7 +59,7 @@ function HealthStatus() {
       <div className={'relative group h-full hover:bg-figmaColors-secondary-outlined-hover-background'}>
         <div
           className={
-            'rounded cursor-pointer p-2 flex items-center'
+            'rounded cursor-pointer p-2 flex items-center h-full'
           }
         >
           <div className={'rounded p-2 border border-light-gray bg-white flex items-center '}>

frontend/app/components/Header/HealthStatus/HealthWidget.tsx

@@ -39,8 +39,8 @@ function HealthWidget({
 
   return (
     <div
-      style={{ width: 220, top: '100%', right: '-30%', height: '110%' }}
-      className={'absolute group invisible group-hover:visible pt-4'}
+      style={{ width: 220, right: '-30%', height: '110%' }}
+      className={'absolute group invisible group-hover:visible'}
     >
       <div
         className={
@@ -69,11 +69,10 @@ function HealthWidget({
         </div>
         {isError && <div className={'text-secondary text-sm'}>Error getting service health status</div>}
 
-        <div className={'divider w-full border border-b-light-gray'} />
-
         <div className={'w-full'}>
           {!isError && !healthOk ? (
             <>
+              <div className={'divider w-full border border-b-light-gray my-2'} />
               <div className={'text-secondary pb-2'}>
                 Observed installation Issue with the following
               </div>
@@ -84,6 +83,7 @@ function HealthWidget({
                     healthOk={false}
                     name={service.name}
                     isSelectable
+                    noBorder={problematicServices.length === 1}
                   />
                 </React.Fragment>
               ))}

frontend/app/components/Header/HealthStatus/ServiceCategory.tsx

@@ -12,6 +12,7 @@ function Category({
   isExpanded,
   isSelected,
   isLoading,
+  noBorder,
 }: {
   name: string;
   healthOk?: boolean;
@@ -21,15 +22,17 @@ function Category({
   isExpandable?: boolean;
   isExpanded?: boolean;
   isSelected?: boolean;
+  noBorder?: boolean;
 }) {
 
   const icon = healthOk ? ('check-circle-fill' as const) : ('exclamation-circle-fill' as const);
   return (
     <div
       className={cn(
-        'px-4 py-2 flex items-center gap-2 border-b cursor-pointer',
+        'px-4 py-2 flex items-center gap-2 cursor-pointer',
         isExpandable || isSelectable ? 'hover:bg-active-blue' : '',
-        isSelected ? 'bg-active-blue' : ''
+        isSelected ? 'bg-active-blue' : '',
+        noBorder ? '' : 'border-b',
       )}
       onClick={onClick}
     >

frontend/app/components/Header/HealthStatus/SubserviceHealth/SubserviceHealth.tsx

@@ -24,15 +24,15 @@ function SubserviceHealth({
       {isExpanded ? (
         <div className={'p-3'}>
           {subservice?.details?.version ? (
-            <div className="flex items-center justify-between mt-2 px-2">
+            <div className="flex items-center justify-between mt-2 px-2 py-2 bg-white rounded border border-light-gray">
               <div className="py-1 px-2 font-medium">Version</div>
-              <div className="code-font text-black rounded text-base bg-active-blue px-2 py-1 whitespace-nowrap overflow-hidden text-clip">
+              <div className="code-font text-black text-base px-2 py-1 whitespace-nowrap overflow-hidden text-clip">
                 {subservice?.details?.version}
               </div>
             </div>
           ) : null}
           {subservice?.details?.errors?.length ? (
-            <div className={'py-2 px-4 bg-white rounded-xl border border-light-gray'}>
+            <div className={'py-2 px-4 bg-white rounded border border-light-gray'}>
               <div>Error log:</div>
               {subservice.details.errors.toString()}
             </div>