3 files changed, 86 insertions, 14 deletions

diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
new file mode 100644
index 000000000..2b3e455e0
--- /dev/null
+++ b/src/client/util/SettingsManager.scss
@@ -0,0 +1,55 @@
+.settings-interface {
+    display: flex;
+    flex-direction: column;
+
+    .focus-span {
+        text-decoration: underline;
+    }
+
+    p {
+        font-size: 20px;
+        text-align: left;
+        font-style: italic;
+        padding: 0;
+        margin: 0 0 20px 0;
+    }
+
+    .container {
+        display: block;
+        position: relative;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        font-size: 22px;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        width: 700px;
+        min-width: 700px;
+        max-width: 700px;
+        text-align: left;
+        font-style: normal;
+        font-size: 15;
+        font-weight: normal;
+        padding: 0;
+
+        .padding {
+            padding: 0 0 0 20px;
+            color: black;
+        }
+
+        .close-button {
+            border-radius: 5px;
+            margin-top: 20px;
+            padding: 10px 0;
+            background: aliceblue;
+            transition: 0.5s ease all;
+            border: 1px solid;
+            border-color: aliceblue;
+        }
+
+        .close-button:hover {
+            border-color: black;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 5bcfd2449..4701c5f88 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -4,8 +4,8 @@ import MainViewModal from "../views/MainViewModal";
 import { observer } from "mobx-react";
 import { library } from '@fortawesome/fontawesome-svg-core';
 import * as fa from '@fortawesome/free-solid-svg-icons';
-import { DocumentView } from "../views/nodes/DocumentView";
 import { SelectionManager } from "./SelectionManager";
+import "./SettingsManager.scss";
 
 library.add(fa.faCopy);
 
@@ -19,13 +19,8 @@ export default class SettingsManager extends React.Component<{}> {
     public open = action(() => {
         SelectionManager.DeselectAll();
         this.isOpen = true;
-        console.log('oppin');
     });
 
-    // public open = (target: DocumentView) => {
-    //     SelectionManager.DeselectAll();
-    // }
-
     public close = action(() => {
         this.isOpen = false;
     });
@@ -39,6 +34,7 @@ export default class SettingsManager extends React.Component<{}> {
         return (
             <div className={"settings-interface"}>
                 <p>sdfsldkfhlksdjf</p>
+                <div className={"close-button"} onClick={this.close}>Done</div>
             </div>
         );
     }
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index a858a73c7..a940e6889 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -4,8 +4,9 @@
 
 .mainView-tabButtons {
     position: relative;
-    width:100%;
+    width: 100%;
 }
+
 // add nodes menu. Note that the + button is actually an input label, not an actual button.
 .mainView-docButtons {
     position: absolute;
@@ -22,21 +23,25 @@
     overflow: auto;
     z-index: 1;
 }
+
 .mainView-mainContent {
-    width:100%;
-    height:100%;
-    position:absolute;
+    width: 100%;
+    height: 100%;
+    position: absolute;
 }
-.mainView-flyoutContainer{
-    display:flex;
+
+.mainView-flyoutContainer {
+    display: flex;
     flex-direction: column;
     position: absolute;
-    width:100%;
-    height:100%;
+    width: 100%;
+    height: 100%;
+
     .documentView-node-topmost {
         background: lightgrey;
     }
 }
+
 .mainView-mainDiv {
     width: 100%;
     height: 100%;
@@ -46,6 +51,18 @@
     overflow: hidden;
 }
 
+
+.mainView-settings {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    font-size: 8px;
+}
+
+.mainView-settings:hover {
+    transform: none !important;
+}
+
 .mainView-logout {
     position: absolute;
     right: 0;
@@ -53,6 +70,10 @@
     font-size: 8px;
 }
 
+.mainView-logout:hover {
+    transform: none !important;
+}
+
 .mainView-libraryFlyout {
     height: 100%;
     position: absolute;