UI design changes

ras/frontend/src/App.js

@@ -199,7 +199,7 @@ export default class App extends Component {
                     label: '# of Tomatoes',
                     data: counts,
                     backgroundColor: [
-                        '#6f52ec', '#ff4c62', '#33d69f', '#fdb700', '#4cb7ff'
+                        '#8066ee', '#58c8d6', '#fe4c62', '#49b8fd', '#ffbe0e'
                     ],
                     borderWidth: 0,
                     borderColor: '#1f2940',
@@ -226,7 +226,7 @@ export default class App extends Component {
                 }]
             },
             options: {
-                cutout: '50%',
+                cutout: '80%',
                 responsive: true,
                 plugins: {
                     legend: {
@@ -254,6 +254,16 @@ export default class App extends Component {
                         return this.height += 30;
                     }
                 }
+            },{
+                afterDraw: chart => {
+                    var ctx = chart.ctx;
+                    ctx.save();
+                    var image = new Image();      
+                    image.src = 'https://www.iconsdb.com/icons/preview/gray/book-xxl.png';
+                    var imageSize = 80;
+                    ctx.drawImage(image, chart.width / 2 - imageSize / 2, chart.height / 2 - imageSize / 6, imageSize, imageSize);
+                    ctx.restore();
+                  }
             }],
         });
     }
@@ -270,7 +280,7 @@ export default class App extends Component {
 
         var colors = [
             // '#696ffc', '#7596fa', '#92adfe', '#abc0ff'
-            '#6f52ec', '#ff4c62', '#33d69f', '#fdb700', '#4cb7ff'
+            '#8066ee', '#58c8d6', '#fe4c62', '#49b8fd', '#ffbe0e'
         ]
 
         var dataSet = [];
@@ -459,11 +469,24 @@ export default class App extends Component {
     }
 
     render() {
-        console.log(this.state);
+        var url = window.location.href.split("/");
+
         return (
             <React.Fragment>
-                <div className="sidebar"></div>
+                <div className="sidebar">
+                    <div className={`menu-item ${ url && url[3] == "" ? 'selected' : ''}`}>
+                        <i class="fa fa-chart-bar"></i>
+                    </div>
+                    <div className={`menu-item ${ url && url[3] == "books" ? 'selected' : ''}`}>
+                        <i class="fa fa-book"></i>
+                    </div>
+                    
+                </div>
                 <div className="content">
+
+                    <h1>Dashboard</h1>
+                    <h2>Leesanalyse van Jordy van Zeeland</h2>
+
                     <div className="books-stats">
                         <div className="container-fluid">
                             <div className="row">

ras/frontend/templates/index.html

@@ -23,9 +23,6 @@
 
    <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700&display=swap" rel="stylesheet"> 
 
 
@@ -41,8 +38,25 @@
       font-family: 'Source Sans Pro', sans-serif;
     }
 
+    h1{
+      font-size: 30px;
+      font-weight: 500;
+      padding: 0 10px 0px 10px;
+      margin-bottom: 5px;
+    }
+
+    h2{
+      padding-left: 10px;
+      font-weight: 400;
+      font-size: 18px;
+      color: #a7adbd;
+      display: block;
+      margin-bottom: 50px;
+    }
+
+
     .content{
-      padding-left: 120px;
+      padding: 50px 50px 50px 110px;
     }
 
     .filter{
@@ -69,16 +83,39 @@
 
     .sidebar{
       background: #363a53;
-      width: 100px;
+      width: 70px;
       height: 100vh;
       position: fixed;
-      margin: -20px 0 0 0;
+      padding-top: 10px;
+    }
+
+    .sidebar .menu-item{
+      text-align: center;
+      padding: 15px 0;
+    }
+
+    .sidebar .menu-item i{
+      font-size: 25px;
+      color: #727794;
+    }
+
+    .sidebar .menu-item.selected i{
+      color:#fff;
+    }
+
+    .sidebar svg{
+      color:#ffffff;
     }
 
     .books-stats{
       margin:20px 0;
     }
 
+    .books-icon{
+      background:#000;
+      padding: 50px;
+    }
+
     .books-stats .stat-block{
       background: #ffffff;
       box-shadow: 0 2px 0px 1px rgb(0 0 0 / 3%);
@@ -93,13 +130,13 @@
       color: #8066ee;
     }
     .books-stats .col-md-2:nth-child(2) i{
-      background: #fff5f6;
-      color: #fe4c62;
-    }
-    .books-stats .col-md-2:nth-child(3) i{
       background: #f1fcf8;
       color: #58c8d6;
     }
+    .books-stats .col-md-2:nth-child(3) i{
+      background: #fff5f6;
+      color: #fe4c62;
+    }
     .books-stats .col-md-2:nth-child(4) i{
       background: #f2f9ff;
       color: #49b8fd;
@@ -135,7 +172,7 @@
     }
 
     .books-stats .stat-block .stats-label{
-      color: #bac0cc;
+      color: #a7adbd;
       font-weight: 400;
       font-size: 20px;
     }