mandatory filds in the form (#67)

Author: Wolfjawan

src/App.css

@@ -23,3 +23,6 @@ body {
   -webkit-animation: spin 2s linear infinite;
   animation: spin 2s linear infinite;
 }
+button:disabled {
+  background: gray;
+}

src/Components/forms/Acknowledgement.js

@@ -54,6 +54,9 @@ export default ({ onChange, agreeToTOU, agreeToReceiveCommunication }) => {
           <strong className="text-danger">*</strong>
         </Label>
       </FormGroup>
+      <p className="pt-2">
+        <strong className="text-danger">*</strong> fields are mandatory
+      </p>
     </Fragment>
   )
 }

src/Components/forms/index.css

@@ -89,12 +89,12 @@
   border: none !important;
 }
 .volunteer-submit-btn {
-  background: #03a9f4;
+  background-color: #03a9f4;
   border-radius: 5px;
   letter-spacing: 0.75px;
   text-transform: capitalize;
   color: #ffffff;
-  margin: 40px 0;
+  margin: 20px 0;
   width: 140px;
 }
 .form-acknowledgement-header {

src/Components/forms/index.js

@@ -206,9 +206,9 @@ class Forms extends Component {
           />
           <Acknowledgement onChange={this.onChange} {...this.state} />
           <button
+            disabled={disabled || !agreeToTOU || !agreeToReceiveCommunication}
             className="btn volunteer-submit-btn"
             type="submit"
-            disabled={disabled || !agreeToTOU || !agreeToReceiveCommunication}
           >
             Submit
           </button>