set up ui

1 files changed, 33 insertions, 16 deletions

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