fe refresh

dashboard/src/components/CloudFormationForm.tsx

@@ -7,10 +7,14 @@ import aws from "assets/aws.png";
 
 import { Context } from "shared/Context";
 
-import Heading from "components/form-components/Heading";
-import Helper from "./form-components/Helper";
+import Text from "./porter/Text";
+import Spacer from "./porter/Spacer";
 import InputRow from "./form-components/InputRow";
 import SaveButton from "./SaveButton";
+import Fieldset from "./porter/Fieldset";
+import Input from "./porter/Input";
+import Button from "./porter/Button";
+import DocsHelper from "./DocsHelper";
 
 type Props = {
   goBack: () => void;
@@ -22,6 +26,7 @@ const CloudFormationForm: React.FC<Props> = ({
   proceed,
 }) => {
   const [AWSAccountID, setAWSAccountID] = useState("");
+  const [grantPermissionsError, setGrantPermissionsError] = useState("");
   const [roleStatus, setRoleStatus] = useState("");
 
   const checkIfRoleExists = () => {
@@ -61,22 +66,53 @@ const CloudFormationForm: React.FC<Props> = ({
   const renderContent = () => {
     return (
       <>
-        <StyledForm>
-          <InputRow
-            type="string"
+        <Spacer y={1} />
+        <Fieldset>
+          <Text size={16} weight={500}>
+            Log in to AWS and "Create stack"
+          </Text>
+          <Spacer height="15px" />
+          <Text color="helper">
+            Provide your AWS account ID to log in and grant Porter access to AWS. You will need to select "Create stack" after being redirected to the AWS console below.
+          </Text>
+          <Spacer y={1} />
+          <Input
+            label={
+              <Flex>
+                👤 AWS account ID
+                <i 
+                  className="material-icons"
+                >
+                  help_outline
+                </i>
+              </Flex>
+            }
+            type="number"
             value={AWSAccountID}
-            setValue={(e: string) => setAWSAccountID(e)}
-            label="👤 AWS Account ID"
+            setValue={(e) => {
+              setGrantPermissionsError("");
+              setAWSAccountID(e);
+            }}
             placeholder="ex: 915037676314"
-            isRequired
           />
-          <SaveButton
-            disabled={AWSAccountID === ""}
-            onClick={directToCloudFormation}
-            clearPosition
-            text="Grant Permissions"
-          />
-        </StyledForm>
+          <Spacer y={1} />
+          <Button
+            onClick={() => {
+              if (AWSAccountID.length === 12) {
+                directToCloudFormation();
+              } else {
+                setGrantPermissionsError("Invalid AWS account ID");
+              }
+            }}
+            status={grantPermissionsError}
+            errorText={grantPermissionsError}
+            color="#1E2631"
+            withBorder
+          >
+            <ButtonImg src={aws} /> Grant permissions
+          </Button>
+        </Fieldset>
+        <Spacer y={1} />
         <SaveButton
           onClick={checkIfRoleExists}
           status={roleStatus}
@@ -90,30 +126,39 @@ const CloudFormationForm: React.FC<Props> = ({
 
   return (
     <>
-      <Heading isAtTop>
+      <Text size={16} weight={500}>
         <BackButton width="140px" onClick={goBack}>
           <i className="material-icons">first_page</i>
           Select cloud
         </BackButton>
-        <Spacer />
+        <Spacer x={1} inline />
         <Img src={aws} />
-        Grant AWS Permissions
-      </Heading>
-      <Helper>
+        Grant AWS permissions
+      </Text>
+      <Spacer y={1} />
+      <Text color="helper">
         Grant Porter permissions to create infrastructure in your AWS account.
-      </Helper>
-      {
-        renderContent()
-      }
+      </Text>
+      {renderContent()}
     </>
   );
 };
 
 export default CloudFormationForm;
 
-const Spacer = styled.div`
-  height: 1px;
-  width: 17px;
+const Flex = styled.div`
+  display: flex;
+  ailgn-items: center;
+  > i {
+    margin-left: 10px;
+    font-size: 16px;
+    cursor: pointer;
+  }
+`;
+
+const ButtonImg = styled.img`
+  height: 14px;
+  margin-right: 12px;
 `;
 
 const Img = styled.img`

dashboard/src/components/porter/Button.tsx

@@ -10,9 +10,12 @@ type Props = {
   status?: string;
   helperText?: string;
   loadingText?: string;
+  errorText?: string;
   successText?: string;
   width?: string;
   height?: string;
+  color?: string;
+  withBorder?: boolean;
 };
 
 const Button: React.FC<Props> = ({
@@ -22,9 +25,12 @@ const Button: React.FC<Props> = ({
   status,
   helperText,
   loadingText,
+  errorText,
   successText,
   width,
   height,
+  color,
+  withBorder,
 }) => {
   const renderStatus = () => {
     switch(status) {
@@ -50,7 +56,7 @@ const Button: React.FC<Props> = ({
         return (
           <StatusWrapper success={false}>
             <i className="material-icons">error_outline</i>
-            Could not update
+            {errorText || "Could not update"}
           </StatusWrapper>
         );
     }
@@ -63,6 +69,8 @@ const Button: React.FC<Props> = ({
         onClick={() => !disabled && onClick()}
         width={width}
         height={height}
+        color={color}
+        withBorder={withBorder}
       >
         <Text>{children}</Text>
       </StyledButton>
@@ -129,6 +137,8 @@ const StyledButton = styled.button<{
   disabled: boolean;
   width: string;
   height: string;
+  color: string;
+  withBorder: boolean;
 }>`
   height: ${props => props.height || "35px"};
   width: ${props => props.width || "auto"};
@@ -139,11 +149,12 @@ const StyledButton = styled.button<{
   outline: none;
   font-weight: 500;
   color: white;
-  background: ${props => props.disabled ? "#aaaabb" : "#5561C0"};
+  background: ${props => (props.disabled && !props.color) ? "#aaaabb" : (props.color || "#5561C0")};
   display: flex;
   ailgn-items: center;
   justify-content: center;
   border-radius: 5px;
+  border: ${props => props.withBorder ? "1px solid #494b4f" : "none"};
 
   :hover {
     filter: ${props => props.disabled ? "" : "brightness(120%)"};

dashboard/src/components/porter/Input.tsx

@@ -6,7 +6,7 @@ type Props = {
   width?: string;
   value: string;
   setValue: (value: string) => void;
-  label?: string;
+  label?: string | React.ReactNode;
   height?: string;
   type?: string;
   error?: string;

dashboard/src/components/porter/Text.tsx

@@ -45,4 +45,6 @@ const StyledText = styled.div<{
   font-weight: ${props => props.weight || 400};
   color: ${props => props.color || "#ffffff"};
   font-size: ${props => props.size || 13}px;
+  display: flex;
+  align-items: center;
 `;