Launch no cluster cl (#2810)

* install github app button

* launch no cluster placeholder

dashboard/src/components/TitleSection.tsx

@@ -74,14 +74,14 @@ const StyledTitleSection = styled.div`
 `;
 
 const Icon = styled.img<{ width: string }>`
-  width: ${(props) => props.width || "25px"};
+  height: ${(props) => props.width || "24px"};
   margin-right: 16px;
   display: flex;
   align-items: center;
 `;
 
 const MaterialIcon = styled.span<{ width: string }>`
-  width: ${(props) => props.width || "25px"};
+  height: ${(props) => props.width || "24px"};
   margin-right: 16px;
 `;
 

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

@@ -4,6 +4,7 @@ import { Route, RouteComponentProps, Switch, withRouter } from "react-router";
 import { integrationList } from "shared/common";
 import styled from "styled-components";
 import { pushFiltered } from "shared/routing";
+import integrations from "assets/integrations.svg";
 
 import CreateIntegrationForm from "./create-integration/CreateIntegrationForm";
 import IntegrationCategories from "./IntegrationCategories";
@@ -11,6 +12,7 @@ import IntegrationList from "./IntegrationList";
 import TitleSection from "components/TitleSection";
 import { Context } from "shared/Context";
 import Spacer from "components/porter/Spacer";
+import DashboardHeader from "../cluster-dashboard/DashboardHeader";
 
 type PropsType = RouteComponentProps;
 
@@ -74,9 +76,13 @@ const Integrations: React.FC<PropsType> = (props) => {
           }}
         />
         <Route>
-          <div>
-            <TitleSection>Integrations</TitleSection>
-            <Spacer y={1} />
+          <>
+            <DashboardHeader
+              image={integrations}
+              title="Integrations"
+              description="Manage third-party integrations for your Porter project."
+              disableLineBreak
+            />
             <IntegrationList
               currentCategory={""}
               integrations={IntegrationCategoryStrings}
@@ -86,7 +92,7 @@ const Integrations: React.FC<PropsType> = (props) => {
               isCategory={true}
               updateIntegrationList={() => {}}
             />
-          </div>
+          </>
         </Route>
       </Switch>
     </StyledIntegrations>

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

@@ -12,13 +12,18 @@ import LaunchFlow from "./launch-flow/LaunchFlow";
 import NoClusterPlaceholder from "../NoClusterPlaceholder";
 import TitleSection from "components/TitleSection";
 import ClusterProvisioningPlaceholder from "components/ClusterProvisioningPlaceholder";
+import DashboardHeader from "../cluster-dashboard/DashboardHeader";
 
+import rocket from "assets/rocket.png";
 import semver from "semver";
 import { RouteComponentProps, withRouter } from "react-router";
-import { getQueryParam, getQueryParams } from "shared/routing";
+import { getQueryParam, getQueryParams, pushFiltered } from "shared/routing";
 import TemplateList from "./TemplateList";
 import { capitalize } from "lodash";
 import Spacer from "components/porter/Spacer";
+import Fieldset from "components/porter/Fieldset";
+import Text from "components/porter/Text";
+import Container from "components/porter/Container";
 
 const initialTabOptions = [
   { label: "New application", value: "porter" },
@@ -371,7 +376,6 @@ class Templates extends Component<PropsType, StateType> {
     } else if (this.state.readyClusterStatus === "none-ready") {
       return (
         <>
-          <Br />
           <ClusterProvisioningPlaceholder />
         </>
       )
@@ -396,11 +400,20 @@ class Templates extends Component<PropsType, StateType> {
     } else if (!this.context.currentCluster) {
       return (
         <>
-          <Banner>
-            <i className="material-icons">error_outline</i>
-            No cluster connected to this project.
-          </Banner>
-          <NoClusterPlaceholder />
+          <Fieldset>
+            <Text size={16}>No cluster detected</Text>
+            <Spacer height="15px" />
+            <Container row>
+              <Text color="helper">A cluster is required to deploy applications. You can automatically provision a cluster</Text>
+              <Link onClick={() => {
+                pushFiltered(this.props, "/dashboard", ["project_id"]);
+              }}>
+                here
+                <i className="material-icons">arrow_forward</i> 
+              </Link>
+            </Container>
+            <Spacer height="10px" />
+          </Fieldset>
         </>
       );
     }
@@ -413,16 +426,12 @@ class Templates extends Component<PropsType, StateType> {
     if (!this.state.isOnLaunchFlow || !this.state.currentTemplate) {
       return (
         <TemplatesWrapper>
-          <TitleSection>
-            Launch
-            <a
-              href="https://docs.porter.run/deploying-applications/overview"
-              target="_blank"
-            >
-              <i className="material-icons">help_outline</i>
-            </a>
-          </TitleSection>
-          <Spacer height="20px" />
+          <DashboardHeader
+            image={rocket}
+            title="Launch"
+            description="Deploy applications and add-ons to your environment."
+            disableLineBreak
+          />
           {this.renderContents()}
         </TemplatesWrapper>
       );
@@ -445,9 +454,18 @@ Templates.contextType = Context;
 
 export default withRouter(Templates);
 
-const Br = styled.div`
-  width: 100%;
-  height: 10px;
+const Link = styled.a`
+  text-decoration: underline;
+  margin-left: 5px;
+  position: relative;
+  cursor: pointer;
+  > i {
+    color: #aaaabb;
+    font-size: 15px;
+    position: absolute;
+    right: -17px;
+    top: 1px;
+  }
 `;
 
 const Placeholder = styled.div`
@@ -465,22 +483,6 @@ const Placeholder = styled.div`
   }
 `;
 
-const Banner = styled.div`
-  height: 40px;
-  width: 100%;
-  margin: 30px 0 38px;
-  font-size: 13px;
-  display: flex;
-  border-radius: 5px;
-  padding-left: 15px;
-  align-items: center;
-  background: #ffffff11;
-  > i {
-    margin-right: 10px;
-    font-size: 18px;
-  }
-`;
-
 const LoadingWrapper = styled.div`
   padding-top: 300px;
 `;

dashboard/src/main/home/project-settings/ProjectSettings.tsx

@@ -2,19 +2,18 @@ import React, { Component } from "react";
 import styled from "styled-components";
 
 import { Context } from "shared/Context";
+import settings from "assets/settings-centered.svg";
 
 import InvitePage from "./InviteList";
 import TabRegion from "components/TabRegion";
 import Heading from "components/form-components/Heading";
 import Helper from "components/form-components/Helper";
-import TitleSection from "components/TitleSection";
+import DashboardHeader from "../cluster-dashboard/DashboardHeader";
 import { withAuth, WithAuthProps } from "shared/auth/AuthorizationHoc";
 import { RouteComponentProps, withRouter, WithRouterProps } from "react-router";
 import { getQueryParam } from "shared/routing";
-import BillingPage from "./BillingPage";
 import APITokensSection from "./APITokensSection";
 import _ from "lodash";
-import Spacer from "components/porter/Spacer";
 
 type PropsType = RouteComponentProps & WithAuthProps & {};
 
@@ -185,8 +184,12 @@ class ProjectSettings extends Component<PropsType, StateType> {
   render() {
     return (
       <StyledProjectSettings>
-        <TitleSection>Project settings</TitleSection>
-        <Spacer height="20px" />
+        <DashboardHeader
+          image={settings}
+          title="Project settings"
+          description="Configure access permissions and additional project settings."
+          disableLineBreak
+        />
         <TabRegion
           currentTab={this.state.currentTab}
           setCurrentTab={(x: string) => this.setState({ currentTab: x })}