update FormLayout styling

awx/ui_next/src/components/FormActionGroup/FormActionGroup.jsx

@@ -10,6 +10,7 @@ const ActionGroup = styled(PFActionGroup)`
   justify-content: flex-end;
   --pf-c-form__group--m-action--MarginTop: 0;
   grid-column: 1 / -1;
+  margin-right: calc(var(--pf-c-form__actions--MarginRight) * -1);
 
   .pf-c-form__actions {
     & > button {

awx/ui_next/src/components/FormField/PasswordField.jsx

@@ -17,6 +17,7 @@ function PasswordField(props) {
   const { id, name, label, validate, isRequired, i18n } = props;
   const [inputType, setInputType] = useState('password');
   const [field, meta] = useField({ name, validate });
+
   const isValid = !(meta.touched && meta.error);
 
   const handlePasswordToggle = () => {
@@ -46,11 +47,13 @@ function PasswordField(props) {
         </Tooltip>
         <TextInput
           id={id}
+          placeholder={field.value === '$encrypted$' ? 'ENCRYPTED' : undefined}
+          {...field}
+          value={field.value === '$encrypted$' ? '' : field.value}
           isRequired={isRequired}
           isValid={isValid}
           type={inputType}
-          {...field}
+          onChange={(_, event) => {
-          onChange={(value, event) => {
             field.onChange(event);
           }}
         />

awx/ui_next/src/components/FormLayout/FormLayout.jsx

@@ -2,9 +2,9 @@ import styled from 'styled-components';
 
 export const FormColumnLayout = styled.div`
   width: 100%;
-  grid-column: 1 / 4;
+  grid-column: 1 / -1;
   display: grid;
-  grid-gap: 20px;
+  grid-gap: var(--pf-c-form--GridGap);
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 
   @media (min-width: 1210px) {
@@ -16,25 +16,28 @@ export const FormFullWidthLayout = styled.div`
   grid-column: 1 / -1;
   display: grid;
   grid-template-columns: 1fr;
-  grid-gap: 20px;
+  grid-gap: var(--pf-c-form--GridGap);
 `;
 
 export const FormCheckboxLayout = styled.div`
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
+  margin-bottom: -10px;
+  margin-right: -30px !important;
 
   & > * {
-    margin-right: 30px;
     margin-bottom: 10px;
+    margin-right: 30px;
   }
 `;
 
 export const SubFormLayout = styled.div`
   grid-column: 1 / -1;
   background-color: #f5f5f5;
-  margin: 0 -24px;
+  margin-right: calc(var(--pf-c-card--child--PaddingRight) * -1);
-  padding: 24px;
+  margin-left: calc(var(--pf-c-card--child--PaddingLeft) * -1);
+  padding: var(--pf-c-card--child--PaddingRight);
 
   & > .pf-c-title {
     --pf-c-title--m-md--FontWeight: 700;

awx/ui_next/src/screens/Project/ProjectEdit/ProjectEdit.jsx

@@ -1,18 +1,10 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import styled from 'styled-components';
+import { Card } from '@patternfly/react-core';
-import { Card as _Card } from '@patternfly/react-core';
 import { CardBody } from '@components/Card';
 import ProjectForm from '../shared/ProjectForm';
 import { ProjectsAPI } from '@api';
 
-// TODO: we are doing this in multiple add/edit screens -- move to
-// common component?
-const Card = styled(_Card)`
-  --pf-c-card--child--PaddingLeft: 0;
-  --pf-c-card--child--PaddingRight: 0;
-`;
-
 function ProjectEdit({ project }) {
   const [formSubmitError, setFormSubmitError] = useState(null);
   const history = useHistory();

awx/ui_next/src/screens/Project/shared/ProjectForm.jsx

@@ -368,7 +368,6 @@ function ProjectForm({ i18n, project, submitError, ...props }) {
             <Form
               autoComplete="off"
               onSubmit={formik.handleSubmit}
-              css="padding: 0 24px"
             >
               <FormColumnLayout>
                 <ProjectFormFields

awx/ui_next/src/screens/Project/shared/ProjectSubForms/ManualSubForm.jsx

@@ -97,7 +97,6 @@ const ManualSubForm = ({
           }}
         />
       </FormGroup>
-      )}
     </>
   );
 };

awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx

@@ -510,7 +510,6 @@ class JobTemplateForm extends Component {
                   </Field>
                   <FormGroup
                     fieldId="template-option-checkboxes"
-                    isInline
                     label={i18n._(t`Options`)}
                   >
                     <FormCheckboxLayout>

awx/ui_next/src/screens/User/UserAdd/UserAdd.jsx

@@ -1,16 +1,10 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import styled from 'styled-components';
+import { Card, PageSection } from '@patternfly/react-core';
-import { Card as _Card, PageSection } from '@patternfly/react-core';
 import { CardBody } from '@components/Card';
 import UserForm from '../shared/UserForm';
 import { UsersAPI } from '@api';
 
-const Card = styled(_Card)`
-  --pf-c-card--child--PaddingLeft: 0;
-  --pf-c-card--child--PaddingRight: 0;
-`;
-
 function UserAdd() {
   const [formSubmitError, setFormSubmitError] = useState(null);
   const history = useHistory();