diff --git a/frontend/src/components/pages/ModuleFeedback/index.tsx b/frontend/src/components/pages/ModuleFeedback/index.tsx index f10ac1f2ca31282955d15a4ac0c49c695001530e..c642e86aea3c4d8633b06c2ad384e97827e688e0 100644 --- a/frontend/src/components/pages/ModuleFeedback/index.tsx +++ b/frontend/src/components/pages/ModuleFeedback/index.tsx @@ -1,15 +1,11 @@ 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> + </> ); }; diff --git a/frontend/src/components/pages/ModuleFeedback/style.module.scss b/frontend/src/components/pages/ModuleFeedback/style.module.scss index c1bce2447b0a106d744ee4886b393e794280ee24..78be428d894a8424ed8121471de5f17a006c6b55 100644 --- a/frontend/src/components/pages/ModuleFeedback/style.module.scss +++ b/frontend/src/components/pages/ModuleFeedback/style.module.scss @@ -1,10 +1,5 @@ @import "assets/scss/custom"; -.moduleContainer { - padding-top: 1.875rem; - margin-bottom: 4.5rem; -} - .moduleSectionHeader { margin-top: 1.875rem; } diff --git a/frontend/src/components/pages/ModuleList/index.tsx b/frontend/src/components/pages/ModuleList/index.tsx index d1e64a3630af7f17954ca48a1063483750e015fd..0a4fde6f4cb0393fb11c739a64577fe5f81b4bd8 100644 --- a/frontend/src/components/pages/ModuleList/index.tsx +++ b/frontend/src/components/pages/ModuleList/index.tsx @@ -1,6 +1,5 @@ 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> + </> ); }; diff --git a/frontend/src/components/pages/ModuleList/style.module.scss b/frontend/src/components/pages/ModuleList/style.module.scss index c1bce2447b0a106d744ee4886b393e794280ee24..78be428d894a8424ed8121471de5f17a006c6b55 100644 --- a/frontend/src/components/pages/ModuleList/style.module.scss +++ b/frontend/src/components/pages/ModuleList/style.module.scss @@ -1,10 +1,5 @@ @import "assets/scss/custom"; -.moduleContainer { - padding-top: 1.875rem; - margin-bottom: 4.5rem; -} - .moduleSectionHeader { margin-top: 1.875rem; } diff --git a/frontend/src/components/pages/ModuleOverview/index.tsx b/frontend/src/components/pages/ModuleOverview/index.tsx index cd9f1408c0e9164397e0e2f9a6c60e6e5191b9a0..4f2546ed5827dd5244735b3bd057ec75d662bee6 100644 --- a/frontend/src/components/pages/ModuleOverview/index.tsx +++ b/frontend/src/components/pages/ModuleOverview/index.tsx @@ -1,15 +1,11 @@ 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> + </> ); }; diff --git a/frontend/src/components/pages/ModuleOverview/style.module.scss b/frontend/src/components/pages/ModuleOverview/style.module.scss index c1bce2447b0a106d744ee4886b393e794280ee24..78be428d894a8424ed8121471de5f17a006c6b55 100644 --- a/frontend/src/components/pages/ModuleOverview/style.module.scss +++ b/frontend/src/components/pages/ModuleOverview/style.module.scss @@ -1,10 +1,5 @@ @import "assets/scss/custom"; -.moduleContainer { - padding-top: 1.875rem; - margin-bottom: 4.5rem; -} - .moduleSectionHeader { margin-top: 1.875rem; } diff --git a/frontend/src/components/pages/ModuleResources/index.tsx b/frontend/src/components/pages/ModuleResources/index.tsx index d6775f95c8e9e44768d73da59464385eba300fd4..4d9e63b55f627486c55f454b66ae349b1d25c88b 100644 --- a/frontend/src/components/pages/ModuleResources/index.tsx +++ b/frontend/src/components/pages/ModuleResources/index.tsx @@ -1,6 +1,5 @@ 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> + </> ); }; diff --git a/frontend/src/components/pages/ModuleResources/style.module.scss b/frontend/src/components/pages/ModuleResources/style.module.scss index c1bce2447b0a106d744ee4886b393e794280ee24..78be428d894a8424ed8121471de5f17a006c6b55 100644 --- a/frontend/src/components/pages/ModuleResources/style.module.scss +++ b/frontend/src/components/pages/ModuleResources/style.module.scss @@ -1,10 +1,5 @@ @import "assets/scss/custom"; -.moduleContainer { - padding-top: 1.875rem; - margin-bottom: 4.5rem; -} - .moduleSectionHeader { margin-top: 1.875rem; } diff --git a/frontend/src/components/pages/StandardView/index.tsx b/frontend/src/components/pages/StandardView/index.tsx index cfa68f8a49b77e24789c28ccb936973eb4fbcd10..28048df1ae5eed678df875d3e7ae4350feb60af0 100644 --- a/frontend/src/components/pages/StandardView/index.tsx +++ b/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> ); }; diff --git a/frontend/src/components/pages/StandardView/style.scss b/frontend/src/components/pages/StandardView/style.scss index 5fac97fb792d6993d0fbe497d8203750092039aa..6918d53d81bc73f1dabd877126b47b6e3ba649ef 100644 --- a/frontend/src/components/pages/StandardView/style.scss +++ b/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; +} diff --git a/frontend/src/components/templates/ExamplePage/index.tsx b/frontend/src/components/templates/ExamplePage/index.tsx index 34e4d396754db3138f35c9d7fa5acee47122e528..35212e2cf1c15c79cae03ea5ea87a6ea2eb0a517 100644 --- a/frontend/src/components/templates/ExamplePage/index.tsx +++ b/frontend/src/components/templates/ExamplePage/index.tsx @@ -1,7 +1,6 @@ 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> + </> ); };