add sass to the project and start work on the design

This commit is contained in:
hippoz 2021-01-03 16:36:28 +02:00
parent fa97a8f126
commit 187ae9cfbb
Signed by: hippoz
GPG key ID: 7C52899193467641
7 changed files with 98 additions and 24 deletions

View file

@ -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",

View file

@ -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": {

View file

@ -1,22 +1,33 @@
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]);
if (!hasError) {
return (
<div id="main-container">
<BrowserRouter>
<Switch>
<Route path="/login">
@ -27,12 +38,20 @@ function App({ 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
};
};

View file

@ -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 {

View file

@ -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;
}
}

View file

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