add sass to the project and start work on the design

bfrontend/package-lock.json

@@ -3487,8 +3487,7 @@
     "binary-extensions": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz",
-      "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
-      "optional": true
+      "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ=="
     },
     "bluebird": {
       "version": "3.7.2",
@@ -3884,7 +3883,6 @@
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz",
       "integrity": "sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==",
-      "optional": true,
       "requires": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
@@ -7566,7 +7564,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "optional": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -10075,6 +10072,12 @@
       "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
     },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "optional": true
+    },
     "nanoid": {
       "version": "3.1.20",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz",
@@ -10253,6 +10256,11 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.67.tgz",
       "integrity": "sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg=="
     },
+    "nord": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/nord/-/nord-0.2.1.tgz",
+      "integrity": "sha1-BE7Y4AMxyEqW3ExnDwgKclcsPPk="
+    },
     "normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -12528,7 +12536,6 @@
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
       "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
-      "optional": true,
       "requires": {
         "picomatch": "^2.2.1"
       }
@@ -13241,6 +13248,14 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-10.0.0.tgz",
       "integrity": "sha512-vTxrZz4dX5W86M6oVWVdOVe72ZiPs41Oi7Z6Km4W5Turyz28mrXSJhhEBZoRtzJWIv3833WKVwLSDWWkEfupMg=="
     },
+    "sass": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.0.tgz",
+      "integrity": "sha512-fhyqEbMIycQA4blrz/C0pYhv2o4x2y6FYYAH0CshBw3DXh5D5wyERgxw0ptdau1orc/GhNrhF7DFN2etyOCEng==",
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
     "sass-loader": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz",
@@ -15176,7 +15191,10 @@
           "version": "1.2.13",
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "optional": true
+          "optional": true,
+          "requires": {
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
@@ -15775,7 +15793,10 @@
           "version": "1.2.13",
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "optional": true
+          "optional": true,
+          "requires": {
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",

bfrontend/package.json

@@ -6,12 +6,14 @@
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.6.0",
+    "nord": "^0.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "redux": "^4.0.5",
+    "sass": "^1.32.0",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

bfrontend/src/Components/App.js

@@ -1,38 +1,57 @@
 import Login from './Auth/Login';
 import Root from './Root';
 import Authenticator from './../Authenticator';
+import Notification from './Notification';
+import './../Styles/App.scss';
 
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch, connect } from 'react-redux'
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 
 function App({ user }) {
+    const [ notificationText, setNotificationText ] = useState('');
+    const [ hasError, setHasError ] = useState(false);
+
     const dispatch = useDispatch();
 
     useEffect(() => {
         Authenticator.getLoggedInUserFromCookie()
             .then((res) => {
                 dispatch({ type: 'authenticator/updatelocaluserobject', user: res })
+            })
+            .catch(() => {
+                setNotificationText('An error has occoured.');
+                setHasError(true);
             });
     }, [dispatch]);
 
-    return (
-        <BrowserRouter>
-            <Switch>
-                <Route path="/login">
-                   <Login />
-                </Route>
-                <Route path="/">
-                    <Root user={user} />
-                </Route>
-            </Switch>
-        </BrowserRouter>
-    );
+    if (!hasError) {
+        return (
+            <div id="main-container">
+                <BrowserRouter>
+                    <Switch>
+                        <Route path="/login">
+                        <Login />
+                        </Route>
+                        <Route path="/">
+                            <Root user={user} />
+                        </Route>
+                    </Switch>
+                </BrowserRouter>
+            </div>
+        );
+    } else {
+        return (
+            <div id="main-container">
+                <Notification text={notificationText}/>
+            </div>
+        );
+    }
 }
 
 const stateToProps = (state) => {
     return {
-        user: state?.user || undefined
+        user: state?.user
     };
 };
 

bfrontend/src/Components/Root.js

@@ -5,8 +5,13 @@ export default function Root(props) {
 
     if (props.user) {
         return (
-            <div id="root-container">
-                <h1>Welcome, { props.user.username }</h1>
+            <div id="root-container" className="main-display">
+                <div className="main-card">
+                    hhhhhhhhhhhhhhhhhhhhhh
+                </div>
+                <div className="main-card main-content-card">
+                    sdfsdfsdf
+                </div>
             </div>
         );
     } else {

bfrontend/src/Styles/App.scss

@@ -0,0 +1,28 @@
+@import "../../node_modules/nord/src/sass/nord.scss";
+
+body {
+    margin: 0px;
+    padding: 0px;
+}
+
+.main-display {
+    padding: 0px;
+    margin: 0px;
+    display: flex;
+    background-color: $nord0;
+    min-height: 100vh;
+    flex-direction: row;
+}
+
+.main-card {
+    padding: 0px;
+    margin: 0px;
+    background-color: $nord1;
+    border-radius: 10px;
+    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);
+    margin: 12px;
+
+    &.main-content-card {
+        flex-grow: 1;
+    }
+}

bfrontend/src/index.js

@@ -1,5 +1,4 @@
 import store from './store';
-import './index.css';
 import App from './Components/App';
 
 import React from 'react';