replace fontAwsome library plus some styles

wax-prosemirror-components/package.json

@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome": "^1.1.2",
-    "@fortawesome/fontawesome-free-solid": "^5.0.4",
     "@fortawesome/react-fontawesome": "^0.0.17",
+    "@fortawesome/free-solid-svg-icons": "^5.12.0",
     "lodash": "^4.17.4",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

wax-prosemirror-components/src/components/ImageUpload.js

@@ -4,6 +4,7 @@ import styled from "styled-components";
 const UploadImage = styled.div`
   color: #777;
   display: inline-flex;
+  padding: 0px 10px;
   .custom-file-upload {
     cursor: pointer;
   }

wax-prosemirror-components/src/components/TableDropDown.js

@@ -18,6 +18,12 @@ const DropdownStyled = styled(Dropdown)`
   }
   .Dropdown-menu {
     width: 120%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    .Dropdown-option {
+      width: 100%;
+    }
   }
 `;
 

wax-prosemirror-components/src/components/ToolGroupComponent.js

 import React, { useState } from "react";
 import { isFunction } from "lodash";
 import styled from "styled-components";
+import icons from "../icons/icons";
+
+const ToolGroupStyled = styled.div`
+  border-right: 1px solid #ecedf1;
+  &:last-child {
+    border-right: none;
+  }
+`;
+
+const MoreButton = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+`;
 
 const InnerStyled = styled.div`
   display: flex;
@@ -23,19 +37,23 @@ const ToolGroupComponent = ({ view, tools, name, title }) => {
   });
 
   return (
-    <div>
+    <ToolGroupStyled data-name={name}>
       <DisplayTitle />
       {toolsShown}
       {rest.length && !more ? (
-        <button onClick={() => showHide(!more)}>...</button>
+        <MoreButton title="show more tools" onClick={() => showHide(!more)}>
+          {icons.ellipses}
+        </MoreButton>
       ) : null}
       {more && (
         <div>
-          <button onClick={() => showHide(!more)}>...</button>
+          <MoreButton title="hide" onClick={() => showHide(!more)}>
+            {icons.ellipses}
+          </MoreButton>
           <InnerStyled>{rest}</InnerStyled>
         </div>
       )}
-    </div>
+    </ToolGroupStyled>
   );
 };
 

wax-prosemirror-components/src/icons/icons.js

@@ -20,10 +20,11 @@ import {
   faRedo,
   faOutdent,
   faAngleUp,
-  faAsterisk,
+  faStickyNote,
   faVial,
-  faWheelchair
-} from "@fortawesome/fontawesome-free-solid";
+  faWheelchair,
+  faEllipsisH
+} from "@fortawesome/free-solid-svg-icons";
 
 export default {
   em: <FontAwesomeIcon icon={faItalic} />,
@@ -44,12 +45,13 @@ export default {
   bullet_list: <FontAwesomeIcon icon={faListUl} />,
   image: <FontAwesomeIcon icon={faImage} />,
   table: <FontAwesomeIcon icon={faTable} />,
-  footnote: <FontAwesomeIcon icon={faAsterisk} />,
+  footnote: <FontAwesomeIcon icon={faStickyNote} />,
   undo: <FontAwesomeIcon icon={faUndo} />,
   redo: <FontAwesomeIcon icon={faRedo} />,
   lift: <FontAwesomeIcon icon={faOutdent} />,
   join_up: <FontAwesomeIcon icon={faAngleUp} />,
   source: <FontAwesomeIcon icon={faVial} />,
+  ellipses: <FontAwesomeIcon icon={faEllipsisH} />,
   small_caps: (
     <span className="small-caps">
       <svg

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

@@ -16,43 +16,10 @@ export default css`
     counter-increment: footnote;
   }
 
-  .ProseMirror-hideselection .footnote-tooltip *::selection {
-    background-color: transparent;
-  }
-
-  .ProseMirror-hideselection .footnote-tooltip *::-moz-selection {
-    background-color: transparent;
-  }
-
-  .ProseMirror .footnote-tooltip {
-    cursor: auto;
-    position: absolute;
-    left: -30px;
-    top: calc(100% + 10px);
-    background: silver;
-    padding: 3px;
-    border-radius: 2px;
-    width: 500px;
-  }
-
-  .ProseMirror .footnote-tooltip::before {
-    border: 5px solid silver;
-    border-top-width: 0;
-    border-left-color: transparent;
-    border-right-color: transparent;
-    position: absolute;
-    top: -5px;
-    left: 27px;
-    content: " ";
-    height: 0;
-    width: 0;
-  }
-
   .ProseMirror {
-    -moz-box-shadow: 0 0 3px #ccc;
+    ${"" /* -moz-box-shadow: 0 0 3px #ccc;
     -webkit-box-shadow: 0 0 3px #ccc;
-    box-shadow: 0 0 3px #ccc;
-    width: 65%;
+    box-shadow: 0 0 3px #ccc;*/} width: 65%;
     min-height: 90%;
     padding: 40px;
     font-family: ${props => props.theme.fontReading};

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

@@ -40,6 +40,7 @@ const MainMenuContainer = styled.div`
   line-height: 32px;
   position: relative;
   user-select: none;
+  border-bottom: 2px solid #ecedf1;
 `;
 const MainMenuInner = styled.div`
   display: flex;
@@ -63,6 +64,7 @@ const SideMenuContainer = styled.div`
   display: flex;
   width: 14%;
   height: 98%;
+  border-right: 2px solid #ecedf1;
 `;
 
 const SideMenuInner = styled.div`
@@ -81,6 +83,9 @@ const SideMenuInner = styled.div`
       margin-left: 5%;
       width: 90%;
     }
+    [data-name="Display"] {
+      border-right: none;
+    }
   }
 `;
 

wax-prosemirror-services/src/WaxToolGroups/AnnotationToolGroupService/Annotations.js

@@ -8,17 +8,17 @@ class Annotations extends ToolGroup {
     @inject("Code") code,
     @inject("Emphasis") emphasis,
     @inject("Link") link,
-    @inject("SmallCaps") smallcaps,
     @inject("StrikeThrough") strikethrough,
     @inject("Strong") strong,
     @inject("Subscript") subscript,
     @inject("Superscript") superscript,
-    @inject("Underline") underline
+    @inject("Underline") underline,
+    @inject("SmallCaps") smallcaps
   ) {
     super();
-    smallcaps.hideOnToolbar = true;
     subscript.hideOnToolbar = true;
     superscript.hideOnToolbar = true;
+    smallcaps.hideOnToolbar = true;
     this.tools = [
       strong,
       emphasis,
@@ -26,9 +26,9 @@ class Annotations extends ToolGroup {
       link,
       strikethrough,
       underline,
-      smallcaps,
       subscript,
-      superscript
+      superscript,
+      smallcaps
     ];
   }
 }