CLLLEANED the forms, inputs, buttons, labels and form/button groups

public/objects/modal/Modal.jsx

@@ -25,12 +25,16 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
-import { Button } from './../input/Input';
+
+import Styles from './Modal.scss';
+
 import Language from '@public/language/Language';
 import { openModal, closeModal } from '@public/actions/ModalActions';
-import { Heading4 } from '@objects/typography/Typography';
 import Keyboard from '@public/keyboard/Keyboard';
 
+import { Button } from './../input/Input';
+import { Heading4 } from '@objects/typography/Typography';
+
 class Modal extends React.Component {
   constructor(props) {
     super(props);
@@ -50,46 +54,33 @@ class Modal extends React.Component {
   }
 
   render() {
-    //Add necessary buttons
-    let buttons = [];
-    if(this.props.buttons) {
-      if(Array.isArray(buttons)) {
-        buttons.concat(this.props.buttons);
-      } else {
-        buttons.push(this.props.buttons);
-      }
-    }
+    let { buttons, closeModal, close, title, children, large, modal } = this.props;
 
-    if(this.props.close) {
-      buttons.push(<Button key="close" onClick={this.props.closeModal}>{ Language.get("modal.close") }</Button>);
+    //Add necessary buttons
+    buttons = buttons || [];
+    if(!Array.isArray(buttons)) buttons = [ buttons ];
+
+    if(close) {
+      buttons.push(<Button key="close" onClick={closeModal}>{ Language.get("modal.close") }</Button>);
     }
 
     //Inner divs
     let heading,body,footer;
-    if(this.props.title) {
+
+    if(title) {
       heading = (
         <div className="o-modal__box-heading">
-          <Heading4 className="o-modal__title">
-            { this.props.title }
-          </Heading4>
+          <Heading4 className="o-modal__title">\{ title }</Heading4>
         </div>
       );
     }
 
-    if(this.props.children) {
-      body = (
-        <div className="o-modal__box-body">
-          { this.props.children }
-        </div>
-      );
+    if(children) {
+      body = <div className="o-modal__box-body" children={ children } />;
     }
 
-    if(buttons) {
-      footer = (
-        <div className="o-modal__box-footer">
-          { buttons }
-        </div>
-      );
+    if(buttons && buttons.length) {
+      footer = <div className="o-modal__box-footer">{ buttons }</div>;
     }
 
     //Create our modal contents
@@ -97,11 +88,11 @@ class Modal extends React.Component {
       <div className="o-modal">
         <div className="o-modal__inner">
           {/* Provides both a good overlay, and a nice clickable area  */}
-          <div className="o-modal__backdrop" onClick={this.props.closeModal}>
+          <div className="o-modal__backdrop" onClick={closeModal}>
           </div>
 
           {/* Box itself, has a background and a shadow */}
-          <div className={"o-modal__box" + (this.props.large ? " is-large":"")}>
+          <div className={"o-modal__box"+(large ? " is-large":"")}>
             { heading }
             { body }
             { footer }
@@ -113,7 +104,7 @@ class Modal extends React.Component {
     //Display?
     let displayedContents = <div></div>;
 
-    if(this.props.modal.open) {
+    if(modal.open) {
       displayedContents = (
         <CSSTransition
           appear={true}

public/objects/modal/Modal.scss

@@ -0,0 +1,111 @@
+/*
+ *  Modal
+ *    Popup box designed to alert, or offer a unique interaction method.
+ *
+ *  Dependencies:
+ *    styles/tools/_absolute-centering.scss
+ *    styles/tools/_shadow.scss
+ *    styles/settings/z.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/07/05
+ */
+@import '~@styles/global';
+$o-modal--backdrop: rgba(0, 0, 0, 0.7);
+$o-modal--background: white;
+
+$o-modal--transition: 0.2s $s-animation--ease-out;
+
+.o-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: $s-z--modal;
+
+  &__inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
+
+  &__backdrop {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: $o-modal--backdrop;
+
+    //Transition Properties
+    transition: opacity #{$o-modal--transition};
+    opacity: 0;
+  }
+
+  &__box {
+    @extend %t-dp--shadow;
+    background: $o-modal--background;
+    position: relative;
+    width: 100%;
+    margin: 5em auto;
+
+    //Transition properties
+    transition: all #{$o-modal--transition};
+    @include t-scale(0.4);
+    opacity: 0;
+
+    &-heading,
+    &-body,
+    &-footer {
+      padding: 1em;
+    }
+  }
+
+  &__title {
+    margin: 1em 0 0.5em;
+  }
+
+
+  //Media Queries
+  @include t-media-query($s-xsmall-up) {
+    &__box {
+      max-width: 600px;
+
+      &.is-large {
+        max-width: 900px;
+      }
+    }
+  }
+
+
+  //Transition related
+  &__transition {
+    &-container {}//Top level container
+
+    //Entry animation
+    &-enter {
+      &-active {}
+      &-done {}
+
+      &-active,&-done {
+        .o-modal__backdrop {
+          opacity: 1;
+        }
+
+        .o-modal__box {
+          @include t-scale(1);
+          opacity: 1;
+        }
+      }
+    }
+
+    //Exit animation
+    &-exit {
+      &-active {}
+      &-done {
+      }
+    }
+  }
+}