Make the surrounding UI in same color

- Also modify the theme color to match

app/src/index.html

@@ -20,7 +20,7 @@
     <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="assets/icons/icon-180x180.png">
 
     <link rel="manifest" href="manifest.webmanifest" />
-    <meta name="theme-color" content="#fac400" />
+    <meta name="theme-color" content="#303030" />
 
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
@@ -38,7 +38,7 @@
       #waitScreen {
         width: 100%;
         height: 100%;
-        background-color: #fac400;
+        background-color: #303030;
         position: absolute;
         top: 0;
         bottom: 0;

app/src/manifest.webmanifest

@@ -5,7 +5,7 @@
   "description": "Free City Hub is your portal into all apps and services that is available on the Free City Platform",
   "orientation": "any",
   "short_name": "FreeCity",
-  "theme_color": "#fac400",
+  "theme_color": "#303030",
   "background_color": "#303030",
   "display": "standalone",
   "scope": "./",

app/src/styles.scss

@@ -244,9 +244,22 @@ body {
 }
 
 .app-toolbar {
+  background-color: var(--mat-sidenav-content-background-color) !important;
   flex: 0 0 64px;
 }
 
+.mat-sidenav {
+  background-color: var(--mat-sidenav-content-background-color) !important;
+  border-right: 0px !important;
+}
+
+// .mat-drawer-side {
+//   box-shadow: none;
+//   border-right-color: var(--mat-sidenav-container-divider-color);
+//   border-right-width: 1px;
+//   border-right-style: solid;
+// }
+
 @media only screen and (max-width: 599px) {
   .app-toolbar {
     flex: 0 0 56px;
@@ -261,6 +274,8 @@ body {
 
 .full-page {
   height: 100%;
+  border-radius: 10px;
+  background-color: var(--mat-sidenav-container-background-color);
 }
 
 .full-page-flex {