Change Endpoint field required style

Besides the 'Edit / New Endpoint' modal, the fields are used in 'Edit /
New User' and 'Assign user to project' modals.

src/components/atoms/TextArea/TextArea.jsx

@@ -20,6 +20,20 @@ import styled from 'styled-components'
 import Palette from '../../styleUtils/Palette'
 import StyleProps from '../../styleUtils/StyleProps'
 
+import requiredImage from './images/required.svg'
+
+const Wrapper = styled.div`
+  position: relative;
+`
+const Required = styled.div`
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  right: -16px;
+  top: 12px;
+  background: url('${requiredImage}') center no-repeat;
+`
+
 const getInputWidth = props => {
   if (props.width) {
     return props.width
@@ -64,16 +78,20 @@ const Input = styled.textarea`
 class TextArea extends React.Component<any> {
   render() {
     return (
-      <Input
-        {...this.props}
-        innerRef={r => {
-          if (this.props.innerRef) {
-            this.props.innerRef(r)
-          } else if (this.props.customRef) {
-            this.props.customRef(r)
-          }
-        }}
-      />
+      <Wrapper>
+        <Input
+          {...this.props}
+          innerRef={r => {
+            if (this.props.innerRef) {
+              this.props.innerRef(r)
+            } else if (this.props.customRef) {
+              this.props.customRef(r)
+            }
+          }}
+          data-test-id="textArea-input"
+        />
+        {this.props.required ? <Required /> : null}
+      </Wrapper>
     )
   }
 }

src/components/atoms/TextArea/images/required.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="8px" height="10px" viewBox="0 0 8 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
+    <title>Icon-Star</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Coriolis-Migrations" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
+        <g id="EP/New-Endpoint/OpenStack/01-Copy-7" transform="translate(-304.000000, -523.000000)" stroke="#0044CA" stroke-width="1.5">
+            <g id="Form/Input-with-label-Copy-4" transform="translate(304.000000, 495.000000)">
+                <g id="Icon/Asterisk/Blue" transform="translate(0.000000, 29.000000)">
+                    <path d="M4,0.666666667 L4,7.33333333" id="Line"></path>
+                    <path d="M1.11324865,2.33333333 L6.88675135,5.66666667" id="Line"></path>
+                    <path d="M1.11324865,2.33333333 L6.88675135,5.66666667" id="Line" transform="translate(4.000000, 4.000000) scale(-1, 1) translate(-4.000000, -4.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/atoms/TextArea/test.jsx

@@ -17,16 +17,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
+
+import TestWrapper from '../../../utils/TestWrapper'
 import TextArea from '.'
 
-const wrap = props => shallow(<TextArea {...props} />)
+const wrap = props => new TestWrapper(shallow(<TextArea {...props} />), 'textArea')
 
 describe('TextArea Component', () => {
   it('dispatches change', () => {
     const onChange = sinon.spy()
-    const wrapper = wrap({ value: 'the_value', onChange })
-    expect(wrapper.prop('value')).toBe('the_value')
-    wrapper.simulate('change', { value: 'A' })
+    const wrapper = wrap({
+      value: 'the_value',
+      onChange,
+    })
+    let input = wrapper.find('input')
+    expect(input.prop('value')).toBe('the_value')
+    input.simulate('change', { value: 'A' })
     expect(onChange.args[0][0].value).toBe('A')
   })
 })

src/components/atoms/TextInput/TextInput.jsx

@@ -20,10 +20,19 @@ import Palette from '../../styleUtils/Palette'
 import StyleProps from '../../styleUtils/StyleProps'
 
 import closeImage from './images/close.svg'
+import requiredImage from './images/required.svg'
 
 const Wrapper = styled.div`
   position: relative;
 `
+const Required = styled.div`
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  right: -16px;
+  top: 12px;
+  background: url('${requiredImage}') center no-repeat;
+`
 const getInputWidth = props => {
   if (props.width) {
     return props.width
@@ -93,6 +102,7 @@ type Props = {
   embedded?: boolean,
   height?: string,
   'data-test-id'?: string,
+  required?: boolean,
 }
 const TextInput = (props: Props) => {
   const { _ref, value, onChange, showClose, onCloseClick } = props
@@ -107,6 +117,7 @@ const TextInput = (props: Props) => {
         data-test-id="textInput-input"
         {...props}
       />
+      {props.required ? <Required /> : null}
       <Close
         data-test-id="textInput-close"
         show={showClose && value !== '' && value !== undefined}

src/components/atoms/TextInput/images/required.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="8px" height="10px" viewBox="0 0 8 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
+    <title>Icon-Star</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Coriolis-Migrations" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
+        <g id="EP/New-Endpoint/OpenStack/01-Copy-7" transform="translate(-304.000000, -523.000000)" stroke="#0044CA" stroke-width="1.5">
+            <g id="Form/Input-with-label-Copy-4" transform="translate(304.000000, 495.000000)">
+                <g id="Icon/Asterisk/Blue" transform="translate(0.000000, 29.000000)">
+                    <path d="M4,0.666666667 L4,7.33333333" id="Line"></path>
+                    <path d="M1.11324865,2.33333333 L6.88675135,5.66666667" id="Line"></path>
+                    <path d="M1.11324865,2.33333333 L6.88675135,5.66666667" id="Line" transform="translate(4.000000, 4.000000) scale(-1, 1) translate(-4.000000, -4.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/molecules/AutocompleteDropdown/AutocompleteDropdown.jsx

@@ -28,6 +28,8 @@ import Palette from '../../styleUtils/Palette'
 import DomUtils from '../../../utils/DomUtils'
 import StyleProps from '../../styleUtils/StyleProps'
 
+import requiredImage from './images/required.svg'
+
 const getWidth = props => {
   if (props.width) {
     return props.width - 2
@@ -43,6 +45,14 @@ const Wrapper = styled.div`
   position: relative;
   ${props => props.width ? css`width: ${props.width}px;` : ''}
 `
+const Required = styled.div`
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  right: -16px;
+  top: 12px;
+  background: url('${requiredImage}') center no-repeat;
+`
 const List = styled.div`
   position: absolute;
   background: white;
@@ -108,6 +118,7 @@ type Props = {
   dimNullValue?: boolean,
   highlight?: boolean,
   'data-test-id'?: string,
+  required?: boolean,
 }
 type State = {
   showDropdownList: boolean,
@@ -429,6 +440,7 @@ class AutocompleteDropdown extends React.Component<Props, State> {
           highlight={this.props.highlight}
           disabled={this.props.disabled}
         />
+        {this.props.required ? <Required /> : null}
         {this.renderList()}
       </Wrapper>
     )

src/components/molecules/AutocompleteDropdown/images/required.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="8px" height="10px" viewBox="0 0 8 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
+    <title>Icon-Star</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Coriolis-Migrations" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
+        <g id="EP/New-Endpoint/OpenStack/01-Copy-7" transform="translate(-304.000000, -523.000000)" stroke="#0044CA" stroke-width="1.5">
+            <g id="Form/Input-with-label-Copy-4" transform="translate(304.000000, 495.000000)">
+                <g id="Icon/Asterisk/Blue" transform="translate(0.000000, 29.000000)">
+                    <path d="M4,0.666666667 L4,7.33333333" id="Line"></path>
+                    <path d="M1.11324865,2.33333333 L6.88675135,5.66666667" id="Line"></path>
+                    <path d="M1.11324865,2.33333333 L6.88675135,5.66666667" id="Line" transform="translate(4.000000, 4.000000) scale(-1, 1) translate(-4.000000, -4.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/molecules/Dropdown/Dropdown.jsx

@@ -28,6 +28,7 @@ import StyleProps from '../../styleUtils/StyleProps'
 
 import checkmarkImage from './images/checkmark'
 import tipImage from './images/tip'
+import requiredImage from './images/required.svg'
 
 const getWidth = props => {
   if (props.large) {
@@ -44,6 +45,14 @@ const Wrapper = styled.div`
   position: relative;
   ${props => props.embedded ? 'width: 100%;' : ''}
 `
+const Required = styled.div`
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  right: -16px;
+  top: 12px;
+  background: url('${requiredImage}') center no-repeat;
+`
 const List = styled.div`
   position: absolute;
   background: white;
@@ -196,6 +205,7 @@ type Props = {
   multipleSelection?: boolean,
   selectedItems?: string[],
   highlight?: boolean,
+  required?: boolean,
 }
 type State = {
   showDropdownList: boolean,
@@ -473,6 +483,7 @@ class Dropdown extends React.Component<Props, State> {
           value={buttonValue()}
           onClick={() => this.handleButtonClick()}
         />
+        {this.props.required ? <Required /> : null}
         {this.renderList()}
       </Wrapper>
     )

src/components/molecules/Dropdown/images/required.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="8px" height="10px" viewBox="0 0 8 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
+    <title>Icon-Star</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Coriolis-Migrations" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
+        <g id="EP/New-Endpoint/OpenStack/01-Copy-7" transform="translate(-304.000000, -523.000000)" stroke="#0044CA" stroke-width="1.5">
+            <g id="Form/Input-with-label-Copy-4" transform="translate(304.000000, 495.000000)">
+                <g id="Icon/Asterisk/Blue" transform="translate(0.000000, 29.000000)">
+                    <path d="M4,0.666666667 L4,7.33333333" id="Line"></path>
+                    <path d="M1.11324865,2.33333333 L6.88675135,5.66666667" id="Line"></path>
+                    <path d="M1.11324865,2.33333333 L6.88675135,5.66666667" id="Line" transform="translate(4.000000, 4.000000) scale(-1, 1) translate(-4.000000, -4.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/molecules/DropdownInput/DropdownInput.jsx

@@ -25,6 +25,7 @@ import Palette from '../../styleUtils/Palette'
 import StyleProps from '../../styleUtils/StyleProps'
 
 import arrowImage from './images/arrow'
+import requiredImage from './images/required.svg'
 
 const Wrapper = styled.div`
   display: flex;
@@ -32,6 +33,15 @@ const Wrapper = styled.div`
   border: 1px solid ${props => props.disabled ? Palette.grayscale[0] : props.highlight ? Palette.alert : Palette.grayscale[3]};
   border-radius: ${StyleProps.borderRadius};
   height: ${StyleProps.inputSizes.regular.height - 2}px;
+  position: relative;
+`
+const Required = styled.div`
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  right: -16px;
+  top: 12px;
+  background: url('${requiredImage}') center no-repeat;
 `
 const linkButtonStyle = props => {
   return {
@@ -58,6 +68,7 @@ type Props = {
   placeholder?: string,
   highlight?: boolean,
   disabled?: boolean,
+  required?: boolean,
 }
 type State = {}
 @observer
@@ -86,6 +97,7 @@ class DropdownInput extends React.Component<Props, State> {
           disabled={this.props.disabled}
           data-test-id="ddInput-text"
         />
+        {this.props.required ? <Required /> : null}
       </Wrapper>
     )
   }

src/components/molecules/DropdownInput/images/required.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="8px" height="10px" viewBox="0 0 8 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
+    <title>Icon-Star</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Coriolis-Migrations" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
+        <g id="EP/New-Endpoint/OpenStack/01-Copy-7" transform="translate(-304.000000, -523.000000)" stroke="#0044CA" stroke-width="1.5">
+            <g id="Form/Input-with-label-Copy-4" transform="translate(304.000000, 495.000000)">
+                <g id="Icon/Asterisk/Blue" transform="translate(0.000000, 29.000000)">
+                    <path d="M4,0.666666667 L4,7.33333333" id="Line"></path>
+                    <path d="M1.11324865,2.33333333 L6.88675135,5.66666667" id="Line"></path>
+                    <path d="M1.11324865,2.33333333 L6.88675135,5.66666667" id="Line" transform="translate(4.000000, 4.000000) scale(-1, 1) translate(-4.000000, -4.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/molecules/DropdownLink/DropdownLink.jsx

@@ -141,7 +141,8 @@ type Props = {
   itemStyle?: (item: ItemType) => string,
   style?: { [mixed]: any },
   labelStyle?: any,
-  getLabel?: () => string
+  getLabel?: () => string,
+  required?: boolean,
 }
 type State = {
   showDropdownList: boolean,

src/components/molecules/EndpointField/EndpointField.jsx

@@ -33,8 +33,6 @@ import LabelDictionary from '../../../utils/LabelDictionary'
 import StyleProps from '../../styleUtils/StyleProps'
 import Palette from '../../styleUtils/Palette'
 
-import asteriskImage from './images/asterisk.svg'
-
 const Wrapper = styled.div``
 const Label = styled.div`
   font-size: 10px;
@@ -48,14 +46,6 @@ const Label = styled.div`
 const LabelText = styled.span`
   margin-right: 24px;
 `
-export const Asterisk = styled.div`
-  ${StyleProps.exactSize('12px')}
-  display: inline-block;
-  background: url('${asteriskImage}') center no-repeat;
-  margin-bottom: 2px;
-  margin-left: ${props => props.marginLeft || '0px'};
-  opacity: 0.8;
-`
 
 type Props = {
   name: string,
@@ -108,6 +98,7 @@ class Field extends React.Component<Props> {
         onChange={e => { if (this.props.onChange) this.props.onChange(e.target.value) }}
         placeholder={LabelDictionary.get(this.props.name)}
         disabled={this.props.disabled}
+        required={this.props.required}
       />
     )
   }
@@ -159,6 +150,7 @@ class Field extends React.Component<Props> {
         onChange={e => { console.log('changing', e); if (this.props.onChange) this.props.onChange(e.target.value) }}
         placeholder={LabelDictionary.get(this.props.name)}
         disabled={this.props.disabled}
+        required={this.props.required}
       />
     )
   }
@@ -190,6 +182,7 @@ class Field extends React.Component<Props> {
         onChange={item => { if (this.props.onChange) this.props.onChange(item.value) }}
         disabled={this.props.disabled}
         highlight={this.props.highlight}
+        required={this.props.required}
       />
     )
   }
@@ -207,6 +200,7 @@ class Field extends React.Component<Props> {
         selectedItems={this.props.selectedItems}
         onChange={item => { if (this.props.onChange) this.props.onChange(item.value) }}
         highlight={this.props.highlight}
+        required={this.props.required}
       />
     )
   }
@@ -234,6 +228,7 @@ class Field extends React.Component<Props> {
         onChange={item => { if (this.props.onChange) this.props.onChange(item.value) }}
         disabled={this.props.disabled}
         highlight={this.props.highlight}
+        required={this.props.required}
       />
     )
   }
@@ -273,6 +268,7 @@ class Field extends React.Component<Props> {
         placeholder={LabelDictionary.get(fieldName)}
         highlight={this.props.highlight}
         disabled={this.props.disabled}
+        required={this.props.required}
       />
     )
   }
@@ -324,7 +320,6 @@ class Field extends React.Component<Props> {
       <Label>
         <LabelText data-test-id="endpointField-label">{LabelDictionary.get(this.props.name)}</LabelText>
         {infoIcon}
-        {this.props.required ? <Asterisk data-test-id="endpointField-required" marginLeft={description ? '4px' : '-16px'} /> : null}
       </Label>
     )
   }

src/components/molecules/EndpointField/images/asterisk.svg

@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
-
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Coriolis" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
-        <g id="Wizard/05-Options/2-Search-Dropdown_Erorr" transform="translate(-618.000000, -586.000000)" stroke="#616870" stroke-width="1.5">
-            <g id="Forms/Items/Input-Copy" transform="translate(528.000000, 583.000000)">
-                <g id="Group">
-                    <g id="Icon-Info-Copy-8" transform="translate(90.000000, 3.000000)">
-                        <g id="Icon/Asterisk/Grey">
-                            <path d="M5,0.833333333 L5,9.16666667" id="Line"></path>
-                            <path d="M1.39156082,2.91666667 L8.60843918,7.08333333" id="Line"></path>
-                            <path d="M1.39156082,2.91666667 L8.60843918,7.08333333" id="Line" transform="translate(5.000000, 5.000000) scale(-1, 1) translate(-5.000000, -5.000000) "></path>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

src/components/molecules/EndpointField/test.jsx

@@ -19,7 +19,6 @@ import { shallow } from 'enzyme'
 import TestWrapper from '../../../utils/TestWrapper'
 import EndpointField from '.'
 
-// $FlowIgnore
 const wrap = props => new TestWrapper(shallow(<EndpointField {...props} />), 'endpointField')
 
 describe('EndpointField Component', () => {
@@ -62,23 +61,7 @@ describe('EndpointField Component', () => {
     expect(textInput.prop('large')).toBe(true)
     expect(textInput.prop('disabled')).toBe(true)
     expect(textInput.prop('highlight')).toBe(true)
-  })
-
-  it('renders required', () => {
-    let wrapper = wrap({
-      type: 'boolean',
-      value: true,
-      name: 'the_name',
-      required: true,
-    })
-    expect(wrapper.find('required').length).toBe(1)
-    wrapper = wrap({
-      type: 'boolean',
-      value: true,
-      name: 'the_name',
-      required: false,
-    })
-    expect(wrapper.find('required').length).toBe(0)
+    expect(textInput.prop('required')).toBe(true)
   })
 
   it('renders integer dropdown field with correct items', () => {

src/components/organisms/AssessmentDetailsContent/AssessmentDetailsContent.jsx

@@ -500,7 +500,7 @@ class AssessmentDetailsContent extends React.Component<Props> {
           items={NavigationItems}
           selectedValue={this.props.page}
           itemId={this.props.item ? this.props.item.id : ''}
-          customHref={() => null}
+          customHref={() => '#'}
         />
         <DetailsBody>
           {this.props.detailsLoading ? null : this.renderMainDetails()}

src/components/organisms/Endpoint/Endpoint.jsx

@@ -39,7 +39,7 @@ import DefaultContentPlugin from '../../../plugins/endpoint/default/ContentPlugi
 import KeyboardManager from '../../../utils/KeyboardManager'
 
 const Wrapper = styled.div`
-  padding: 48px 32px 32px 32px;
+  padding: 48px 0 32px 0;
   display: flex;
   align-items: center;
   flex-direction: column;
@@ -101,9 +101,9 @@ const LoadingText = styled.div`
 const Buttons = styled.div`
   display: flex;
   justify-content: space-between;
-  width: 100%;
   margin-top: 32px;
   flex-shrink: 0;
+  padding: 0 32px;
 `
 
 type Props = {

src/components/organisms/ProjectMemberModal/ProjectMemberModal.jsx

@@ -23,7 +23,7 @@ import type { User } from '../../../types/User'
 import type { Project, Role } from '../../../types/Project'
 import Button from '../../atoms/Button'
 import Modal from '../../molecules/Modal'
-import Field, { Asterisk } from '../../molecules/EndpointField'
+import Field from '../../molecules/EndpointField'
 import ToggleButtonBar from '../../atoms/ToggleButtonBar'
 import AutocompleteDropdown from '../../molecules/AutocompleteDropdown'
 import StyleProps from '../../styleUtils/StyleProps'
@@ -33,13 +33,13 @@ import userImage from './images/user.svg'
 import KeyboardManager from '../../../utils/KeyboardManager'
 
 const Wrapper = styled.div`
-  padding: 48px 32px 32px 32px;
+  padding: 48px 0 32px 0;
   display: flex;
   flex-direction: column;
+  min-height: 0;
 `
 const Image = styled.div`
-  width: 96px;
-  height: 96px;
+  ${StyleProps.exactSize('96px')}
   background: url('${userImage}') center no-repeat;
   margin: 0 auto;
 `
@@ -52,6 +52,7 @@ const Form = styled.div`
   flex-wrap: wrap;
   margin-top: 32px;
   overflow: auto;
+  padding: 0 32px;
 
   > div {
     margin-top: 16px;
@@ -74,6 +75,7 @@ const Buttons = styled.div`
   margin-top: 32px;
   display: flex;
   justify-content: space-between;
+  padding: 0 32px;
 `
 
 type Props = {
@@ -330,7 +332,6 @@ class ProjectMemberModal extends React.Component<Props, State> {
         <FormField>
           <FormLabel>
             Username
-            <Asterisk marginLeft="8px" />
           </FormLabel>
           <AutocompleteDropdown
             data-test-id={`${testName}-users`}
@@ -341,6 +342,7 @@ class ProjectMemberModal extends React.Component<Props, State> {
             onChange={item => {
               this.setState({ selectedUser: this.props.users.find(u => u.id === item.value) })
             }}
+            required
           />
         </FormField>
         {this.renderRolesField()}

src/components/organisms/ProjectModal/ProjectModal.jsx

@@ -125,7 +125,6 @@ class ProjectModal extends React.Component<Props, State> {
         onChange={onChange}
         large
         disabled={this.props.loading}
-        // $FlowIssue
         required={field.required}
         highlight={Boolean(this.state.highlightFieldNames.find(n => n === field.name))}
       />

src/components/organisms/UserModal/UserModal.jsx

@@ -29,7 +29,7 @@ import userImage from './images/user.svg'
 import KeyboardManager from '../../../utils/KeyboardManager'
 
 const Wrapper = styled.div`
-  padding: 48px 32px 32px 32px;
+  padding: 48px 0 32px 0;
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -46,6 +46,7 @@ const Form = styled.div`
   flex-wrap: wrap;
   margin-top: 64px;
   overflow: auto;
+  padding: 0 32px;
 
   > div {
     margin-top: 16px;
@@ -55,6 +56,7 @@ const Buttons = styled.div`
   margin-top: 32px;
   display: flex;
   justify-content: space-between;
+  padding: 0 32px;
 `
 
 type Props = {
@@ -182,7 +184,6 @@ class UserModal extends React.Component<Props, State> {
         disabled={disabled}
         enum={field.enum}
         password={field.name === 'new_password' || field.name === 'confirm_password'}
-        // $FlowIssue
         required={field.required}
         highlight={Boolean(this.state.highlightFieldNames.find(n => n === field.name))}
         noSelectionMessage="Choose a project"

src/plugins/endpoint/default/ContentPlugin.jsx

@@ -28,6 +28,7 @@ export const Wrapper = styled.div`
 export const Fields = styled.div`
   display: flex;
   margin-top: 32px;
+  padding: 0 32px;
   flex-direction: column;
   overflow: auto;
 `