#2 Main page issues fixed 'new components for search bar and sports b…

…uttons with css files'

frontend/sportsmatch-app/src/App.tsx

@@ -6,7 +6,7 @@ import Login from './pages/Login'
 import Signup from './pages/Signup'
 import NewUser from './pages/NewUser'
 import MainPage from './pages/MainPage'
-
+import UserPage from './pages/UserPage'
 
 function App() {
   return (

frontend/sportsmatch-app/src/pages/MainPage.tsx

@@ -2,8 +2,11 @@ import SearchBarComponent from '../components/SearchBarComponent'
 import MainPageSliderComponent from '../components/MainPageSliderComponent'
 import SportsButtonComponent from '../components/SportsButtonComponent'
 import SportEvent from '../components/SportEvent'
+import Navbar from '../components/Navbar'
 import '../styles/MainPage.css'
 import '../styles/Slider.css'
+import '../styles/Navbar.css'
+import '../styles/SearchBar.css'
 
 export default function MainPage() {
   const events = [
@@ -57,19 +60,18 @@ export default function MainPage() {
     },
   ]
   return (
-    <div className="frame">
-      <div className="components-container">
-        <MainPageSliderComponent />
-        <SearchBarComponent />
-        <SportsButtonComponent />
-        <p className="mainPage-p">Nearby</p>
-        <div className="nearby-events-container">
-          {events.map((event, index) => (
-            <div className="nearby-events" key={index}>
-              <SportEvent event={event} />
-            </div>
-          ))}
-        </div>
+    <div className="components-container">
+      <Navbar />
+      <MainPageSliderComponent />
+      <SearchBarComponent />
+      <SportsButtonComponent />
+      <p className="mainPage-p">Nearby</p>
+      <div className="nearby-events-container">
+        {events.map((event, index) => (
+          <div className="nearby-events" key={index}>
+            <SportEvent event={event} />
+          </div>
+        ))}
       </div>
     </div>
   )

frontend/sportsmatch-app/src/styles/MainPage.css

@@ -1,9 +1,3 @@
-/* General Styles */
-
-
-/* Form Styles */
-
-
 .mainPage-form {
   display: flex;
 }
@@ -53,8 +47,8 @@
 }
 
 .mainPage-p {
-  margin-top: 2vh;
   margin-left: 8vw;
+  margin-top: 4vh;
 }
 
 /* Nearby Events Container Styles */
@@ -73,8 +67,6 @@
 
 /* Media Queries */
 @media (max-width: 768px) {
-
-
   .nearby-events-container {
     position: absolute;
     display: flex;
@@ -109,4 +101,8 @@
     width: 90%;
     justify-content: space-around;
   }
+
+  .mainPage-p {
+    margin-top: 14vh;
+  }
 }

frontend/sportsmatch-app/src/styles/Navbar.css

@@ -5,8 +5,9 @@
 }
 
 nav{
+  position: absolute;
+  top: 0;
   width: 100%;
   height: 60px;
-  background: rgba(255, 255, 255, 0.5);;
-  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.5);
 }

frontend/sportsmatch-app/src/styles/SearchBar.css

@@ -38,10 +38,6 @@
 }
 
 @media (max-width: 768px) {
-  .search-container {
-    margin-top: 20px;
-  }
-
   .search-container-btn {
     width: 55%;
     height: 45px;
@@ -58,15 +54,13 @@
 
   .search-container {
     position: relative;
-    margin-top: 2vh;
+    margin-top: 30vh;
   }
 }
 
-
-
-@media (max-width: 480px) {
+@media (max-width: 400px) {
   .search-container {
     position: relative;
-    margin-top: 24vh;
+    top: 12vh;
   }
 }

frontend/sportsmatch-app/src/styles/Slider.css

@@ -122,7 +122,7 @@
 @media (max-width: 768px) {
   .slider {
     position: absolute;
-    top: 0px;
+    top: 60px;
     left: 0;
     height: 30vh;
   }

frontend/sportsmatch-app/src/styles/SportsBtn.css

@@ -40,4 +40,11 @@
 
   .sportBtn-p {
     margin-left: 8vw;
+  }
+
+  @media (max-width: 400px) {
+    .wrapper {
+      position: relative;
+      top: 12vh;
+    }
   }