UI Changes and Accounts (#31)

* Updated navbar, improved code readability

* updated navbar

Author: nsivaku

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

package-lock.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.2.3",
+    "dotenv-webpack": "^8.0.1",
     "firebase": "^9.17.1",
     "mdbreact": "^5.2.0",
     "react": "^18.2.0",

package.json

@@ -0,0 +1,16 @@
+@testing-library/[email protected]
+@testing-library/[email protected]
+@testing-library/[email protected]
+bootstrap@5.2.3
+dotenv-webpack@8.0.1
+firebase@9.17.1
+mdbreact@5.2.0
+react-bootstrap@2.7.2
+react-countup@6.4.1
+react-dom@18.2.0
+react-icons@4.7.1
+react-router-dom@6.8.1
+react-scripts@5.0.1
+react@18.2.0
+styled-components@5.3.6
+└── web[email protected]

requirements.txt

@@ -7,6 +7,10 @@
   pointer-events: none;
 }
 
+.break {
+  margin-bottom: 204px;;
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;

src/App.css

@@ -1,12 +1,14 @@
 import './App.css';
 import "bootstrap/dist/css/bootstrap.min.css";
-import NavBar from './components/NavBar';
+import NavBar from './components/Navbar/NavBar';
+import Footer from './pages/Footer';
 
 
 function App() {
   return (
     <div className="App">
       <NavBar />
+      <Footer />
     </div>
   );
 }

src/App.js

@@ -0,0 +1,25 @@
+.banner {
+    margin-top: -3.5rem;
+    position: relative;
+    text-align: center;
+    z-index: -1;
+    width: 100%;
+}
+
+.banner-picture {
+    margin-top: 0;
+    width: 100%;
+}
+
+.banner-text-position {
+    font-weight: bolder;
+    position: absolute;
+    top: calc(50% + 1rem);
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+}
+
+.banner-text {
+    font-weight: bold;
+}

src/components/Banner.css

@@ -0,0 +1,17 @@
+import React from 'react'
+import './Banner.css'
+
+export default function Banner(props) {
+  return (
+    <div className='banner'>
+        <img
+            src={props.imagePath}
+            className="banner-picture"
+            alt="CATCH Team"
+        />
+        <div className='banner-text-position'>
+            <h1 className='banner-text'>{props.title}</h1>
+        </div>
+    </div>
+  )
+}