move funcionality to styled components

editors/editoria/src/Editoria.js

@@ -55,21 +55,21 @@ const text = `<ul><li><p class="paragraph">this is the li content</p></li><li><p
 class Editoria extends Component {
   render() {
     return (
-      <ThemeProvider theme={cokoTheme}>
-        <React.Fragment>
-          <GlobalStyle />
-          <StyledWax
-            options={options}
-            autoFocus
-            placeholder="Type Something..."
-            theme="editoria"
-            layout="editoria"
-            fileUpload={file => renderImage(file)}
-            debug
-            value=""
-            user={user}
-          >
-            {({ editor, view, ...props }) => (
+      <React.Fragment>
+        <GlobalStyle />
+        <StyledWax
+          options={options}
+          autoFocus
+          placeholder="Type Something..."
+          theme="editoria"
+          layout="editoria"
+          fileUpload={file => renderImage(file)}
+          debug
+          value=""
+          user={user}
+        >
+          {({ editor, view, ...props }) => (
+            <ThemeProvider theme={cokoTheme}>
               <React.Fragment>
                 <MainMenuBar view={view} {...props} />
                 <div className="wax-surface-container">
@@ -77,10 +77,10 @@ class Editoria extends Component {
                   {editor}
                 </div>
               </React.Fragment>
-            )}
-          </StyledWax>
-        </React.Fragment>
-      </ThemeProvider>
+            </ThemeProvider>
+          )}
+        </StyledWax>
+      </React.Fragment>
     );
   }
 }

wax-prosemirror-components/src/components/button/Button.js

 import React from "react";
 import styled from "styled-components";
-import classnames from "classnames";
-import classes from "./Button.module.css";
 
 const ButtonStyled = styled.button`
   opacity: ${props => (props.select ? 1 : 0.4)};
   pointer-events: ${props => (props.select ? "default" : "none")};
+  background: #fff;
+  border: none;
+  font-size: inherit;
+  cursor: pointer;
+  color: ${props =>
+    props.isActive ? props.theme.colorPrimary : props.theme.colorButton};
+  border-radius: 0;
+  padding: 5px 10px;
+  &:disabled {
+    color: #ccc;
+    pointer-events: none;
+  }
+  &:hover {
+    color: #000;
+    background: #f6f6f6;
+  }
 `;
 
 const Button = ({ view = {}, item }) => (
   <ButtonStyled
     type="button"
-    className={classnames({
-      [classes.button]: true,
-      [classes.active]: item.active && item.active(view.state)
-    })}
+    isActive={item.active && item.active(view.state)}
     title={item.title}
     disabled={item.enable && !item.enable(view.state)}
     onMouseDown={e => {

wax-prosemirror-components/src/components/button/Button.module.css

-.button {
-  background: #fff;
-  border: none;
-  font-size: inherit;
-  cursor: pointer;
-  color: #777;
-  border-radius: 0;
-  padding: 5px 10px;
-}
-
-.button:hover {
-  color: #000;
-  background: #f6f6f6;
-}
-
-.button.active {
-  color: #4990e2;
-}
-
-.button:disabled {
-  color: #ccc;
-  pointer-events: none;
-}

wax-prosemirror-components/src/mainMenuBar/MainMenuBar.js

 import React from "react";
 import { forEach, map } from "lodash";
-import classes from "./MenuBar.css";
 import MainMenuBarItems from "./MainMenuBarItems";
 
 const filtered = (menu, menuItems) =>
@@ -32,7 +31,7 @@ const MainMenuBar = ({
     <div className="main-menu-inner">
       <div className="main-menu">
         {
-          <span className={classes.group}>
+          <span>
             {map(setMenuItems(MainMenuBarItems, menuItems), item =>
               item.menu({ view, item, fileUpload })
             )}

wax-prosemirror-themes/src/coko-theme/index.js

@@ -17,6 +17,8 @@ const cokoTheme = {
   colorTextPlaceholder: "#595959",
   colorWarning: "#ffc107",
 
+  /*Buttons*/
+  colorButton: "#777",
   /* Text variables */
 
   // fonts