Merge pull request #7 from Computer-Science-Club-OCC/minh-nguyen-branch

fix navbar & activity Minh nguyen branch

Author: Jake-P-N

package-lock.json

@@ -3,9 +3,19 @@
 	"version": "0.1.0",
 	"private": true,
 	"dependencies": {
+		"@emotion/react": "^11.9.3",
+		"@emotion/styled": "^11.9.3",
+		"@fortawesome/fontawesome-svg-core": "^6.1.1",
+		"@fortawesome/free-regular-svg-icons": "^6.1.1",
+		"@fortawesome/free-solid-svg-icons": "^6.1.1",
+		"@fortawesome/react-fontawesome": "^0.1.18",
+		"@mui/icons-material": "^5.8.4",
+		"@mui/material": "^5.8.5",
+		"@mui/styled-engine-sc": "^5.8.0",
 		"@testing-library/jest-dom": "^5.16.4",
 		"@testing-library/react": "^13.3.0",
 		"@testing-library/user-event": "^13.5.0",
+		"babel-plugin-macros": "^3.1.0",
 		"bootstrap": "^5.1.3",
 		"bootstrap-icons": "^1.8.3",
 		"node-sass": "^7.0.1",
@@ -14,6 +24,7 @@
 		"react-dom": "^18.1.0",
 		"react-router-dom": "^6.3.0",
 		"react-scripts": "5.0.1",
+		"styled-components": "^5.3.5",
 		"web-vitals": "^2.1.4"
 	},
 	"scripts": {

package.json

@@ -16,7 +16,7 @@ Click view detail, box will expand
 
 Line break
 
-Container inlcude: 
+Container inlcude:
 	Shadow: Hover expand
 	Card: Image, title, Url, Description, update (except project)
 */
@@ -25,21 +25,23 @@ Container inlcude:
 
 const Activity = () => {
 	return (
-	<div>
-		<h1>Activity</h1>
-		<Tab />
+	<div className="activity-container">
+		<h1 className="activity-title">Activity</h1>
+		<Tab className="tab-components"/>
 	</div>);
 };
 
 export default Activity;
 
 function Tab() {
+
 	const [tabState, setTab] = useState(1)
 
 	const toggleTab = (index) => {
 		setTab(index)
 	}
 
+
 	return (
 		<>
 			<div className='tab-container'>
@@ -53,19 +55,26 @@ function Tab() {
 					<div className={tabState == 1 ? 'tab-content active-content': 'tab-content'}>
 						<h2>Title 1</h2>
 						<img src="#" />
-						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
-							sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
-							Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+							sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+							Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
 							nisi ut aliquip ex ea commodo consequat.</p>
 					</div>
 					<div  className={tabState == 2 ? 'tab-content active-content': 'tab-content'}>
 						<h2>Title 2</h2>
 						<img src="#" />
-						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
+
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+							sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+							Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+							nisi ut aliquip ex ea commodo consequat.</p>
+
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 							sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 							quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-							Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+							Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 							Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
 					</div>
 				</div>
 			</div>

src/activity/Activity.js

@@ -1,33 +1,44 @@
+.activity-container {
+  width: 100vw;
+}
+
+.tab-components {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
 /* TAB BUTTON  */
 
 .tab-container {
-  overflow: hidden;
-  height: 100%;
-  min-width: 600px;
-  margin: 20px 60px;
-  display: block;
+  padding: 0 3rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .tabs {
+  width: 90%;
   display: flex;
-  flex-direction: row;
   justify-content: center;
-  margin: 1.6rem;
 }
 
 .tab-button {
-  font-size: 20px;
-  margin-left: 10px;
-  margin-right: 10px;
-  padding: 10px 60px;
+  min-width: 150px;
+  height: 3rem;
+  font-size: 1rem;
   cursor: pointer;
+  margin-right: 10px;
   outline: 0;
   border: 0;
   color: #535353;
   background-color: #ff9617;
   text-decoration: none;
   border-bottom: 5px solid black;
-  border-radius: 8px;
+  border-radius: 10px;
+  font-weight: bold;
+  text-align: center;
 }
 
 .tab-button.active {
@@ -51,7 +62,7 @@
 
 .tab-content {
   background-color: black;
-  color: white;  /* Will change due to switching tab*/
+  color: white; /* Will change due to switching tab*/
   margin: 1rem;
   padding: 30px;
   border: 2px white outset;
@@ -62,4 +73,9 @@
   display: block;
 }
 
-/* Add expand for news */
+/* Add expand for news */
+
+/* tab-container */
+.activity-title {
+  color: white;
+}

src/activity/activity.css

@@ -1,5 +1,6 @@
 html, body {
-	height: 100%;
+	height: 100vh;
+	width: 100vw;
 	margin: 0;
 	padding: 0;
 	background-color: #212121;
@@ -45,4 +46,4 @@ a {
 
 #active {
 	background-color: #b26910;
-}
+}

src/app.css

@@ -1,5 +1,6 @@
 import React from 'react';
 import './header_bar.css'
+import NavigationBar from './NavigationBar'
 
 const HeaderBar = () => {
     return (
@@ -14,4 +15,4 @@ const HeaderBar = () => {
     )
 }
 
-export default HeaderBar;
+export default HeaderBar;