app deploy stub

dashboard/src/components/porter/VerticalSteps.tsx

@@ -16,7 +16,7 @@ const VerticalSteps: React.FC<Props> = ({
     <StyledVerticalSteps>
       {steps.map((step, i) => {
         return (
-          <StepWrapper isActive={i <= currentStep}>
+          <StepWrapper>
             {
               (i !== steps.length - 1) && (
                 <Line isActive={i + 1 <= currentStep} />
@@ -25,12 +25,14 @@ const VerticalSteps: React.FC<Props> = ({
             <Dot 
               isActive={i <= currentStep}
             />
-            {step}
-            {
-              i > currentStep && (
-                <ReadOnlyOverlay />
-              )
-            }
+            <OpacityWrapper isActive={i <= currentStep}>
+              {step}
+              {
+                i > currentStep && (
+                  <ReadOnlyOverlay />
+                )
+              }
+            </OpacityWrapper>
           </StepWrapper>
         );
       })}
@@ -54,10 +56,11 @@ const Line = styled.div<{
 }>`
   width: 1px;
   height: calc(100% + 35px);
-  background: ${props => props.isActive ? "#fff" : "#ffffff33"};
+  background: ${props => props.isActive ? "#fff" : "#414141"};
   position: absolute;
   left: 4px;
   top: 8px;
+  opacity: 1;
 `;
 
 const Dot = styled.div<{
@@ -65,20 +68,25 @@ const Dot = styled.div<{
 }>`
   width: 9px;
   height: 9px;
-  background: ${props => props.isActive ? "#fff" : "#ffffff33"};
+  background: ${props => props.isActive ? "#fff" : "#414141"};
   border-radius: 50%;
   position: absolute;
   left: 0;
   top: 7px;
+  opacity: 1;
 `;
 
-const StepWrapper = styled.div<{
+const OpacityWrapper = styled.div<{
   isActive: boolean;
+}>`
+  opacity: ${props => props.isActive ? 1 : 0.5};
+`;
+
+const StepWrapper = styled.div<{
 }>`
   padding-left: 22px;
   position: relative;
   margin-bottom: 35px;
-  opacity: ${props => props.isActive ? 1 : 0.5};
 `;
 
 const StyledVerticalSteps = styled.div<{

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

@@ -30,7 +30,7 @@ const NewAppFlow: React.FC<Props> = ({
 }) => {
   const { currentCluster, currentProject } = useContext(Context);
   const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [currentStep, setCurrentStep] = useState<number>(0);
+  const [currentStep, setCurrentStep] = useState<number>(1);
 
   return (
     <StyledConfigureTemplate>
@@ -63,6 +63,35 @@ const NewAppFlow: React.FC<Props> = ({
               setValue={(e) => {}}
             />
           </>,
+          <>
+            <Text size={16}>Hello world</Text>
+            <Spacer y={0.5} />
+            <Text color="helper">
+            Foo bar foo bar.
+            </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=""
+              width="300px"
+              setValue={(e) => {}}
+            />
+            <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=""
+              width="300px"
+              setValue={(e) => {}}
+            />
+          </>,
           <>
             <Text size={16}>Some settings</Text>
             <Spacer y={0.5} />
@@ -80,7 +109,7 @@ const NewAppFlow: React.FC<Props> = ({
               width="300px"
               setValue={(e) => {}}
             />
-                        <Spacer y={0.5} />
+            <Spacer y={0.5} />
             <Text color="helper">
               Randomly generated if left blank (lowercase letters, numbers, and "-" only).
             </Text>
@@ -91,7 +120,7 @@ const NewAppFlow: React.FC<Props> = ({
               width="300px"
               setValue={(e) => {}}
             />
-                        <Spacer y={0.5} />
+            <Spacer y={0.5} />
             <Text color="helper">
               Randomly generated if left blank (lowercase letters, numbers, and "-" only).
             </Text>