Move style for left bar to style.css

frontend/src/components/App.scss

@@ -12,235 +12,4 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
-}
-
-//----------------Bottom Bar -------------------------
-@media (max-width: 992px) {
-  .bottom-bar {
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    height: 60px;
-    background-color: #fff;
-    border-top: 1px solid #cdd4db;
-    padding: 0px;
-  }
-
-  .bottom-bar-buttons,
-  .block {
-    height: 100%;
-    width: 100%;
-  }
-
-  .btn:active,
-  .btn.active {
-    border: 0;
-    background-color: #000 !important;
-    color: #fff;
-  }
-
-  .bottom-bar-buttons .btn {
-    border: 0;
-    box-shadow: none !important;
-    outline: 0 !important;
-    border-radius: 0px;
-    width: 25%;
-    margin-left: 0;
-    color: #000;
-    background-color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .btn:focus {
-    border: 0;
-    box-shadow: 0 0 0 0px;
-  }
-
-  .bottom-bar-buttons .btn:hover {
-    border: 0px;
-    background-color: #ced4da;
-  }
-}
-
-@media (min-width: 992px) {
-  .bottom-bar {
-    display: none;
-  }
-}
-
-//--------------------- Left Bar -----------------
-//TODO: tidy, change classNames away from examen, and make more modular
-#wrapper {
-  padding-left: 0;
-  -webkit-transition: all 0.5s ease;
-  -moz-transition: all 0.5s ease;
-  -o-transition: all 0.5s ease;
-  transition: all 0.5s ease;
-}
-
-#sidebar-wrapper {
-  position: fixed;
-  left: 250px;
-  width: 0;
-  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.1);
-  -webkit-transition: all 0.5s ease;
-  -moz-transition: all 0.5s ease;
-  -o-transition: all 0.5s ease;
-  transition: all 0.5s ease;
-}
-
-.exam-outline-button {
-  margin-bottom: 10px;
-}
-
-.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{
-  color: #fff;
-  background-color: #000;
-  border-radius: 5px;
-  text-align: left;
-  border-width: 0px;
-  height: 40px;
-}
-
-#sidebar-wrapper .btn-primary {
-  color: #000;
-  background: #f6f8fa;
-  font-size: 17px;
-  color: #000000;
-  letter-spacing: 0;
-  border-width: 0px;
-  height: 40px;
-  border-radius: 5px;
-  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) {
-  border-radius: 5px;
-}
-
-#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;
-}
-
-#sidebar-wrapper .btn-primary:hover {
-  color: #000;
-  background-color: #e5e5e5;
-  border-color: #fff;
-}
-
-#wrapper.toggled {
-  padding-left: 250px;
-}
-
-#wrapper.toggled #sidebar-wrapper {
-  width: 250px;
-}
-
-@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;
-    text-transform: uppercase;
-  }
-
-  .exam-outline-heading {
-    font-size: 24px;
-    color: #000000;
-    text-align: left;
-    margin-top: 64px;
-    margin-left: 16px;
-    margin-right: 16px;
-    position: absolute;
-    width: max-content;
-    margin-bottom: 0px;
-  }
-
-  #exam-outline-button-group {
-    margin-top: 102px;
-    margin-left: 16px;
-    margin-right: 16px;
-    width: 218px;
-  }
-}
-
-@media (min-width: 992px) {
-  #wrapper {
-    padding-left: 250px;
-  }
-
-  #sidebar-wrapper {
-    width: 250px;
-  }
-
-  .sidebar-status {
-    margin-top: 30px;
-    margin-left: 32px;
-    margin-right: 32px;
-    margin-bottom: 0px;
-    font-size: 16px;
-    color: #000000;
-    letter-spacing: 0;
-    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;
-    margin-bottom: 0px;
-  }
-
-  #exam-outline-button-group {
-    margin-top: 102px;
-    margin-left: 32px;
-    margin-right: 32px;
-    width: 186px;
-  }
-
-  #wrapper.toggled {
-    padding-left: 0;
-  }
-
-  #wrapper.toggled #sidebar-wrapper {
-    width: 0;
-  }
 }
\ No newline at end of file

frontend/src/components/pages/StandardView/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Route, Switch, Redirect } from "react-router-dom";
 import ExamplePage from "components/templates/ExamplePage";
 import LeftBar from "components/organisms/LeftBar";
+import "./style.scss"
 
 interface StandardViewProps {
   pages: {

frontend/src/components/organisms/LeftBar/style.scss → frontend/src/components/pages/StandardView/style.scss

-@import "scss/custom";
-
+//TODO: make into css module
 #wrapper {
   padding-left: 0;
   -webkit-transition: all 0.5s ease;
@@ -25,16 +24,38 @@
   transition: all 0.5s ease;
 }
 
-.module-outline-button {
+.exam-outline-button {
   margin-bottom: 10px;
 }
 
-.module-outline-button-a {
+.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{
+  color: #fff;
+  background-color: #000;
+  border-radius: 5px;
+  text-align: left;
+  border-width: 0px;
+  height: 40px;
+}
+
+#sidebar-wrapper .btn-primary {
+  color: #000;
+  background: #f6f8fa;
+  font-size: 17px;
+  color: #000000;
+  letter-spacing: 0;
+  border-width: 0px;
+  height: 40px;
+  border-radius: 5px;
+  text-align: left;
+}
+
 #sidebar-wrapper .btn-group-vertical > .btn-group:not(:last-child) > .btn,
 #sidebar-wrapper
   .btn-group-vertical
@@ -52,6 +73,12 @@
   border-top-right-radius: 5px;
 }
 
+#sidebar-wrapper .btn-primary:hover {
+  color: #000;
+  background-color: #e5e5e5;
+  border-color: #fff;
+}
+
 #wrapper.toggled {
   padding-left: 250px;
 }
@@ -76,7 +103,7 @@
     text-transform: uppercase;
   }
 
-  .module-outline-heading {
+  .exam-outline-heading {
     font-size: 24px;
     color: #000000;
     text-align: left;
@@ -88,7 +115,7 @@
     margin-bottom: 0px;
   }
 
-  #module-outline-button-group {
+  #exam-outline-button-group {
     margin-top: 102px;
     margin-left: 16px;
     margin-right: 16px;
@@ -117,7 +144,7 @@
     width: max-content;
   }
 
-  .module-outline-heading {
+  .exam-outline-heading {
     font-size: 24px;
     color: #000000;
     text-align: left;
@@ -129,7 +156,7 @@
     margin-bottom: 0px;
   }
 
-  #module-outline-button-group {
+  #exam-outline-button-group {
     margin-top: 102px;
     margin-left: 32px;
     margin-right: 32px;