Update icons (#2836)

* install github app button

* general error component

* auto-generate cluster name

* fix button text color

* infra tab for porter user

* update icons and header text

* update icons and header text

* Update Home.tsx

---------

Co-authored-by: Stefan McShane <stefanmcshane@users.noreply.github.com>

dashboard/src/components/CloudFormationForm.tsx

@@ -88,7 +88,7 @@ const CloudFormationForm: React.FC<Props> = ({
       <>
         <Spacer y={1} />
         <Fieldset>
-          <Text size={16} weight={500}>
+          <Text size={16}>
             Log in to AWS and "Create stack"
           </Text>
           <Spacer height="15px" />
@@ -149,7 +149,7 @@ const CloudFormationForm: React.FC<Props> = ({
                 ctaText="Troubleshooting steps"
                 errorModalContents={
                   <>
-                    <Text size={16} weight={500}>Granting Porter access to AWS</Text>
+                    <Text size={16}>Granting Porter access to AWS</Text>
                     <Spacer y={1} />
                     <Text color="helper">
                       Porter needs access to your AWS account in order to create infrastructure. You can grant Porter access to AWS by following these steps:
@@ -192,7 +192,7 @@ const CloudFormationForm: React.FC<Props> = ({
 
   return (
     <>
-      <Text size={16} weight={500}>
+      <Text size={16}>
         <BackButton width="140px" onClick={goBack}>
           <i className="material-icons">first_page</i>
           Select cloud

dashboard/src/components/ClusterProvisioningPlaceholder.tsx

@@ -8,6 +8,8 @@ import loading from "assets/loading.gif";
 import { Context } from "shared/Context";
 import Heading from "components/form-components/Heading";
 import Helper from "components/form-components/Helper";
+import Text from "./porter/Text";
+import Spacer from "./porter/Spacer";
 
 type Props = {};
 
@@ -16,11 +18,13 @@ const ClusterProvisioningPlaceholder: React.FC<RouteComponentProps> = (props) =>
 
   return (
     <ClusterPlaceholder>
-      <Heading isAtTop>
+      <Text size={16}>
         <Img src={loading} /> Your cluster is being created
-      </Heading>
-      <Helper>
-        You can view the status of your cluster creation{" "}
+      </Text>
+      <Spacer height="15px" />
+      <Text color="helper">
+        You can view the status of your cluster creation
+        <Spacer inline width="5px" />
         <Link onClick={() => {
           pushFiltered(props, "/cluster-dashboard", ["project_id"], {
             cluster: currentCluster.name,
@@ -29,7 +33,7 @@ const ClusterProvisioningPlaceholder: React.FC<RouteComponentProps> = (props) =>
           here
           <i className="material-icons">arrow_forward</i> 
         </Link>
-      </Helper>
+      </Text>
     </ClusterPlaceholder>
   );
 };
@@ -59,5 +63,5 @@ const ClusterPlaceholder = styled.div`
   border-radius: 5px;
   background: #26292e;
   border: 1px solid #494b4f;
-  padding-bottom: 10px;
+  padding-bottom: 35px;
 `;

dashboard/src/components/CredentialsForm.tsx

@@ -187,7 +187,7 @@ const CredentialsForm: React.FC<Props> = ({
 
   return (
     <>
-      <Heading isAtTop>
+      <Text size={16}>
         <BackButton width="140px" onClick={goBack}>
           <i className="material-icons">first_page</i>
           Select cloud
@@ -198,10 +198,12 @@ const CredentialsForm: React.FC<Props> = ({
         <HelperButton onClick={() => window.open("https://docs.porter.run/getting-started/provisioning-on-aws/", "_blank")}>
           <i className="material-icons">help_outline</i>
         </HelperButton>
-      </Heading>
-      <Helper>
+      </Text>
+      <Spacer y={1} />
+      <Text color="helper">
         Select your credentials from the list below, or add a new set of credentials:
-      </Helper>
+      </Text>
+      <Spacer y={1} />
       {
         isLoading ? (
           <Loading height="150px" />

dashboard/src/components/ProvisionerFlow.tsx

@@ -94,7 +94,7 @@ const ProvisionerFlow: React.FC<Props> = ({
             setConfirmCost("");
             setShowCostConfirmModal(false);
           }}>
-            <Text size={16} weight={500}>
+            <Text size={16}>
               Base AWS cost consent
             </Text>
             <Spacer height="15px" />
@@ -212,7 +212,7 @@ const BlockList = styled.div`
 `;
 
 const Icon = styled.img<{ bw?: boolean }>`
-  height: 42px;
+  height: 30px;
   margin-top: 30px;
   margin-bottom: 15px;
   filter: ${(props) => (props.bw ? "grayscale(1)" : "")};
@@ -260,7 +260,7 @@ const Block = styled.div<{ disabled?: boolean }>`
   color: #ffffff;
   position: relative;
   border-radius: 5px;
-  background: #26292e;
+  background: linear-gradient(160deg, #26292e, #26292e);
   border: 1px solid #494b4f;
   :hover {
     border: ${(props) => (props.disabled ? "" : "1px solid #7a7b80")};

dashboard/src/components/ProvisionerForm.tsx

@@ -7,6 +7,8 @@ import Heading from "components/form-components/Heading";
 import Helper from "./form-components/Helper";
 import ProvisionerSettings from "./ProvisionerSettings";
 import ProvisionerSettingsOld from "./ProvisionerSettingsOld";
+import Text from "./porter/Text";
+import Spacer from "./porter/Spacer";
 
 type Props = {
   goBack: () => void;
@@ -23,18 +25,20 @@ const ProvisionerForm: React.FC<Props> = ({
 }) => {
   return (
     <>
-      <Heading isAtTop>
+      <Text size={16}>
         <BackButton width="155px" onClick={goBack}>
           <i className="material-icons">first_page</i>
           Set credentials
         </BackButton>
-        <Spacer />
+        <Spacer inline width="17px" />
         <Img src={aws} />
         Configure settings
-      </Heading>
-      <Helper>
+      </Text>
+      <Spacer y={1} />
+      <Text color="helper">
         Configure settings for your AWS environment.
-      </Helper>
+      </Text>
+      <Spacer y={1} />
       {useAssumeRole ? (
         <ProvisionerSettings credentialId={credentialId} AWSAccountID={AWSAccountID} />
       ) : (
@@ -46,11 +50,6 @@ const ProvisionerForm: React.FC<Props> = ({
 
 export default ProvisionerForm;
 
-const Spacer = styled.div`
-  height: 1px;
-  width: 17px;
-`;
-
 const Img = styled.img`
   height: 18px;
   margin-right: 15px;

dashboard/src/components/ProvisionerSettings.tsx

@@ -15,6 +15,8 @@ import SaveButton from "./SaveButton";
 import { Contract, EnumKubernetesKind, EnumCloudProvider, NodeGroupType, EKSNodeGroup, EKS, Cluster } from "@porter-dev/api-contracts";
 import { ClusterType } from "shared/types";
 import Button from "./porter/Button";
+import Text from "./porter/Text";
+import Spacer from "./porter/Spacer";
 
 const regionOptions = [
   { value: "us-east-1", label: "US East (N. Virginia) us-east-1" },
@@ -226,10 +228,12 @@ const ProvisionerSettings: React.FC<Props> = props => {
     if (!props.clusterId) {
       return (
         <>
-          <Heading isAtTop>Select an AWS region</Heading>
-          <Helper>
+          <Text size={16}>Select an AWS region</Text>
+          <Spacer y={1} />
+          <Text color="helper">
             Porter will automatically provision your infrastructure in the specified region.
-          </Helper>
+          </Text>
+          <Spacer height="10px" />
           <SelectRow
             options={regionOptions}
             width="350px"

dashboard/src/components/ProvisionerSettingsOld.tsx

@@ -14,6 +14,8 @@ import InputRow from "./form-components/InputRow";
 import SaveButton from "./SaveButton";
 import { Contract, EnumKubernetesKind, EnumCloudProvider, NodeGroupType, EKSNodeGroup, EKS, Cluster } from "@porter-dev/api-contracts";
 import { ClusterType } from "shared/types";
+import Text from "./porter/Text";
+import Spacer from "./porter/Spacer";
 
 const regionOptions = [
   { value: "us-east-1", label: "US East (N. Virginia) us-east-1" },
@@ -206,10 +208,12 @@ const ProvisionerSettingsOld: React.FC<Props> = props => {
     if (!props.clusterId) {
       return (
         <>
-          <Heading isAtTop>Select an AWS region</Heading>
-          <Helper>
+          <Text size={16}>Select an AWS region</Text>
+          <Spacer y={1} />
+          <Text color="helper">
             Porter will automatically provision your infrastructure in the specified region.
-          </Helper>
+          </Text>
+          <Spacer height="10px" />
           <SelectRow
             options={regionOptions}
             width="350px"

dashboard/src/components/TabSelector.tsx

@@ -34,7 +34,7 @@ export default class TabSelector extends Component<PropsType, StateType> {
   };
 
   renderTabList = () => {
-    let color = this.props.color || "#949effff";
+    let color = this.props.color || "#aaaabb";
     return this.props.options.map((option: selectOption, i: number) => {
       return (
         <Tab

dashboard/src/components/TitleSection.tsx

@@ -90,7 +90,6 @@ const StyledTitle = styled.div<{
   onClick?: any;
 }>`
   font-size: 21px;
-  font-weight: 600;
   user-select: text;
   text-transform: ${(props) => (props.capitalize ? "capitalize" : "")};
   display: flex;

dashboard/src/components/porter/Button.tsx

@@ -142,7 +142,6 @@ const StyledButton = styled.button<{
   padding: 15px;
   border: none;
   outline: none;
-  font-weight: 500;
   color: white;
   background: ${props => (props.disabled && !props.color) ? "#aaaabb" : (props.color || "#5561C0")};
   display: flex;

dashboard/src/components/repo-selector/RepoList.tsx

@@ -308,7 +308,7 @@ const RepoList: React.FC<Props> = ({
 
     return (
       <>
-                <Text size={16} weight={500}>
+                <Text size={16}>
                   No connected repositories were found.
                 </Text>
                 <ConnectToGithubButton

dashboard/src/main/home/cluster-dashboard/apps/AppDashboard.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useState } from "react";
 import styled from "styled-components";
 import { RouteComponentProps, withRouter } from "react-router";
 
-import monoweb from "assets/monoweb.png";
+import web from "assets/web.png";
 
 import { Context } from "shared/Context";
 import { JobStatusType } from "shared/types";
@@ -44,7 +44,7 @@ const AppDashboard: React.FC<Props> = ({
   return (
     <StyledAppDashboard>
       <DashboardHeader
-        image={monoweb}
+        image={web}
         title={currentView}
         description="Continuously running web services, workers, and add-ons."
         disableLineBreak

dashboard/src/main/home/cluster-dashboard/chart/Chart.tsx

@@ -352,7 +352,6 @@ const Title = styled.div`
   padding: 12px 35px 12px 45px;
   font-size: 14px;
   font-family: "Work Sans", sans-serif;
-  font-weight: 500;
   color: #ffffff;
   width: 80%;
   overflow: hidden;
@@ -394,7 +393,7 @@ const StyledChart = styled.div`
   width: calc(100% + 2px);
   height: calc(100% + 2px);
   border-radius: 5px;
-  background: #26292e;
+  background: linear-gradient(180deg, #26292e, #24272c);
   border: 1px solid #494b4f;
   :hover {
     border: 1px solid #7a7b80;

dashboard/src/main/home/cluster-dashboard/jobs/JobDashboard.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useState } from "react";
 import styled from "styled-components";
 import { RouteComponentProps, withRouter } from "react-router";
 
-import monojob from "assets/monojob.png";
+import job from "assets/job.png";
 
 import { Context } from "shared/Context";
 import { JobStatusType } from "shared/types";
@@ -44,7 +44,7 @@ const JobDashboard: React.FC<Props> = ({
   return (
     <StyledJobDashboard>
       <DashboardHeader
-        image={monojob}
+        image={job}
         title={currentView}
         description="Scripts and tasks that run once or on a repeating interval."
         disableLineBreak

dashboard/src/main/home/integrations/IntegrationList.tsx

@@ -233,7 +233,7 @@ const Integration = styled.div`
     props.disabled ? "not-allowed" : "pointer"};
   margin-bottom: 20px;
   border-radius: 5px;
-  background: #26292e;
+  background: linear-gradient(180deg, #26292e, #24272c);
   border: 1px solid #494b4f;
   :hover {
     border: 1px solid #7a7b80;

dashboard/src/main/home/integrations/IntegrationRow.tsx

@@ -133,7 +133,7 @@ const Integration = styled.div`
     props.disabled ? "not-allowed" : "pointer"};
   margin-bottom: 15px;
   border-radius: 5px;
-  background: #26292e;
+  background: linear-gradient(180deg, #26292e, #24272c);
   border: 1px solid #494b4f;
   :hover {
     border: 1px solid #7a7b80;

dashboard/src/main/home/launch/Launch.tsx

@@ -427,10 +427,10 @@ class Templates extends Component<PropsType, StateType> {
       return (
         <TemplatesWrapper>
           <DashboardHeader
-            image={rocket}
-            title="Launch"
+            title="Launch a new service"
             description="Deploy applications and add-ons to your environment."
             disableLineBreak
+            capitalize={false}
           />
           {this.renderContents()}
         </TemplatesWrapper>

dashboard/src/main/home/launch/TemplateList.tsx

@@ -8,6 +8,10 @@ import { hardcodedNames } from "shared/hardcodedNameDict";
 import { PorterTemplate } from "shared/types";
 import semver from "semver";
 
+import web from "assets/web.png";
+import worker from "assets/worker.png";
+import job from "assets/job.png";
+
 type Props = {
   helm_repo_id?: number;
   templates?: PorterTemplate[];
@@ -99,7 +103,16 @@ const TemplateList: React.FC<Props> = ({
     );
   }
 
-  const renderIcon = (icon: string) => {
+  const renderIcon = (icon: string, name?: string) => {
+    if (name === "web") {
+      return <NewIcon src={web} />;
+    }
+    if (name === "worker") {
+      return <NewIcon src={worker} />;
+    }
+    if (name === "job") {
+      return <NewIcon src={job} />;
+    }
     if (icon) {
       return <Icon src={icon} />;
     }
@@ -123,7 +136,7 @@ const TemplateList: React.FC<Props> = ({
             key={name}
             onClick={() => setCurrentTemplate(template)}
           >
-            {renderIcon(icon)}
+            {renderIcon(icon, template.name)}
             <TemplateTitle>{name}</TemplateTitle>
             <TemplateDescription>{description}</TemplateDescription>
           </TemplateBlock>
@@ -155,16 +168,22 @@ const LoadingWrapper = styled.div`
 `;
 
 const Icon = styled.img`
-  height: 42px;
-  margin-top: 35px;
-  margin-bottom: 13px;
+  height: 25px;
+  margin-top: 30px;
+  margin-bottom: 5px;
+`;
+
+const NewIcon = styled.img`
+  height: 25px;
+  margin-top: 30px;
+  margin-bottom: 5px;
 `;
 
 const Polymer = styled.div`
   > i {
-    font-size: 34px;
-    margin-top: 38px;
-    margin-bottom: 20px;
+    font-size: 25px;
+    margin-top: 30px;
+    margin-bottom: 5px;
   }
 `;
 
@@ -174,7 +193,7 @@ const TemplateDescription = styled.div`
   text-align: center;
   font-weight: default;
   padding: 0px 25px;
-  height: 2.4em;
+  line-height: 1.4;
   font-size: 12px;
   display: -webkit-box;
   overflow: hidden;
@@ -183,7 +202,6 @@ const TemplateDescription = styled.div`
 `;
 
 const TemplateTitle = styled.div`
-  margin-bottom: 12px;
   width: 80%;
   text-align: center;
   font-size: 14px;
@@ -197,17 +215,16 @@ const TemplateBlock = styled.div`
   user-select: none;
   display: flex;
   font-size: 13px;
-  font-weight: 500;
   padding: 3px 0px 5px;
   flex-direction: column;
   align-item: center;
   justify-content: space-between;
-  height: 200px;
+  height: 170px;
   cursor: pointer;
   color: #ffffff;
   position: relative;
   border-radius: 5px;
-  background: #26292e;
+  background: linear-gradient(160deg, #26292e, #1e2023);
   border: 1px solid #494b4f;
   :hover {
     border: 1px solid #7a7b80;
@@ -231,5 +248,5 @@ const TemplateListWrapper = styled.div`
   display: grid;
   grid-column-gap: 25px;
   grid-row-gap: 25px;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 `;

dashboard/src/main/home/modals/Modal.tsx

@@ -146,7 +146,7 @@ const StyledModal = styled.div<{
   z-index: 999;
   font-size: 13px;
   border-radius: 10px;
-  background: #42444944;
+  background: #38444944;
   backdrop-filter: saturate(150%) blur(10px);
   border: 1px solid #494b4f;
   overflow: auto;

dashboard/src/main/home/provisioner/ProvisionerSettings.tsx

@@ -401,7 +401,7 @@ const Block = styled.div<{ disabled?: boolean }>`
   color: #ffffff;
   position: relative;
   border-radius: 5px;
-  background: #26292e;
+  background: linear-gradient(180deg, #26292e, #24272c);
   border: 1px solid #494b4f;
   :hover {
     border: ${(props) => (props.disabled ? "" : "1px solid #7a7b80")};

dashboard/src/main/home/sidebar/ClusterSection.tsx

@@ -5,8 +5,8 @@ import { ClusterType, ProjectType } from "shared/types";
 import { Tooltip } from "@material-ui/core";
 
 import settings from "assets/settings.svg";
-import monojob from "assets/monojob.png";
-import monoweb from "assets/monoweb.png";
+import job from "assets/job-bold.png";
+import web from "assets/web-bold.png";
 import sliders from "assets/sliders.svg";
 
 import SidebarLink from "./SidebarLink";
@@ -53,7 +53,7 @@ export const ClusterSection: React.FC<Props> = ({
               window.location.pathname.startsWith("/applications")
             }
           >
-            <Img src={monoweb} />
+            <Img src={web} />
             Applications
           </NavButton>
           <NavButton
@@ -64,7 +64,7 @@ export const ClusterSection: React.FC<Props> = ({
               window.location.pathname.startsWith("/jobs")
             }
           >
-            <Img src={monojob} />
+            <Img src={job} />
             Jobs
           </NavButton>
           <NavButton

dashboard/src/main/home/sidebar/Clusters.tsx

@@ -9,8 +9,8 @@ import { ClusterSection } from "./ClusterSection";
 import SidebarLink from "./SidebarLink";
 
 import settings from "assets/settings.svg";
-import monojob from "assets/monojob.png";
-import monoweb from "assets/monoweb.png";
+import job from "assets/job-bold.png";
+import web from "assets/web-bold.png";
 import sliders from "assets/sliders.svg";
 
 import { RouteComponentProps, withRouter } from "react-router";
@@ -180,7 +180,7 @@ class Clusters extends Component<PropsType, StateType> {
               window.location.pathname.startsWith("/applications")
             }
           >
-            <Img src={monoweb} />
+            <Img src={web} />
             Applications
           </NavButton>
           <NavButton
@@ -191,7 +191,7 @@ class Clusters extends Component<PropsType, StateType> {
               window.location.pathname.startsWith("/jobs")
             }
           >
-            <Img src={monojob} />
+            <Img src={job} />
             Jobs
           </NavButton>
           <NavButton

dashboard/src/main/home/sidebar/ProjectSection.tsx

@@ -263,7 +263,6 @@ const MainSelector = styled.div`
   margin: 10px 0 0;
   font-size: 14px;
   font-family: "Work Sans", sans-serif;
-  font-weight: 600;
   cursor: pointer;
   padding: 10px 0;
   padding-left: 20px;

dashboard/src/main/home/sidebar/Sidebar.tsx

@@ -148,24 +148,20 @@ class Sidebar extends Component<PropsType, StateType> {
 
           <br />
 
-          {currentCluster && (
-            <>
-              <SidebarLabel>
-                {currentProject.capi_provisioner_enabled ? (
-                  "Your team"
-                ) : (
-                  "Clusters"
-                )}
-              </SidebarLabel>
-              <Clusters
-                setWelcome={this.props.setWelcome}
-                currentView={currentView}
-                isSelected={false}
-                forceRefreshClusters={this.props.forceRefreshClusters}
-                setRefreshClusters={this.props.setRefreshClusters}
-              />
-            </>
-          )}
+          <SidebarLabel>
+            {currentProject.capi_provisioner_enabled ? (
+              "Your team"
+            ) : (
+              "Clusters"
+            )}
+          </SidebarLabel>
+          <Clusters
+            setWelcome={this.props.setWelcome}
+            currentView={currentView}
+            isSelected={false}
+            forceRefreshClusters={this.props.forceRefreshClusters}
+            setRefreshClusters={this.props.setRefreshClusters}
+          />
         </ScrollWrapper>
       );
     }
@@ -295,7 +291,6 @@ const SidebarLabel = styled.div`
   margin-bottom: 5px;
   font-size: 13px;
   z-index: 1;
-  font-weight: 500;
 `;
 
 const PullTab = styled.div`