Restyle Sidebar. Make table hover shade lighter.

scss/bootstrap/_variables.scss

@@ -1,6 +1,6 @@
 // Color system
 $gray-100: hsl(210, 20%, 98%) !default;
-$gray-200: hsl(210, 20%, 93%) !default;
+$gray-200: hsl(210, 20%, 95%) !default;
 $gray-300: hsl(210, 20%, 89%) !default;
 $gray-400: hsl(210, 20%, 81%) !default;
 $gray-500: hsl(210, 20%, 71%) !default;
@@ -73,7 +73,7 @@ $headings-font-weight: bold !default; // Make headings bold
 $lead-font-weight: normal;
 
 // Tables
-$table-hover-bg-factor: .03 !default;
+$table-hover-bg-factor: .02 !default;
 
 // Buttons + Forms
 

scss/elements/_footer.scss

@@ -7,10 +7,7 @@
   .footer-brand {
     margin-bottom: 0.75rem;
     font-weight: bold;
-  }
-
-  p {
-    font-size: $font-size-base;
+    color: white;
   }
 
   .footer-header {

scss/elements/_sidebar.scss

@@ -8,15 +8,13 @@
   flex-shrink: 0;
 
   min-height: 100vh;
-  width: 200px;
-  padding: 5px 10px;
+  width: 240px;
+  padding: 0.25rem 0.75rem;
 
   background-color: $white;
 
-  transition: none;
-
-  &-brand {
-    margin: 10px;
+  .sidebar-brand {
+    margin: 0.75rem 1rem;
     font-size: 1.125rem;
     text-decoration: none;
 
@@ -25,65 +23,28 @@
     }
   }
 
-  &-header {
-    margin: 10px 10px 5px;
-    font-weight: bold;
-    color: $secondary;
-  }
-
-  &-link {
-    padding: 10px 10px;
-    border-radius: 5px;
-    color: $secondary;
-    text-decoration: none;
-
-    &:hover {
-      color: $primary;
-      background-color: $primary-50;
-      text-decoration: none;
-    }
-  }
-
-  &-btn-collapse {
-    margin-top: 10px;
-  }
-
-  .sidebar-collapsed-shown {
-    display: none;
-  }
-}
-
-.sidebar-collapsed {
-  width: 60px;
-  padding: 5px 5px;
-  overflow-y: overlay;
-
-  transition: width 0.25s;
-
-  .sidebar-brand {
-    text-align: center;
-
-    span {
-      display: none;
-    }
-  }
-
   .sidebar-header {
-    display: none;
+    margin: 1rem 1rem 0.25rem;
+    color: $secondary;
+    font-weight: bold;
+    font-size: 0.875rem;
   }
 
   .sidebar-link {
-    padding: 10px 15px;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    color: $secondary;
+    text-decoration: none;
 
-    span {
-      display: none;
-    }
+    &.active {
+      color: $primary;
+      background-color: $primary-50;
     }
 
-  .sidebar-collapsed-hidden {
-    display: none;
+    &:hover {
+      color: $gray-800;
+      background-color: $gray-200;
+      text-decoration: none;
     }
-  .sidebar-collapsed-shown {
-    display: inline;
   }
 }