From 187ae9cfbb20375a38336016e05faaacae1d946a Mon Sep 17 00:00:00 2001 From: hippoz Date: Sun, 3 Jan 2021 16:36:28 +0200 Subject: [PATCH] add sass to the project and start work on the design --- bfrontend/package-lock.json | 35 +++++++++++++++++++----- bfrontend/package.json | 2 ++ bfrontend/src/Components/App.js | 47 ++++++++++++++++++++++---------- bfrontend/src/Components/Root.js | 9 ++++-- bfrontend/src/Styles/App.scss | 28 +++++++++++++++++++ bfrontend/src/index.css | 0 bfrontend/src/index.js | 1 - 7 files changed, 98 insertions(+), 24 deletions(-) create mode 100644 bfrontend/src/Styles/App.scss delete mode 100644 bfrontend/src/index.css diff --git a/bfrontend/package-lock.json b/bfrontend/package-lock.json index d75fd2d..d9edd22 100644 --- a/bfrontend/package-lock.json +++ b/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", diff --git a/bfrontend/package.json b/bfrontend/package.json index 8bb80ce..469e59d 100644 --- a/bfrontend/package.json +++ b/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": { diff --git a/bfrontend/src/Components/App.js b/bfrontend/src/Components/App.js index 586a2f8..c9fd0db 100644 --- a/bfrontend/src/Components/App.js +++ b/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 ( - - - - - - - - - - - ); + if (!hasError) { + return ( +
+ + + + + + + + + + +
+ ); + } else { + return ( +
+ +
+ ); + } } const stateToProps = (state) => { return { - user: state?.user || undefined + user: state?.user }; }; diff --git a/bfrontend/src/Components/Root.js b/bfrontend/src/Components/Root.js index dd1f267..4de4e52 100644 --- a/bfrontend/src/Components/Root.js +++ b/bfrontend/src/Components/Root.js @@ -5,8 +5,13 @@ export default function Root(props) { if (props.user) { return ( -
-

Welcome, { props.user.username }

+
+
+ hhhhhhhhhhhhhhhhhhhhhh +
+
+ sdfsdfsdf +
); } else { diff --git a/bfrontend/src/Styles/App.scss b/bfrontend/src/Styles/App.scss new file mode 100644 index 0000000..ffdd468 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/bfrontend/src/index.css b/bfrontend/src/index.css deleted file mode 100644 index e69de29..0000000 diff --git a/bfrontend/src/index.js b/bfrontend/src/index.js index 5711482..1cdcfcc 100644 --- a/bfrontend/src/index.js +++ b/bfrontend/src/index.js @@ -1,5 +1,4 @@ import store from './store'; -import './index.css'; import App from './Components/App'; import React from 'react';