Added fontawesome icons

2 files changed, 42 insertions, 5 deletions

diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 66b5000d7..e8b522cbb 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -78,6 +78,10 @@ button:hover {
     margin-right: 0.4em;
 }
 
+.add-button:hover {
+    transform: scale(1.15);
+}
+
 .main-undoButtons {
     position: absolute;
     width: 150px;
@@ -150,6 +154,7 @@ div .lm_header {
     min-height: 1.4em;
     padding-bottom: 0px;
     border-radius: 5px;
+    font-family: 'Work Sans', sans-serif !important;
 }
 
 .lm_header .lm_controls {
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 835ba68b5..071694de9 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -18,6 +18,14 @@ import { DocumentDecorations } from './DocumentDecorations';
 import { DocumentView } from './nodes/DocumentView';
 import "./Main.scss";
 import { InkingControl } from './InkingControl';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFont } from '@fortawesome/free-solid-svg-icons';
+import { faImage } from '@fortawesome/free-solid-svg-icons';
+import { faFilePdf } from '@fortawesome/free-solid-svg-icons';
+import { faObjectGroup } from '@fortawesome/free-solid-svg-icons';
+import { faTable } from '@fortawesome/free-solid-svg-icons';
+import { faGlobeAsia } from '@fortawesome/free-solid-svg-icons';
 
 
 configure({ enforceActions: "observed" });  // causes errors to be generated when modifying an observable outside of an action
@@ -29,11 +37,17 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
     }
 }), true)
 
-
 const mainDocId = "mainDoc";
 let mainContainer: Document;
 let mainfreeform: Document;
 
+library.add(faFont);
+library.add(faImage);
+library.add(faFilePdf);
+library.add(faObjectGroup);
+library.add(faTable);
+library.add(faGlobeAsia);
+
 Documents.initProtos(mainDocId, (res?: Document) => {
     if (res instanceof Document) {
         mainContainer = res;
@@ -75,6 +89,9 @@ Documents.initProtos(mainDocId, (res?: Document) => {
     let schemaRef = React.createRef<HTMLDivElement>();
     let colRef = React.createRef<HTMLDivElement>();
 
+    // fontawesome stuff
+    library.add()
+
     ReactDOM.render((
         <div style={{ position: "absolute", width: "100%", height: "100%" }}>
             <DocumentView Document={mainContainer}
@@ -97,9 +114,24 @@ Documents.initProtos(mainDocId, (res?: Document) => {
 
                 <div id="add-options-content">
                     <ul id="add-options-list">
-                        <li><button className="add-button" onClick={() => console.log("yes")}>T</button></li>
-                        <li><button className="add-button">I</button></li>
-                        <li><button className="add-button">P</button></li>
+                        <li><button className="add-button" onClick={() => console.log("yes")}>
+                            <FontAwesomeIcon icon="font" size="sm" />
+                        </button></li>
+                        <li><button className="add-button">
+                            <FontAwesomeIcon icon="image" size="sm" />
+                        </button></li>
+                        <li><button className="add-button">
+                            <FontAwesomeIcon icon="file-pdf" size="sm" />
+                        </button></li>
+                        <li><button className="add-button">
+                            <FontAwesomeIcon icon="globe-asia" size="sm" />
+                        </button></li>
+                        <li><button className="add-button">
+                            <FontAwesomeIcon icon="object-group" size="sm" />
+                        </button></li>
+                        <li><button className="add-button">
+                            <FontAwesomeIcon icon="table" size="sm" />
+                        </button></li>
                     </ul>
                 </div>
 
@@ -109,6 +141,6 @@ Documents.initProtos(mainDocId, (res?: Document) => {
             <button className="main-undoButtons" style={{ bottom: '0px' }} onClick={() => UndoManager.Redo()}>Redo</button>
 
             <InkingControl />
-        </div>),
+        </div >),
         document.getElementById('root'));
 })