WIP: Redesign

app/.stylelintrc

@@ -1,5 +1,5 @@
 {
-  "extends": "stylelint-config-standard",
+  "extends": "stylelint-config-recommended-scss",
   "rules": {
     "font-family-no-missing-generic-family-keyword": null
   }

app/package.json

@@ -25,12 +25,18 @@
   "bugs": "https://github.com/decrypto-org/blockchain-course/issues",
   "license": "MIT",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.8",
+    "@fortawesome/free-brands-svg-icons": "^5.5.0",
+    "@fortawesome/free-solid-svg-icons": "^5.5.0",
+    "@fortawesome/react-fontawesome": "^0.1.3",
     "@material-ui/core": "^3.5.1",
     "@material-ui/icons": "^3.0.1",
     "axios": "^0.18.0",
+    "bootstrap": "^4.1.3",
     "classnames": "^2.2.6",
     "history": "^4.7.2",
     "js-cookie": "^2.2.0",
+    "node-sass": "^4.10.0",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "react-redux": "^5.0.7",
@@ -43,10 +49,12 @@
     "redux-thunk": "^2.2.0",
     "sprintf-js": "^1.1.1",
     "standard": "^12.0.1",
+    "stylelint-scss": "^3.4.0",
     "typeface-roboto": "^0.0.54"
   },
   "devDependencies": {
-    "stylelint": "^9.2.1",
+    "stylelint": "^9.9.0",
+    "stylelint-config-recommended-scss": "^3.2.0",
     "stylelint-config-standard": "^18.2.0"
   },
   "standard": {

app/src/assets/scss/components/avatar.scss

@@ -0,0 +1,22 @@
+.avatar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: 100%;
+
+  .avatar-wrapper {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .avatar-button {
+    cursor: pointer;
+  }
+
+  .avatar-username {
+    font-family: 'Press Start 2P', cursive;
+    margin-left: 15px;
+  }
+}

app/src/assets/scss/components/spinner.scss

@@ -0,0 +1,16 @@
+.spinner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: -1;
+
+  &.loading {
+    z-index: 100;
+    background: rgba(255, 255, 255, 0.5);
+  }
+}

app/src/assets/scss/global.scss

@@ -0,0 +1,145 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Roboto', sans-serif;
+  background-color: #e8e8e8 !important;
+}
+
+html,
+body,
+#root,
+.app {
+  min-height: 100vh;
+}
+
+.app {
+  padding: 0;
+  margin: 0;
+}
+
+.egg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+
+  img {
+    width: 55px;
+    height: auto;
+  }
+
+  span {
+    font-family: 'Press Start 2P', cursive;
+    font-size: 24px;
+    margin-left: 15px;
+  }
+}
+
+/* Old CSS follows */
+
+.wrapper {
+  flex-grow: 1;
+  z-index: 1;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+}
+
+.container {
+  flex-grow: 1;
+  padding: 89px 15px 25px 15px;
+  min-width: 0;
+}
+
+.main-menu a {
+  text-decoration: none;
+}
+
+.header-link a {
+  text-decoration: none;
+  color: #fff;
+}
+
+.list {
+  width: 100%;
+}
+
+.page-title {
+  margin: 0;
+}
+
+.assignment-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.assignment-actions {
+  display: flex;
+  justify-content: space-between;
+}
+
+.assignment-material {
+  margin: 16px 0;
+}
+
+.assignment-material button {
+  padding-left: 0;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.assignment-material button svg {
+  margin-right: 15px;
+}
+
+.solved {
+  color: #4caf50;
+}
+
+.hidden {
+  display: none;
+}
+
+.content-box-wrapper {
+  margin-left: -240px;
+}
+
+.user-popover-wrapper {
+  min-width: 240px;
+}
+
+.user-popover-actions,
+.user-popover-content {
+  padding: 20px;
+}
+
+.user-popover-content {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  line-height: normal;
+}
+
+.user-info {
+  font-size: 13px;
+}
+
+.user-info .title {
+  font-weight: 700;
+}
+
+.user-info .sub-title {
+  color: #666;
+}
+
+.user-popover-actions {
+  display: flex;
+  justify-content: space-between;
+}
+
+.icon a {
+  text-decoration: none;
+  color: #000;
+}

app/src/assets/scss/layouts/header.scss

@@ -0,0 +1,8 @@
+.header {
+  height: 75px;
+  border-bottom: 1px solid #000;
+
+  .row {
+    height: 100%;
+  }
+}

app/src/assets/scss/layouts/home.scss

@@ -0,0 +1,79 @@
+.start-screen {
+  height: 100vh;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 10000;
+
+  h1 {
+    width: 100%;
+    text-align: center;
+    margin: 0 auto;
+    font-size: 9vh;
+    padding: 0;
+    letter-spacing: 0.1em;
+  }
+
+  .enter-game {
+    display: block;
+    width: 100%;
+    text-align: center;
+    font-size: 4.5vh;
+    color: orange;
+    margin: 25px 0;
+
+    a {
+      text-decoration: underline;
+      color: red;
+    }
+  }
+}
+
+.start-screen-wrapper {
+  background-color: #000;
+  width: 100%;
+  height: 100%;
+  font-family: 'Press Start 2P', cursive;
+  color: white;
+  padding: 50px;
+}
+
+.scoreboard {
+  margin: auto;
+  font-size: 4.5vh;
+
+  thead {
+    text-align: center;
+  }
+
+  tbody {
+    tr:nth-child(1) {
+      color: red;
+    }
+    tr:nth-child(2) {
+      color: orange;
+    }
+    tr:nth-child(3) {
+      color: yellow;
+    }
+    tr:nth-child(4) {
+      color: green;
+    }
+    tr:nth-child(5) {
+      color: cyan;
+    }
+    tr:nth-child(6) {
+      color: magenta;
+    }
+    tr:nth-child(7) {
+      color: blue;
+    }
+  }
+
+  td {
+    &.score {
+      text-align: right;
+    }
+  }
+}

app/src/assets/scss/layouts/toolbar.scss

@@ -0,0 +1,6 @@
+.toolbar {
+  display: flex;
+  height: 100%;
+  justify-content: flex-start;
+  align-items: center;
+}

app/src/assets/scss/main.scss

@@ -0,0 +1,8 @@
+@import 'variables';
+@import 'global';
+@import 'typography';
+@import 'components/spinner';
+@import 'components/avatar';
+@import 'layouts/home';
+@import 'layouts/header';
+@import 'layouts/toolbar';

app/src/assets/scss/typography.scss

@@ -0,0 +1,12 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans|Press+Start+2P');
+
+@font-face {
+  font-family: 'Arcade Classic';
+  src: url('../fonts/arcadeclassic.ttf') format('truetype');
+}
+
+html,
+body {
+  font-family: 'Open Sans', sans-serif;
+  color: #000;
+}

app/src/components/Header/Header.js

@@ -1,41 +1,21 @@
 import React from 'react'
 import cx from 'classnames'
-import AppBar from '@material-ui/core/AppBar'
-import Toolbar from '@material-ui/core/Toolbar'
-import Typography from '@material-ui/core/Typography'
-import IconButton from '@material-ui/core/IconButton'
-import MenuIcon from '@material-ui/icons/Menu'
-import { withStyles } from '@material-ui/core/styles'
 import { Link } from 'react-router-dom'
 
-const styles = {
-  appBar: {
-    zIndex: 10000
-  },
-  headerTitle: {
-    flex: 1
-  },
-  menuButton: {
-    marginLeft: -12,
-    marginRight: 20
-  }
-}
-
 function Header ({ ...props }) {
-  const { classes, Avatar } = props
+  const { Avatar, ToolBar } = props
   return (
-    <AppBar position='absolute' className={classes.appBar}>
-      <Toolbar>
-        <IconButton className={classes.menuButton} color='inherit' aria-label='Menu'>
-          <MenuIcon />
-        </IconButton>
-        <Typography variant='title' color='inherit' className={cx(classes.headerTitle, 'header-link')}>
-          <Link to='/'>Blockchain Course</Link>
-        </Typography>
-        <Avatar />
-      </Toolbar>
-    </AppBar>
+    <header className='header container-fluid'>
+      <div className='row'>
+        <div className='col-6'>
+          <ToolBar />
+        </div>
+        <div className='col-6'>
+          <Avatar />
+        </div>
+      </div>
+    </header>
   )
 }
 
-export default withStyles(styles)(Header)
+export default Header