css fixes from feedback

Author: Mukul Tayal

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

@@ -621,7 +621,7 @@ export const Details: React.FC<DetailsType> = ({
 
     return (
         <>
-            <div className="w-100 pt-16 pr-20 pb-16 pl-20 app-info-bg-gradient">
+            <div className="w-100 pt-16 pr-20 pb-16 pl-20 app-info-bg dc__gap-16">
                 <SourceInfo
                     appDetails={appDetails}
                     appStreamData={streamData}
@@ -645,7 +645,7 @@ export const Details: React.FC<DetailsType> = ({
                     setErrorsList={setErrorsList}
                 />
             </div>
-            {!loadingDetails && !loadingResourceTree && !appDetails?.deploymentAppDeleteRequest ? (
+            {!loadingDetails && !loadingResourceTree && !appDetails?.deploymentAppDeleteRequest && (
                 <>
                     {environment && !isVirtualEnvRef.current && (
                         <AppMetrics
@@ -664,8 +664,6 @@ export const Details: React.FC<DetailsType> = ({
                         />
                     )}
                 </>
-            ) : (
-                <div className="mb-9" />
             )}
             {loadingResourceTree ? (
                 <div className="bcn-0 h-100">

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

@@ -108,7 +108,7 @@ export const SourceInfo = ({
             loadingCards.push(<LoadingCard key={i} />)
         }
 
-        return <div className="flex left ml-20 mb-16">{loadingCards}</div>
+        return <div className="flex left mb-16">{loadingCards}</div>
     }
 
     const conditionalScalePodsButton = (children) => {
@@ -126,7 +126,7 @@ export const SourceInfo = ({
 
     const renderDevtronAppsEnvironmentSelector = (environment) => {
         return (
-            <div className="flex left w-100 mb-16">
+            <div className="flex left w-100">
                 <EnvSelector
                     environments={environments}
                     disabled={loadingDetails || loadingResourceTree || (params.envId && !showCommitInfo)}
@@ -226,7 +226,7 @@ export const SourceInfo = ({
     }
 
     return (
-        <div className="flex left w-100 column source-info-container">
+        <div className="flex left w-100 column source-info-container dc__gap-16">
             {renderDevtronAppsEnvironmentSelector(environment)}
             {loadingDetails
                 ? shimmerLoaderBlocks()

src/components/app/details/appDetails/appDetails.scss

@@ -1910,6 +1910,11 @@ table.resource-tree {
     margin-left: 8px !important;
 }
 
+.app-details-manifest-download-card {
+    overflow: hidden;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.20);
+}
+
 .app-details-info-card {
     align-items: flex-start;
     flex-direction: column;

src/components/app/list/list.scss

@@ -81,7 +81,7 @@
 
 .app-list__header {
     display: grid;
-    grid-template-columns: 20px 1.5fr repeat(4, 1fr) 1.5fr 76px;
+    grid-template-columns: 24px 1.5fr repeat(4, 1fr) 1.5fr 76px;
     align-items: center;
     grid-template-rows: 36px;
     grid-column-gap: 16px;
@@ -104,7 +104,7 @@
 .app-list__row {
     min-height: 48px;
     display: grid;
-    grid-template-columns: 20px 1.5fr repeat(4, 1fr) 1.5fr 76px;
+    grid-template-columns: 24px 1.5fr repeat(4, 1fr) 1.5fr 76px;
     align-items: center;
     grid-column-gap: 16px;
     font-size: 13px;
@@ -482,7 +482,7 @@
     &__table-row {
         display: grid;
         align-items: center;
-        grid-template-columns: 20px 1.5fr repeat(4, 1fr) 1.5fr 76px;
+        grid-template-columns: 24px 1.5fr repeat(4, 1fr) 1.5fr 76px;
         column-gap: 16px;
         grid-template-rows: 40px;
     }

src/components/v2/appDetails/AppDetails.component.tsx

@@ -164,7 +164,7 @@ const AppDetailsComponent = ({
 
     return (
         <div className="helm-details" data-testid="app-details-wrapper">
-            <div className="app-info-bg-gradient">
+            <div className="app-info-bg">
                 <EnvironmentSelectorComponent
                     isExternalApp={isExternalApp}
                     _init={_init}

src/components/v2/appDetails/appDetails.scss

@@ -24,6 +24,6 @@
     flex: 1;
 }
 
-.app-info-bg-gradient {
-    background: linear-gradient(to top, #ffffff 0, #ffffff 50px, var(--window-bg) 50px);
+.app-info-bg {
+    background: var(--window-bg);
 }