diff --git a/frontend/src/components/App.scss b/frontend/src/components/App.scss
index 3db269c3141af610df6e5dca34e733891ea70c72..f9901b6e148a821ebee401d687e8e8fd17daf0d5 100644
--- a/frontend/src/components/App.scss
+++ b/frontend/src/components/App.scss
@@ -1,16 +1,16 @@
-@import '../scss/custom';
+@import "../scss/custom";
body {
margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+ "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- // background-color: $teal-300;
+ -moz-osx-font-smoothing: grayscale;
+ // background-color: $teal-300;
}
code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index 926d90eca6fedbeca3b35458921ff4af3545df3f..23f90d237ece380dc6f626f69a0fbd5c112c8180 100644
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@@ -1,14 +1,15 @@
-import React from 'react';
-import './App.scss';
-import Scientia from './pages/Scientia'
-import Container from 'react-bootstrap/Container';
+import React from "react";
+import "./App.scss";
+import ExamplePage from "./pages/ExamplePage";
+import TopBar from "./organisms/TopBar/TopBar";
const App: React.FC = () => {
return (
- <Container className="p-3">
- <Scientia/>
- </Container>
+ <>
+ <TopBar />
+ <ExamplePage />
+ </>
);
};
-export default App;
\ No newline at end of file
+export default App;
diff --git a/frontend/src/components/molecules/Buttons.tsx b/frontend/src/components/molecules/Buttons.tsx
index ab34cd928e841f36c136085cfe60e426ad06903b..6a3366b67ae96be40267a7b35db82f4b07cb943e 100644
--- a/frontend/src/components/molecules/Buttons.tsx
+++ b/frontend/src/components/molecules/Buttons.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
-import Button from 'react-bootstrap/Button';
+import Button from "react-bootstrap/Button";
const ButtonsShowcase: React.FC = () => (
<div className="p-1">
diff --git a/frontend/src/components/molecules/Toasts.tsx b/frontend/src/components/molecules/Toasts.tsx
index ac753fecb22024148853e2a97816b244c4d32cd6..3d69a0bf4fbc9fed1911667f154db36265f23b81 100644
--- a/frontend/src/components/molecules/Toasts.tsx
+++ b/frontend/src/components/molecules/Toasts.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import Toast from 'react-bootstrap/Toast';
-import Button from 'react-bootstrap/Button';
+import Toast from "react-bootstrap/Toast";
+import Button from "react-bootstrap/Button";
const ToastsShowcase: React.FC = () => {
const [show, toggleShow] = useState(true);
diff --git a/frontend/src/components/organisms/Buttonbar.tsx b/frontend/src/components/organisms/Buttonbar.tsx
deleted file mode 100644
index 210635913f6b6ce0ad8c55606c8cdc40585e39a4..0000000000000000000000000000000000000000
--- a/frontend/src/components/organisms/Buttonbar.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-
-import ButtonsShowcase from '../molecules/Buttons';
-
-const Buttonbar: React.FC = () => {
- return (
- <>
- <h2>Buttons</h2>
- <ButtonsShowcase />
- </>
- );
-};
-
-export default Buttonbar;
\ No newline at end of file
diff --git a/frontend/src/components/organisms/Toastbar.tsx b/frontend/src/components/organisms/Toastbar.tsx
deleted file mode 100644
index aac823d8fe8b1f2293a2e0c1e4b5905381c25e64..0000000000000000000000000000000000000000
--- a/frontend/src/components/organisms/Toastbar.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-
-import ToastsShowcase from '../molecules/Toasts';
-
-const Toastbar: React.FC = () => {
- return (
- <>
- <h2>Toasts</h2>
- <ToastsShowcase />
- </>
- );
-};
-
-export default Toastbar;
diff --git a/frontend/src/components/organisms/TopBar/TopBar.tsx b/frontend/src/components/organisms/TopBar/TopBar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..38a20fde4f6f71bdac17c08a90c79156b2325a20
--- /dev/null
+++ b/frontend/src/components/organisms/TopBar/TopBar.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import Container from "react-bootstrap/Container";
+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";
+
+const TopBar: React.FC = () => {
+ return (
+ <>
+ <Navbar
+ className="justify-content-center"
+ sticky="top"
+ expand="lg"
+ variant="light"
+ bg="light"
+ >
+ <Container>
+ <Navbar.Brand href="#">
+ <img
+ src={logo}
+ width="30"
+ height="30"
+ className="d-inline-block align-top"
+ alt="React Bootstrap logo"
+ />{" "}
+ Scientia
+ </Navbar.Brand>
+
+ <Nav variant="pills" activeKey="/">
+ <Nav.Item>
+ <Nav.Link href="/">Courses</Nav.Link>
+ </Nav.Item>
+
+ <Nav.Item>
+ <Nav.Link eventKey="link-1">Timetable</Nav.Link>
+ </Nav.Item>
+
+ <Nav.Item>
+ <Nav.Link eventKey="link-2">Exams</Nav.Link>
+ </Nav.Item>
+
+ <Nav.Item>
+ <Nav.Link eventKey="link-3">Other</Nav.Link>
+ </Nav.Item>
+ </Nav>
+
+ <img
+ src={userPic}
+ width="40"
+ height="40"
+ className="d-inline-block align-top"
+ alt="userPic"
+ />
+ </Container>
+ </Navbar>
+ </>
+ );
+};
+
+export default TopBar;
diff --git a/frontend/src/components/organisms/TopBar/style.scss b/frontend/src/components/organisms/TopBar/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/frontend/src/components/organisms/Topbar.tsx b/frontend/src/components/organisms/Topbar.tsx
deleted file mode 100644
index 5e3104da3c19d027912f0c6643ae5f9f28041dc5..0000000000000000000000000000000000000000
--- a/frontend/src/components/organisms/Topbar.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-
-import Jumbotron from "react-bootstrap/Jumbotron";
-
-const Topbar: React.FC = () => {
- return (
- <>
- <Jumbotron>
- <h1 className="header">
- Welcome To React-Bootstrap TypeScript Example
- </h1>
- </Jumbotron>
- </>
- );
-};
-
-export default Topbar;
diff --git a/frontend/src/components/pages/ExamplePage.tsx b/frontend/src/components/pages/ExamplePage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5d72c072a210e910f0f21c9168298da2013143e7
--- /dev/null
+++ b/frontend/src/components/pages/ExamplePage.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+import Jumbotron from "react-bootstrap/Jumbotron";
+import Container from "react-bootstrap/Container";
+
+import ButtonsShowcase from "../molecules/Buttons";
+import ToastsShowcase from "../molecules/Toasts";
+
+const ExamplePage: React.FC = () => {
+ return (
+ <Container className="p-3">
+ <Jumbotron>
+ <h1 className="header">
+ Welcome To React-Bootstrap TypeScript Example
+ </h1>
+ </Jumbotron>
+ <h2>Buttons</h2>
+ <ButtonsShowcase />
+ <h2>Toasts</h2>
+ <ToastsShowcase />
+ </Container>
+ );
+};
+
+export default ExamplePage;
diff --git a/frontend/src/components/pages/Scientia.tsx b/frontend/src/components/pages/Scientia.tsx
deleted file mode 100644
index acd5fe3a24681783607a1383e82fa246013d7644..0000000000000000000000000000000000000000
--- a/frontend/src/components/pages/Scientia.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-
-import Buttonbar from '../organisms/Buttonbar';
-import Toastbar from '../organisms/Toastbar';
-import Topbar from '../organisms/Topbar';
-
-const Scientia: React.FC = () => {
- return (
- <>
- <Topbar />
- <Buttonbar/>
- <Toastbar />
- </>
- );
-};
-
-export default Scientia;
\ No newline at end of file
diff --git a/frontend/src/images/logo.svg b/frontend/src/images/logo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..efb061fa837b507714aab27bb7f364450747d296
--- /dev/null
+++ b/frontend/src/images/logo.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 1001 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+ <g transform="matrix(1,0,0,1,-999,-500)">
+ <path d="M1500,769.603L1765.21,504.39C1768.02,501.577 1771.84,499.996 1775.82,499.996C1794.76,499.996 1853.1,499.996 1896.3,499.996C1902.98,499.996 1908.86,504.411 1910.71,510.826C1912.57,517.241 1909.96,524.111 1904.31,527.678C1843.48,569.565 1719.47,661.503 1550.24,819.842L1680.15,949.761C1838.49,780.535 1930.43,656.517 1972.32,595.686C1975.88,590.04 1982.75,587.432 1989.17,589.289C1995.58,591.145 2000,597.019 2000,603.697C2000,646.9 2000,705.245 2000,724.184C2000,728.162 1998.42,731.977 1995.6,734.79L1730.39,1000L1995.61,1265.21C1998.42,1268.03 2000,1271.84 2000,1275.82C2000,1294.76 2000,1353.1 1999.98,1396.31C1999.98,1402.97 1995.57,1408.84 1989.16,1410.69C1982.76,1412.55 1975.9,1409.94 1972.34,1404.31C1930.43,1343.48 1838.48,1219.44 1680.15,1050.24L1550.24,1180.16C1719.47,1338.5 1843.48,1430.43 1904.3,1472.34C1909.93,1475.9 1912.54,1482.76 1910.68,1489.16C1908.83,1495.57 1902.97,1499.98 1896.3,1499.98C1853.1,1500 1794.75,1500 1775.81,1500C1771.83,1500 1768.02,1498.42 1765.21,1495.61L1500,1230.4L1234.78,1495.61C1231.97,1498.42 1228.15,1500 1224.18,1500C1205.24,1500 1146.89,1500 1103.69,1499.98C1097.02,1499.98 1091.16,1495.57 1089.3,1489.17C1087.45,1482.76 1090.05,1475.9 1095.69,1472.34C1156.52,1430.43 1280.55,1338.48 1449.76,1180.16L1319.84,1050.24C1161.5,1219.47 1069.56,1343.48 1027.66,1404.3C1024.1,1409.94 1017.24,1412.54 1010.83,1410.69C1004.43,1408.84 1000.02,1402.97 1000.02,1396.3C999.996,1353.1 999.996,1294.76 999.996,1275.82C999.996,1271.84 1001.58,1268.02 1004.39,1265.21L1269.6,1000L1004.39,734.787C1001.57,731.974 999.992,728.158 999.993,724.18C999.993,705.241 999.993,646.896 999.993,603.694C999.993,597.015 1004.41,591.142 1010.82,589.285C1017.24,587.428 1024.11,590.036 1027.67,595.682C1069.56,656.513 1161.5,780.531 1319.84,949.761L1449.76,819.842C1280.53,661.507 1156.51,569.569 1095.68,527.681C1090.04,524.114 1087.43,517.245 1089.29,510.83C1091.14,504.415 1097.02,500 1103.69,500C1146.9,500 1205.24,500 1224.18,500C1228.16,500 1231.97,501.58 1234.79,504.393L1500,769.603ZM1500,867.553C1478.33,888.425 1456.05,910.28 1433.16,933.171C1410.27,956.062 1388.42,978.341 1367.55,1000C1388.42,1021.66 1410.28,1043.94 1433.17,1066.83C1456.06,1089.72 1478.34,1111.58 1500,1132.45C1521.65,1111.58 1543.93,1089.73 1566.82,1066.84C1589.71,1043.95 1611.57,1021.67 1632.44,1000C1611.58,978.345 1589.72,956.065 1566.83,933.175C1543.94,910.284 1521.66,888.429 1500,867.553Z"/>
+ </g>
+</svg>
diff --git a/frontend/src/images/user.png b/frontend/src/images/user.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc76d95c9e673bb21d89d9bfa6f3dce02803aec5
Binary files /dev/null and b/frontend/src/images/user.png differ
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 4a6f683a32bb0216611af4e8f9239a7f50400f79..68d6c0e297c1a5761587f376a256ee5df532f381 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './components/App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./components/App";
+import * as serviceWorker from "./serviceWorker";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
- document.getElementById('root')
+ document.getElementById("root")
);
// If you want your app to work offline and load faster, you can change
diff --git a/frontend/src/scss/custom.scss b/frontend/src/scss/custom.scss
index 6080b316dc1c9e872e651768a7302eca7e90aae7..699d0cdfcd715b17a09bd0070eded73947c0cef4 100644
--- a/frontend/src/scss/custom.scss
+++ b/frontend/src/scss/custom.scss
@@ -4,8 +4,7 @@
@import "./bootstrapV5/bootstrap.scss";
@import "~bootstrap/dist/css/bootstrap.min.css";
-
-//Delete bootstrapV5/bootstrap.scss and bootstrap.min.css import
+//Delete bootstrapV5/bootstrap.scss and bootstrap.min.css import
//and uncomment below to fall back to default scss option
-// @import '~bootstrap/scss/bootstrap.scss';
\ No newline at end of file
+// @import '~bootstrap/scss/bootstrap.scss';