registry forms

dashboard/src/components/porter-form/PorterForm.tsx

@@ -265,7 +265,7 @@ const StyledPorterForm = styled.div<{ showSave?: boolean }>`
   font-size: 13px;
   overflow: auto;
   padding: 30px;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
   font-size: 13px;
   border-radius: 5px;
   background: #26292e;

dashboard/src/main/home/cluster-dashboard/dashboard/Dashboard.tsx

@@ -28,7 +28,7 @@ const tabOptions: {
   label: string;
   value: TabEnum;
 }[] = [
-  { label: "Configuration", value: "configuration" },
+  // { label: "Configuration", value: "configuration" },
   { label: "Nodes", value: "nodes" },
   /*
   { label: "Incidents", value: "incidents" },
@@ -55,10 +55,11 @@ export const Dashboard: React.FunctionComponent = () => {
         return <Metrics />;
       case "namespaces":
         return <NamespaceList />;
+      /*
       case "configuration":
         return (
           <FormWrapper>
-            <Heading>
+            <Heading isAtTop>
               Cluster configuration
             </Heading>
             <SelectRow
@@ -72,6 +73,7 @@ export const Dashboard: React.FunctionComponent = () => {
             />
           </FormWrapper>
         );
+      */
       default:
         return <NodeList />;
     }
@@ -272,5 +274,9 @@ const Bolded = styled.span`
 
 const FormWrapper = styled.div<{ showSave?: boolean }>`
   width: 100%;
-
+  margin-top: 35px;
+  border-radius: 5px;
+  background: #26292e;
+  border: 1px solid #494b4f;
+  padding: 30px;
 `;

dashboard/src/main/home/integrations/create-integration/ECRForm.tsx

@@ -75,7 +75,7 @@ export default class ECRForm extends Component<PropsType, StateType> {
     return (
       <StyledForm>
         <CredentialWrapper>
-          <Heading>Porter Settings</Heading>
+          <Heading isAtTop>Porter settings</Heading>
           <Helper>
             Give a name to this set of registry credentials (just for Porter).
           </Helper>
@@ -87,13 +87,13 @@ export default class ECRForm extends Component<PropsType, StateType> {
             placeholder="ex: paper-straw"
             width="100%"
           />
-          <Heading>AWS Settings</Heading>
+          <Heading>AWS settings</Heading>
           <Helper>AWS access credentials.</Helper>
           <InputRow
             type="text"
             value={this.state.awsRegion}
             setValue={(x: string) => this.setState({ awsRegion: x })}
-            label="📍 AWS Region"
+            label="📍 AWS region"
             placeholder="ex: mars-north-12"
             width="100%"
           />
@@ -101,7 +101,7 @@ export default class ECRForm extends Component<PropsType, StateType> {
             type="text"
             value={this.state.awsAccessId}
             setValue={(x: string) => this.setState({ awsAccessId: x })}
-            label="👤 AWS Access ID"
+            label="👤 AWS access ID"
             placeholder="ex: AKIAIOSFODNN7EXAMPLE"
             width="100%"
           />
@@ -109,14 +109,16 @@ export default class ECRForm extends Component<PropsType, StateType> {
             type="password"
             value={this.state.awsSecretKey}
             setValue={(x: string) => this.setState({ awsSecretKey: x })}
-            label="🔒 AWS Secret Key"
+            label="🔒 AWS secret key"
             placeholder="○ ○ ○ ○ ○ ○ ○ ○ ○"
             width="100%"
           />
         </CredentialWrapper>
         <SaveButton
-          text="Save Settings"
+          text="Save settings"
           makeFlush={true}
+          clearPosition={true}
+          statusPosition="right"
           disabled={this.isDisabled()}
           onClick={this.isDisabled() ? null : this.handleSubmit}
         />
@@ -128,9 +130,11 @@ export default class ECRForm extends Component<PropsType, StateType> {
 ECRForm.contextType = Context;
 
 const CredentialWrapper = styled.div`
-  padding: 5px 40px 25px;
-  background: #ffffff11;
+  padding: 30px;
   border-radius: 5px;
+  background: #26292e;
+  border: 1px solid #494b4f;
+  margin-bottom: 30px;
 `;
 
 const StyledForm = styled.div`

dashboard/src/main/home/integrations/create-integration/GARForm.tsx

@@ -107,7 +107,7 @@ const GARForm = (props: { closeForm: () => void }) => {
   return (
     <StyledForm>
       <CredentialWrapper>
-        <Heading>Porter Settings</Heading>
+        <Heading isAtTop>Porter settings</Heading>
         <Helper>
           Give a name to this set of registry credentials (just for Porter).
         </Helper>
@@ -118,21 +118,20 @@ const GARForm = (props: { closeForm: () => void }) => {
             setCredentialsName(credentialsName)
           }
           isRequired={true}
-          label="🏷️ Registry Name"
+          label="🏷️ Registry name"
           placeholder="ex: paper-straw"
           width="100%"
         />
-        <Heading>GCP Settings</Heading>
+        <Heading>GCP settings</Heading>
         <Helper>Service account credentials for GCP permissions.</Helper>
         <UploadArea
           setValue={(x: any) => setServiceAccountKey(x)}
-          label="🔒 GCP Key Data (JSON)"
+          label="🔒 GCP key data (JSON)"
           placeholder="Choose a file or drag it here."
           width="100%"
           height="100%"
           isRequired={true}
         />
-        <Helper>GAR Region</Helper>
         <SelectRow
           options={GAR_REGION_OPTIONS}
           width="100%"
@@ -142,13 +141,15 @@ const GARForm = (props: { closeForm: () => void }) => {
           setActiveValue={(x: string) => {
             setRegion(x);
           }}
-          label="📍 GCP Region"
+          label="📍 GAR region"
         />
       </CredentialWrapper>
       <SaveButton
-        text="Save Settings"
+        text="Save settings"
         status={buttonStatus}
         makeFlush={true}
+        clearPosition={true}
+        statusPosition="right"
         disabled={!isValid()}
         onClick={!isValid() ? null : handleSubmit}
       />
@@ -159,9 +160,11 @@ const GARForm = (props: { closeForm: () => void }) => {
 export default GARForm;
 
 const CredentialWrapper = styled.div`
-  padding: 5px 40px 25px;
-  background: #ffffff11;
+  padding: 30px;
   border-radius: 5px;
+  background: #26292e;
+  border: 1px solid #494b4f;
+  margin-bottom: 30px;
 `;
 
 const StyledForm = styled.div`

dashboard/src/main/home/integrations/create-integration/GCRForm.tsx

@@ -76,7 +76,7 @@ export default class GCRForm extends Component<PropsType, StateType> {
     return (
       <StyledForm>
         <CredentialWrapper>
-          <Heading>Porter Settings</Heading>
+          <Heading isAtTop>Porter settings</Heading>
           <Helper>
             Give a name to this set of registry credentials (just for Porter).
           </Helper>
@@ -87,15 +87,15 @@ export default class GCRForm extends Component<PropsType, StateType> {
               this.setState({ credentialsName })
             }
             isRequired={true}
-            label="🏷️ Registry Name"
+            label="🏷️ Registry name"
             placeholder="ex: paper-straw"
             width="100%"
           />
-          <Heading>GCP Settings</Heading>
+          <Heading>GCP settings</Heading>
           <Helper>Service account credentials for GCP permissions.</Helper>
           <UploadArea
             setValue={(x: any) => this.setState({ serviceAccountKey: x })}
-            label="🔒 GCP Key Data (JSON)"
+            label="🔒 GCP key data (JSON)"
             placeholder="Choose a file or drag it here."
             width="100%"
             height="100%"
@@ -117,8 +117,10 @@ export default class GCRForm extends Component<PropsType, StateType> {
           />
         </CredentialWrapper>
         <SaveButton
-          text="Save Settings"
+          text="Save settings"
           makeFlush={true}
+          clearPosition={true}
+          statusPosition="right"
           disabled={this.isDisabled()}
           onClick={this.isDisabled() ? null : this.handleSubmit}
         />
@@ -130,9 +132,11 @@ export default class GCRForm extends Component<PropsType, StateType> {
 GCRForm.contextType = Context;
 
 const CredentialWrapper = styled.div`
-  padding: 5px 40px 25px;
-  background: #ffffff11;
+  padding: 30px;
   border-radius: 5px;
+  background: #26292e;
+  border: 1px solid #494b4f;
+  margin-bottom: 30px;
 `;
 
 const StyledForm = styled.div`