added tooltips to menu and fixed spacing

2 files changed, 29 insertions, 26 deletions

diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 9bc5c551f..89a9e1bd1 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -71,10 +71,10 @@ button:hover {
 }
 
 .round-button {
-  width: 2em;
-  height: 2em;
-  border-radius: 1em;
-  font-size: 24px;
+  width: 36px;
+  height: 36px;
+  border-radius: 18px;
+  font-size: 15px;
 }
 
 .round-button:hover {
@@ -83,7 +83,7 @@ button:hover {
 
 .add-button {
   position: relative;
-  margin-right: 0.4em;
+  margin-right: 10px;
 }
 
 .main-undoButtons {
@@ -95,33 +95,36 @@ button:hover {
 //toolbar stuff
 #toolbar {
   position: absolute;
-  bottom: 3.95em;
-  left: 1em;
+  bottom: 62px;
+  left: 24px;
 
   .toolbar-button {
     display: block;
-    margin-bottom: 0.4em;
+    margin-bottom: 10px;
   }
 }
 
 // add nodes menu. Note that the + button is actually an input label, not an actual button.
 #add-nodes-menu {
   position: absolute;
-  bottom: 1em;
-  left: 1em;
+  bottom: 24px;
+  left: 24px;
   label {
     background: $dark-color;
     color: $light-color;
-    padding: 10px;
     display: inline-block;
-    border-radius: 1em;
-    font-size: 24px;
-    width: 1.09em;
-    margin-right: 0.4em;
-    text-align: center;
+    border-radius: 18px;
+    font-size: 25px;
+    width: 36px;
+    height: 36px;
+    margin-right: 10px;
     cursor: pointer;
     transition: transform 0.5s;
   }
+  label p {
+    padding-left: 10.5px;
+    padding-top: 3px;
+  }
   label:hover {
     background: $main-accent;
   }
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index f9a54678a..38a3d4b69 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -115,35 +115,35 @@ Documents.initProtos(mainDocId, (res?: Document) => {
 
             {/* @TODO this should really be moved into a moveable toolbar component, but for now let's put it here to meet the deadline */}
             <div id="toolbar">
-                <button className="toolbar-button round-button" onClick={() => UndoManager.Undo()}><FontAwesomeIcon icon="undo-alt" size="sm" /></button>
-                <button className="toolbar-button round-button" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button>
+                <button className="toolbar-button round-button" title="Undo" onClick={() => UndoManager.Undo()}><FontAwesomeIcon icon="undo-alt" size="sm" /></button>
+                <button className="toolbar-button round-button" title="Redo" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button>
                 {/* @TODO do the ink thing */}
-                <button className="toolbar-button round-button"><FontAwesomeIcon icon="pen-nib" size="sm" /></button>
+                <button className="toolbar-button round-button" title="Ink"><FontAwesomeIcon icon="pen-nib" size="sm" /></button>
             </div>
 
             {/* for the expandable add nodes menu. Not included with the above because once it expands it expands the whole div with it, making canvas interactions limited. */}
             <div id="add-nodes-menu">
                 <input type="checkbox" id="add-menu-toggle" />
-                <label htmlFor="add-menu-toggle">+</label>
+                <label htmlFor="add-menu-toggle" title="Add Node"><p>+</p></label>
 
                 <div id="add-options-content">
                     <ul id="add-options-list">
-                        <li><div ref={textRef}><button className="round-button add-button" onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}>
+                        <li><div ref={textRef}><button className="round-button add-button" title="Add Textbox" onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}>
                             <FontAwesomeIcon icon="font" size="sm" />
                         </button></div></li>
-                        <li><div ref={imgRef}><button className="round-button add-button" onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>
+                        <li><div ref={imgRef}><button className="round-button add-button" title="Add Image" onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>
                             <FontAwesomeIcon icon="image" size="sm" />
                         </button></div></li>
-                        <li><div ref={pdfRef}><button className="round-button add-button" onPointerDown={setupDrag(pdfRef, addPDFNode)} onClick={addClick(addPDFNode)}>
+                        <li><div ref={pdfRef}><button className="round-button add-button" title="Add PDF" onPointerDown={setupDrag(pdfRef, addPDFNode)} onClick={addClick(addPDFNode)}>
                             <FontAwesomeIcon icon="file-pdf" size="sm" />
                         </button></div></li>
-                        <li><div ref={webRef}><button className="round-button add-button" onPointerDown={setupDrag(webRef, addWebNode)} onClick={addClick(addWebNode)}>
+                        <li><div ref={webRef}><button className="round-button add-button" title="Add Web Clipping" onPointerDown={setupDrag(webRef, addWebNode)} onClick={addClick(addWebNode)}>
                             <FontAwesomeIcon icon="globe-asia" size="sm" />
                         </button></div></li>
-                        <li><div ref={colRef}><button className="round-button add-button" onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}>
+                        <li><div ref={colRef}><button className="round-button add-button" title="Add Collection" onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}>
                             <FontAwesomeIcon icon="object-group" size="sm" />
                         </button></div></li>
-                        <li><div ref={schemaRef}><button className="round-button add-button" onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}>
+                        <li><div ref={schemaRef}><button className="round-button add-button" title="Add Schema" onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}>
                             <FontAwesomeIcon icon="table" size="sm" />
                         </button></div></li>
                     </ul>