From f4a101f236881161092cf732f27b1cca896a1aa8 Mon Sep 17 00:00:00 2001 From: Toine van Kampen Date: Wed, 7 Mar 2018 21:10:42 +1000 Subject: [PATCH] Create Custom FormGroup Create custom form group to apply current override SCSS styles. --- .../DocumentEditor/DocumentEditor.js | 3 +- imports/ui/components/FormGroup.js | 30 +++++++++++++++++++ .../ui/components/PageHeader/PageHeader.js | 2 ++ imports/ui/pages/Login/Login.js | 3 +- imports/ui/pages/Profile/Profile.js | 3 +- .../pages/RecoverPassword/RecoverPassword.js | 3 +- .../ui/pages/ResetPassword/ResetPassword.js | 3 +- imports/ui/pages/Signup/Signup.js | 3 +- 8 files changed, 44 insertions(+), 6 deletions(-) create mode 100644 imports/ui/components/FormGroup.js diff --git a/imports/ui/components/DocumentEditor/DocumentEditor.js b/imports/ui/components/DocumentEditor/DocumentEditor.js index 9c655596..3b6ea22e 100644 --- a/imports/ui/components/DocumentEditor/DocumentEditor.js +++ b/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 { diff --git a/imports/ui/components/FormGroup.js b/imports/ui/components/FormGroup.js new file mode 100644 index 00000000..5359b4d2 --- /dev/null +++ b/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 }) => ( +
{children}
+); + +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; + diff --git a/imports/ui/components/PageHeader/PageHeader.js b/imports/ui/components/PageHeader/PageHeader.js index 9cb8b521..62e77985 100644 --- a/imports/ui/components/PageHeader/PageHeader.js +++ b/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` diff --git a/imports/ui/pages/Login/Login.js b/imports/ui/pages/Login/Login.js index 58754672..1e9ddc57 100644 --- a/imports/ui/pages/Login/Login.js +++ b/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 { diff --git a/imports/ui/pages/Profile/Profile.js b/imports/ui/pages/Profile/Profile.js index dae7792d..3aaeb48a 100644 --- a/imports/ui/pages/Profile/Profile.js +++ b/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 { diff --git a/imports/ui/pages/RecoverPassword/RecoverPassword.js b/imports/ui/pages/RecoverPassword/RecoverPassword.js index 475e9722..ff4c0f8a 100644 --- a/imports/ui/pages/RecoverPassword/RecoverPassword.js +++ b/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 { diff --git a/imports/ui/pages/ResetPassword/ResetPassword.js b/imports/ui/pages/ResetPassword/ResetPassword.js index 8f645676..3513249f 100644 --- a/imports/ui/pages/ResetPassword/ResetPassword.js +++ b/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 { diff --git a/imports/ui/pages/Signup/Signup.js b/imports/ui/pages/Signup/Signup.js index cf4c1129..048dfd7e 100644 --- a/imports/ui/pages/Signup/Signup.js +++ b/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 {