info area in progress

wax-prosemirror-components/index.js

 export { default as MainMenuBar } from "./src/mainMenuBar/MainMenuBar";
 export { default as SideMenuBar } from "./src/sideMenuBar/SideMenuBar";
+export { default as InfoArea } from "./src/components/infoArea/InfoArea";

wax-prosemirror-components/src/components/infoArea/InfoArea.js

+import React from "react";
+import styled from "styled-components";
+
+const InfoAreaContainer = styled.div`
+  height: ${props => (props.height ? props.height : "30px")};
+  position: fixed;
+  bottom: 0;
+  z-index: 9999;
+  background: #efefef;
+  width: 100%;
+`;
+
+const InfoArea = () => <InfoAreaContainer />;
+
+export default InfoArea;

wax-prosemirror-layouts/src/layouts/EditoriaLayout.js

 import styled, { ThemeProvider } from "styled-components";
 import React, { Fragment } from "react";
-import { MainMenuBar, SideMenuBar } from "wax-prosemirror-components";
+import { MainMenuBar, SideMenuBar, InfoArea } from "wax-prosemirror-components";
 import EditorElements from "./EditorElements";
 import { cokoTheme } from "wax-prosemirror-themes";
 
@@ -35,7 +35,6 @@ const WaxSurfaceScroll = styled.div`
 
 const CommentsContainer = styled.div``;
 const NotesContainer = styled.div``;
-const InfoAreaContainer = styled.div``;
 
 const EditoriaLayout = ({ editor, view, ...props }) => (
   <ThemeProvider theme={cokoTheme}>
@@ -47,6 +46,7 @@ const EditoriaLayout = ({ editor, view, ...props }) => (
           {editor}
         </WaxSurfaceScroll>
       </WaxSurfaceContainer>
+      <InfoArea />
     </LayoutWrapper>
   </ThemeProvider>
 );

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

@@ -2,7 +2,7 @@
 import "typeface-fira-sans-condensed";
 import "typeface-vollkorn";
 
-import { ButtonStyled } from "./elements";
+import { ButtonStyles } from "./elements";
 
 const cokoTheme = {
   /* Colors */
@@ -69,7 +69,7 @@ const cokoTheme = {
 
   cssOverrides: {
     ui: {
-      ButtonStyled
+      ButtonStyles
     }
   }
 };