provisioner forms styling

dashboard/src/components/Selector.tsx

@@ -14,6 +14,8 @@ type PropsType = {
   dropdownWidth?: string;
   dropdownMaxHeight?: string;
   closeOverlay?: boolean;
+  placeholder?: string;
+  scrollBuffer?: boolean;
 };
 
 type StateType = {};
@@ -103,20 +105,23 @@ export default class Selector extends Component<PropsType, StateType> {
   renderDropdown = () => {
     if (this.state.expanded) {
       return (
-        <Dropdown
-          ref={this.wrapperRef}
-          dropdownWidth={
-            this.props.dropdownWidth
-              ? this.props.dropdownWidth
-              : this.props.width
-          }
-          dropdownMaxHeight={this.props.dropdownMaxHeight}
-          onClick={() => this.setState({ expanded: false })}
-        >
-          {this.renderDropdownLabel()}
-          {this.renderOptionList()}
-          {this.renderAddButton()}
-        </Dropdown>
+        <DropdownWrapper>
+          <Dropdown
+            ref={this.wrapperRef}
+            dropdownWidth={
+              this.props.dropdownWidth
+                ? this.props.dropdownWidth
+                : this.props.width
+            }
+            dropdownMaxHeight={this.props.dropdownMaxHeight}
+            onClick={() => this.setState({ expanded: false })}
+          >
+            {this.renderDropdownLabel()}
+            {this.renderOptionList()}
+            {this.renderAddButton()}
+          </Dropdown>
+          {this.props.scrollBuffer && <ScrollBuffer />}
+        </DropdownWrapper>
       );
     }
   };
@@ -168,7 +173,13 @@ export default class Selector extends Component<PropsType, StateType> {
           <Flex>
             {this.renderIcon()}
             <TextWrap>
-              {activeValue === "" ? "All" : this.getLabel(activeValue)}
+              {
+                activeValue ? (
+                  activeValue === "" ? "All" : this.getLabel(activeValue)
+                ) : (
+                  this.props.placeholder
+                )
+              }
             </TextWrap>
           </Flex>
           <i className="material-icons">arrow_drop_down</i>
@@ -181,6 +192,18 @@ export default class Selector extends Component<PropsType, StateType> {
 
 Selector.contextType = Context;
 
+const DropdownWrapper = styled.div`
+  position: absolute;
+  width: 100%;
+  right: 0;
+  top: calc(100% + 5px);
+`;
+
+const ScrollBuffer = styled.div`
+  width: 100%;
+  height: 50px;
+`;
+
 const Flex = styled.div`
   display: flex;
   align-items: center;
@@ -278,9 +301,6 @@ const CloseOverlay = styled.div`
 `;
 
 const Dropdown = styled.div`
-  position: absolute;
-  right: 0;
-  top: calc(100% + 5px);
   background: #26282f;
   width: ${(props: { dropdownWidth: string; dropdownMaxHeight: string }) =>
     props.dropdownWidth};

dashboard/src/components/form-components/SelectRow.tsx

@@ -11,6 +11,7 @@ type PropsType = {
   dropdownLabel?: string;
   width?: string;
   dropdownMaxHeight?: string;
+  scrollBuffer?: boolean;
 };
 
 type StateType = {};
@@ -22,6 +23,7 @@ export default class SelectRow extends Component<PropsType, StateType> {
         <Label>{this.props.label}</Label>
         <SelectWrapper>
           <Selector
+            scrollBuffer={this.props.scrollBuffer}
             activeValue={this.props.value}
             setActiveValue={this.props.setActiveValue}
             options={this.props.options}

dashboard/src/components/form-components/UploadArea.tsx

@@ -112,7 +112,7 @@ const DNDArea = styled.div`
   padding: 5px 10px;
   margin-right: 8px;
   width: 100%;
-  height: 150px;
+  height: 80px;
   cursor: pointer;
 `;
 

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

@@ -110,15 +110,29 @@ const Onboarding = () => {
   }, [context.currentProject]);
 
   return (
-    <StyledOnboarding>{isLoading ? <Loading /> : <Routes />}</StyledOnboarding>
+    <StyledOnboarding>
+      {isLoading ? <Loading /> : <Routes />}
+    </StyledOnboarding>
   );
 };
 
 export default Onboarding;
 
+const ViewWrapper = styled.div`
+  width: 100%;
+  overflow-y: auto;
+  display: flex;
+  justify-content: center;
+  margin-top: -10vh;
+  height: 111%;
+  padding-top: 600px;
+  padding-bottom: 300px;
+`;
+
 const StyledOnboarding = styled.div`
   max-width: 700px;
   width: 50%;
+  z-index: 999;
   display: flex;
   align-items: center;
   margin-top: -6%;

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

@@ -45,7 +45,7 @@ const externalOption = {
 const dummyOption = {
   value: "dummy",
   icon: "",
-  label: "Select a provider",
+  label: "Select a cloud provider",
 };
 
 const ProviderSelector: React.FC<ProviderSelectorProps> = ({
@@ -58,7 +58,7 @@ const ProviderSelector: React.FC<ProviderSelectorProps> = ({
       return "skip";
     }
 
-    return "dummy";
+    return null;
   });
 
   const availableOptions = useMemo(() => {
@@ -76,9 +76,6 @@ const ProviderSelector: React.FC<ProviderSelectorProps> = ({
       if (skipOptionIndex >= 0) {
         options.splice(skipOptionIndex, 1);
       }
-      if (!options.find((o) => o.value === "dummy")) {
-        options.unshift(dummyOption);
-      }
     }
 
     if (enableExternal) {
@@ -96,6 +93,7 @@ const ProviderSelector: React.FC<ProviderSelectorProps> = ({
       <Selector
         activeValue={provider}
         options={availableOptions}
+        placeholder="Select a cloud provider"
         setActiveValue={(provider) => {
           setProvider(provider);
           selectProvider(provider as SupportedProviders);

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

@@ -45,11 +45,11 @@ const Forms = {
 const FormTitle = {
   aws: {
     label: "Amazon Elastic Container Registry (ECR)",
-    icon: integrationList["aws"].icon,
+    icon: integrationList["ecr"].icon,
   },
   gcp: {
     label: "Google Container Registry (GCR)",
-    icon: integrationList["gcp"].icon,
+    icon: integrationList["gcr"].icon,
   },
   do: {
     label: "Digital Ocean Container Registry (DOCR)",
@@ -160,15 +160,16 @@ const FormHeader = styled.div`
   font-weight: 500;
 
   > img {
-    height: 18px;
+    height: 22px;
     margin-right: 12px;
   }
 `;
 
 const FormWrapper = styled.div`
-  background: #ffffff11;
+  background: #ffffff0a;
   margin-top: 25px;
-  padding: 20px;
+  padding: 20px 20px 23px;
   border-radius: 5px;
   position: relative;
+  border: 1px solid #ffffff55;
 `;

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

@@ -116,6 +116,7 @@ export const CredentialsForm: React.FC<{
       <SelectRow
         options={regionOptions}
         width="100%"
+        scrollBuffer={true}
         value={awsRegion}
         dropdownMaxHeight="240px"
         setActiveValue={(x: string) => {

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

@@ -45,14 +45,12 @@ export const CredentialsForm: React.FC<{
 
   const encoded_redirect_uri = encodeURIComponent(url);
   return (
-    <>
-      <ConnectDigitalOceanButton
-        target={"_blank"}
-        href={`/api/projects/${project?.id}/oauth/digitalocean?redirect_uri=${encoded_redirect_uri}`}
-      >
-        Connect Digital Ocean
-      </ConnectDigitalOceanButton>
-    </>
+    <ConnectDigitalOceanButton
+      target={"_blank"}
+      href={`/api/projects/${project?.id}/oauth/digitalocean?redirect_uri=${encoded_redirect_uri}`}
+    >
+      Connect Digital Ocean
+    </ConnectDigitalOceanButton>
   );
 };
 
@@ -157,6 +155,7 @@ const CodeBlock = styled.span`
 const ConnectDigitalOceanButton = styled.a`
   width: 200px;
   justify-content: center;
+  margin-top: 22px;
   border-radius: 5px;
   display: flex;
   flex-direction: row;

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

@@ -85,6 +85,7 @@ export const CredentialsForm: React.FC<{
         height="100%"
         isRequired={true}
       />
+      <Br />
       <SaveButton
         text="Continue"
         disabled={false}
@@ -217,6 +218,11 @@ export const TestRegistryConnection: React.FC<{
   );
 };
 
+const Br = styled.div`
+  width: 100%;
+  height: 10px;
+`;
+
 const CodeBlock = styled.span`
   display: inline-block;
   background-color: #1b1d26;

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

@@ -88,8 +88,9 @@ const ProvisionResources: React.FC<Props> = ({
 
 export default ProvisionResources;
 
-const Subtitle = styled(TitleSection)`
+const Subtitle = styled.div`
   font-size: 16px;
+  font-weight: 500;
   margin-top: 16px;
 `;
 

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

@@ -4,13 +4,14 @@ import {
   SupportedProviders,
 } from "main/home/onboarding/types";
 import React, { useContext, useMemo } from "react";
-import { Context } from "shared/Context";
 import styled from "styled-components";
+import Breadcrumb from "components/Breadcrumb";
+import { integrationList } from "shared/common";
 import {
   CredentialsForm as AWSCredentialsForm,
   SettingsForm as AWSSettingsForm,
   Status as AWSProvisionerStatus,
-} from "./_AWSProvsionerForm";
+} from "./_AWSProvisionerForm";
 
 import {
   CredentialsForm as DOCredentialsForm,
@@ -43,9 +44,22 @@ const Forms = {
 };
 
 const FormTitle = {
-  aws: "Amazon Web Services (AWS)",
-  gcp: "Google Cloud Platform  (GCP)",
-  do: "Digital Ocean",
+  aws: {
+    label: "Amazon Web Services (AWS)",
+    icon: integrationList["aws"].icon,
+  },
+  gcp: {
+    label: "Google Cloud Platform (GCP)",
+    icon: integrationList["gcp"].icon,
+  },
+  do: {
+    label: "Digital Ocean (DO)",
+    icon: integrationList["do"].icon,
+  },
+  external: {
+    label: "Connect an existing cluster",
+    icon: integrationList["kubernetes"],
+  }
 };
 
 type Props = {
@@ -93,24 +107,71 @@ const FormFlowWrapper: React.FC<Props> = ({
   }, [currentStep, provider]);
 
   return (
-    <>
-      {provider !== "external" && FormTitle[provider]}
-      <Breadcrumb>
-        <Text bold={currentStep === "credentials"}>Credentials</Text>
-        {" > "}
-        <Text bold={currentStep === "settings"}>Settings</Text>
-      </Breadcrumb>
+    <FormWrapper>
+      <FormHeader>
+        <CloseButton onClick={() => alert("go back")}>
+          <i className="material-icons">keyboard_backspace</i>
+        </CloseButton>
+        <img src={FormTitle[provider].icon} />
+        {FormTitle[provider].label}
+      </FormHeader>
+      <Breadcrumb
+        currentStep={currentStep}
+        steps={[
+          { value: "credentials", label: "Credentials" },
+          { value: "settings", label: "Settings" },
+        ]}
+        onClickStep={(step: string) => alert(step)}
+      />
       {CurrentForm}
-    </>
+    </FormWrapper>
   );
 };
 
 export default FormFlowWrapper;
 
-const Text = styled.span<{ bold: boolean }>`
-  font-weight: ${(props) => (props.bold ? "600" : "normal")};
+const CloseButton = styled.div`
+  width: 30px;
+  height: 30px;
+  margin-left: -5px;
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  border-radius: 50%;
+  right: 10px;
+  top: 10px;
+  cursor: pointer;
+  :hover {
+    background-color: #ffffff11;
+  }
+
+  > i {
+    font-size: 20px;
+    color: #aaaabb;
+  }
+`;
+
+const FormHeader = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  font-size: 13px;
+  margin-top: -2px;
+  font-weight: 500;
+
+  > img {
+    height: 18px;
+    margin-right: 12px;
+  }
 `;
 
-const Breadcrumb = styled.div`
-  margin: 0 10px;
+const FormWrapper = styled.div`
+  background: #ffffff0a;
+  margin-top: 25px;
+  padding: 20px 20px 23px;
+  border-radius: 5px;
+  position: relative;
+  border: 1px solid #ffffff55;
 `;

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

@@ -1,3 +1,4 @@
+import styled from "styled-components";
 import InputRow from "components/form-components/InputRow";
 import SelectRow from "components/form-components/SelectRow";
 import SaveButton from "components/SaveButton";
@@ -120,12 +121,14 @@ export const CredentialsForm: React.FC<{
         options={regionOptions}
         width="100%"
         value={awsRegion}
+        scrollBuffer={true}
         dropdownMaxHeight="240px"
         setActiveValue={(x: string) => {
           setAWSRegion(x);
         }}
         label="📍 AWS Region"
       />
+      <Br />
       <SaveButton
         text="Continue"
         disabled={false}
@@ -257,6 +260,7 @@ export const SettingsForm: React.FC<{
         }}
         label="⚙️ AWS Machine Type"
       />
+      <Br />
       <SaveButton
         text="Provision resources"
         disabled={false}
@@ -282,3 +286,8 @@ export const Status: React.FC<{
     />
   );
 };
+
+const Br = styled.div`
+  width: 100%;
+  height: 10px;
+`;

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

@@ -121,13 +121,14 @@ export const CredentialsForm: React.FC<{
         options={regionOptions}
         width="100%"
         value={region}
+        scrollBuffer={true}
         dropdownMaxHeight="240px"
         setActiveValue={(x: string) => {
           setRegion(x);
         }}
         label="📍 GCP Region"
       />
-
+      <Br />
       <SaveButton
         text="Continue"
         disabled={false}
@@ -261,6 +262,11 @@ export const Status: React.FC<{
   );
 };
 
+const Br = styled.div`
+  width: 100%;
+  height: 10px;
+`;
+
 const CodeBlock = styled.span`
   display: inline-block;
   background-color: #1b1d26;