increase sandbox placeholder size (#4292)

dashboard/src/components/ProvisionerFlow.tsx

@@ -1,16 +1,17 @@
-import React, { useState, useContext, useMemo } from "react";
+import React, { useContext, useMemo, useState } from "react";
 import styled from "styled-components";
 
-import { integrationList } from "shared/common";
-import { Context } from "shared/Context";
-import api from "shared/api";
-
-import ProvisionerForm from "components/ProvisionerForm";
+import AzureCredentialForm from "components/AzureCredentialForm";
 import CloudFormationForm from "components/CloudFormationForm";
 import CredentialsForm from "components/CredentialsForm";
-import GCPCredentialsForm from "components/GCPCredentialsForm";
 import Helper from "components/form-components/Helper";
-import AzureCredentialForm from "components/AzureCredentialForm";
+import GCPCredentialsForm from "components/GCPCredentialsForm";
+import ProvisionerForm from "components/ProvisionerForm";
+
+import api from "shared/api";
+import { integrationList } from "shared/common";
+import { Context } from "shared/Context";
+
 import AWSCostConsent from "./AWSCostConsent";
 import AzureCostConsent from "./AzureCostConsent";
 import GCPCostConsent from "./GCPCostConsent";
@@ -19,13 +20,9 @@ const providers = ["aws", "gcp", "azure"];
 
 type Props = {};
 
-const ProvisionerFlow: React.FC<Props> = ({ }) => {
-  const {
-    usage,
-    hasBillingEnabled,
-    currentProject,
-    featurePreview,
-  } = useContext(Context);
+const ProvisionerFlow: React.FC<Props> = ({}) => {
+  const { usage, hasBillingEnabled, currentProject, featurePreview } =
+    useContext(Context);
   const [currentStep, setCurrentStep] = useState("cloud");
   const [credentialId, setCredentialId] = useState("");
   const [showCostConfirmModal, setShowCostConfirmModal] = useState(false);
@@ -35,7 +32,11 @@ const ProvisionerFlow: React.FC<Props> = ({ }) => {
 
   const markStepCostConsent = async (step: string, provider: string) => {
     try {
-      await api.updateOnboardingStep("<token>", { step, provider }, { project_id: currentProject.id });
+      await api.updateOnboardingStep(
+        "<token>",
+        { step, provider },
+        { project_id: currentProject.id }
+      );
     } catch (err) {
       console.log(err);
     }
@@ -51,19 +52,19 @@ const ProvisionerFlow: React.FC<Props> = ({ }) => {
     return (
       <>
         <StyledProvisionerFlow>
-          <Helper>Select your hosting backend:</Helper>
           <BlockList>
             {providers.map((provider: string, i: number) => {
-              let providerInfo = integrationList[provider];
+              const providerInfo = integrationList[provider];
               return (
                 <Block
                   key={i}
                   disabled={
                     !currentProject?.multi_cluster &&
-                    (provider === "gcp" && !currentProject?.azure_enabled)
+                    provider === "gcp" &&
+                    !currentProject?.azure_enabled
                   }
                   onClick={() => {
-                    if ((provider != "gcp" || currentProject?.azure_enabled)) {
+                    if (provider != "gcp" || currentProject?.azure_enabled) {
                       openCostConsentModal(provider);
                       // setSelectedProvider(provider);
                       // setCurrentStep("credentials");
@@ -73,7 +74,9 @@ const ProvisionerFlow: React.FC<Props> = ({ }) => {
                   <Icon src={providerInfo.icon} />
                   <BlockTitle>{providerInfo.label}</BlockTitle>
                   <BlockDescription>
-                    {(provider === "gcp" && !currentProject?.azure_enabled) ? providerInfo.tagline : "Hosted in your own cloud"}
+                    {provider === "gcp" && !currentProject?.azure_enabled
+                      ? providerInfo.tagline
+                      : "Hosted in your own cloud"}
                   </BlockDescription>
                 </Block>
               );
@@ -106,7 +109,7 @@ const ProvisionerFlow: React.FC<Props> = ({ }) => {
               }}
             />
           )) ||
-            ((selectedProvider === "gcp" && (
+            (selectedProvider === "gcp" && (
               <GCPCostConsent
                 setCurrentStep={setCurrentStep}
                 setShowCostConfirmModal={setShowCostConfirmModal}
@@ -130,7 +133,7 @@ const ProvisionerFlow: React.FC<Props> = ({ }) => {
                   }
                 }}
               />
-            ))) ||
+            )) ||
             (selectedProvider === "azure" && (
               <AzureCostConsent
                 setCurrentStep={setCurrentStep}
@@ -162,16 +165,22 @@ const ProvisionerFlow: React.FC<Props> = ({ }) => {
       (selectedProvider === "aws" &&
         (useCloudFormationForm ? (
           <CloudFormationForm
-            goBack={() => setCurrentStep("cloud")}
+            goBack={() => {
+              setCurrentStep("cloud");
+            }}
             proceed={(id) => {
               setCredentialId(id);
               setCurrentStep("cluster");
             }}
-            switchToCredentialFlow={() => setUseCloudFormationForm(false)}
+            switchToCredentialFlow={() => {
+              setUseCloudFormationForm(false);
+            }}
           />
         ) : (
           <CredentialsForm
-            goBack={() => setCurrentStep("cloud")}
+            goBack={() => {
+              setCurrentStep("cloud");
+            }}
             proceed={(id) => {
               setCredentialId(id);
               setCurrentStep("cluster");
@@ -180,7 +189,9 @@ const ProvisionerFlow: React.FC<Props> = ({ }) => {
         ))) ||
       (selectedProvider === "azure" && (
         <AzureCredentialForm
-          goBack={() => setCurrentStep("cloud")}
+          goBack={() => {
+            setCurrentStep("cloud");
+          }}
           proceed={(id) => {
             setCredentialId(id);
             setCurrentStep("cluster");
@@ -189,7 +200,9 @@ const ProvisionerFlow: React.FC<Props> = ({ }) => {
       )) ||
       (selectedProvider === "gcp" && (
         <GCPCredentialsForm
-          goBack={() => setCurrentStep("cloud")}
+          goBack={() => {
+            setCurrentStep("cloud");
+          }}
           proceed={(id) => {
             setCredentialId(id);
             setCurrentStep("cluster");
@@ -200,7 +213,9 @@ const ProvisionerFlow: React.FC<Props> = ({ }) => {
   } else if (currentStep === "cluster") {
     return (
       <ProvisionerForm
-        goBack={() => setCurrentStep("credentials")}
+        goBack={() => {
+          setCurrentStep("credentials");
+        }}
         credentialId={credentialId}
         provider={selectedProvider}
       />

dashboard/src/main/home/infrastructure-dashboard/forms/CloudProviderSelect.tsx

@@ -2,8 +2,11 @@ import React, { useState } from "react";
 import styled from "styled-components";
 
 import Banner from "components/porter/Banner";
+import Button from "components/porter/Button";
+import DashboardPlaceholder from "components/porter/DashboardPlaceholder";
 import Link from "components/porter/Link";
 import Spacer from "components/porter/Spacer";
+import Text from "components/porter/Text";
 import DashboardHeader from "main/home/cluster-dashboard/DashboardHeader";
 import {
   CloudProviderAWS,
@@ -33,15 +36,6 @@ const CloudProviderSelect: React.FC<Props> = ({ onComplete }) => {
         disableLineBreak
         capitalize={false}
       />
-      <Banner>
-        Don't want to link your own cloud account? Immediately deploy your apps
-        on the <Spacer inline width="5px" />
-        <Link to="https://sandbox.porter.run" hasunderline>
-          Porter sandbox
-        </Link>
-        .
-      </Banner>
-      <Spacer y={1} />
       <StyledProvisionerFlow>
         <BlockList>
           {[CloudProviderAWS, CloudProviderGCP, CloudProviderAzure].map(
@@ -62,6 +56,24 @@ const CloudProviderSelect: React.FC<Props> = ({ onComplete }) => {
           )}
         </BlockList>
       </StyledProvisionerFlow>
+      <DashboardPlaceholder>
+        <Text size={16}>
+          Want to test Porter without linking your own cloud account?
+        </Text>
+        <Spacer y={0.5} />
+        <Text color={"helper"}>
+          Get started with the Porter sandbox environment.
+        </Text>
+        <Spacer y={1} />
+        <Link to="https://sandbox.porter.run">
+          <Button alt height="35px">
+            Deploy on the Porter sandbox <Spacer inline x={1} />{" "}
+            <i className="material-icons" style={{ fontSize: "18px" }}>
+              east
+            </i>
+          </Button>
+        </Link>
+      </DashboardPlaceholder>
       {cloudProvider !== undefined && (
         <CostConsentModal
           cloudProvider={cloudProvider}

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

@@ -4,8 +4,11 @@ import { devtools } from "valtio/utils";
 
 import Loading from "components/Loading";
 import Banner from "components/porter/Banner";
+import Button from "components/porter/Button";
+import DashboardPlaceholder from "components/porter/DashboardPlaceholder";
 import Link from "components/porter/Link";
 import Spacer from "components/porter/Spacer";
+import Text from "components/porter/Text";
 import ProvisionerFlow from "components/ProvisionerFlow";
 
 import api from "shared/api";
@@ -174,16 +177,25 @@ const Onboarding = () => {
             disableLineBreak
             capitalize={false}
           />
-          <Banner>
-            Don't want to link your own cloud account? Immediately deploy your
-            apps on the <Spacer inline width="5px" />
-            <Link to="https://sandbox.porter.run" hasunderline>
-              Porter sandbox
-            </Link>
-            .
-          </Banner>
-          <Spacer y={1} />
           <ProvisionerFlow />
+          <DashboardPlaceholder>
+            <Text size={16}>
+              Want to test Porter without linking your own cloud account?
+            </Text>
+            <Spacer y={0.5} />
+            <Text color={"helper"}>
+              Get started with the Porter sandbox environment.
+            </Text>
+            <Spacer y={1} />
+            <Link to="https://sandbox.porter.run">
+              <Button alt height="35px">
+                Deploy on the Porter sandbox <Spacer inline x={1} />{" "}
+                <i className="material-icons" style={{ fontSize: "18px" }}>
+                  east
+                </i>
+              </Button>
+            </Link>
+          </DashboardPlaceholder>
           <Div />
         </Wrapper>
       );