restyled DO credential section for onboarding

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

@@ -52,7 +52,7 @@ const FormTitle = {
     icon: integrationList["gcr"].icon,
   },
   do: {
-    label: "Digital Ocean Container Registry (DOCR)",
+    label: "DigitalOcean Container Registry (DOCR)",
     icon: integrationList["do"].icon,
   },
 };

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

@@ -79,23 +79,40 @@ export const CredentialsForm: React.FC<{
   return (
     <>
       {connectedAccount !== null && (
-        <div>
-          <div>Connected account: {connectedAccount.client}</div>
-          <div>Connected at: {readableDate(connectedAccount.created_at)}</div>
-        </div>
+        <>
+          <Helper>Connected account:</Helper>
+          <PreviewRow>
+            <Flex>
+              <i className="material-icons">account_circle</i>
+              Name: {connectedAccount.client}
+            </Flex>
+            <div>Connected at {readableDate(connectedAccount.created_at)}</div>
+          </PreviewRow>
+        </>
       )}
-      <ConnectDigitalOceanButton
-        href={`/api/projects/${project?.id}/oauth/digitalocean?redirect_uri=${encoded_redirect_uri}`}
-      >
-        {connectedAccount !== null
-          ? "Connect another account"
-          : "Sign In to Digital Ocean"}
-      </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
+            </A>.
+          </Helper>
+        ) : (
+          <ConnectDigitalOceanButton
+            href={`/api/projects/${project?.id}/oauth/digitalocean?redirect_uri=${encoded_redirect_uri}`}
+          >
+            Sign In to DigitalOcean
+          </ConnectDigitalOceanButton>
+        )
+      }
 
-      <Br />
+      <Br height="5px" />
       {connectedAccount !== null && (
         <SaveButton
-          text="Continue with connected account"
+          text="Continue"
           disabled={false}
           onClick={() => submit(connectedAccount.id)}
           makeFlush={true}
@@ -153,7 +170,7 @@ export const SettingsForm: React.FC<{
         width="100%"
       />
       <Helper>
-        DOC R URI, in the form{" "}
+        DOCR URI, in the form{" "}
         <CodeBlock>registry.digitalocean.com/[REGISTRY_NAME]</CodeBlock>. For
         example, <CodeBlock>registry.digitalocean.com/porter-test</CodeBlock>.
       </Helper>
@@ -161,7 +178,7 @@ export const SettingsForm: React.FC<{
         type="text"
         value={registryUrl}
         setValue={(url: string) => setRegistryUrl(url)}
-        label="🔗 GCR URL"
+        label="🔗 DOCR URL"
         placeholder="ex: registry.digitalocean.com/porter-test"
         width="100%"
         isRequired={true}
@@ -205,9 +222,36 @@ export const TestRegistryConnection: React.FC<{
   );
 };
 
-const Br = styled.div`
+const A = styled.a`
+  cursor: pointer;
+`;
+
+const Flex = styled.div`
+  display: flex;
+  color: #ffffff;
+  align-items: center;
+  > i {
+    color: #aaaabb;
+    font-size: 20px;
+    margin-right: 10px;
+  }
+`;
+
+const PreviewRow = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 12px 15px;
+  color: #ffffff55;
+  background: #ffffff11;
+  border: 1px solid #aaaabb;
+  justify-content: space-between;
+  font-size: 13px;
+  border-radius: 5px;
+`;
+
+const Br = styled.div<{ height?: string }>`
   width: 100%;
-  height: 15px;
+  height: ${props => props.height || "15px"};
 `;
 
 const CodeBlock = styled.span`

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

@@ -166,21 +166,6 @@ const ProvisionResources: React.FC<Props> = ({
         applications.
       </Helper>
       {Content()}
-      <Br />
-            <Helper>
-              Note: Provisioning can take up to 15 minutes.
-            </Helper>
-            <Br height="15px" />
-            <SaveButton
-              text="Retry Provisioning"
-              disabled={false}
-              onClick={() => alert("continue")}
-              makeFlush={true}
-              status="There was an error provisioning"
-              clearPosition={true}
-              statusPosition="right"
-              saveText=""
-            />
     </div>
   );
 };

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

@@ -47,7 +47,7 @@ const FormTitle = {
     icon: integrationList["gcp"].icon,
   },
   do: {
-    label: "Digital Ocean (DO)",
+    label: "DigitalOcean (DO)",
     icon: integrationList["do"].icon,
   },
   external: {

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

@@ -101,23 +101,40 @@ export const CredentialsForm: React.FC<{
   return (
     <>
       {connectedAccount !== null && (
-        <div>
-          <div>Connected account: {connectedAccount.client}</div>
-          <div>Connected at: {readableDate(connectedAccount.created_at)}</div>
-        </div>
+        <>
+          <Helper>Connected account:</Helper>
+          <PreviewRow>
+            <Flex>
+              <i className="material-icons">account_circle</i>
+              Name: {connectedAccount.client}
+            </Flex>
+            <div>Connected at {readableDate(connectedAccount.created_at)}</div>
+          </PreviewRow>
+        </>
       )}
-      <ConnectDigitalOceanButton
-        href={`/api/projects/${project?.id}/oauth/digitalocean?redirect_uri=${encoded_redirect_uri}`}
-      >
-        {connectedAccount !== null
-          ? "Connect another account"
-          : "Sign In to Digital Ocean"}
-      </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
+            </A>.
+          </Helper>
+        ) : (
+          <ConnectDigitalOceanButton
+            href={`/api/projects/${project?.id}/oauth/digitalocean?redirect_uri=${encoded_redirect_uri}`}
+          >
+            Sign In to DigitalOcean
+          </ConnectDigitalOceanButton>
+        )
+      }
 
-      <Br />
+      <Br height="5px" />
       {connectedAccount !== null && (
         <SaveButton
-          text="Continue with connected account"
+          text="Continue"
           disabled={false}
           onClick={() => submit(connectedAccount.id)}
           makeFlush={true}
@@ -319,9 +336,36 @@ export const SettingsForm: React.FC<{
   );
 };
 
-const Br = styled.div`
+const A = styled.a`
+  cursor: pointer;
+`;
+
+const Flex = styled.div`
+  display: flex;
+  color: #ffffff;
+  align-items: center;
+  > i {
+    color: #aaaabb;
+    font-size: 20px;
+    margin-right: 10px;
+  }
+`;
+
+const PreviewRow = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 12px 15px;
+  color: #ffffff55;
+  background: #ffffff11;
+  border: 1px solid #aaaabb;
+  justify-content: space-between;
+  font-size: 13px;
+  border-radius: 5px;
+`;
+
+const Br = styled.div<{ height?: string }>`
   width: 100%;
-  height: 15px;
+  height: ${props => props.height || "15px"};
 `;
 
 const CodeBlock = styled.span`

dashboard/src/main/home/provisioner/DOFormSection.tsx

@@ -25,8 +25,8 @@ type PropsType = {
 };
 
 const provisionOptions = [
-  { value: "docr", label: "Digital Ocean Container Registry" },
-  { value: "doks", label: "Digital Ocean Kubernetes Service" },
+  { value: "docr", label: "DigitalOcean Container Registry" },
+  { value: "doks", label: "DigitalOcean Kubernetes Service" },
 ];
 
 const tierOptions = [

dashboard/src/shared/common.tsx

@@ -8,8 +8,8 @@ export const infraNames: any = {
   eks: "Elastic Kubernetes Service (EKS)",
   gcr: "Google Container Registry (GCR)",
   gke: "Google Kubernetes Engine (GKE)",
-  docr: "Digital Ocean Container Registry",
-  doks: "Digital Ocean Kubernetes Service",
+  docr: "DigitalOcean Container Registry",
+  doks: "DigitalOcean Kubernetes Service",
 };
 
 export const integrationList: any = {