updated all form wrappers and left-aligned buttons

dashboard/src/components/SaveButton.tsx

@@ -19,6 +19,8 @@ type Props = {
   // Provide the classname to modify styles from other components
   className?: string;
   successText?: string;
+
+  absoluteSave?: boolean;
 };
 
 const SaveButton: React.FC<Props> = (props) => {
@@ -68,6 +70,7 @@ const SaveButton: React.FC<Props> = (props) => {
 
   return (
     <ButtonWrapper
+      absoluteSave={props.absoluteSave}
       makeFlush={props.makeFlush}
       clearPosition={props.clearPosition}
       className={props.className}
@@ -147,9 +150,11 @@ const StatusWrapper = styled.div<{
 `;
 
 const ButtonWrapper = styled.div`
-  ${(props: { makeFlush: boolean; clearPosition?: boolean }) => {
+  ${(props: { makeFlush: boolean; clearPosition?: boolean; absoluteSave: boolean }) => {
     const baseStyles = `
       display: flex;
+      position: ${props.absoluteSave ? "absolute" : ""};
+      bottom: ${props.absoluteSave ? "5px" : ""};
       align-items: center;
       z-index: 99;
     `;

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

@@ -53,6 +53,8 @@ interface Props {
   // The tab to redirect to after saving the form
   redirectTabAfterSave?: string;
   injectedProps?: InjectedProps;
+
+  absoluteSave: boolean;
 }
 
 const PorterForm: React.FC<Props> = (props) => {
@@ -225,6 +227,7 @@ const PorterForm: React.FC<Props> = (props) => {
         <SaveButton
           text={props.saveButtonText || "Deploy app"}
           onClick={submit}
+          absoluteSave={props.absoluteSave}
           clearPosition={true}
           makeFlush={!props.isInModal}
           status={

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

@@ -116,6 +116,7 @@ const PorterFormWrapper: React.FC<PropsType> = ({
           hideSpacer={hideBottomSpacer}
           redirectTabAfterSave={redirectTabAfterSave}
           injectedProps={injectedProps}
+          absoluteSave
         />
       </PorterFormContextProvider>
     </React.Fragment>

dashboard/src/components/repo-selector/ActionConfEditor.tsx

@@ -65,7 +65,7 @@ const ActionConfEditor: React.FC<Props> = (props) => {
           }}
         >
           <i className="material-icons">keyboard_backspace</i>
-          Select Repo
+          Select repo
         </BackButton>
       </>
     );
@@ -103,7 +103,7 @@ const ActionConfEditor: React.FC<Props> = (props) => {
           }}
         >
           <i className="material-icons">keyboard_backspace</i>
-          Select Branch
+          Select branch
         </BackButton>
       </>
     );

dashboard/src/components/repo-selector/ActionDetails.tsx

@@ -112,7 +112,7 @@ const ActionDetails: React.FC<PropsType> = (props) => {
   return (
     <>
       <DarkMatter />
-      <Heading>GitHub Settings</Heading>
+      <Heading>GitHub settings</Heading>
       <InputRow
         disabled={true}
         label="Git repository"
@@ -183,7 +183,7 @@ const ActionDetails: React.FC<PropsType> = (props) => {
           }}
         >
           <i className="material-icons">keyboard_backspace</i>
-          Select Folder
+          Select folder
         </BackButton>
         {selectedRegistry ? (
           <StatusWrapper successful={true}>

dashboard/src/components/repo-selector/RepoList.tsx

@@ -453,7 +453,8 @@ const ProviderSelectorStyles = {
     }
   `,
   Icon: styled.span`
-    font-size: 24px;
+    font-size: 20px;
+    filter: invert(1);
     margin-left: 9px;
     margin-right: -29px;
     color: white;

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

@@ -162,14 +162,14 @@ const ClusterSettings: React.FC = () => {
     if (successfulRotate) {
       keyRotationSection = (
         <div>
-          <Heading>Credential Rotation</Heading>
+          <Heading>Credential rotation</Heading>
           <Helper>Successfully rotated credentials!</Helper>
         </div>
       );
     } else if (startRotateCreds) {
       keyRotationSection = (
         <div>
-          <Heading>Credential Rotation</Heading>
+          <Heading>Credential rotation</Heading>
           <Helper>Input the new credentials for the EKS cluster.</Helper>
           <InputRow
             type="text"
@@ -197,12 +197,12 @@ const ClusterSettings: React.FC = () => {
     } else {
       keyRotationSection = (
         <div>
-          <Heading>Credential Rotation</Heading>
+          <Heading>Credential rotation</Heading>
           <Helper>
             Rotate the credentials that Porter uses to connect to the cluster.
           </Helper>
           <Button color="#616FEEcc" onClick={() => setStartRotateCreds(true)}>
-            Rotate Credentials
+            Rotate credentials
           </Button>
         </div>
       );
@@ -225,7 +225,7 @@ const ClusterSettings: React.FC = () => {
 
   let renameClusterSection = (
     <div>
-      <Heading>Rename Cluster</Heading>
+      <Heading>Rename cluster</Heading>
       <InputRow
         type="text"
         value={newClusterName}
@@ -244,7 +244,7 @@ const ClusterSettings: React.FC = () => {
 
   let enableAgentIntegration = (
     <div>
-      <Heading>Enable Agent</Heading>
+      <Heading>Enable agent</Heading>
       <CheckboxRow
         label={"Allow the Porter agent to be installed on the cluster"}
         toggle={() => setEnableAgent(!enableAgent)}
@@ -268,7 +268,7 @@ const ClusterSettings: React.FC = () => {
     } else {
       enablePreviewEnvironments = (
         <div>
-          <Heading>Enable Preview Environments</Heading>
+          <Heading>Enable preview environments</Heading>
           <CheckboxRow
             label={"Create preview environments on this cluster"}
             toggle={() => setEnablePreviewEnvs(!enablePreviewEnvs)}
@@ -289,7 +289,7 @@ const ClusterSettings: React.FC = () => {
   if (successfulRename) {
     renameClusterSection = (
       <div>
-        <Heading>Credential Rotation</Heading>
+        <Heading>Credential rotation</Heading>
         <Helper>Successfully renamed the cluster! Reload the page.</Helper>
       </div>
     );
@@ -298,6 +298,7 @@ const ClusterSettings: React.FC = () => {
   return (
     <div>
       <StyledSettingsSection>
+        <DarkMatter />
         {enableAgentIntegration}
         <DarkMatter />
         {enablePreviewEnvironments}
@@ -307,13 +308,13 @@ const ClusterSettings: React.FC = () => {
         {/* Disabled this field due to https://discord.com/channels/542888846271184896/856554532972134420/1042497537912864788 */}
         {/* {renameClusterSection}
         <DarkMatter /> */}
-        <Heading>Delete Cluster</Heading>
+        <Heading>Delete cluster</Heading>
         {helperText}
         <Button
           color="#b91133"
           onClick={() => setCurrentModal("UpdateClusterModal")}
         >
-          Delete Cluster
+          Delete cluster
         </Button>
       </StyledSettingsSection>
     </div>
@@ -330,13 +331,16 @@ const DarkMatter = styled.div`
 const StyledSettingsSection = styled.div`
   margin-top: 35px;
   width: 100%;
-  background: #ffffff11;
-  padding: 0 35px;
+  padding: 30px;
+  padding-top: 5px;
   padding-bottom: 15px;
   position: relative;
   border-radius: 8px;
   overflow: auto;
   height: 100%;
+  border-radius: 5px;
+  background: #26292e;
+  border: 1px solid #494b4f;
 `;
 
 const Button = styled.button`

dashboard/src/main/home/cluster-dashboard/env-groups/CreateEnvGroup.tsx

@@ -147,67 +147,71 @@ export default class CreateEnvGroup extends Component<PropsType, StateType> {
               <i className="material-icons">keyboard_backspace</i>
               Back
             </Button>
-            <Title>Create an Environment Group</Title>
+            <Title>Create an environment group</Title>
           </HeaderSection>
-          <DarkMatter antiHeight="-13px" />
-          <Heading isAtTop={true}>Name</Heading>
-          <Subtitle>
-            <Warning
-              makeFlush={true}
-              highlight={
-                !isAlphanumeric(this.state.envGroupName) &&
-                this.state.envGroupName !== ""
-              }
-            >
-              Lowercase letters, numbers, and "-" only.
-            </Warning>
-          </Subtitle>
-          <DarkMatter antiHeight="-29px" />
-          <InputRow
-            type="text"
-            value={this.state.envGroupName}
-            setValue={(x: string) => this.setState({ envGroupName: x })}
-            placeholder="ex: doctor-scientist"
-            width="100%"
-          />
+          <Wrapper>
+            <DarkMatter antiHeight="-13px" />
+            <Heading isAtTop={true}>Name</Heading>
+            <Subtitle>
+              <Warning
+                makeFlush={true}
+                highlight={
+                  !isAlphanumeric(this.state.envGroupName) &&
+                  this.state.envGroupName !== ""
+                }
+              >
+                Lowercase letters, numbers, and "-" only.
+              </Warning>
+            </Subtitle>
+            <DarkMatter antiHeight="-29px" />
+            <InputRow
+              type="text"
+              value={this.state.envGroupName}
+              setValue={(x: string) => this.setState({ envGroupName: x })}
+              placeholder="ex: doctor-scientist"
+              width="100%"
+            />
 
-          <Heading>Destination</Heading>
-          <Subtitle>
-            Specify the namespace you would like to create this environment
-            group in.
-          </Subtitle>
-          <DestinationSection>
-            <NamespaceLabel>
-              <i className="material-icons">view_list</i>Namespace
-            </NamespaceLabel>
-            <Selector
-              key={"namespace"}
-              activeValue={this.state.selectedNamespace}
-              setActiveValue={(namespace: string) =>
-                this.setState({ selectedNamespace: namespace })
-              }
-              options={this.state.namespaceOptions}
-              width="250px"
-              dropdownWidth="335px"
-              closeOverlay={true}
+            <Heading>Destination</Heading>
+            <Subtitle>
+              Specify the namespace you would like to create this environment
+              group in.
+            </Subtitle>
+            <DestinationSection>
+              <NamespaceLabel>
+                <i className="material-icons">view_list</i>Namespace
+              </NamespaceLabel>
+              <Selector
+                key={"namespace"}
+                activeValue={this.state.selectedNamespace}
+                setActiveValue={(namespace: string) =>
+                  this.setState({ selectedNamespace: namespace })
+                }
+                options={this.state.namespaceOptions}
+                width="250px"
+                dropdownWidth="335px"
+                closeOverlay={true}
+              />
+            </DestinationSection>
+
+            <Heading>Environment variables</Heading>
+            <Helper>
+              Set environment variables for your secrets and environment-specific
+              configuration.
+            </Helper>
+            <EnvGroupArray
+              namespace={this.state.selectedNamespace}
+              values={this.state.envVariables}
+              setValues={(x: any) => this.setState({ envVariables: x })}
+              fileUpload={true}
+              secretOption={true}
             />
-          </DestinationSection>
-
-          <Heading>Environment variables</Heading>
-          <Helper>
-            Set environment variables for your secrets and environment-specific
-            configuration.
-          </Helper>
-          <EnvGroupArray
-            namespace={this.state.selectedNamespace}
-            values={this.state.envVariables}
-            setValues={(x: any) => this.setState({ envVariables: x })}
-            fileUpload={true}
-            secretOption={true}
-          />
-          <SaveButton
+           </Wrapper> 
+           <SaveButton
             disabled={this.isDisabled()}
             text="Create env group"
+            clearPosition={true}
+            statusPosition="right"
             onClick={this.onSubmit}
             status={
               this.isDisabled()
@@ -225,6 +229,16 @@ export default class CreateEnvGroup extends Component<PropsType, StateType> {
 
 CreateEnvGroup.contextType = Context;
 
+const Wrapper = styled.div`
+  padding: 30px;
+  padding-bottom: 25px;
+  border-radius: 5px;
+  margin-top: -15px;
+  background: #26292e;
+  border: 1px solid #494b4f;
+  margin-bottom: 30px;
+`;
+
 const Buffer = styled.div`
   width: 100%;
   height: 150px;

dashboard/src/main/home/cluster-dashboard/env-groups/ExpandedEnvGroup.tsx

@@ -479,7 +479,7 @@ const EnvGroupVariablesEditor = ({
   return (
     <TabWrapper>
       <InnerWrapper>
-        <Heading>Environment variables</Heading>
+        <Heading isAtTop>Environment variables</Heading>
         <Helper>
           Set environment variables for your secrets and environment-specific
           configuration.
@@ -507,6 +507,8 @@ const EnvGroupVariablesEditor = ({
           onClick={() => handleUpdateValues()}
           status={buttonStatus}
           makeFlush={true}
+          clearPosition={true}
+          statusPosition="right"
         />
       )}
     </TabWrapper>
@@ -570,33 +572,7 @@ const EnvGroupSettings = ({
     <TabWrapper>
       {isAuthorized("env_group", "", ["get", "delete"]) && (
         <InnerWrapper full={true}>
-          {/* <Heading>Name</Heading>
-                <Subtitle>
-                  <Warning makeFlush={true} highlight={!isEnvGroupNameValid}>
-                    Lowercase letters, numbers, and "-" only.
-                  </Warning>
-                </Subtitle>
-                <DarkMatter antiHeight="-29px" />
-                <InputRow
-                  type="text"
-                  value={newName}
-                  setValue={(x: string) =>
-                    this.setState({ newEnvGroupName: x })
-                  }
-                  placeholder="ex: doctor-scientist"
-                  width="100%"
-                />
-                <Button
-                  color="#616FEEcc"
-                  disabled={!(isEnvGroupNameDifferent && isEnvGroupNameValid)}
-                  onClick={this.handleRename}
-                >
-                  Rename {name}
-                </Button>
-
-                <DarkMatter /> */}
-
-          <Heading>Manage environment group</Heading>
+          <Heading isAtTop>Manage environment group</Heading>
           <Helper>
             Permanently delete this set of environment variables. This action
             cannot be undone.
@@ -895,12 +871,14 @@ const CloneButton = styled(Button)`
 const InnerWrapper = styled.div<{ full?: boolean }>`
   width: 100%;
   height: ${(props) => (props.full ? "100%" : "calc(100% - 65px)")};
-  background: #ffffff11;
-  padding: 0 35px;
+  padding: 30px;
   padding-bottom: 15px;
   position: relative;
-  border-radius: 8px;
   overflow: auto;
+  margin-bottom: 30px;
+  border-radius: 5px;
+  background: #26292e;
+  border: 1px solid #494b4f;
 `;
 
 const TabWrapper = styled.div`

dashboard/src/main/home/cluster-dashboard/expanded-chart/SettingsSection.tsx

@@ -234,7 +234,7 @@ const SettingsSection: React.FC<PropsType> = ({
                 <SaveButton
                   clearPosition={true}
                   statusPosition="right"
-                  text="Save Source Settings"
+                  text="Save source settings"
                   status={saveValuesStatus}
                   onClick={handleSubmit}
                 />

dashboard/src/main/home/cluster-dashboard/expanded-chart/ValuesYaml.tsx

@@ -105,9 +105,11 @@ export default class ValuesYaml extends Component<PropsType, StateType> {
         </Wrapper>
         {!this.props.disabled && (
           <SaveButton
-            text="Update Values"
+            text="Update values"
             onClick={this.handleSaveValues}
             status={this.state.saveValuesStatus}
+            statusPosition="right"
+            clearPosition={true}
             makeFlush={true}
           />
         )}
@@ -121,6 +123,7 @@ ValuesYaml.contextType = Context;
 const Wrapper = styled.div`
   overflow: auto;
   border-radius: 8px;
+  margin-bottom: 30px;
   border: 1px solid #ffffff33;
 `;
 

dashboard/src/main/home/cluster-dashboard/expanded-chart/build-settings/BuildSettingsTab.tsx

@@ -357,7 +357,7 @@ const BuildSettingsTab: React.FC<Props> = ({
 
         {!chart.git_action_config.dockerfile_path ? (
           <>
-            <Heading>Buildpack Settings</Heading>
+            <Heading>Buildpack settings</Heading>
             <BuildpackConfigSection
               ref={buildpackConfigRef}
               currentChart={chart}

dashboard/src/main/home/launch/launch-flow/SettingsPage.tsx

@@ -134,7 +134,7 @@ class SettingsPage extends Component<PropsType, StateType> {
       } = this.props;
       return (
         <FadeWrapper>
-          <Heading>Additional Settings</Heading>
+          <Heading>Additional settings</Heading>
           <Helper>
             Configure additional settings for this template. (Optional)
           </Helper>
@@ -229,7 +229,7 @@ class SettingsPage extends Component<PropsType, StateType> {
       return (
         <BackButton width="155px" onClick={() => setPage("source")}>
           <i className="material-icons">first_page</i>
-          Source Settings
+          Source settings
         </BackButton>
       );
     }
@@ -438,6 +438,7 @@ const PaddingWrapper = styled.div`
 
 const StyledSettingsPage = styled.div`
   position: relative;
+  padding-bottom: 20px;
 `;
 
 const Subtitle = styled.div`

dashboard/src/main/home/launch/launch-flow/SourcePage.tsx

@@ -274,7 +274,7 @@ class SourcePage extends Component<PropsType, StateType> {
             width="470px"
           />
         </InputWrapper>
-        <Heading>Deployment Method</Heading>
+        <Heading>Deployment method</Heading>
         <Helper>
           Deploy from a Git repository or a Docker registry:
           <Required>*</Required>
@@ -296,6 +296,8 @@ class SourcePage extends Component<PropsType, StateType> {
           disabled={!this.checkSourceSelected()}
           onClick={this.handleContinue}
           status={this.getButtonStatus()}
+          clearPosition={true}
+          statusPosition="right"
           makeFlush={true}
           helper={this.getButtonHelper()}
         />
@@ -324,7 +326,7 @@ const StyledSourcePage = styled.div`
 
 const Buffer = styled.div`
   width: 100%;
-  height: 35px;
+  height: 15px;
 `;
 
 const Br = styled.div`
@@ -476,12 +478,13 @@ const Highlight = styled.a`
 
 const StyledSourceBox = styled.div`
   width: 100%;
-  background: #ffffff11;
   color: #ffffff;
   padding: 14px 35px 20px;
   position: relative;
-  border-radius: 5px;
   font-size: 13px;
   margin-top: 6px;
   margin-bottom: 25px;
+  border-radius: 5px;
+  background: #26292e;
+  border: 1px solid #494b4f;
 `;

dashboard/src/main/home/launch/launch-flow/WorkflowPage.tsx

@@ -72,7 +72,7 @@ const WorkflowPage: React.FC<PropsType> = (props) => {
 
   return (
     <StyledWorkflowPage>
-      <Heading>GitHub Actions</Heading>
+      <Heading isAtTop>GitHub Actions</Heading>
       <Helper>
         To auto-deploy each time you push changes, Porter will write GitHub
         Secrets and this GitHub Actions workflow to your repository.