CSS changes to align with other teams

src/component/Header.jsx

 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import Search from "./Search";
+import ".././styles/Header.css"
 
 const Header = () => {
   const [show, setShow] = useState(false);
 
   return (
-    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
+    <nav className="navbar navbar-expand-lg navbar-dark">
       <div className="container-fluid">
         <Link className="navbar-brand" to="/">
-          Ascend Inventory
+          Ascend
         </Link>
         <button
           className="navbar-toggler"
@@ -28,7 +29,7 @@ const Header = () => {
           id="navbarSupportedContent"
         >
           <ul className="navbar-nav me-auto mb-2 mb-lg-0">
-            <li className="nav-item">
+            <li className="nav-item" style={{color: "red"}}>
               <Link className="nav-link" to="/products">
                 Products
               </Link>
@@ -39,7 +40,8 @@ const Header = () => {
               </Link>
             </li>
           </ul>
-        <Search />
+          <div id="page-title" className="nav-item mx-auto"> <h1>Inventory, Promotions, Pricing</h1>
+          </div>
         </div>
       </div>
     </nav>

src/component/ProductIndex.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import ProductTable from "./ProductTable.jsx";
 import Config from "../config.js";
 import { Link } from "react-router-dom";
+import Search from "./Search.jsx"
 
 export default function ProductIndex() {
   const [products, setProducts] = useState([]);
@@ -35,13 +36,7 @@ export default function ProductIndex() {
         <h1 id="title" className="text-center">
           Inventory
         </h1>
-        <Link type="link" className="btn btn-success" to="/products/new">
-          + New Product
-        </Link>
-      </div>
-      {products.length > 0 ? (
-        <>
-            <select
+        <select
               className="form-select w-25 mt-1"
               id="category-select"
               onChange={(e) => {
@@ -60,6 +55,14 @@ export default function ProductIndex() {
                 <option key={i + 679}>{category}</option>
               ))}
             </select>
+        <Search />
+        <Link type="link" className="btn btn-success" to="/products/new">
+          + New Product
+        </Link>
+      </div>
+      {products.length > 0 ? (
+        <>
+            
           <ProductTable
             productData={displayProducts}
             fetchProducts={fetchProducts}

src/component/Search.jsx

@@ -61,7 +61,7 @@ class Search extends React.Component {
                         <input className="form-check-input" type="radio" name="inlineRadioOptions" checked={this.state.searchBy === "sku"} onChange={() => this.handleRadioButton("sku")} id="searchBySku" value="sku" />
                         <label className="form-check-label" htmlFor="searchBySKU">Sku</label>
                     </div>
-                    <button className="btn btn-light" type="submit">
+                    <button className="btn btn-primary" type="submit">
                         GO
                     </button>
                 </form>

src/component/SearchResults.jsx

@@ -3,6 +3,7 @@ import ProductRow from "./ProductRow.jsx";
 import { Table } from "react-bootstrap";
 import { deleteProduct } from "../actions/apiRequests";
 import { withRouter } from "react-router";
+import Search from "./Search.jsx";
 
 class SearchResults extends React.Component {
 
@@ -14,11 +15,11 @@ class SearchResults extends React.Component {
     this.handleDelete = this.handleDelete.bind(this);
   }
 
-   handleDelete(sku){
-     deleteProduct(sku)
+  handleDelete(sku) {
+    deleteProduct(sku)
       .then(() => {
         const newResults = this.state.results.filter(product => product.sku !== sku);
-        this.setState({results: newResults});
+        this.setState({ results: newResults });
         this.props.history.push("/searchResults", this.state);
       });
   }
@@ -26,12 +27,16 @@ class SearchResults extends React.Component {
   render() {
     return (
       <div className="container flex-column d-flex justify-content-center">
-        <h1 id="title" className="text-center" >Search Results</h1>
+        
+          <h1 id="title" >Search Results</h1>
+          <Search />
+        
         {this.state.results.length > 0 ?
           <Table>
             <thead>
               <tr>
                 <th>SKU</th>
+                <th>UPC</th>
                 <th>Product Name</th>
                 <th>Price</th>
                 <th>Category</th>

src/styles/Header.css

+.navbar {
+    background-color: #00567D;
+}
+
+#page-title{
+    color: #EBEBEB;
+}
\ No newline at end of file

src/styles/Search.css

 .form-check-label{
-    color: rgba(255, 255, 255, 0.55)
+    color: rgba(0, 0, 0)
 }
 
 .form-check.form-check-inline{