Fix sidebar on mobile devices

Note: The issue with the sidebar overlapping the tab-bar on mobile
devices was fixed, and a hover colour was added for the bottom tab-bar.

frontend/src/components/organisms/BottomBar/style.scss

@@ -13,17 +13,18 @@
   .block {
     height: 100%;
     width: 100%;
-	}
-	
-	.btn:active, .btn.active {
+  }
+
+  .btn:active,
+  .btn.active {
     border: 0;
-    background-color:#000 !important;
+    background-color: #000 !important;
     color: #fff;
   }
 
   .bottom-bar-buttons .btn {
-		border: 0;
-		box-shadow: none !important;
+    border: 0;
+    box-shadow: none !important;
     outline: 0 !important;
     border-radius: 0px;
     width: 25%;
@@ -35,8 +36,6 @@
     justify-content: center;
   }
 
-
-
   .btn:focus {
     border: 0;
     box-shadow: 0 0 0 0px;
@@ -44,6 +43,7 @@
 
   .bottom-bar-buttons .btn:hover {
     border: 0px;
+    background-color: #ced4da;
   }
 }
 
@@ -52,5 +52,3 @@
     display: none;
   }
 }
-
-//style="background-color:white; border-width:0px; color:black; display:flex; align-items:center; justify-content:center;"

frontend/src/components/organisms/LeftBar/style.scss

@@ -8,16 +8,16 @@
 }
 
 #sidebar-wrapper {
-  z-index: 1000;
   position: fixed;
   left: 250px;
   width: 0;
-  height: 100%;
   margin-left: -250px;
+  height: 100%;
+  margin-bottom: 61px;
   overflow-y: auto;
   background: #fff;
-  background: #FFFFFF;
-  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.10);
+  background: #ffffff;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
@@ -31,9 +31,12 @@
 .exam-outline-button-a {
   margin-bottom: 10px;
   border-radius: 8px;
+  font-weight: 500;
 }
 
-#sidebar-wrapper .btn-primary:not(:disabled):not(.disabled).active,#sidebar-wrapper .btn-primary:not(:disabled):not(.disabled):active,#sidebar-wrapper .show > .btn-primary.dropdown-toggle {
+#sidebar-wrapper .btn-primary:not(:disabled):not(.disabled).active,
+#sidebar-wrapper .btn-primary:not(:disabled):not(.disabled):active,
+#sidebar-wrapper .show > .btn-primary.dropdown-toggle {
   color: #fff;
   background-color: #000;
   border-radius: 5px;
@@ -44,7 +47,7 @@
 
 #sidebar-wrapper .btn-primary {
   color: #000;
-  background: #F6F8FA;
+  background: #f6f8fa;
   font-size: 17px;
   color: #000000;
   letter-spacing: 0;
@@ -54,11 +57,19 @@
   text-align: left;
 }
 
-#sidebar-wrapper .btn-group-vertical > .btn-group:not(:last-child) > .btn,#sidebar-wrapper .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle) {
+#sidebar-wrapper .btn-group-vertical > .btn-group:not(:last-child) > .btn,
+#sidebar-wrapper
+  .btn-group-vertical
+  > .btn:not(:last-child):not(.dropdown-toggle) {
   border-radius: 5px;
 }
 
-#sidebar-wrapper .btn-group-vertical > .btn-group:not(:first-child) >#sidebar-wrapper .btn, .btn-group-vertical > .btn:not(:first-child) {
+#sidebar-wrapper
+  .btn-group-vertical
+  > .btn-group:not(:first-child)
+  > #sidebar-wrapper
+  .btn,
+.btn-group-vertical > .btn:not(:first-child) {
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
 }
@@ -77,17 +88,20 @@
   width: 250px;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 992px) {
   .sidebar-status {
     margin-top: 30px;
     margin-left: 16px;
     margin-right: 16px;
     margin-bottom: 0px;
     font-size: 16px;
+    font-weight: 500;
+    font-family: "IBM Plex Sans";
     color: #000000;
     letter-spacing: 0;
-		position: absolute;
-		width: max-content;
+    position: absolute;
+    width: max-content;
+    text-transform: uppercase;
   }
 
   .exam-outline-heading {
@@ -97,8 +111,8 @@
     margin-top: 64px;
     margin-left: 16px;
     margin-right: 16px;
-		position: absolute;
-		width: max-content;
+    position: absolute;
+    width: max-content;
     margin-bottom: 0px;
   }
 
@@ -110,16 +124,16 @@
   }
 }
 
-@media (min-width:768px) {
-	#wrapper {
+@media (min-width: 992px) {
+  #wrapper {
     padding-left: 250px;
-	}
-	
+  }
+
   #sidebar-wrapper {
     width: 250px;
-	}
-	
-	.sidebar-status {
+  }
+
+  .sidebar-status {
     margin-top: 30px;
     margin-left: 32px;
     margin-right: 32px;
@@ -127,29 +141,29 @@
     font-size: 16px;
     color: #000000;
     letter-spacing: 0;
-		position: absolute;
-		width: max-content;
-	}
-	
-	.exam-outline-heading {
+    position: absolute;
+    width: max-content;
+  }
+
+  .exam-outline-heading {
     font-size: 24px;
     color: #000000;
     text-align: left;
     margin-top: 64px;
     margin-left: 32px;
     margin-right: 32px;
-		position: absolute;
-		width: max-content;
+    position: absolute;
+    width: max-content;
     margin-bottom: 0px;
-	}
-	
+  }
+
   #exam-outline-button-group {
     margin-top: 102px;
     margin-left: 32px;
     margin-right: 32px;
     width: 186px;
-	}
-	
+  }
+
   #wrapper.toggled {
     padding-left: 0;
   }
@@ -157,4 +171,4 @@
   #wrapper.toggled #sidebar-wrapper {
     width: 0;
   }
-}
\ No newline at end of file
+}