header icons added and header tested

src/__tests__/Header.test.js

@@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react"
 import { BrowserRouter } from "react-router-dom"
 import Header from "../components/Header"
 
-test("renders the deader component", () => {
+test("renders the header component", () => {
   render(
     <BrowserRouter>
       <Header />
@@ -12,4 +12,12 @@ test("renders the deader component", () => {
 
   const headerLogo = screen.getByAltText(/black graphic of a note and a pencil/)
   expect(headerLogo).toBeInTheDocument()
+  const editLogo = screen.getByAltText(/black graphic of a notepad/)
+  expect(editLogo).toBeInTheDocument()
+  const addUserLogo = screen.getByAltText(/black graphic of a add user button/)
+  expect(addUserLogo).toBeInTheDocument()
+  const binLogo = screen.getByAltText(/black graphic of a trash bin/)
+  expect(binLogo).toBeInTheDocument()
+  const logOutLogo = screen.getByAltText(/sign out button/)
+  expect(logOutLogo).toBeInTheDocument()
 })

src/components/Header.js

@@ -1,5 +1,9 @@
 import React from "react"
 import noteLogo from "../assets/note-logo.png"
+import addUser from "../assets/add-user.png"
+import Edit from "../assets/edit.png"
+import Bin from "../assets/bin.png"
+import logOut from "../assets/logout.png"
 
 const Header = ({ signedOutUser }) => {
   const signOut = async () => {
@@ -22,15 +26,34 @@ const Header = ({ signedOutUser }) => {
   }
   return (
     <header>
-      <div className="flex justify-between">
-        <img
-          src={noteLogo}
-          alt="black graphic of a note and a pencil"
-          className="mx-4 my-2 h-7"
-        />
-        <button type="button" onClick={signOut} className="underline">
-          Sign Out
-        </button>
+      <div className="bg-neutral flex justify-between">
+        <div className="flex">
+          <img
+            src={noteLogo}
+            alt="black graphic of a note and a pencil"
+            className="mx-4 my-2 flex h-7 justify-start"
+          />
+          <img
+            src={Edit}
+            alt="black graphic of a notepad"
+            className="mx-4 my-2 h-7"
+          />
+        </div>
+        <div className="flex justify-end">
+          <img
+            src={addUser}
+            alt="black graphic of a add user button"
+            className="mx-4 my-2 h-7"
+          />
+          <img
+            src={Bin}
+            alt="black graphic of a trash bin"
+            className="mx-4 my-2 h-7"
+          />
+          <button type="button" onClick={signOut} className="underline">
+            <img src={logOut} alt="sign out button" className="mx-4 my-2 h-7" />
+          </button>
+        </div>
       </div>
     </header>
   )

src/components/SignIn.js

@@ -6,8 +6,8 @@ const SignIn = ({ setFormStatus, signedInUser }) => {
   const [error, setError] = useState(false)
 
   const preloadedValues = {
-    email: "[email protected]",
-    password: "2irDk1q8y778Id"
+    email: "[email protected]",
+    password: "yrL4YgmuQ"
   }
   const {
     register,

tailwind.config.js

@@ -27,7 +27,8 @@ module.exports = {
       white: "#ffffff",
       gray: "#6c6868",
       lightGray: "#c4c2c2",
-      error: "#ff0000"
+      error: "#ff0000",
+      neutral: "#E5E5E5"
     },
     fontSize: {
       xs: ".75rem",