add messenger example

.gitignore

@@ -1,2 +1,4 @@
 node_modules
 npm-debug.log
+src/demo-white
+webpack.demo-white.config.js

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-awesome-button",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Performant, extendable, highly customisable, production ready React Component that renders an animated basic set of UI buttons",
   "main": "dist/index.js",
   "author": "Rafael Caferati",
@@ -15,6 +15,7 @@
   },
   "scripts": {
     "start": "webpack-dev-server -d --config webpack.demo.config.js",
+    "white": "webpack-dev-server -d --config webpack.demo-white.config.js",
     "build": "NODE_ENV=production webpack",
     "build:scss": "NODE_ENV=production webpack --config webpack.scss.config.js && rm ./dist/styles.js",
     "test": "BABEL_JEST_STAGE=0 jest",

src/component.js

@@ -32,7 +32,6 @@ export default class AwesomeButton extends React.Component {
     resultLabel: PropTypes.string,
     rootElement: PropTypes.string,
     moveEvents: PropTypes.bool,
-    // rounded: PropTypes.bool,
     size: PropTypes.string,
     style: PropTypes.object,
     cssModule: PropTypes.object,
@@ -52,7 +51,6 @@ export default class AwesomeButton extends React.Component {
     progress: false,
     resultLabel: 'Success!',
     rootElement: ROOTELM,
-    rounded: true,
     size: null,
     style: {},
     target: null,

src/demo/data.js

@@ -88,6 +88,15 @@ const examples = [
         >
           <i className="fa fa-whatsapp" aria-hidden />
         </AwesomeButton>
+        <AwesomeButton
+          cssModule={AwsBtnStyles}
+          type="instagram"
+          size="icon"
+          bubbles
+          moveEvents={false}
+        >
+          <i className="fa fa-instagram" aria-hidden />
+        </AwesomeButton>
       </div>
     ),
   },

src/styles/base/base.scss

@@ -178,6 +178,9 @@
         opacity: 0;
         z-index: -1;
       }
+      > span, > svg, > img {
+        vertical-align: middle;
+      }
     }
   }
   &:focus {

src/styles/default.scss

@@ -29,7 +29,8 @@ $button-colors:
   ("primary", $button-color-primary, lighten($button-color-primary, 55%)),
   ("secondary", $button-color-secondary, lighten($button-color-secondary, 55%)),
   ("disabled", $button-color-disabled, lighten($button-color-disabled, 15%)),
-  ("facebook", #3b5998, #FFFFFF),
+  ("facebook", #4868ad, #FFFFFF),
+  ("messenger", #3186f6, #FFFFFF),
   ("twitter", #00aced, #FFFFFF),
   ("linkedin", #0077b5, #FFFFFF),
   ("whatsapp", #25d366, #FFFFFF),
@@ -44,6 +45,8 @@ $button-sizes:
   ("medium", 132px, $button-default-height, $button-default-font-size, $button-default-line-height)
   ("large", 196px, $button-default-height, $button-default-font-size, $button-default-line-height);
 
-$button-colors-bg-manual: null;
+  $button-colors-bg-manual:
+    ("instagram", radial-gradient(circle at 25% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%), radial-gradient(circle at 25% 110%, #b9a800 0%, #938500 5%, #b10f00 45%,#8c0061 60%,#002ca9 90%), #FFFFFF),
+    ("youtube", #cc181e, #5d0003, #FFFFFF);
 
 @import './base/base.scss';

src/styles/themes/theme-three.scss

@@ -1,16 +1,15 @@
-$button-default-font-size: 16px;
-$button-default-border-radius: 4px;
-$button-font-weight: 800;
+@import '../default.scss';
+
 $button-horizontal-padding: 18px;
 $button-hover-pressure: 0.65;
-$button-color-primary: #cc181e;
+$button-color-primary: #009688;
 $transform-speed: 0.175s;
 
 /**
  button-color: color-name, background, color
 */
 $button-colors:
-  ("primary", $button-color-primary, lighten($button-color-primary, 55%)),
+  ("primary", $button-color-primary, lighten($button-color-primary, 65%)),
   ("secondary", $button-color-secondary, lighten($button-color-secondary, 55%)),
   ("disabled", $button-color-disabled, lighten($button-color-disabled, 15%)),
   ("facebook", #3b5998, #FFFFFF),
@@ -19,18 +18,4 @@ $button-colors:
   ("whatsapp", #25d366, #FFFFFF),
   ("github", #4e545a, #FFFFFF);
 
-
-$button-colors-bg-manual:
-  ("instagram", radial-gradient(circle at 25% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%), radial-gradient(circle at 25% 110%, #b9a800 0%, #938500 5%, #b10f00 45%,#8c0061 60%,#002ca9 90%), #FFFFFF),
-  ("youtube", #cc181e, #5d0003, #FFFFFF);
-
-/**
- button-size: size-name, width, height, font-size, line-height
-*/
-$button-sizes:
-  ("icon", 44px, $button-default-height, $button-default-font-size, $button-default-line-height)
-  ("small", 88px, $button-default-height, $button-default-font-size, $button-default-line-height)
-  ("medium", 132px, $button-default-height, $button-default-font-size, $button-default-line-height)
-  ("large", 196px, $button-default-height, $button-default-font-size, $button-default-line-height);
-
 @import '../base/base.scss';