attempting to fix main

src/components/banner/banner.css

@@ -3,16 +3,16 @@
     display: flex;
     height: auto;
     justify-content: center;
-    margin-top: 4vh;
+    margin-top: 6vh;
     align-items: center;
     width: 100vw;
 
 }
 
 .banner-img {
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    margin-top: 2vh;
     width: 90vw;
     height: auto;
     background-color: #FFE7C7;
+    justify-content: center;
 }

src/components/banner/banner.js

@@ -5,8 +5,8 @@ import "./banner.css"
 export const Banner = () => {
     return (
         <Box className="banner-main">
-            <a href="www.google.com">
-                <img src="thrifty_logos/NEW_Thrifty_Logo.png" alt="banner of Thrifty" className="banner-img"></img>
+            <a href="/" className="banner-img">
+                <img src="thrifty_logos/NEW_Thrifty_Logo.png" alt="banner of Thrifty"/>
             </a>
         </Box>
     )

src/components/header/header.css

@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
-
 
 .bar{
     display: flex;
@@ -31,28 +29,11 @@
 
 .header-text{
     font-size: 15px;
-    font-family: Oswald;
+    font-family: Chivo;
     text-transform: capitalize;
     margin-right: 15px;
 }
 
-.header_link {
-    color: black;
-    text-decoration: none;
-    background-color: none;
-    margin-left: 1em;
-    margin-right: 1em;
-    padding: 5px;
-    border-radius: 6px;
-    box-shadow: inset 1 0 0 0 #E4D6D4;
-    transition: color 0.5s ease-in-out, box-shadow 0.5s ease-in-out; 
-}
-
-.header_link:hover {
-    box-shadow: inset 100px 0 0 0 #E4D6D4;
-    color: black;
-}
-
 .dropbtn {
     color: black;
     text-decoration: none;
@@ -63,7 +44,7 @@
     box-shadow: inset 1 0 0 0 #E4D6D4;
     transition: color 0.5s ease-in-out, box-shadow 0.5s ease-in-out; 
     font-size: 15px;
-    font-family: Oswald;
+    font-family: Chivo;
     text-transform: capitalize;
     margin-right: 15px;
     border: none;
@@ -115,25 +96,3 @@
     color: black;
 }
 
-.search-form {
-    display: flex;
-    align-items: center;
-  }
-
-.search-input {
-    padding: 5px;
-    font-size: 16px;
-    font-family: Oswald;
-    color: black;
-    border: none;
-    border-radius: 6px;
-    background-color: #fff;
-    transition: ease-in 0.3s;
-    width: 100%;
-  }
-
-.search-input:focus {
-    outline: black;
-    box-shadow: 0 0 0 2.5px black;
-    background-color: #E4D6D4;
-  }

src/components/header/header.js

@@ -1,25 +1,15 @@
 import * as React from 'react';
-import { Box, Menu, MenuItem } from '@mui/material';
-import { useState } from 'react';
-import LoginIcon from '@mui/icons-material/Login';
+import { Box } from '@mui/material';
 
 import "./header.css";
+import "../../default.css"
 
 export const Header = () => {
-    const [anchorEl, setAnchorEl] = useState(null);
 
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-
-    const handleSearch = (event) => { { /* redirects to another page based on user input */}
-        event.preventDefault(); { /* ensures no return to current page */}
+    const handleSearch = (event) => { 
+        event.preventDefault();
         const searchInput = event.target.elements.searchInput.value;
-        window.location.href = `/search/${searchInput}`; { /* search output */}
+        window.location.href = `/search/${searchInput}`;
     }
 
     return(
@@ -30,16 +20,25 @@ export const Header = () => {
                     <img src={process.env.PUBLIC_URL + 'images/logo_transparent.png'} className="header-logo the-logo" title='Home_page' alt=""/>
                 </a>
                 <Box className='header-text'>
-                    <a className='header_link' href='/about'>About</a>
-                    <a className='header_link' href=''>Categories</a>
-                    <a className='header_link' href='https://github.com/rpi-thrifty'>Github</a>
-                    <a className='header_link' href='https://discord.gg/PFqRbcPq'>Discord</a>
+                    <a className='default_but' href='/about'>About</a>
+                    <a className="dropdown">
+                        <button className="dropbtn default_but">Categories</button>
+                        <div className="dropdown-content">
+                            <a href="/categories/electronics">Electronics</a>
+                            <a href="/categories/clothing">Clothing</a>
+                            <a href="/categories/furniture">Furniture</a>
+                            <a href="/categories/miscellaneous">Miscellaneous</a>
+                        </div>
+                    </a>
+                    <a className='default_but' href='https://github.com/rpi-thrifty'>Github</a>
+                    <a className='default_but' href='https://discord.gg/PFqRbcPq'>Discord</a>
                 </Box>
 
             </Box>
 
             {/* right (search bar) */}
             <Box className='group search-form' marginRight={"10vw"}> {/* might change margins */}
+            <a className='default_but' href='/submit'>Sell</a>
                 <form onSubmit={handleSearch}>
                     <input type="text" name="searchInput" placeholder="Search..." className="search-input" />
                 </form>

src/components/upload_but/upload_button.js

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Box, Button, Typography, TextField, MenuItem, FormControl, InputLabel, OutlinedInput } from "@mui/material"
 import InputAdornment from '@mui/material/InputAdornment';
 import Collapse from '@mui/material/Collapse';
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import "./upload_button.css"
 import SellOutlinedIcon from '@mui/icons-material/SellOutlined';
 import CloseFullscreenOutlinedIcon from '@mui/icons-material/CloseFullscreenOutlined';

src/default.css

@@ -0,0 +1,56 @@
+.search-form {
+    display: flex;
+    align-items: center;
+  }
+
+.search-input {
+    padding: 5px;
+    font-size: 16px;
+    font-family: Chivo;
+    color: black;
+    border: none;
+    border-radius: 6px;
+    background-color: #fff;
+    transition: ease-in 0.3s;
+    width: 100%;
+  }
+
+.search-input:focus {
+    outline: black;
+    box-shadow: 0 0 0 2.5px black;
+    background-color: #E4D6D4;
+  }
+
+.title {
+    font-family: Chivo;
+    font-size: 18px;
+    font-weight: bolder;
+}
+
+.subtitle {
+    font-family: Chivo;
+    font-size: 15px;
+    font-weight: bold;
+}
+
+.small {
+    font-family: Chivo;
+    font-size: 12px;
+}
+
+.default_but {
+    color: black;
+    text-decoration: none;
+    background-color: none;
+    margin-left: 1em;
+    margin-right: 1em;
+    padding: 5px;
+    border-radius: 6px;
+    box-shadow: inset 1 0 0 0 #E4D6D4;
+    transition: color 0.5s ease-in-out, box-shadow 0.5s ease-in-out; 
+}
+
+.default_but:hover {
+    box-shadow: inset 100px 0 0 0 #E4D6D4;
+    color: black;
+}