Create Custom FormGroup

Create custom form group to apply current override SCSS styles.

imports/ui/components/DocumentEditor/DocumentEditor.js

@@ -2,9 +2,10 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { ControlLabel, Button } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
+import FormGroup from '../../components/FormGroup';
 import validate from '../../../modules/validate';
 
 class DocumentEditor extends React.Component {

imports/ui/components/FormGroup.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const CustomFormGroup = ({ className, children }) => (
+ <div className={`form-group ${className}`}>{children}</div>
+);
+
+const StyledFormGroup = styled(CustomFormGroup)`
+label,
+.control-label {
+ display: block;
+}
+
+label.error {
+ display: block;
+ margin-top: 8px;
+ font-size: 13px;
+ font-weight: normal;
+ color: $danger;
+}
+`;
+
+CustomFormGroup.propTypes = {
+ className: PropTypes.node.isRequired,
+ children: PropTypes.node.isRequired,
+};
+
+export default StyledFormGroup;
+

imports/ui/components/PageHeader/PageHeader.js

@@ -16,6 +16,7 @@ const StyledPageHeader = styled(PageHeader)`
  border-bottom: 1px solid ${props => props.theme.colors.grayLighter};
  padding: 20px 0 40px;
  margin-bottom: 40px;
+ margin-top: 20px;
 
  h1 {
  font-size: 24px;
@@ -37,6 +38,7 @@ const StyledPageHeader = styled(PageHeader)`
  ${media.tablet`
  padding: 10px 0 30px;
  margin-bottom: 30px;
+ margin-top: 20;
  `};
 
  ${media.handheldLarge`

imports/ui/pages/Login/Login.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import autoBind from 'react-autobind';
-import { Row, Col, FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Row, Col, ControlLabel, Button } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
 import OAuthLoginButtons from '../../components/OAuthLoginButtons/OAuthLoginButtons';
 import AccountPageFooter from '../../components/AccountPageFooter/AccountPageFooter';
+import FormGroup from '../../components/FormGroup';
 import validate from '../../../modules/validate';
 
 class Login extends React.Component {

imports/ui/pages/Profile/Profile.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import autoBind from 'react-autobind';
 import FileSaver from 'file-saver';
 import base64ToBlob from 'b64-to-blob';
-import { Row, Col, FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Row, Col, ControlLabel, Button } from 'react-bootstrap';
 import _ from 'lodash';
 import { Meteor } from 'meteor/meteor';
 import { Accounts } from 'meteor/accounts-base';
@@ -14,6 +14,7 @@ import { withTracker } from 'meteor/react-meteor-data';
 import styled from 'styled-components';
 import InputHint from '../../components/InputHint/InputHint';
 import AccountPageFooter from '../../components/AccountPageFooter/AccountPageFooter';
+import FormGroup from '../../components/FormGroup';
 import validate from '../../../modules/validate';
 
 class Profile extends React.Component {

imports/ui/pages/RecoverPassword/RecoverPassword.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import autoBind from 'react-autobind';
-import { Row, Col, Alert, FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Row, Col, Alert, ControlLabel, Button } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { Accounts } from 'meteor/accounts-base';
 import { Bert } from 'meteor/themeteorchef:bert';
 import AccountPageFooter from '../../components/AccountPageFooter/AccountPageFooter';
+import FormGroup from '../../components/FormGroup';
 import validate from '../../../modules/validate';
 
 class RecoverPassword extends React.Component {

imports/ui/pages/ResetPassword/ResetPassword.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import autoBind from 'react-autobind';
-import { Row, Col, Alert, FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Row, Col, Alert, ControlLabel, Button } from 'react-bootstrap';
 import { Accounts } from 'meteor/accounts-base';
 import { Bert } from 'meteor/themeteorchef:bert';
+import FormGroup from '../../components/FormGroup';
 import validate from '../../../modules/validate';
 
 class ResetPassword extends React.Component {

imports/ui/pages/Signup/Signup.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import autoBind from 'react-autobind';
-import { Row, Col, FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Row, Col, ControlLabel, Button } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { Meteor } from 'meteor/meteor';
@@ -9,6 +9,7 @@ import { Bert } from 'meteor/themeteorchef:bert';
 import OAuthLoginButtons from '../../components/OAuthLoginButtons/OAuthLoginButtons';
 import InputHint from '../../components/InputHint/InputHint';
 import AccountPageFooter from '../../components/AccountPageFooter/AccountPageFooter';
+import FormGroup from '../../components/FormGroup';
 import validate from '../../../modules/validate';
 
 class Signup extends React.Component {