Add basic settings modal

src/components/App.scss

@@ -58,3 +58,7 @@ code {
   border-color: #fff;
   color: #000;
 }
+
+.modal-backdrop{
+	z-index: 9000;
+}

src/components/App.tsx

@@ -11,17 +11,23 @@ import {
 import StandardView from "./pages/StandardView";
 import { Switch, Route } from "react-router-dom";
 import SignIn from "./pages/SignIn";
+import SettingsModal from "./pages/SettingsModal";
 
 type AppState = {
   toggledLeft: boolean;
   toggledRight: boolean;
+  showSettings: boolean;
 };
 
 class App extends React.Component<{}, AppState> {
   width = window.innerWidth;
   constructor(props: {}) {
     super(props);
-    this.state = { toggledLeft: false, toggledRight: false };
+    this.state = {
+      toggledLeft: false,
+      toggledRight: false,
+      showSettings: false,
+    };
   }
 
   componentDidMount() {
@@ -85,6 +91,11 @@ class App extends React.Component<{}, AppState> {
 
     return (
       <>
+        <SettingsModal
+          show={this.state.showSettings}
+          onHide={() => this.setState({ showSettings: false })}
+        />
+
         <Switch>
           <Route path="/signin">
             <SignIn />
@@ -105,6 +116,7 @@ class App extends React.Component<{}, AppState> {
 
             <StandardView
               pages={horizontalBarPages}
+              onSettingsClick={() => this.setState({ showSettings: true })}
               toggledLeft={this.state.toggledLeft}
               toggledRight={this.state.toggledRight}
               onOverlayClick={(e) => {

src/components/organisms/RightBar/index.tsx

@@ -3,14 +3,19 @@ import styles from "./style.module.scss";
 import CalendarGroup from "components/molecules/CalendarGroup";
 import SideBarTabGroup from "components/molecules/SideBarTabGroup";
 import { faCog, faSignOutAlt } from "@fortawesome/free-solid-svg-icons";
+
 export interface RightBarState {
   date: Date;
 }
 
-class RightBar extends React.Component<{}, RightBarState> {
+export interface RightBarProps {
+  onSettingsClick: (event: React.MouseEvent) => void;
+}
+
+class RightBar extends React.Component<RightBarProps, RightBarState> {
   private timerID: number = 0;
 
-  constructor(props: {}) {
+  constructor(props: RightBarProps) {
     super(props);
     this.state = { date: new Date() };
   }
@@ -33,7 +38,8 @@ class RightBar extends React.Component<{}, RightBarState> {
     let buttons = [
       {
         title: "Settings",
-        icon: faCog,
+				icon: faCog,
+				onClick: this.props.onSettingsClick,
       },
       {
         title: "Sign Out",

src/components/pages/SettingsModal/index.tsx

+import React from "react";
+import Modal from "react-bootstrap/Modal";
+
+interface Props {
+  show: boolean;
+  onHide: any;
+}
+
+const SettingsModal: React.FC<Props> = ({ show, onHide }) => {
+  return (
+    <Modal style={{ zIndex: "10000" }} show={show} onHide={onHide}>
+      <Modal.Header closeButton>
+        <Modal.Title>Settings</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>Woohoo, you're reading this settings in a modal!</Modal.Body>
+    </Modal>
+  );
+};
+
+export default SettingsModal;

src/components/pages/StandardView/index.tsx

@@ -28,13 +28,15 @@ interface StandardViewProps {
   }[];
   toggledLeft: boolean;
   toggledRight: boolean;
-  onOverlayClick: (event: React.MouseEvent<HTMLElement>) => void;
+	onOverlayClick: (event: React.MouseEvent<HTMLElement>) => void;
+  onSettingsClick: (event: React.MouseEvent) => void;
 }
 
 const StandardView: React.FC<StandardViewProps> = ({
   toggledLeft,
   toggledRight,
-  onOverlayClick,
+	onOverlayClick,
+	onSettingsClick,
 }: StandardViewProps) => {
   const [modulesFilter, setModulesFilter] = useState("In Progress");
 
@@ -132,7 +134,7 @@ const StandardView: React.FC<StandardViewProps> = ({
           <Route path="/" render={() => <Redirect to="/dashboard" />} />
         </Switch>
       </Container>
-      <RightBar />
+      <RightBar onSettingsClick={onSettingsClick} />
     </div>
   );
 };