Added FabButton to CoralUI

client/coral-admin/src/components/Comment.js

@@ -1,11 +1,11 @@
 
 import React from 'react';
-import {FABButton, Icon} from 'react-mdl';
 import timeago from 'timeago.js';
 import styles from './CommentList.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations.json';
 import Linkify from 'react-linkify';
+import {FabButton} from 'coral-ui';
 
 const linkify = new Linkify();
 
@@ -27,12 +27,11 @@ export default props => {
           <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
           <div className={styles.actions}>
             {props.actions.map((action, i) => canShowAction(action, props.comment) ? (
-              <FABButton className={styles.actionButton}
+              <FabButton icon={props.actionsMap[action].icon} className={styles.actionButton}
+                cStyle={action}
                 key={i}
                 onClick={() => props.onClickAction(props.actionsMap[action].status, props.comment.get('id'))}
-                colored ripple>
-                <Icon name={props.actionsMap[action].icon} />
-              </FABButton>
+              />
             ) : null)}
           </div>
         </div>

client/coral-ui/components/FabButton.css

@@ -0,0 +1,9 @@
+.type--approve {
+    background: #00796b;
+    color: rgba(255, 255, 255, 0.901961);
+}
+
+.type--reject {
+    background: #d32f2f ;
+    color: rgba(255, 255, 255, 0.901961);
+}

client/coral-ui/components/FabButton.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import styles from './FabButton.css';
+import {FABButton, Icon} from 'react-mdl';
+
+const FabButton = ({cStyle = 'local', icon, className, ...props}) => (
+  <FABButton className={`${styles[`type--${cStyle}`]} ${className ? className : ''}`}  {...props}>
+    <Icon name={icon} />
+  </FABButton>
+);
+
+export default FabButton;

client/coral-ui/index.js

@@ -1,2 +1,3 @@
 export {default as Dialog} from './components/Dialog';
 export {default as CoralLogo} from './components/CoralLogo';
+export {default as FabButton} from './components/FabButton';