Fix colors in sidenav

Match the sidenav color scheme to the colors used in the navbar.

Change highlighting so that tabs turn a darker grey when hovered over
and an even darker grey when selected.

Make the dropdown menus take on a darker color when expanded (in order
to distinguish them from other buttons).

Co-authored-by: psvenk <45520974+psvenk@users.noreply.github.com>

public/css/home.css

@@ -73,15 +73,6 @@ body {
   --schedule6: #b1dfc0;
   --schedule7: #c0e5cd;
   --schedule8: #d0ecd9;
-
-  --sidenav-color: #e0e0e0;
-  --sidenav-button-color: #eaeaea;
-  --sidenav-button-child-color:  #f9f9f9;
-  --sidenav-hr-color: #d8d8d8;
-
-  --sidenav-hover-color: #f3f3f3;
-  --sidenav-hover-lighter-color: #f3f3f3;
-  --sidenav-active-color: #fafafa;
 }
 
 body.dark {
@@ -124,15 +115,6 @@ body.dark {
   --schedule6: #00a336;
   --schedule7: #00b83d;
   --schedule8: #00cc44;
-
-  --sidenav-color: #121212;
-  --sidenav-button-color: #292a2b;
-  --sidenav-button-child-color: #4e5257;
-  --sidenav-hr-color: #576069;
-
-  --sidenav-hover-color: #333436;
-  --sidenav-hover-lighter-color: #606d78;
-  --sidenav-active-color: #464749;
 }
 
 /*---------------------------------------------*/
@@ -1147,13 +1129,13 @@ p#large_clock_period {
 }
 
 .sidenav .select-items div:hover {
-  background-color: var(--sidenav-hover-lighter-color);
+  background-color: var(--white3);
 }
 
 .sidenav hr {
   height: 4px;
   width: 270px;
-  background-color: var(--sidenav-hr-color);
+  background-color: var(--white3);
   clear: both;
   margin: 5px 0px;
   border: 0px;
@@ -1166,7 +1148,7 @@ p#large_clock_period {
   z-index: 2;
   top: 0;
   left: 0;
-  background-color: var(--sidenav-color);
+  background-color: var(--white2);
   overflow-x: hidden;
   padding-top: 5px;
   transition: 0.3s;
@@ -1175,7 +1157,7 @@ p#large_clock_period {
 
 .sidenav button {
   clear: both;
-  background-color: var(--sidenav-button-color);
+  background-color: inherit;
   /* float: left; */
   /* float: right; */
   border: none;
@@ -1190,15 +1172,15 @@ p#large_clock_period {
 }
 
 .sidenav button.active {
-  background-color: var(--sidenav-active-color);
+  background-color: var(--gray);
 }
 
 .sidenav .select-selected:hover {
-  background-color: var(--sidenav-hover-color) !important;
+  background-color: var(--white3) !important;
 }
 
 .sidenav button:hover {
-  background-color: var(--sidenav-hover-color) !important;
+  background-color: var(--white3) !important;
 }
 
 .sidenav .GPA {
@@ -1210,7 +1192,7 @@ p#large_clock_period {
 
 .sidenav .select-selected {
   color: var(--black) !important;
-  background-color: var(--sidenav-button-color);
+  background-color: inherit;
   /* float: right; */
   font-size: 14px !important;
   font-family: Arial, Helvetica, sans-serif !important;
@@ -1234,7 +1216,7 @@ p#large_clock_period {
 
 .sidenav .activated-select-items {
   color: var(--black);
-  background-color: var(--sidenav-button-child-color);
+  background-color: inherit;
   float: right;
   font-size: 14px !important;
   font-family: Arial, Helvetica, sans-serif !important;