issue #21 - standardises CSS for all forms and adds text component

src/components/EnrollmentForms/EnrollmentForms.module.css

@@ -0,0 +1,12 @@
+/* 
+  author: @ortonomy
+  date: Feb 2018
+  version: 1 
+*/
+
+.Form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

src/components/EnrollmentForms/index.js

@@ -14,9 +14,9 @@ import FormButton from '../FormButton';
 import ErrorMessage from '../ErrorMessage';
 
 // styles
-//import styles from './EnrollmentForms.module.css';
+import styles from './EnrollmentForms.module.css';
 
-//debug
+// debug
 import Debug from '../../utils/Debug';
 
 @connect(
@@ -84,7 +84,7 @@ class EnrollmentForm extends Component {
   render() {
     Debug.log('[render] of <EnrollmentForm>: ', this.props);
     const f = (
-      <form>
+      <form className={styles.Form}>
         <FormInputAnimated passValue={this.handleOrgName} name="orgname" text="Organization name" type="text" />
         <div>
           { 

src/components/FormButton/FormButton.module.css

@@ -1,5 +1,5 @@
 .Button {
-  width: calc(100% - 50px);
+  width: 100%;
   height: 50px;
   font-size: 1.8rem;
   font-family: 'Proxima Nova Bold';

src/components/FormInputAnimated/FormInputAnimated.module.css

@@ -9,7 +9,7 @@
 
 .FormInputAnimated > .FormElements {
   position: relative;
-  width: calc(100% - 50px);
+  width: 100%;
 }
 
 .FormInputAnimated > .FormElements > input {
@@ -68,7 +68,7 @@
 
 .Feedback {
   position: relative;
-  width: calc(100% - 50px);
+  width: 100%;
   height: 18px;
   margin-top: 7px;
 }

src/components/FormText/FormText.module.css

@@ -0,0 +1,9 @@
+/* 
+  author: @ortonomy
+  date: Feb 2018
+  version: 1 
+*/
+
+.Element {
+  text-align: center;
+}

src/components/FormText/index.js

@@ -0,0 +1,15 @@
+// author: Ortonomy, 2018, v1
+
+// react
+import React from 'react';
+
+//styles
+import styles from './FormText.module.css';
+
+const FormText = ({ text, ...props}) => {
+  return (
+    <p className={styles.Element}>{text}</p>
+  );
+}
+
+export default FormText;

src/components/LoginForm/LoginForm.module.css

@@ -4,7 +4,7 @@
   justify-content: center;
   flex-flow: column nowrap;
   padding: 15px 0 25px 0;
-  width: 100%;
+  width: calc(100% - 50px);
 }
 
 .Element {
@@ -19,12 +19,12 @@
 }
 
 .Forgot {
-  width: calc(100% - 50px);
+  width: 100%;
   margin: 0 0 15px 0;
   font-size: 1.2rem;
   text-align: right;
 }
 
 .ErrorBox {
-  width: calc(100% - 50px);
+  width: 100%;
 }

src/components/RegisterForm/style.module.css

@@ -4,7 +4,7 @@
   justify-content: center;
   flex-flow: column nowrap;
   padding: 15px 0 25px 0;
-  width: 100%;
+  width: calc(100% - 50px);
 }
 
 .element {
@@ -44,5 +44,5 @@
 }
 
 .ErrorBox {
-  width: calc(100% - 50px);
+  width: 100%;
 }

src/containers/OrgEnrolment/component.js

@@ -3,19 +3,21 @@
 // react
 import React, { Component } from 'react';
 
-
 //library dependencies
 import { Link } from 'react-router-dom';
 
 // component dependencies 
 import EnrollmentForms from '../../components/EnrollmentForms';
+import FormText from '../../components/FormText';
 
 // styles
 import styles from './style.module.css';
 
 // copy and assets
 import logo from '../../assets/images/[email protected]';
 
+// in-component copy
+const instructionText = `Find or create an organization.`;
 
 class OrgEnrolment extends Component {
   render() {
@@ -26,6 +28,7 @@ class OrgEnrolment extends Component {
             <Link to="/"><img src={logo} alt="Fling" /></Link>
           </div>
           <div className={styles.Components} >
+            <FormText text={instructionText}/>
             <EnrollmentForms />
           </div>
         </div>

src/containers/OrgEnrolment/style.module.css

@@ -27,6 +27,7 @@
 .Components {
   background: rgba(255,255,255,1);
   display: flex;
+  flex-direction: column;
   justify-content: center;
   width: calc(100% - 60px);
   margin: 0 30px 30px 30px;