set up ui

4 files changed, 75 insertions, 38 deletions

diff --git a/src/client/util/GroupManager.scss b/src/client/util/GroupManager.scss
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/client/util/GroupManager.scss
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index d9a20e1a7..65ea97e6c 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -1,43 +1,60 @@
-import React from "react";
+import * as React from "react";
 import { observable, action } from "mobx";
 import { SelectionManager } from "./SelectionManager";
 import MainViewModal from "../views/MainViewModal";
+import { observer } from "mobx-react";
 
-
-export default class GroupManager extends React.Component<{}>{
+@observer
+export default class GroupManager extends React.Component<{}> {
 
     static Instance: GroupManager;
     @observable private isOpen: boolean = false; // whether the menu is open or not
-    @observable private dialogueBoxOpacity = 1;
-    @observable private overlayOpacity = 0.4;
+    @observable private dialogueBoxOpacity: number = 1;
+    @observable private overlayOpacity: number = 0.4;
 
     constructor(props: Readonly<{}>) {
         super(props);
         GroupManager.Instance = this;
     }
 
-
-    open = action(() => {
+    public open = action(() => {
         SelectionManager.DeselectAll();
         this.isOpen = true;
     });
 
-    close = action(() => {
+    public close = action(() => {
         this.isOpen = false;
     });
 
     private get groupInterface() {
-        return <div>TESTING</div>;
+        return (
+            <div className="settings-interface">
+                <div className="settings-heading">
+                    <h1>settings</h1>
+                    <div className={"close-button"} onClick={this.close}>
+                        OI
+                    </div>
+                </div>
+                <div className="settings-body">
+                    <div className="settings-type">
+                        <button value="password">reset password</button>
+                        <button value="data">{`toggle novice mode`}</button>
+                    </div>
+                </div>
+            </div>
+        );
     }
 
     render() {
-        return <MainViewModal
-            contents={this.groupInterface}
-            isDisplayed={this.isOpen}
-            interactive={true}
-            dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
-            overlayDisplayedOpacity={this.overlayOpacity}
-        />;
+        return (
+            <MainViewModal
+                contents={this.groupInterface}
+                isDisplayed={this.isOpen}
+                interactive={true}
+                dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
+                overlayDisplayedOpacity={this.overlayOpacity}
+            />
+        );
     }
 
 }
\ No newline at end of file
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index e84969565..5b142ffda 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -28,10 +28,11 @@
     left: 0;
     width: 100%;
     height: 100%;
-    pointer-events:none;
+    pointer-events: none;
 }
 
-.mainView-container, .mainView-container-dark {
+.mainView-container,
+.mainView-container-dark {
     width: 100%;
     height: 100%;
     position: absolute;
@@ -40,40 +41,50 @@
     left: 0;
     z-index: 1;
     touch-action: none;
+
     .searchBox-container {
         background: lightgray;
     }
 }
 
 .mainView-container {
-    color:dimgray;
+    color: dimgray;
+
     .lm_title {
         background: #cacaca;
-        color:black;
+        color: black;
     }
 }
 
 .mainView-container-dark {
     color: lightgray;
+
     .lm_goldenlayout {
         background: dimgray;
     }
+
     .lm_title {
         background: black;
-        color:unset;
+        color: unset;
     }
+
     .marquee {
         border-color: white;
     }
+
     #search-input {
         background: lightgray;
     }
-    .searchBox-container  {
-        background: rgb(45,45,45);
+
+    .searchBox-container {
+        background: rgb(45, 45, 45);
     }
-    .contextMenu-cont, .contextMenu-item {
+
+    .contextMenu-cont,
+    .contextMenu-item {
         background: dimGray;
     }
+
     .contextMenu-item:hover {
         background: gray;
     }
@@ -108,20 +119,27 @@
     overflow: hidden;
 }
 
+.buttonContainer {
 
-.mainView-settings {
     position: absolute;
-    left: 0;
     bottom: 0;
-    border-radius: 25%;
-    margin-left: -5px;
-    background: darkblue;
-}
 
-.mainView-settings:hover {
-    transform: none !important;
+    .mainView-settings {
+        // position: absolute;
+        // left: 0;
+        // bottom: 0;
+        border-radius: 25%;
+        margin-left: -5px;
+        background: darkblue;
+    }
+
+    .mainView-settings:hover {
+        transform: none !important;
+    }
 }
 
+
+
 .mainView-logout {
     position: absolute;
     right: 0;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 830d5cf51..76c2cccae 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -444,12 +444,14 @@ export class MainView extends React.Component {
                     docFilters={returnEmptyFilter}
                     ContainingCollectionView={undefined}
                     ContainingCollectionDoc={undefined} />
-                <button className="mainView-settings" key="settings" onClick={() => SettingsManager.Instance.open()}>
-                    <FontAwesomeIcon icon="cog" size="lg" />
-                </button>
-                {/* <button className="mainView-settings" key="groups" onClick={() => GroupManager.Instance.open()}>
-                    <FontAwesomeIcon icon="columns" size="lg" />
-                </button> */}
+                <div className="buttonContainer" >
+                    <button className="mainView-settings" key="settings" onClick={() => SettingsManager.Instance.open()}>
+                        <FontAwesomeIcon icon="cog" size="lg" />
+                    </button>
+                    <button className="mainView-settings" key="groups" onClick={() => GroupManager.Instance.open()}>
+                        <FontAwesomeIcon icon="columns" size="lg" />
+                    </button>
+                </div>
             </div>
             {this.docButtons}
         </div>;