fixed load credentials sstyling

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

@@ -185,29 +185,30 @@ export const CredentialsForm: React.FC<{
           label="📍 AWS Region"
         />
         <Br />
-        {lastConnectedAccount && (
-          <CancelButton
-            text="Cancel"
+        <Flex>
+          {lastConnectedAccount && (
+            <SaveButton
+              text="Cancel"
+              disabled={false}
+              onClick={() => setShowForm(false)}
+              makeFlush={true}
+              clearPosition={true}
+              status=""
+              statusPosition="right"
+              color="#fc4976"
+            />
+          )}
+          <SubmitButton
+            text="Continue"
             disabled={false}
-            onClick={() => setShowForm(false)}
+            onClick={submit}
             makeFlush={true}
             clearPosition={true}
-            status={""}
+            status={buttonStatus}
             statusPosition={"right"}
-            color={"#fc4976"}
+            disableLeftMargin={!lastConnectedAccount}
           />
-        )}
-
-        <SubmitButton
-          text="Continue"
-          disabled={false}
-          onClick={submit}
-          makeFlush={true}
-          clearPosition={true}
-          status={buttonStatus}
-          statusPosition={"right"}
-          disableLeftMargin={!lastConnectedAccount}
-        />
+        </Flex>
       </>
     );
   }
@@ -218,19 +219,12 @@ export const CredentialsForm: React.FC<{
       <PreviewRow>
         <Flex>
           <i className="material-icons">account_circle</i>
-          <FlexColumn>
-            <FlexColumn>
-              <b>ARN:</b>
-              <SelectableSpan>
-                &#8226; {lastConnectedAccount.aws_arn}
-              </SelectableSpan>
-            </FlexColumn>
-          </FlexColumn>
+          {lastConnectedAccount.aws_arn || "arn: n/a"}
         </Flex>
-        <FlexColumnWithMargin marginLeft={"14px"}>
-          <span>Connected at</span>
+        <Right>
+          Connected at{" "}
           {readableDate(lastConnectedAccount.created_at)}
-        </FlexColumnWithMargin>
+        </Right>
       </PreviewRow>
       <Helper>
         Want to use a different account?{" "}
@@ -241,19 +235,7 @@ export const CredentialsForm: React.FC<{
       </Helper>
       <Br />
       <SaveButton
-        text="Connect another account"
-        disabled={false}
-        onClick={() => setShowForm(true)}
-        makeFlush={true}
-        clearPosition={true}
-        status={""}
-        statusPosition={"right"}
-      />
-      <Br />
-      <b>Or</b>
-      <Br />
-      <SaveButton
-        text="Continue with current account"
+        text="Continue"
         disabled={false}
         onClick={() => continueToNextStep(lastConnectedAccount?.id)}
         makeFlush={true}
@@ -370,6 +352,10 @@ export const TestRegistryConnection: React.FC<{ nextFormStep: () => void }> = ({
   );
 };
 
+const Right = styled.div`
+  text-align: right;
+`;
+
 const Br = styled.div`
   width: 100%;
   height: 15px;
@@ -415,12 +401,7 @@ const PreviewRow = styled.div`
   border-radius: 5px;
 `;
 
-const CancelButton = styled(SaveButton)`
-  display: inline-block;
-`;
-
 const SubmitButton = styled(SaveButton)`
-  display: inline-block;
   margin-left: ${(props: { disableLeftMargin: boolean }) =>
     props.disableLeftMargin ? "" : "16px"};
 `;

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

@@ -76,6 +76,16 @@ export const CredentialsForm: React.FC<{
     return <Loading />;
   }
 
+  let content = "Project name: n/a";
+
+  if (connectedAccount?.target_email) {
+    content = `${connectedAccount?.target_email}`;
+  }
+
+  if (connectedAccount?.target_id) {
+    content = `${connectedAccount?.target_id}`;
+  }
+
   return (
     <>
       {connectedAccount !== null && (
@@ -84,30 +94,29 @@ export const CredentialsForm: React.FC<{
           <PreviewRow>
             <Flex>
               <i className="material-icons">account_circle</i>
-              Name: {connectedAccount.client}
+              {content}
             </Flex>
-            <div>Connected at {readableDate(connectedAccount.created_at)}</div>
+            <Right>Connected at {readableDate(connectedAccount.created_at)}</Right>
           </PreviewRow>
         </>
       )}
-      {
-        connectedAccount !== null ? (
-          <Helper>
-            Want to use a different account?{" "}
-            <A 
-             href={`/api/projects/${project?.id}/oauth/digitalocean?redirect_uri=${encoded_redirect_uri}`}
-            >
-              Sign in to DigitalOcean
-            </A>.
-          </Helper>
-        ) : (
-          <ConnectDigitalOceanButton
+      {connectedAccount !== null ? (
+        <Helper>
+          Want to use a different account?{" "}
+          <A
             href={`/api/projects/${project?.id}/oauth/digitalocean?redirect_uri=${encoded_redirect_uri}`}
           >
-            Sign In to DigitalOcean
-          </ConnectDigitalOceanButton>
-        )
-      }
+            Sign in to DigitalOcean
+          </A>
+          .
+        </Helper>
+      ) : (
+        <ConnectDigitalOceanButton
+          href={`/api/projects/${project?.id}/oauth/digitalocean?redirect_uri=${encoded_redirect_uri}`}
+        >
+          Sign In to DigitalOcean
+        </ConnectDigitalOceanButton>
+      )}
 
       <Br height="5px" />
       {connectedAccount !== null && (
@@ -226,6 +235,10 @@ const A = styled.a`
   cursor: pointer;
 `;
 
+const Right = styled.div`
+  text-align: right;
+`;
+
 const Flex = styled.div`
   display: flex;
   color: #ffffff;
@@ -251,7 +264,7 @@ const PreviewRow = styled.div`
 
 const Br = styled.div<{ height?: string }>`
   width: 100%;
-  height: ${props => props.height || "15px"};
+  height: ${(props) => props.height || "15px"};
 `;
 
 const CodeBlock = styled.span`

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

@@ -148,28 +148,30 @@ export const CredentialsForm: React.FC<{
           isRequired={true}
         />
         <Br />
-        {lastConnectedAccount && (
-          <CancelButton
-            text="Cancel"
+        <Flex>
+          {lastConnectedAccount && (
+            <SaveButton
+              text="Cancel"
+              disabled={false}
+              onClick={() => setShowForm(false)}
+              makeFlush={true}
+              clearPosition={true}
+              status=""
+              statusPosition="right"
+              color="#fc4976"
+            />
+          )}
+          <SubmitButton
+            text="Continue"
             disabled={false}
-            onClick={() => setShowForm(false)}
+            onClick={submit}
             makeFlush={true}
             clearPosition={true}
-            status={""}
+            status={buttonStatus}
             statusPosition={"right"}
-            color={"#fc4976"}
+            disableLeftMargin={!lastConnectedAccount}
           />
-        )}
-        <SubmitButton
-          text="Continue"
-          disabled={false}
-          onClick={submit}
-          makeFlush={true}
-          clearPosition={true}
-          status={buttonStatus}
-          statusPosition={"right"}
-          disableLeftMargin={!lastConnectedAccount}
-        />
+        </Flex>
       </>
     );
   }
@@ -179,25 +181,12 @@ export const CredentialsForm: React.FC<{
       <PreviewRow>
         <Flex>
           <i className="material-icons">account_circle</i>
-          <FlexColumn>
-            <FlexColumn>
-              <b>Project ID:</b>
-              <SelectableSpan>
-                &#8226; {lastConnectedAccount.gcp_project_id}
-              </SelectableSpan>
-            </FlexColumn>
-            <FlexColumn>
-              <b>Service account:</b>
-              <SelectableSpan>
-                &#8226; {lastConnectedAccount?.gcp_sa_email}
-              </SelectableSpan>
-            </FlexColumn>
-          </FlexColumn>
+          {lastConnectedAccount?.gcp_sa_email}
         </Flex>
-        <FlexColumnWithMargin marginLeft={"14px"}>
-          <span>Connected at</span>
+        <Right>
+          Connected at{" "}
           {readableDate(lastConnectedAccount.created_at)}
-        </FlexColumnWithMargin>
+        </Right>
       </PreviewRow>
       <Helper>
         Want to use a different account?{" "}
@@ -350,6 +339,10 @@ export const TestRegistryConnection: React.FC<{
   );
 };
 
+const Right = styled.div`
+  text-align: right;
+`;
+
 const Br = styled.div`
   width: 100%;
   height: 15px;
@@ -406,12 +399,7 @@ const PreviewRow = styled.div`
   border-radius: 5px;
 `;
 
-const CancelButton = styled(SaveButton)`
-  display: inline-block;
-`;
-
 const SubmitButton = styled(SaveButton)`
-  display: inline-block;
   margin-left: ${(props: { disableLeftMargin: boolean }) =>
     props.disableLeftMargin ? "" : "16px"};
 `;

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

@@ -203,29 +203,30 @@ export const CredentialsForm: React.FC<{
           label="📍 AWS Region"
         />
         <Br />
-        {lastConnectedAccount && (
-          <CancelButton
-            text="Cancel"
+        <Flex>
+          {lastConnectedAccount && (
+            <SaveButton
+              text="Cancel"
+              disabled={false}
+              onClick={() => setShowForm(false)}
+              makeFlush={true}
+              clearPosition={true}
+              status=""
+              statusPosition="right"
+              color="#fc4976"
+            />
+          )}
+          <SubmitButton
+            text="Continue"
             disabled={false}
-            onClick={() => setShowForm(false)}
+            onClick={submit}
             makeFlush={true}
             clearPosition={true}
-            status={""}
+            status={buttonStatus}
             statusPosition={"right"}
-            color={"#fc4976"}
+            disableLeftMargin={!lastConnectedAccount}
           />
-        )}
-
-        <SubmitButton
-          text="Continue"
-          disabled={false}
-          onClick={submit}
-          makeFlush={true}
-          clearPosition={true}
-          status={buttonStatus}
-          statusPosition={"right"}
-          disableLeftMargin={!lastConnectedAccount}
-        />
+        </Flex>
       </div>
     );
   }
@@ -236,19 +237,12 @@ export const CredentialsForm: React.FC<{
       <PreviewRow>
         <Flex>
           <i className="material-icons">account_circle</i>
-          <FlexColumn>
-            <FlexColumn>
-              <b>ARN:</b>
-              <SelectableSpan>
-                &#8226; {lastConnectedAccount.aws_arn}
-              </SelectableSpan>
-            </FlexColumn>
-          </FlexColumn>
+          {lastConnectedAccount.aws_arn || "arn: n/a"}
         </Flex>
-        <FlexColumnWithMargin marginLeft={"14px"}>
-          <span>Connected at</span>
+        <Right>
+          Connected at{" "}
           {readableDate(lastConnectedAccount.created_at)}
-        </FlexColumnWithMargin>
+        </Right>
       </PreviewRow>
       <Helper>
         Want to use a different account?{" "}
@@ -439,17 +433,16 @@ export const SettingsForm: React.FC<{
   );
 };
 
+const Right = styled.div`
+  text-align: right;
+`;
+
 const Br = styled.div`
   width: 100%;
   height: 15px;
 `;
 
-const CancelButton = styled(SaveButton)`
-  display: inline-block;
-`;
-
 const SubmitButton = styled(SaveButton)`
-  display: inline-block;
   margin-left: ${(props: { disableLeftMargin: boolean }) =>
     props.disableLeftMargin ? "" : "16px"};
 `;

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

@@ -98,6 +98,16 @@ export const CredentialsForm: React.FC<{
     return <Loading />;
   }
 
+  let content = "Project name: n/a";
+
+  if (connectedAccount?.target_email) {
+    content = `${connectedAccount?.target_email}`;
+  }
+
+  if (connectedAccount?.target_id) {
+    content = `${connectedAccount?.target_id}`;
+  }
+
   return (
     <>
       {connectedAccount !== null && (
@@ -106,9 +116,9 @@ export const CredentialsForm: React.FC<{
           <PreviewRow>
             <Flex>
               <i className="material-icons">account_circle</i>
-              Project name: {connectedAccount.target_id || "n/a"}
+              {content}
             </Flex>
-            <div>Connected at {readableDate(connectedAccount.created_at)}</div>
+            <Right>Connected at {readableDate(connectedAccount.created_at)}</Right>
           </PreviewRow>
         </>
       )}
@@ -335,6 +345,11 @@ export const SettingsForm: React.FC<{
   );
 };
 
+const Right = styled.div`
+  text-align: right;
+  margin-left: 10px;
+`;
+
 const A = styled.a`
   cursor: pointer;
 `;

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

@@ -193,28 +193,30 @@ export const CredentialsForm: React.FC<{
           height="100%"
           isRequired={true}
         />
-        {lastConnectedAccount && (
-          <CancelButton
-            text="Cancel"
+        <Flex>
+          {lastConnectedAccount && (
+            <SaveButton
+              text="Cancel"
+              disabled={false}
+              onClick={() => setShowForm(false)}
+              makeFlush={true}
+              clearPosition={true}
+              status=""
+              statusPosition="right"
+              color="#fc4976"
+            />
+          )}
+          <SubmitButton
+            text="Continue"
             disabled={false}
-            onClick={() => setShowForm(false)}
+            onClick={submit}
             makeFlush={true}
             clearPosition={true}
-            status={""}
+            status={buttonStatus}
             statusPosition={"right"}
-            color={"#fc4976"}
+            disableLeftMargin={!lastConnectedAccount}
           />
-        )}
-        <SubmitButton
-          text="Continue"
-          disabled={false}
-          onClick={submit}
-          makeFlush={true}
-          clearPosition={true}
-          status={buttonStatus}
-          statusPosition={"right"}
-          disableLeftMargin={!lastConnectedAccount}
-        />
+        </Flex>
       </>
     );
   }
@@ -225,25 +227,12 @@ export const CredentialsForm: React.FC<{
       <PreviewRow>
         <Flex>
           <i className="material-icons">account_circle</i>
-          <FlexColumn>
-            <FlexColumn>
-              <b>Project ID:</b>
-              <SelectableSpan>
-                &#8226; {lastConnectedAccount.gcp_project_id}
-              </SelectableSpan>
-            </FlexColumn>
-            <FlexColumn>
-              <b>Service account:</b>
-              <SelectableSpan>
-                &#8226; {lastConnectedAccount?.gcp_sa_email}
-              </SelectableSpan>
-            </FlexColumn>
-          </FlexColumn>
+          {lastConnectedAccount?.gcp_sa_email || "n/a"}
         </Flex>
-        <FlexColumnWithMargin marginLeft={"14px"}>
-          <span>Connected at</span>
+        <Right>
+          Connected at{" "}
           {readableDate(lastConnectedAccount.created_at)}
-        </FlexColumnWithMargin>
+        </Right>
       </PreviewRow>
       <Helper>
         Want to use a different account?{" "}
@@ -426,6 +415,10 @@ export const SettingsForm: React.FC<{
   );
 };
 
+const Right = styled.div`
+  text-align: right;
+`;
+
 const Br = styled.div`
   width: 100%;
   height: 15px;
@@ -482,12 +475,7 @@ const PreviewRow = styled.div`
   border-radius: 5px;
 `;
 
-const CancelButton = styled(SaveButton)`
-  display: inline-block;
-`;
-
 const SubmitButton = styled(SaveButton)`
-  display: inline-block;
   margin-left: ${(props: { disableLeftMargin: boolean }) =>
     props.disableLeftMargin ? "" : "16px"};
 `;