healthy icon z-index fix for appStatus card

Author: Mukul Tayal

src/components/app/details/appDetails/AppDetails.tsx

@@ -616,10 +616,12 @@ export const Details: React.FC<DetailsType> = ({
             />
         )
     }
-
+    const isdeploymentAppDeleting = appDetails?.deploymentAppDeleteRequest || false
     return (
         <>
-            <div className="w-100 pt-16 pr-20 pb-16 pl-20 app-info-bg dc__gap-16">
+            <div
+                className={`w-100 pt-16 pr-20 pb-16 pl-20 dc__gap-16 ${isdeploymentAppDeleting ? 'app-info-bg' : 'app-info-bg-gradient'}`}
+            >
                 <SourceInfo
                     appDetails={appDetails}
                     setDetailed={toggleDetailedStatus}

src/components/app/details/appDetails/AppStatusCard.tsx

@@ -73,7 +73,7 @@ const AppStatusCard = ({ appDetails, status, cardLoading, setDetailed, message }
                 </div>
                 <div className="flex br-4">
                     <figure
-                        className={`dc__app-summary__icon ${status.toLowerCase()} h-24 w-24`}
+                        className={`dc__app-summary__icon dc__zi-0 ${status.toLowerCase()} h-24 w-24`}
                         style={{ margin: 'auto', backgroundSize: 'contain, contain' }}
                     />
                 </div>

src/components/v2/appDetails/appDetails.scss

@@ -27,3 +27,7 @@
 .app-info-bg {
     background: var(--window-bg);
 }
+
+.app-info-bg-gradient {
+    background: linear-gradient(to top, #ffffff 0, #ffffff 50px, var(--window-bg) 50px);
+}

src/css/base.scss

@@ -3941,6 +3941,9 @@ textarea::placeholder {
     user-select: none;
     border: solid 1px transparent;
 }
+.dc__zi-0 {
+    z-index: 0;
+}
 
 .dc__zi-1 {
     z-index: 1;