Stacks list ui cleanup (#3086)

dashboard/src/components/porter/Icon.tsx

@@ -4,19 +4,25 @@ import styled from "styled-components";
 type Props = {
   src: any;
   height?: string;
+  opacity?: number;
 };
 
 const Icon: React.FC<Props> = ({
   src,
   height,
+  opacity,
 }) => {
   return (
-    <StyledIcon src={src} height={height} />
+    <StyledIcon src={src} height={height} opacity={opacity} />
   );
 };
 
 export default Icon;
 
-const StyledIcon = styled.img<{ height?: string}>`
+const StyledIcon = styled.img<{ 
+  height?: string;
+  opacity?: number;
+}>`
   height: ${props => props.height || "20px"};
+  opacity: ${props => props.opacity || 1};
 `;

dashboard/src/main/home/app-dashboard/AppDashboard.tsx

@@ -28,6 +28,7 @@ import PorterLink from "components/porter/Link";
 import Loading from "components/Loading";
 import Fieldset from "components/porter/Fieldset";
 import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
+import Icon from "components/porter/Icon";
 
 type Props = {};
 
@@ -131,19 +132,19 @@ const AppDashboard: React.FC<Props> = ({ }) => {
     return (
       <>
         {app.repo_name ? (
-          <>
+          <Container row>
             <SmallIcon opacity="0.6" src={github} />
-            {app.repo_name}
-          </>
+            <Text size={13} color="#ffffff44">{app.repo_name}</Text>
+          </Container>
         ) : (
-          <>
+          <Container row>
             <SmallIcon
               opacity="0.7"
               height="18px"
               src="https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/97_Docker_logo_logos-512.png"
             />
-            {app.image_repo_uri}
-          </>
+            <Text size={13} color="#ffffff44">{app.image_repo_uri}</Text>
+          </Container>
         )}
       </>
     );
@@ -189,7 +190,7 @@ const AppDashboard: React.FC<Props> = ({ }) => {
       }
     }
     return (
-      <>{size === "larger" ? <MidIcon src={src} /> : <Icon src={src} />}</>
+      <>{size === "larger" ? <Icon height="16px" src={src} /> : <Icon height="18px" src={src} />}</>
     );
   };
 
@@ -248,19 +249,16 @@ const AppDashboard: React.FC<Props> = ({ }) => {
                       <Block>
                         <Container row>
                           {renderIcon(app["build_packs"])}
-                          <Text size={14}>
-                            {app.name}
-                          </Text>
+                          <Spacer inline width="12px" />
+                          <Text size={14}>{app.name}</Text>
                           <Spacer inline x={2} />
                         </Container>
                         <StatusIcon src={healthy} />
-                        <Text size={13} color="#ffffff44">
-                          {renderSource(app)}
-                        </Text>
-                        <Text size={13} color="#ffffff44">
+                        {renderSource(app)}
+                        <Container row>
                           <SmallIcon opacity="0.4" src={time} />
-                          {app.last_deployed}
-                        </Text>
+                          <Text size={13} color="#ffffff44">{app.last_deployed}</Text>
+                        </Container>
                       </Block>
                     </Link>
                   );
@@ -275,20 +273,24 @@ const AppDashboard: React.FC<Props> = ({ }) => {
                     <Link to={`/apps/${app.name}`} key={i}>
                       <Row>
                         <Container row>
+                          <Spacer inline width="1px" />
                           {renderIcon(app["build_packs"], "larger")}
+                          <Spacer inline width="12px" />
                           <Text size={14}>
                             {app.name}
                           </Text>
                           <Spacer inline x={1} />
-                          <MidIcon src={healthy} />
+                          <Icon height="16px" src={healthy} />
                         </Container>
                         <Spacer height="15px" />
-                        <Text size={13} color="#ffffff44">
+                        <Container row>
                           {renderSource(app)}
                           <Spacer inline x={1} />
                           <SmallIcon opacity="0.4" src={time} />
-                          {app.last_deployed}
-                        </Text>
+                          <Text size={13} color="#ffffff44">
+                            {app.last_deployed}
+                          </Text>
+                        </Container>
                       </Row>
                     </Link>
                   );
@@ -341,17 +343,6 @@ const StatusIcon = styled.img`
   height: 18px;
 `;
 
-const Icon = styled.img`
-  height: 18px;
-  margin-right: 15px;
-`;
-
-const MidIcon = styled.img`
-  height: 16px;
-  margin-right: 13px;
-  margin-left: 1px;
-`;
-
 const SmallIcon = styled.img<{ opacity?: string; height?: string }>`
   margin-left: 2px;
   height: ${(props) => props.height || "14px"};

dashboard/src/main/home/app-dashboard/expanded-app/ExpandedApp.tsx

@@ -655,6 +655,7 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
                   addNewText={"Add a new pre-deploy job"}
                   defaultExpanded={true}
                 />
+                <Spacer y={0.5} />
               </>
             }
             <Text size={16}>Application services</Text>
@@ -682,7 +683,7 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
               addNewText={"Add a new service"}
               setExpandedJob={(x: string) => setExpandedJob(x)}
             />
-            <Spacer y={0.5} />
+            <Spacer y={0.75} />
             <Button
               onClick={async () => await updatePorterApp({})}
               status={buttonStatus}
@@ -911,7 +912,8 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
                             <RefreshButton
                               onClick={() => window.location.reload()}
                             >
-                              <img src={refresh} /> Refresh
+                              <img src={refresh} />
+                              <Underline>Refresh</Underline>
                             </RefreshButton>
                           </>
                         </>
@@ -958,7 +960,8 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
                           <RefreshButton
                             onClick={() => window.location.reload()}
                           >
-                            <img src={refresh} /> Refresh
+                            <img src={refresh} />
+                            <Underline>Refresh</Underline>
                           </RefreshButton>
                         </>
                       }
@@ -1076,8 +1079,12 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
 
 export default withRouter(ExpandedApp);
 
+const Underline = styled.div`
+  border-bottom: 1px solid #ffffff;
+`;
+
 const RefreshButton = styled.div`
-  color: #ffffff44;
+  color: #ffffff;
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -1094,7 +1101,6 @@ const RefreshButton = styled.div`
     justify-content: center;
     height: 11px;
     margin-right: 10px;
-    opacity: 0.3;
   }
 `;
 

dashboard/src/main/home/app-dashboard/expanded-app/JobRuns.tsx

@@ -2,6 +2,9 @@ import DynamicLink from "components/DynamicLink";
 import Loading from "components/Loading";
 import Table from "components/OldTable";
 import Placeholder from "components/Placeholder";
+import Fieldset from "components/porter/Fieldset";
+import Spacer from "components/porter/Spacer";
+import Text from "components/porter/Text";
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { CellProps, Column, Row } from "react-table";
 import api from "shared/api";
@@ -269,7 +272,15 @@ const JobRuns: React.FC<Props> = ({
   }
 
   if (!jobRuns?.length) {
-    return <Placeholder>No job runs were found.</Placeholder>;
+    return (
+      <Fieldset>
+        <Text size={16}>No job runs found</Text>
+        <Spacer height="15px" />
+        <Text color="helper">
+          There are no jobs runs with the provided filters.
+        </Text>
+      </Fieldset>
+    );
   }
 
   return (

dashboard/src/main/home/app-dashboard/expanded-app/activity-feed/ActivityFeed.tsx

@@ -82,7 +82,7 @@ const ActivityFeed: React.FC<Props> = ({ chart, stackName, appData }) => {
         <Text size={16}>No events found for "{stackName}"</Text>
         <Spacer height="15px" />
         <Text color="helper">
-          This application currently has no associated events yet.
+          This application currently has no associated events.
         </Text>
       </Fieldset>
     );