Bug Fixes

more fixes

package.json

@@ -20,6 +20,7 @@
     "deploy": "cdk deploy --app 'cdk.out/' --require-approval never"
   },
   "dependencies": {
+    "@react-oauth/google": "^0.12.1",
     "axios": "^1.7.6",
     "env-cmd": "^10.1.0",
     "react": "^18.2.0",

src/components/features/Gallery/GalleryHeader.tsx

@@ -1,4 +1,4 @@
-// src/components/features/Gallery/GalleryHeader.tsx
+
 import React from 'react';
 
 const GalleryHeader: React.FC = () => {
@@ -7,7 +7,7 @@ const GalleryHeader: React.FC = () => {
       <h1 className="gallery-title">Gallery Search</h1>
       <div className="search-container">
         <input type="text" className="search-bar" placeholder="Search" />
-        <img src="/public/assets/icons/search-icon.png" alt="Search Icon" className="search-icon" />
+        <img src="/assets/icons/search-icon.png" alt="Search Icon" className="search-icon" />
       </div>
     </div>
   );

src/components/features/Home/HomeHero.tsx

@@ -1,13 +1,16 @@
-// src/components/features/Home/HomeHero.tsx
+
 import { Link } from 'react-router-dom';
 import React from 'react';
 
 const HomeHero: React.FC = () => {
   return (
-    <div className="home-hero">
-      <div className="hero-content">
+    <div className="homepage">
+      <div className="background-img"></div>
+      <div className="content">
         <h1>Send us your<br />Satellite Streak</h1>
         <Link to="/about" className="learn-more-btn">Learn more</Link>
+        <div className="Home-Line"></div>
+        <Link to="/gallery" className="gallery-link">View Gallery &#8250;</Link>
       </div>
     </div>
   );

src/components/layout/Footer/Footer.css

@@ -1,4 +1,3 @@
-/* src/components/layout/Footer/Footer.css */
 .footer {
   background-color: var(--primary-color);
   color: var(--text-color);

src/components/layout/Footer/Footer.tsx

@@ -1,4 +1,3 @@
-// src/components/layout/Footer/Footer.tsx
 import './Footer.css';
 import { Link } from 'react-router-dom';
 import React from 'react';

src/components/layout/NavBar/NavBar.css

@@ -1,66 +1,47 @@
-/* src/components/layout/NavBar/NavBar.css */
+/* Navbar styles */
 .navbar {
   background-color: var(--primary-color);
-  padding: var(--spacing-md) 0;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.navbar-container {
+  color: var(--text-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 var(--spacing-md);
-}
-
-.navbar-logo {
-  display: flex;
-  align-items: center;
+  padding: var(--spacing-md) var(--spacing-lg);
+  width: 100%;
 }
 
 .navbar-logo-image {
-  height: 40px;
-  width: auto;
+  height: 30px;
 }
 
 .navbar-menu {
-  display: flex;
   list-style-type: none;
   margin: 0;
   padding: 0;
+  display: flex;
 }
 
 .navbar-item {
-  margin-left: var(--spacing-md);
+  margin-right: var(--spacing-lg);
+}
+
+.navbar-item:last-child {
+  margin-right: 0;
 }
 
 .navbar-link {
   color: var(--text-color);
   text-decoration: none;
-  font-weight: 500;
-  transition: color var(--transition-speed) ease;
-}
-
-.navbar-link:hover {
-  color: var(--accent-color);
 }
 
 .account-bubble {
-  width: 32px;
-  height: 32px;
-  background-color: var(--accent-color);
+  background-color: var(--secondary-color);
+  color: var(--primary-color);
   border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  line-height: 30px;
   display: flex;
-  align-items: center;
   justify-content: center;
-  color: var(--primary-color);
-  font-weight: bold;
-}
-
-@media (max-width: 768px) {
-  .navbar-menu {
-    display: none; /* Hide menu on small screens */
-  }
-  /* Add styles for a mobile menu button here */
+  align-items: center;
 }

src/components/layout/NavBar/NavBar.tsx

@@ -1,30 +1,28 @@
-// src/components/layout/NavBar/NavBar.tsx
 import './NavBar.css';
 import { Link } from 'react-router-dom';
 import React from 'react';
 
+
 const NavBar: React.FC = () => {
   return (
     <nav className="navbar">
-      <div className="navbar-container">
-        <Link to="/" className="navbar-logo">
-          <img src="/public/assets/images/logo.png" alt="SpaceTitle Logo" className="navbar-logo-image" />
-        </Link>
-        <ul className="navbar-menu">
-          <li className="navbar-item">
-            <Link to="/" className="navbar-link">Home</Link>
-          </li>
-          <li className="navbar-item">
-            <Link to="/gallery" className="navbar-link">Gallery</Link>
-          </li>
-          <li className="navbar-item">
-            <Link to="/upload" className="navbar-link">Contribute</Link>
-          </li>
-          <li className="navbar-item">
-            <div className="account-bubble">A</div>
-          </li>
-        </ul>
-      </div>
+      <Link to="/" className="navbar-logo">
+        <img src="favicon.ico" alt="SpaceTitle Logo" className="navbar-logo-image" />
+      </Link>
+      <ul className="navbar-menu">
+        <li className="navbar-item">
+          <Link to="/" className="navbar-link">Home</Link>
+        </li>
+        <li className="navbar-item">
+          <Link to="/gallery" className="navbar-link">Gallery</Link>
+        </li>
+        <li className="navbar-item">
+          <Link to="/upload" className="navbar-link">Contribute</Link>
+        </li>
+        <li className="navbar-item">
+          <div className="account-bubble">A</div>
+        </li>
+      </ul>
     </nav>
   );
 };

src/styles/global.css

@@ -1,31 +1,54 @@
-@import 'variables.css';
-
-html, body {
-  width: 100vw;
-  height: 100vh;
-  min-width: 350px;
-  overflow-y: overlay;
+body {
   font-family: var(--font-family);
   font-size: var(--font-size-md);
   color: var(--text-color);
   background-color: var(--background-color);
+  line-height: 1.5;
 }
 
-h1, h2, h3, p {
-  color: var(--text-color);
+h1, h2, h3, h4, h5, h6 {
+  margin-bottom: var(--spacing-md);
 }
 
 h1 { font-size: var(--font-size-xl); }
 h2 { font-size: var(--font-size-lg); }
 
-main {
-  @apply flex flex-col items-center w-full h-full;
+a {
+  color: var(--accent-color);
+  text-decoration: none;
+  transition: color var(--transition-speed) ease;
+}
+
+a:hover {
+  color: var(--secondary-color);
 }
 
-h2 {
-  @apply p-5;
+button {
+  cursor: pointer;
+  font-size: var(--font-size-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: none;
+  border-radius: var(--border-radius-sm);
+  background-color: var(--accent-color);
+  color: var(--text-color);
+  transition: background-color var(--transition-speed) ease;
+}
+
+button:hover {
+  background-color: var(--primary-color);
+}
+
+input, textarea, select {
+  font-size: var(--font-size-md);
+  padding: var(--spacing-sm);
+  border: 1px solid var(--accent-color);
+  border-radius: var(--border-radius-sm);
+  background-color: var(--background-color);
+  color: var(--text-color);
 }
 
-p {
-  @apply p-1;
+.error-message {
+  color: var(--error-color);
+  font-size: var(--font-size-sm);
+  margin-top: var(--spacing-xs);
 }

src/styles/index.css

@@ -8,4 +8,6 @@
 @import 'components.css';
 @import 'pages.css';
 
+
+/* You can add any additional global styles or overrides here */
 /* You can add any additional global styles or overrides here */

src/styles/pages.css

@@ -14,56 +14,50 @@
   background-image: url('/public/assets/images/spacePic.png');
   background-size: cover;
   background-position: center;
+  z-index: -1; /* Push the background image behind other elements */
 }
 
 .content {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   text-align: center;
   color: var(--text-color);
+  z-index: 1;
 }
 
 .content h1 {
-  font-size: min(6vw, 70px);
+  font-size: min(8vw, 80px);
   font-weight: lighter;
+  margin-bottom: var(--spacing-xl);
 }
 
 .learn-more-btn {
   display: inline-block;
-  font-size: min(2vw, 15px);
+  font-size: min(2vw, 18px);
   padding: min(2vw, 15px) min(4vw, 30px);
   background-color: transparent;
   color: var(--text-color);
   border: 2px solid var(--text-color);
   text-decoration: none;
   border-radius: 25px;
   transition: background-color 0.3s, color 0.3s;
-  margin-top: 4vh;
 }
 
 .learn-more-btn:hover {
   background-color: rgba(255, 255, 255, 0.2);
 }
 
 .Home-Line {
-  position: absolute;
-  top: calc(53vh + 20px);
-  left: 50%;
-  transform: translateX(-50%);
   width: 95%;
   height: 1px;
   background-color: var(--text-color);
+  margin: var(--spacing-xl) auto;
 }
 
 .gallery-link {
-  position: absolute;
-  top: calc(53vh + 40px);
-  transform: translateX(50%);
+  display: block;
   color: var(--text-color);
   font-size: min(7vw, 35px);
   text-decoration: none;
+  margin-top: var(--spacing-lg);
 }
 
 /* Gallery styles */