Fixes #497: "Validation Message spacing (UI) issue" (#763)

* fixes #497 small ui changes

* linting fix

* added margin for bottom error message to be more consistent

* 8px/24px margins as suggested

* fix spacing issues

* linting changes

Author: cyrusjc

webapp/src/components/github_repo_selector/github_repo_selector.jsx

@@ -42,7 +42,7 @@ export default class GithubRepoSelector extends PureComponent {
         const repoOptions = this.props.yourRepos.map((item) => ({value: item.full_name, label: item.full_name}));
 
         return (
-            <div className={'form-group margin-bottom x3'}>
+            <div className={'form-group x3'}>
                 <ReactSelectSetting
                     name={'repo'}
                     label={'Repository'}
@@ -57,8 +57,11 @@ export default class GithubRepoSelector extends PureComponent {
                     removeValidate={this.props.removeValidate}
                     value={repoOptions.find((option) => option.value === this.props.value)}
                 />
-                <div className={'help-text'}>
-                    {'Returns GitHub repositories connected to the user account'} <br/>
+                <div
+                    className={'help-text'}
+                    style={{marginTop: '8px', marginBottom: '24px'}}
+                >
+                    {'Returns GitHub repositories connected to the user account'}
                 </div>
             </div>
         );

webapp/src/components/modals/create_issue/create_issue.jsx

@@ -71,7 +71,7 @@ export default class CreateIssueModal extends PureComponent {
         }
 
         const {post} = this.props;
-        const postId = (post) ? post.id : '';
+        const postId = post ? post.id : '';
 
         const issue = {
             title: this.state.issueTitle,
@@ -116,7 +116,8 @@ export default class CreateIssueModal extends PureComponent {
 
     handleIssueTitleChange = (issueTitle) => this.setState({issueTitle});
 
-    handleIssueDescriptionChange = (issueDescription) => this.setState({issueDescription});
+    handleIssueDescriptionChange = (issueDescription) =>
+        this.setState({issueDescription});
 
     renderIssueAttributeSelectors = () => {
         if (!this.state.repo || (this.state.repo.permissions && !this.state.repo.permissions.push)) {
@@ -147,7 +148,7 @@ export default class CreateIssueModal extends PureComponent {
                 />
             </>
         );
-    }
+    };
 
     render() {
         if (!this.props.visible) {
@@ -162,7 +163,10 @@ export default class CreateIssueModal extends PureComponent {
         let issueTitleValidationError = null;
         if (this.state.showErrors && !this.state.issueTitleValid) {
             issueTitleValidationError = (
-                <p className='help-text error-text'>
+                <p
+                    className='help-text error-text'
+                    style={{marginTop: '8px', marginBottom: '24px'}}
+                >
                     <span>{requiredMsg}</span>
                 </p>
             );
@@ -221,9 +225,7 @@ export default class CreateIssueModal extends PureComponent {
                 backdrop='static'
             >
                 <Modal.Header closeButton={true}>
-                    <Modal.Title>
-                        {'Create GitHub Issue'}
-                    </Modal.Title>
+                    <Modal.Title>{'Create GitHub Issue'}</Modal.Title>
                 </Modal.Header>
                 <form
                     role='form'

webapp/src/components/react_select_setting.jsx

@@ -97,7 +97,10 @@ export default class ReactSelectSetting extends React.PureComponent {
         let validationError = null;
         if (this.props.required && this.state.invalid) {
             validationError = (
-                <p className='help-text error-text'>
+                <p
+                    className='help-text error-text'
+                    style={{marginTop: '8px', marginBottom: '8px'}}
+                >
                     <span>{requiredMsg}</span>
                 </p>
             );

webapp/src/components/setting.jsx

@@ -25,7 +25,10 @@ export default class Setting extends React.PureComponent {
         } = this.props;
 
         return (
-            <div className='form-group less'>
+            <div
+                className='form-group less'
+                style={{marginBottom: '8px'}}
+            >
                 {label && (
                     <label
                         className='control-label margin-bottom x2'
@@ -45,7 +48,10 @@ export default class Setting extends React.PureComponent {
                 }
                 <div>
                     {children}
-                    <div className='help-text'>
+                    <div
+                        className='help-text'
+                        style={{margin: '0px'}}
+                    >
                         {helpText}
                     </div>
                 </div>