omit new project from onboarding redirect block

dashboard/src/components/Breadcrumb.tsx

@@ -6,7 +6,7 @@ import styled from "styled-components";
 type Props = {
   currentStep: string;
   steps: { value: string, label: string }[];
-  onClickStep: (step: string) => void;
+  onClickStep?: (step: string) => void;
 };
 
 const Breadcrumb: React.FC<Props> = ({ currentStep, steps, onClickStep }) => {
@@ -17,7 +17,7 @@ const Breadcrumb: React.FC<Props> = ({ currentStep, steps, onClickStep }) => {
           <>
           <Crumb
             bold={currentStep === step.value}
-            onClick={() => onClickStep(step.value)}
+            onClick={() => onClickStep && onClickStep(step.value)}
           >
             {step.label}
           </Crumb>
@@ -32,10 +32,11 @@ const Breadcrumb: React.FC<Props> = ({ currentStep, steps, onClickStep }) => {
 export default Breadcrumb;
 
 const StyledBreadcrumb = styled.div`
+  color: #aaaabb;
 `;
 
 const Crumb = styled.span<{ bold: boolean }>`
-  font-weight: ${(props) => (props.bold ? "600" : "normal")};
+  font-weight: ${props => props.bold ? "600" : "normal"};
+  color: ${props => props.bold ? "#ffffff" : "#aaaabb"};
   font-size: 13px;
-  cursor: pointer;
 `;

dashboard/src/main/home/Home.tsx

@@ -247,7 +247,9 @@ class Home extends Component<PropsType, StateType> {
       !this.context.hasFinishedOnboarding && 
       prevProps.match.url !== this.props.match.url &&
       this.props.history.location.pathname &&
-      !this.props.history.location.pathname.includes("onboarding")
+      !this.props.history.location.pathname.includes("onboarding") &&
+      !this.props.history.location.pathname.includes("new-project") &&
+      !this.props.history.location.pathname.includes("project-settings")
     ) {
       this.context.setCurrentModal("RedirectToOnboardingModal");
     }
@@ -415,6 +417,11 @@ class Home extends Component<PropsType, StateType> {
         )}
 
         <ViewWrapper>
+          <Navbar
+            logOut={this.props.logOut}
+            currentView={this.props.currentRoute} // For form feedback
+          />
+
           <Switch>
             <Route
               path="/new-project"
@@ -485,10 +492,6 @@ class Home extends Component<PropsType, StateType> {
             />
             <Route path={"*"} render={() => <Templates />} />
           </Switch>
-          <Navbar
-            logOut={this.props.logOut}
-            currentView={this.props.currentRoute} // For form feedback
-          />
         </ViewWrapper>
 
         <ConfirmOverlay

dashboard/src/main/home/navbar/Navbar.tsx

@@ -241,7 +241,7 @@ const StyledNavbar = styled.div`
   align-items: center;
   padding-right: 5px;
   justify-content: flex-end;
-  z-index: 999;
+  z-index: 1;
 `;
 
 const NavButton = styled.a`

dashboard/src/main/home/onboarding/Onboarding.tsx

@@ -130,7 +130,7 @@ const ViewWrapper = styled.div`
 const StyledOnboarding = styled.div`
   max-width: 700px;
   width: 50%;
-  z-index: 999;
+  z-index: 1;
   display: flex;
   align-items: center;
   margin-top: -6%;

dashboard/src/main/home/onboarding/components/ProviderSelector.tsx

@@ -23,12 +23,12 @@ export const registryOptions = [
   },
   {
     value: "aws",
-    icon: integrationList["aws"]?.icon,
+    icon: integrationList["ecr"]?.icon,
     label: "Amazon Elastic Container Registry (ECR)",
   },
   {
     value: "gcp",
-    icon: integrationList["gcp"]?.icon,
+    icon: integrationList["gcr"]?.icon,
     label: "Google Cloud Registry (GCR)",
   },
   {

dashboard/src/main/home/onboarding/components/RegistryList.tsx → dashboard/src/main/home/onboarding/components/RegistryImageList.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import api from "shared/api";
+import styled from "styled-components";
 
 const RegistryImageList: React.FC<{
   project: {
@@ -31,14 +32,27 @@ const RegistryImageList: React.FC<{
     return () => {};
   }, []);
   return (
-    <div>
-      {imageList.map((data) => (
-        <div>
+    <ImageList>
+      {imageList.map((data, i) => (
+        <ImageRow isLast={i === imageList.length - 1}>
           Name{data.name}, timestamp: {data.created_at}, URI: {data.uri}
-        </div>
+        </ImageRow>
       ))}
-    </div>
+    </ImageList>
   );
 };
 
 export default RegistryImageList;
+
+const ImageRow = styled.div<{ isLast?: boolean }>`
+  width: 100%;
+  height: 30px;
+  border-bottom: ${props => props.isLast ? "" : "1px solid #aaaabb"};
+`;
+
+const ImageList = styled.div`
+  border-radius: 5px;
+  border: 1px solid #aaaabb;
+  background: #ffffff11;
+  margin: 25px 0 30px;
+`;

dashboard/src/main/home/onboarding/steps/ConnectRegistry/forms/FormFlow.tsx

@@ -112,7 +112,7 @@ const FormFlowWrapper: React.FC<Props> = ({
           <i className="material-icons">keyboard_backspace</i>
         </CloseButton>
         {FormTitle[provider] && <img src={FormTitle[provider].icon} />}
-        {FormTitle[provider].label}
+        {FormTitle[provider] && FormTitle[provider].label}
       </FormHeader>
       <Breadcrumb
         currentStep={currentStep}
@@ -121,7 +121,6 @@ const FormFlowWrapper: React.FC<Props> = ({
           { value: "settings", label: "Settings" },
           { value: "test_connection", label: "Test Connection" },
         ]}
-        onClickStep={(step: string) => alert(step)}
       />
       {CurrentForm}
     </FormWrapper>

dashboard/src/main/home/onboarding/steps/ConnectRegistry/forms/_AWSRegistryForm.tsx

@@ -1,5 +1,6 @@
 import InputRow from "components/form-components/InputRow";
 import SelectRow from "components/form-components/SelectRow";
+import Helper from "components/form-components/Helper";
 import SaveButton from "components/SaveButton";
 import { AWSRegistryConfig } from "main/home/onboarding/types";
 import React, { useState } from "react";
@@ -9,7 +10,7 @@ import { useSnapshot } from "valtio";
 import { OFState } from "../../../state/index";
 import IntegrationCategories from "main/home/integrations/IntegrationCategories";
 import { StateHandler } from "main/home/onboarding/state/StateHandler";
-import RegistryImageList from "main/home/onboarding/components/RegistryList";
+import RegistryImageList from "main/home/onboarding/components/RegistryImageList";
 
 const regionOptions = [
   { value: "us-east-1", label: "US East (N. Virginia) us-east-1" },
@@ -193,6 +194,7 @@ export const SettingsForm: React.FC<{
 
   return (
     <>
+      <Helper>Provide a name for Porter to use when displaying your registry.</Helper>
       <InputRow
         type="text"
         value={registryName}
@@ -243,5 +245,5 @@ export const TestRegistryConnection: React.FC<{ nextFormStep: () => void }> = ({
 
 const Br = styled.div`
   width: 100%;
-  height: 10px;
+  height: 15px;
 `;

dashboard/src/main/home/onboarding/steps/ConnectRegistry/forms/_DORegistryForm.tsx

@@ -86,6 +86,7 @@ export const SettingsForm: React.FC<{
 
   return (
     <>
+      <Helper>Provide a name for Porter to use when displaying your registry.</Helper>
       <InputRow
         type="text"
         value={registryName}
@@ -144,7 +145,7 @@ export const TestRegistryConnection: React.FC<{
 
 const Br = styled.div`
   width: 100%;
-  height: 10px;
+  height: 15px;
 `;
 
 const CodeBlock = styled.span`

dashboard/src/main/home/onboarding/steps/ConnectRegistry/forms/_GCPRegistryForm.tsx

@@ -163,6 +163,7 @@ export const SettingsForm: React.FC<{
   };
   return (
     <>
+      <Helper>Provide a name for Porter to use when displaying your registry.</Helper>
       <InputRow
         type="text"
         value={registryName}
@@ -221,7 +222,7 @@ export const TestRegistryConnection: React.FC<{
 
 const Br = styled.div`
   width: 100%;
-  height: 10px;
+  height: 15px;
 `;
 
 const CodeBlock = styled.span`

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/FormFlow.tsx

@@ -115,7 +115,6 @@ const FormFlowWrapper: React.FC<Props> = ({
           { value: "credentials", label: "Credentials" },
           { value: "settings", label: "Settings" },
         ]}
-        onClickStep={(step: string) => alert(step)}
       />
       {CurrentForm}
     </FormWrapper>

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/_AWSProvisionerForm.tsx

@@ -289,5 +289,5 @@ export const Status: React.FC<{
 
 const Br = styled.div`
   width: 100%;
-  height: 10px;
+  height: 15px;
 `;

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/_DOProvisionerForm.tsx

@@ -243,7 +243,7 @@ export const Status: React.FC<{
 
 const Br = styled.div`
   width: 100%;
-  height: 10px;
+  height: 15px;
 `;
 
 const CodeBlock = styled.span`

dashboard/src/main/home/onboarding/steps/ProvisionResources/forms/_GCPProvisionerForm.tsx

@@ -265,7 +265,7 @@ export const Status: React.FC<{
 
 const Br = styled.div`
   width: 100%;
-  height: 10px;
+  height: 15px;
 `;
 
 const CodeBlock = styled.span`