Temporarily move all stylesheets into app.scss to help refactor into modules

d3a1fbdd · danieldeng2 · 2ea0731a · d3a1fbdd · d3a1fbdd · d3a1fbdd
Commit d3a1fbdd authored 4 years ago by danieldeng2
--- a/frontend/src/components/App.scss
+++ b/frontend/src/components/App.scss
@@ -14,3 +14,306 @@ code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
 }
+//-----------------------------------Top Bar-----------------------------------
+.top-bar {
+  padding: 12px 16px;
+  background: #fff;
+  border-bottom: 1px solid #cdd4db;
+}
+//------------------------------------Brand------------------------------------
+.brand-image {
+  margin-right: 10px;
+}
+.brand-container {
+  font-family: "IBM Plex Sans";
+  font-weight: 500;
+  font-size: 24px;
+  color: #000;
+  text-align: left;
+  padding: 0px;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  margin: 0px;
+}
+.brand-container a{
+	color: #000;
+}
+//--------------------------------Page Buttons---------------------------------
+@media (min-width: 992px) {
+  .page-button {
+    background: $gray-100;
+    border-radius: 5px;
+    font-family: "IBM Plex Sans";
+    font-size: 18px;
+    color: $black !important;
+    text-align: center;
+    line-height: 22px;
+    width: 120px;
+    height: 36px;
+    margin-right: 10px;
+    margin-left: 10px;
+  }
+  .page-button:hover {
+    background: $gray-200;
+    color: $black !important;
+  }
+  .page-button.active {
+    background: $black !important;
+    font-weight: 500 !important;
+    color: $white !important;
+  }
+  .page-button-group {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+@media (max-width: 992px) {
+  .page-button-group {
+    display: none;
+  }
+}
+//----------------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
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@@ -30,6 +30,7 @@ const App: React.FC = () => {
  return (
    <>
      <TopBar pages={horizontalBarPages} />
      <div id="wrapper">
 				<LeftBar/>
        <Switch>
@@ -37,6 +38,7 @@ const App: React.FC = () => {
          {topBarRoutes}
        </Switch>
      </div>
      <BottomBar pages={horizontalBarPages} />
    </>
  );

--- a/frontend/src/components/organisms/BottomBar/index.tsx
+++ b/frontend/src/components/organisms/BottomBar/index.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import Navbar from "react-bootstrap/Navbar";
 import Button from "react-bootstrap/Button";
 import ButtonGroup from "react-bootstrap/ButtonGroup";
-import "./style.scss";
 import {
  IconDefinition
 } from "@fortawesome/free-solid-svg-icons";

--- a/frontend/src/components/organisms/BottomBar/style.scss
+++ b/frontend/src/components/organisms/BottomBar/style.scss
-@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;
-  }
-}
--- a/frontend/src/components/organisms/LeftBar/index.tsx
+++ b/frontend/src/components/organisms/LeftBar/index.tsx
 import React from "react";
-import "./style.scss";
+import Button from "react-bootstrap/Button";
 const LeftBar: React.FC = () => {
-  // TODO: change to using react components
  return (
    <div id="sidebar-wrapper">
      <div>
@@ -14,21 +13,21 @@ const LeftBar: React.FC = () => {
        role="group"
        id="exam-outline-button-group"
      >
-        <button className="btn btn-primary exam-outline-button" type="button">
+        <Button className="exam-outline-button">
          Progress
-        </button>
+        </Button>
-        <button
+        <Button
-          className="btn btn-primary exam-outline-button-a active"
+          className="exam-outline-button-a active"
          type="button"
        >
          Course Title
-        </button>
+        </Button>
-        <button className="btn btn-primary exam-outline-button" type="button">
+        <Button className="exam-outline-button">
          Course Code
-        </button>
+        </Button>
-        <button className="btn btn-primary exam-outline-button" type="button">
+        <Button className="exam-outline-button">
          Term
-        </button>
+        </Button>
      </div>
    </div>
  );

--- a/frontend/src/components/organisms/LeftBar/style.scss
+++ b/frontend/src/components/organisms/LeftBar/style.scss
-//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,
-#sidebar-wrapper .show > .btn-primary.dropdown-toggle {
-  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;
-  }
-}
--- a/frontend/src/components/organisms/TopBar/index.tsx
+++ b/frontend/src/components/organisms/TopBar/index.tsx
@@ -4,7 +4,6 @@ import Navbar from "react-bootstrap/Navbar";
 import Nav from "react-bootstrap/Nav";
 import logo from "images/logo.svg";
 import userPic from "images/user.png";
-import "./style.scss";
 import { Link, NavLink } from "react-router-dom";
 export interface TopBarProps {

--- a/frontend/src/components/organisms/TopBar/style.scss
+++ b/frontend/src/components/organisms/TopBar/style.scss
-@import "scss/custom";
-//-----------------------------------Top Bar-----------------------------------
-.top-bar {
-  padding: 12px 16px;
-  background: #fff;
-  border-bottom: 1px solid #cdd4db;
-}
-//------------------------------------Brand------------------------------------
-.brand-image {
-  margin-right: 10px;
-}
-.brand-container {
-  font-family: "IBM Plex Sans";
-  font-weight: 500;
-  font-size: 24px;
-  color: #000;
-  text-align: left;
-  padding: 0px;
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  margin: 0px;
-}
-.brand-container a{
-	color: #000;
-}
-//--------------------------------Page Buttons---------------------------------
-@media (min-width: 992px) {
-  .page-button {
-    background: $gray-100;
-    border-radius: 5px;
-    font-family: "IBM Plex Sans";
-    font-size: 18px;
-    color: $black !important;
-    text-align: center;
-    line-height: 22px;
-    width: 120px;
-    height: 36px;
-    margin-right: 10px;
-    margin-left: 10px;
-  }
-  .page-button:hover {
-    background: $gray-200;
-    color: $black !important;
-  }
-  .page-button.active {
-    background: $black !important;
-    font-weight: 500 !important;
-    color: $white !important;
-  }
-  .page-button-group {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-@media (max-width: 992px) {
-  .page-button-group {
-    display: none;
-  }
-}