Fixed Logo, Used Color Palette, Styling in Progress

client/app.css

@@ -7,27 +7,37 @@ body {
 }
 
 .header {
-  @apply bg-teal-500;
+  @apply bg-gray-900 text-white;
 
   & > h1 {
     @apply text-xl font-bold;
   }
 
   .navlistsignincontainer {
     @apply flex flex-wrap flex-row justify-end;
-    @apply space-x-2 mb-8;
-  }
+    @apply space-x-2 pr-4 py-2;
 
+    a {
+      @apply font-bold;
+    }
+  }
   .search {
-    @apply flex-wrap flex flex-row justify-center;
+    @apply flex-wrap flex flex-row justify-center items-center;
     @apply space-x-2;
+
+    img {
+      @apply max-w-28 max-h-28 mr-24;
+    }
   }
+
   .navlistcheckout {
     @apply flex-wrap flex flex-row space-x-4;
   }
-
+  .navigate {
+    @apply mb-4 pb-1.5;
+  }
   .navlistcontainer {
     @apply flex-wrap flex flex-row justify-center;
-    @apply justify-around mt-4;
+    @apply justify-around mt-4 mb-4;
   }
 }

client/components/Footer.jsx

@@ -3,8 +3,8 @@ import React from "react";
 export default function Footer() {
   return (
     <footer className="footer">
-      {FooterContactInfo()}
-      {FooterSiteNav()}
+      <FooterContactInfo />
+      <FooterSiteNav />
     </footer>
   );
 }
@@ -13,14 +13,14 @@ function FooterContactInfo() {
   return (
     <div className="footer_contact_box">
       <div className="footer_image">
-        <img src="./images/logo.jpeg" />
+        <img src="./images/logo.png" />
       </div>
       <ul>
         <li>
           <address> Address: REDACTED ADDRESS </address>
         </li>
         <li>
-          <phone> Phone: (RER) EDAC - TED? </phone>
+          <p> Phone: (RER) EDAC - TED? </p>
         </li>
       </ul>
     </div>
@@ -30,9 +30,9 @@ function FooterContactInfo() {
 function FooterSiteNav() {
   return (
     <div className="FooterSiteNav">
-      {Navigate()}
-      {Categories()}
-      {Popular_Brands()}
+      <Navigate />
+      <Categories />
+      <Popular_Brands />
     </div>
   );
 }

client/components/Header.jsx

@@ -1,41 +1,66 @@
 export default function Header() {
   return (
     <header className="header">
-      <div className="signin">
-        <nav className="username">
-          <ul className="navlistsignincontainer">
-            <li>
-              <a href="#">Sign In</a>
-            </li>
-            <li>or</li>
-            <li>
-              <a href="#">Register</a>
-            </li>
-          </ul>
-        </nav>
-      </div>
-      <div className="search">
-        <img src="./images/logo.jpeg" />
-        <h1>Combat Classifieds</h1>
-        <input type="search" />
-        <button>Search</button>
-        <ul className="navlistcheckout">
-          <li>wishlist</li>
-          <li>cart</li>
-        </ul>
-      </div>
-      <div className="navigate">
-        <nav className="navBar">
-          <ul className="navlistcontainer">
-            <li className="navItem">Contact Us</li>
-            <li className="navItem">Locations</li>
-            <li className="navItem">Shipping, Returns, & Terms</li>
-            <li className="navItem">About Us</li>
-            <li className="navItem">Size Charts</li>
-            <li className="navItem">Accessibility</li>
-          </ul>
-        </nav>
-      </div>
+      <SignIn />
+      <Search />
+      <Navigate />
     </header>
   );
 }
+
+function SignIn() {
+  return (
+    <div className="signin">
+      <nav className="username">
+        <ul className="navlistsignincontainer">
+          <li>
+            <a href="#">Sign In</a>
+          </li>
+          <li>or</li>
+          <li>
+            <a href="#">Register</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  );
+}
+
+function Search() {
+  return (
+    <div className="search">
+      <img src="./images/logo.png" />
+      <input type="search" />
+      <button>Search</button>
+      <ul className="navlistcheckout">
+        <li>wishlist</li>
+        <li>cart</li>
+      </ul>
+    </div>
+  );
+}
+
+// function imporovedSearchBar {
+//   return(
+//     <div className = 'search'>
+//       <input type = 'search'>
+//     </div>
+//   )
+// }
+
+function Navigate() {
+  return (
+    <div className="navigate">
+      <nav className="navBar">
+        <ul className="navlistcontainer">
+          <li className="navItem">Contact Us</li>
+          <li className="navItem">Locations</li>
+          <li className="navItem">Shipping, Returns, & Terms</li>
+          <li className="navItem">About Us</li>
+          <li className="navItem">Size Charts</li>
+          <li className="navItem">Accessibility</li>
+        </ul>
+      </nav>
+    </div>
+  );
+}

client/footer.css

@@ -16,6 +16,7 @@
 
 .footer_image {
   @apply border border-white rounded-md;
+  @apply max-w-12 max-h-12;
 }
 
 .FooterSiteNav {