Add support for accent color and rework cards

dashboard/src/theme.scss

@@ -55,6 +55,11 @@ $state-danger-border:                       $brand-danger;
 
 @import "pkg:bootstrap-sass";
 
+html {
+    // --accent-color: $brand-primary;
+    --accent-color: #9141ac;
+}
+
 // ----------------------------
 // Bootstrap extension
 // ----------------------------
@@ -65,6 +70,14 @@ h1, h2, h3, h4, h5, h6,
     font-weight: 400;
 }
 
+a {
+    color: var(--accent-color);
+}
+
+a:hover, a:focus {
+    color: var(--accent-color);
+}
+
 .hide-mobile {
     @media(max-width:767px) {
         display: none;
@@ -124,7 +137,8 @@ h1, h2, h3, h4, h5, h6,
 }
 
 .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
-    background-color: $brand-primary;
+    // background-color: $brand-primary;
+    background-color: var(--accent-color);
     color: white;
 }
 
@@ -226,6 +240,36 @@ html, body {
     }
 }
 
+.accent-color-input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 100px;
+  height: 100px;
+  background-color: transparent;
+  border: none;
+  border-radius: 100px 100px 0 100px;
+  cursor: pointer;
+  height: 24px;
+  width: 24px;
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  transition: all 100ms ease-in-out;
+}
+.accent-color-input::-webkit-color-swatch {
+  border-radius: 100px 100px 0 100px;
+  border: none;
+}
+.accent-color-input::-moz-color-swatch {
+  border-radius: 100px 100px 0 100px;
+  border: none;
+}
+.accent-color-input:hover {
+    width: 48px;
+    height: 48px;
+}
+
 .restart-banner {
     position: fixed;
     z-index: 20000;
@@ -273,20 +317,21 @@ html, body {
 }
 
 .content {
-    width: 100%;
-    max-width: 720px;
-    margin: 0 auto;
+    // width: 100%;
+    // max-width: 720px;
+    // margin: 0 auto;
+    margin-right: 40px;
 
     @media(min-width:768px) {
-        width: 720px;
+        // width: 720px;
 
         .title-toolbar {
             float: right !important;
         }
 
         &.content-large {
-            width: 970px;
-            max-width: 970px;
+            // width: 970px;
+            // max-width: 970px;
         }
     }
 }
@@ -295,7 +340,7 @@ html, body {
     display: block;
     width: 100%;
     flex-grow: 0;
-    background-color: white;
+    background-color: #f8f8f8;
     border-color: white;
 
     @media(min-width:768px) {
@@ -313,6 +358,15 @@ html, body {
     }
 }
 
+.navbar-default .navbar-nav > li > a:hover,
+.navbar-default .navbar-nav > li > a:focus {
+    color: var(--accent-color);
+}
+
+.navbar-default .navbar-nav > li > a {
+    color: black;
+}
+
 .nav-sidebar {
     margin: 0 10px 0 10px;
     min-width: 200px;
@@ -334,13 +388,18 @@ html, body {
     margin-right: 10px;
 }
 
+.nav-sidebar-item i {
+    display: none;
+}
+
 .nav-sidebar-item.active {
-    color: #2196F3;
+    color: var(--accent-color);
     text-decoration: none;
+    font-weight: bold;
 }
 
 .nav-sidebar-item:hover {
-    background-color: #2196F3;
+    background-color: var(--accent-color);
     text-decoration: none;
     color: white;
 }
@@ -385,6 +444,7 @@ h1, h2, h3 {
     align-items: end;
     margin-top: 50px;
     gap: 5px;
+    padding-right: 15px;
 }
 
 h1.section-header {
@@ -498,9 +558,10 @@ textarea {
     .grid-item-content {
         position: relative;
         display: block;
-        background-color: #ffffffe3;
+        // background-color: #ffffffe3;
+        background-color: #f8f8f8e3;
         box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
-        border-radius: 2px;
+        border-radius: 10px;
         height: 100%;
 
         &:focus-within {
@@ -1210,24 +1271,27 @@ multiselect {
 
 .card {
     position: relative;
-    background-color: white;
-    max-width: 720px;
-    margin: 0 auto;
+    background-color: #f8f8f8;
+    // background-color: #ebebeb;
+    // max-width: 720px;
+    // margin: 0 auto;
     margin-bottom: 15px;
     padding: 10px 15px;
-    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
+    // box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
+    // border-left: 1px solid #707070;
+    border-radius: 10px;
 }
 
 .card-small {
-    max-width: 600px;
+    // max-width: 600px;
 }
 
 .card-large {
-    max-width: 970px;
+    // max-width: 970px;
 }
 
 .card-expand {
-    max-width: initial;
+    // max-width: initial;
 }
 
 .text-success {