notes divider styling

editors/editoria/src/Editoria.js

@@ -51,7 +51,6 @@ const Editoria = () => (
       layout={EditoriaLayout}
       user={user}
     />
-    <div id="editors" />
   </Fragment>
 );
 

editors/editoria/src/config/config.js

@@ -33,14 +33,7 @@ export default {
   MenuService: [
     {
       templateArea: "topBar",
-      toolGroups: [
-        "Base",
-        { name: "Annotations", exclude: ["Strong"] },
-        "Notes",
-        "Lists",
-        "Images",
-        "Tables"
-      ]
+      toolGroups: ["Base", "Annotations", "Notes", "Lists", "Images", "Tables"]
     },
     {
       templateArea: "leftSideBar",

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

@@ -21,7 +21,48 @@ const LeftMenuSurfaceContainer = styled.div`
   height: 100%;
   width: 100%;
   .divider {
-    border-top: 1px dotted black;
+    &:before {
+      content: "Notes";
+      position: relative;
+      bottom: 14px;
+      background: white;
+      color: #a3a3a3;
+      font-weight: 600;
+      letter-spacing: 0.15em;
+    }
+    &:after {
+      color: #a3a3a3;
+      content: ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . "
+        ". . . . . . . . . . . . . . . . . . . . ";
+      float: left;
+      font-weight: 400;
+      white-space: nowrap;
+      width: 0;
+      position: relative;
+      bottom: 14px;
+    }
   }
 `;