Testing Button Designs

public/input/button/Button.jsx

@@ -37,6 +37,7 @@ export default class Button extends React.Component {
     let href;
     let to;
     let activeClassName;
+    let style;
 
     //Basic Element Determining
     if(this.props.type) {
@@ -65,8 +66,20 @@ export default class Button extends React.Component {
       contents = this.props.children;
     }
 
-    if(this.props.style) {
-      clazzes += " o-btn--style-" + this.props.style;
+    //Determine Style
+    if(this.props.primary) {
+      style = "primary"
+    } else if(this.props.secondary) {
+      style = "secondary";
+    } else if(this.props.danger) {
+      style = "danger";
+    } else if(this.props.style) {
+      style = this.props.style;
+    }
+
+    //Style Clazzes
+    if(style) {
+      clazzes += " o-btn--style-"+style;
     }
 
     //Determine extra clazzes
@@ -80,7 +93,7 @@ export default class Button extends React.Component {
         href={href}
         to={to}
       >
-        <span class="o-btn__inner">
+        <span className={ "o-btn__inner" + (style ? " o-btn--style-" + style + "__inner" : "") }>
           {contents}
         </span>
       </ElementType>

public/page/contact/ContactPage.jsx

@@ -78,10 +78,12 @@ class ContactPage extends React.Component {
               </InputGroup>
 
               <InputGroup>
-                <Input
-                  type="submit"
-                  value={ Language.get("pages.contact.send") }
-                />
+                <Input type="submit" value={ Language.get("pages.contact.send") } primary />
+
+                <Input type="submit" value="Default" />
+                <Input type="button" value="Primary" primary />
+                <Input type="button" value="Secondary" secondary />
+                <Input type="button" value="Danger" danger />
               </InputGroup>
             </Form>
           </BodySection>

public/styles/objects/_button.scss

@@ -35,7 +35,7 @@ $o-btn--padding: 1.5em;//Base Padding size.
 
   &__inner {
     position: relative;
-    background: white;
+    background: $s-color--btn-default__top;
     display: block;
     padding: ( $o-btn--padding / 2 ) $o-btn--padding;
     border-radius: $o-btn--padding / 3;
@@ -49,19 +49,44 @@ $o-btn--padding: 1.5em;//Base Padding size.
     }
   }
 
-  &:active {
-    .o-btn__inner {
-      @include t-translate-y($o-btn--padding / 4);
-      background: $s-color--btn-default-hover__top;
-    }
-  }
-
-  &:focus {
-    &::before,
-    .o-btn__inner {
-      //border-color: $s-color--btn-default__focus;
-    }
+  &:active &__inner {
+    @include t-translate-y($o-btn--padding / 4);
+    background: $s-color--btn-default-hover__top;
   }
 }
 
-//Custom Button Styles
+/*** Custom Button Styles ***/
+@mixin o-basic-button-design($top, $bottom) {
+  &::before,
+  &:active &__inner {
+    background: $bottom;
+  }
+
+  &__inner {
+    background: $top;
+  }
+}
+
+//Primary (Blue)
+.o-btn--style-primary {
+  @include o-basic-button-design(
+    $s-color--btn-primary__top,
+    $s-color--btn-primary__bottom
+  );
+}
+
+//Secondary (Light Blue)
+.o-btn--style-secondary {
+  @include o-basic-button-design(
+    $s-color--btn-secondary__top,
+    $s-color--btn-secondary__bottom
+  );
+}
+
+//Danger
+.o-btn--style-danger {
+  @include o-basic-button-design(
+    $s-color--btn-danger__top,
+    $s-color--btn-danger__bottom
+  );
+}

public/styles/settings/colors.scss

@@ -45,9 +45,20 @@ $s-color--loader: $s-color--swatch-blue;
 
 /*** Buttons and Inputs ***/
 //Button Default
-$s-color--btn-default__top: #E0E0E0;
+$s-color--btn-default__top: #F7F7F7;
 $s-color--btn-default__bottom: #DADADA;
 $s-color--btn-default__border: 1px solid #AAA;
-$s-color--btn-default__focus: $s-color--swatch-blue;
 
 $s-color--btn-default-hover__top: $s-color--btn-default__bottom;
+
+//Button Primary
+$s-color--btn-primary__top: $s-color--swatch-blue;
+$s-color--btn-primary__bottom: darken($s-color--btn-primary__top, 8%);
+
+//Btn Secondary
+$s-color--btn-secondary__top: $s-color--pastel-blue;
+$s-color--btn-secondary__bottom: darken($s-color--btn-secondary__top, 8%);
+
+//Btn Danger
+$s-color--btn-danger__top: $s-color--swatch-red;
+$s-color--btn-danger__bottom: darken($s-color--btn-danger__top, 8%);