ui cleanup

dashboard/src/components/porter/VerticalSteps.tsx

@@ -84,12 +84,13 @@ const OpacityWrapper = styled.div<{
 
 const StepWrapper = styled.div<{
 }>`
-  padding-left: 22px;
+  padding-left: 30px;
   position: relative;
   margin-bottom: 35px;
 `;
 
 const StyledVerticalSteps = styled.div<{
 }>`
-width: 600px;
+  min-width: 600px;
+  max-width: 800px;
 `;

dashboard/src/main/home/add-on-dashboard/ConfigureTemplate.tsx

@@ -171,61 +171,70 @@ const ConfigureTemplate: React.FC<Props> = ({
   };
 
   return (
-    <StyledConfigureTemplate>
-      <Back onClick={goBack} />
-      <DashboardHeader
-        prefix={
-          <Icon 
-            src={hardcodedIcons[currentTemplate.name] || currentTemplate.icon}
-          />
-        }
-        title={`Configure new ${hardcodedNames[currentTemplate.name] || currentTemplate.name} instance`}
-        capitalize={false}
-        disableLineBreak
-      />
-      <DarkMatter />
-      <VerticalSteps
-        currentStep={currentStep}
-        steps={[
-          <>
-            <Text size={16}>Add-on name</Text>
-            <Spacer y={0.5} />
-            <Text color="helper">
-              Randomly generated if left blank (lowercase letters, numbers, and "-" only).
-            </Text>
-            <Spacer height="20px" />
-            <Input
-              placeholder="ex: academic-sophon"
-              value={name}
-              width="300px"
-              setValue={(e) => {
-                if (e) {
-                  setCurrentStep(1);
-                } else {
-                  setCurrentStep(0);
-                }
-                setName(e);
-              }}
+    <CenterWrapper>
+      <StyledConfigureTemplate>
+        <Back onClick={goBack} />
+        <DashboardHeader
+          prefix={
+            <Icon 
+              src={hardcodedIcons[currentTemplate.name] || currentTemplate.icon}
             />
-          </>,
-          <>
-            <Text size={16}>Add-on settings</Text>
-            <Spacer y={0.5} />
-            <Text color="helper">
-            Configure settings for this add-on.
-            </Text>
-            <Spacer height="20px" />
-            {renderAddOnSettings()}
-          </>
-        ]}
-      />
-      <Spacer height="80px" />
-    </StyledConfigureTemplate>
+          }
+          title={`Configure new ${hardcodedNames[currentTemplate.name] || currentTemplate.name} instance`}
+          capitalize={false}
+          disableLineBreak
+        />
+        <DarkMatter />
+        <VerticalSteps
+          currentStep={currentStep}
+          steps={[
+            <>
+              <Text size={16}>Add-on name</Text>
+              <Spacer y={0.5} />
+              <Text color="helper">
+                Randomly generated if left blank (lowercase letters, numbers, and "-" only).
+              </Text>
+              <Spacer height="20px" />
+              <Input
+                placeholder="ex: academic-sophon"
+                value={name}
+                width="300px"
+                setValue={(e) => {
+                  if (e) {
+                    setCurrentStep(1);
+                  } else {
+                    setCurrentStep(0);
+                  }
+                  setName(e);
+                }}
+              />
+            </>,
+            <>
+              <Text size={16}>Add-on settings</Text>
+              <Spacer y={0.5} />
+              <Text color="helper">
+              Configure settings for this add-on.
+              </Text>
+              <Spacer height="20px" />
+              {renderAddOnSettings()}
+            </>
+          ]}
+        />
+        <Spacer height="80px" />
+      </StyledConfigureTemplate>
+    </CenterWrapper>
   );
 };
 
 export default withRouter(ConfigureTemplate);
 
+const CenterWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
 const DarkMatter = styled.div`
   width: 100%;
   margin-top: -5px;
@@ -250,6 +259,5 @@ const Icon = styled.img`
 `;
 
 const StyledConfigureTemplate = styled.div`
-  width: 100%;
   height: 100%;
 `;

dashboard/src/main/home/app-dashboard/new-app-flow/NewAppFlow.tsx

@@ -64,117 +64,126 @@ const NewAppFlow: React.FC<Props> = ({
   const [formState, setFormState] = useState<FormState>(INITIAL_STATE);
 
   return (
-    <StyledConfigureTemplate>
-      <Back to="/apps" />
-      <DashboardHeader
-        prefix={
-          <Icon
-            src={web}
-          />
-        }
-        title="Deploy a new application"
-        capitalize={false}
-        disableLineBreak
-      />
-      <DarkMatter />
-      <VerticalSteps
-        currentStep={currentStep}
-        steps={[
-          <>
-            <Text size={16}>Application name</Text>
-            <Spacer y={0.5} />
-            <Text color="helper">
-              Lowercase letters, numbers, and "-" only.
-            </Text>
-            <Spacer y={0.5} />
-            <Input
-              placeholder="ex: academic-sophon"
-              value={formState.applicationName}
-              width="100%"
-              setValue={(e) => {
-                setFormState({ ...formState, applicationName: e })
-                if (Validators.applicationName(e)) {
-                  setCurrentStep(Math.max(currentStep, 1));
-                }
-              }}
+    <CenterWrapper>
+      <StyledConfigureTemplate>
+        <Back to="/apps" />
+        <DashboardHeader
+          prefix={
+            <Icon
+              src={web}
             />
-          </>,
-          <>
-            <Text size={16}>Deployment method</Text>
-            <Spacer y={0.5} />
-            <Text color="helper">
-              Deploy from a Git repository or a Docker registry.
-              <a
-                href="https://docs.porter.run/deploying-applications/overview"
-                target="_blank"
-              >
-                &nbsp;Learn more.
-              </a>
-            </Text>
-            <Spacer y={0.5} />
-            <SourceSelector
-              selectedSourceType={formState.selectedSourceType}
-              setSourceType={(type) => {
-                setFormState({ ...formState, selectedSourceType: type })
-                if (Validators.selectedSourceType(type)) {
-                  setCurrentStep(Math.max(currentStep, 2));
-                }
-              }}
-            />
-            <SourceSettings source={formState.selectedSourceType} />
-          </>,
-          <>
-            <Text size={16}>Services</Text>
-            <Spacer y={1} />
-            <Services
-              setServices={
-                (services: any[]) => {
-                  setFormState({ ...formState, serviceList: services })
-                  if (Validators.serviceList(services)) {
-                    setCurrentStep(Math.max(currentStep, 4));
+          }
+          title="Deploy a new application"
+          capitalize={false}
+          disableLineBreak
+        />
+        <DarkMatter />
+        <VerticalSteps
+          currentStep={currentStep}
+          steps={[
+            <>
+              <Text size={16}>Application name</Text>
+              <Spacer y={0.5} />
+              <Text color="helper">
+                Lowercase letters, numbers, and "-" only.
+              </Text>
+              <Spacer y={0.5} />
+              <Input
+                placeholder="ex: academic-sophon"
+                value={formState.applicationName}
+                width="300px"
+                setValue={(e) => {
+                  setFormState({ ...formState, applicationName: e })
+                  if (Validators.applicationName(e)) {
+                    setCurrentStep(Math.max(currentStep, 1));
                   }
                 }}
-              services={formState.serviceList}
-            />
-          </>,
-          <>
-            <Text size={16}>Environment variables</Text>
-            <Spacer y={0.5} />
-            <Text color="helper">
-              Specify environment variables shared among all services.
-            </Text>
-            <EnvGroupArray
-              values={formState.envVariables}
-              setValues={(x: any) => setFormState({ ...formState, envVariables: x })}
-              fileUpload={true}
-            />
-          </>,
-          <>
-            <Text size={16}>Release command (optional)</Text>
-            <Spacer y={0.5} />
-            <Text color="helper">
-              If specified, this command will be run before every deployment.
-            </Text>
-            <Spacer y={0.5} />
-            <Input
-              placeholder="yarn ./scripts/run-migrations.js"
-              value={""}
-              width="100%"
-              setValue={(e) => { }}
-            />
-          </>
-        ]}
-      />
-      <Spacer y={1} />
-      <Button onClick={() => ({})}>
-        DEPLYOY
-      </Button>
-    </StyledConfigureTemplate>
+              />
+            </>,
+            <>
+              <Text size={16}>Deployment method</Text>
+              <Spacer y={0.5} />
+              <Text color="helper">
+                Deploy from a Git repository or a Docker registry.
+                <a
+                  href="https://docs.porter.run/deploying-applications/overview"
+                  target="_blank"
+                >
+                  &nbsp;Learn more.
+                </a>
+              </Text>
+              <Spacer y={0.5} />
+              <SourceSelector
+                selectedSourceType={formState.selectedSourceType}
+                setSourceType={(type) => {
+                  setFormState({ ...formState, selectedSourceType: type })
+                  if (Validators.selectedSourceType(type)) {
+                    setCurrentStep(Math.max(currentStep, 2));
+                  }
+                }}
+              />
+              <SourceSettings source={formState.selectedSourceType} />
+            </>,
+            <>
+              <Text size={16}>Services</Text>
+              <Spacer y={1} />
+              <Services
+                setServices={
+                  (services: any[]) => {
+                    setFormState({ ...formState, serviceList: services })
+                    if (Validators.serviceList(services)) {
+                      setCurrentStep(Math.max(currentStep, 4));
+                    }
+                  }}
+                services={formState.serviceList}
+              />
+            </>,
+            <>
+              <Text size={16}>Environment variables</Text>
+              <Spacer y={0.5} />
+              <Text color="helper">
+                Specify environment variables shared among all services.
+              </Text>
+              <EnvGroupArray
+                values={formState.envVariables}
+                setValues={(x: any) => setFormState({ ...formState, envVariables: x })}
+                fileUpload={true}
+              />
+            </>,
+            <>
+              <Text size={16}>Release command (optional)</Text>
+              <Spacer y={0.5} />
+              <Text color="helper">
+                If specified, this command will be run before every deployment.
+              </Text>
+              <Spacer y={0.5} />
+              <Input
+                placeholder="yarn ./scripts/run-migrations.js"
+                value={""}
+                width="300px"
+                setValue={(e) => { }}
+              />
+            </>
+          ]}
+        />
+        <Spacer y={1} />
+        <Button onClick={() => ({})}>
+          DEPLYOY
+        </Button>
+      </StyledConfigureTemplate>
+    </CenterWrapper>
   );
 };
 
 export default withRouter(NewAppFlow);
 
+const CenterWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
 const DarkMatter = styled.div`
   width: 100%;
   margin-top: -5px;
@@ -199,7 +208,6 @@ const Icon = styled.img`
 `;
 
 const StyledConfigureTemplate = styled.div`
-  width: 100%;
   height: 100%;
 `;