Refactor containers into standard view

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

 import React from "react";
-import styles from "./style.module.scss";
-import Container from "react-bootstrap/Container";
-
-import classNames from "classnames";
 import Dandruff from "components/molecules/Dandruff";
 
 const ModuleFeedback: React.FC = () => {
   return (
-    <Container className={classNames("p-4", styles.moduleContainer)}>
+    <>
       <Dandruff heading="Feedback"/>
-    </Container>
+    </>
   );
 };
 

frontend/src/components/pages/ModuleFeedback/style.module.scss

 @import "assets/scss/custom";
 
-.moduleContainer {
-  padding-top: 1.875rem;
-  margin-bottom: 4.5rem;
-}
-
 .moduleSectionHeader {
   margin-top: 1.875rem;
 }

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

 import React from "react";
 import styles from "./style.module.scss";
-import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
 
 import classNames from "classnames";
@@ -102,7 +101,7 @@ const ModuleList: React.FC = () => {
     }
   ];
   return (
-    <Container className={classNames("p-4", styles.moduleContainer)}>
+    <>
       <Dandruff heading="Modules" />
       <h4 className={classNames(styles.moduleSectionHeader)}>
         First Year Undergraduate
@@ -119,7 +118,7 @@ const ModuleList: React.FC = () => {
           <ModuleCard module={module} key={module.code} />
         ))}
       </Row>
-    </Container>
+    </>
   );
 };
 

frontend/src/components/pages/ModuleList/style.module.scss

 @import "assets/scss/custom";
 
-.moduleContainer {
-  padding-top: 1.875rem;
-  margin-bottom: 4.5rem;
-}
-
 .moduleSectionHeader {
   margin-top: 1.875rem;
 }

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

 import React from "react";
-import styles from "./style.module.scss";
-import Container from "react-bootstrap/Container";
-
-import classNames from "classnames";
 import Dandruff from "components/molecules/Dandruff";
 
 const ModuleOverview: React.FC = () => {
   return (
-    <Container className={classNames("p-4", styles.moduleContainer)}>
+    <>
       <Dandruff heading="Overview"/>
-    </Container>
+    </>
   );
 };
 

frontend/src/components/pages/ModuleOverview/style.module.scss

 @import "assets/scss/custom";
 
-.moduleContainer {
-  padding-top: 1.875rem;
-  margin-bottom: 4.5rem;
-}
-
 .moduleSectionHeader {
   margin-top: 1.875rem;
 }

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

 import React, { useEffect } from "react";
 import styles from "./style.module.scss";
-import Container from "react-bootstrap/Container";
 
 import classNames from "classnames";
 import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
@@ -20,7 +19,7 @@ const ModuleResources: React.FC = () => {
   });
 
   return (
-    <Container className={classNames("p-4", styles.moduleContainer)}>
+    <>
       <MyBreadcrumbs />
       <InputGroup  style={{ marginTop: "3rem" }}>
         <InputGroup.Prepend>
@@ -59,7 +58,7 @@ const ModuleResources: React.FC = () => {
           </Col>
         ))}
       </Row>
-    </Container>
+    </>
   );
 };
 

frontend/src/components/pages/ModuleResources/style.module.scss

 @import "assets/scss/custom";
 
-.moduleContainer {
-  padding-top: 1.875rem;
-  margin-bottom: 4.5rem;
-}
-
 .moduleSectionHeader {
   margin-top: 1.875rem;
 }

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

@@ -12,6 +12,7 @@ import ModuleFeedback from "../ModuleFeedback";
 import LeftBarHome from "components/organisms/LeftBarHome";
 import LeftBarModuleList from "components/organisms/LeftBarModuleList";
 import LeftBarModule from "components/organisms/LeftBarModule";
+import Container from "react-bootstrap/esm/Container";
 
 interface StandardViewProps {
   pages: {
@@ -52,44 +53,45 @@ const StandardView: React.FC<StandardViewProps> = ({
       </Switch>
 
       <div id="sidenav-overlay" onClick={(e) => onOverlayClick(e)}></div>
+      <Container className={classNames("py-4", "px-5", "pageContainer")}>
+        <Switch>
+          <Route path="/home">
+            <ExamplePage name="Home" />
+          </Route>
 
-      <Switch>
-        <Route path="/home">
-          <ExamplePage name="Home" />
-        </Route>
+          <Route exact path="/modules">
+            <ModuleList />
+          </Route>
 
-        <Route exact path="/modules">
-          <ModuleList />
-        </Route>
+          <Route path="/modules/:id/overview">
+            <ModuleOverview />
+          </Route>
 
-        <Route path="/modules/:id/overview">
-          <ModuleOverview />
-        </Route>
+          <Route path="/modules/:id/resources">
+            <ModuleResources />
+          </Route>
 
-        <Route path="/modules/:id/resources">
-          <ModuleResources />
-        </Route>
+          <Route path="/modules/:id/feedback">
+            <ModuleFeedback />
+          </Route>
 
-        <Route path="/modules/:id/feedback">
-          <ModuleFeedback />
-        </Route>
+          <Route path="/timeline">
+            <ExamplePage name="Timeline" />
+          </Route>
 
-        <Route path="/timeline">
-          <ExamplePage name="Timeline" />
-        </Route>
+          <Route path="/exams">
+            <ExamplePage name="Exams" />
+          </Route>
 
-        <Route path="/exams">
-          <ExamplePage name="Exams" />
-        </Route>
-
-        <Route
-          path="/modules/:id"
-          render={(props) => (
-            <Redirect to={`/modules/${props.match.params.id}/overview`} />
-          )}
-        />
-        <Route path="/" render={() => <Redirect to="/home" />} />
-      </Switch>
+          <Route
+            path="/modules/:id"
+            render={(props) => (
+              <Redirect to={`/modules/${props.match.params.id}/overview`} />
+            )}
+          />
+          <Route path="/" render={() => <Redirect to="/home" />} />
+        </Switch>
+      </Container>
     </div>
   );
 };

frontend/src/components/pages/StandardView/style.scss

@@ -46,3 +46,8 @@
 		background-color: rgba(0, 0, 0, 0.3);
   }
 }
+
+.pageContainer {
+  padding-top: 1.875rem;
+  margin-bottom: 4.5rem;
+}

frontend/src/components/templates/ExamplePage/index.tsx

 import React from "react";
 
 import Jumbotron from "react-bootstrap/Jumbotron";
-import Container from "react-bootstrap/Container";
 
 import ButtonsShowcase from "components/templates/ExamplePage/ExampleButtons";
 import ToastsShowcase from "components/templates/ExamplePage/ExampleToasts";
@@ -13,7 +12,7 @@ export interface ExamplePageProps {
 
 const ExamplePage: React.FC<ExamplePageProps> = ({name} : ExamplePageProps) => {
   return (
-    <Container className="p-3" style={{overflow: "hidden"}}>
+    <>
       <Jumbotron>
         <h1 className="header">
           Welcome To {name}
@@ -23,7 +22,7 @@ const ExamplePage: React.FC<ExamplePageProps> = ({name} : ExamplePageProps) => {
       <ButtonsShowcase />
       <h2>Toasts</h2>
       <ToastsShowcase />
-    </Container>
+    </>
   );
 };