From 1a63e13aaf15c4ff24579b681ae13aff276a1b3f Mon Sep 17 00:00:00 2001
From: Karl Fallenius <smilodon.p@gmail.com>
Date: Mon, 10 Feb 2025 18:47:38 -0700
Subject: [PATCH 1/3] Corrects styling of Contacts Index

A multitude of minor corrections to existing tailwind.css.
Fixes:
- button sizing issues
- removes color of alternating lines in index
- contact's name no longer gets cut off early
- bottom border of each contact now runs the complete length
- minor alignment fixes
- adds low key responsiveness to elements

[Ticket: 85]
---
 src/components/contacts/Contacts.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/contacts/Contacts.tsx b/src/components/contacts/Contacts.tsx
index e1d26cb..1333a0e 100644
--- a/src/components/contacts/Contacts.tsx
+++ b/src/components/contacts/Contacts.tsx
@@ -80,10 +80,10 @@ function Contacts({ userData }: UserInformationProps) {
   const searchBar = (
     <form onSubmit={(event) => event.preventDefault()}>
       <input
-        className="p-[1vh] border-2 border-slate-800 rounded w-[200px] h-full"
+        className="py-2 px-4 rounded w-[22vw] min-w-min border-2 border-slate-800"
         type="search"
         id="contacts-search"
-        placeholder="Search Contacts..."
+        placeholder="🔍 Search Contacts"
         value={contactSearch}
         onChange={searchContactList}
       />
@@ -93,14 +93,14 @@ function Contacts({ userData }: UserInformationProps) {
   const contactData = contacts.map((data) => {
     const companyName = data.attributes.company?.name || "N/A";
     return (
-      <tr key={data.id} className="even:bg-gray-50 hover:bg-gray-100">
+      <tr key={data.id} className="border-b hover:bg-gray-100">
         <Link to={`/contacts/${data.id}`}>
-          <td className="p-4 border-b truncate max-w-[8vw]">
+          <td className="p-4 text-gray-700">
             {data.attributes.first_name} {data.attributes.last_name}
           </td>
         </Link>
-        <td className="p-4 border-b truncate max-w-[8vw]">{companyName}</td>
-        <td className="p-4 border-b truncate max-w-[8vw]">
+        <td className="p-4 truncate max-w-[8vw]">{companyName}</td>
+        <td className="p-4 truncate max-w-[8vw]">
           {data.attributes.notes}
         </td>
       </tr>
@@ -109,14 +109,14 @@ function Contacts({ userData }: UserInformationProps) {
 
   return (
     <section className="flex">
-      <div className="w-[70vw] pl-[4vw]">
-        <h1 className="text-[5vh] font-bold text-cyan-600 my-[5vh]">
+      <div className="w-[76vw] pl-[6vw]">
+        <h1 className="text-[5.5vh] font-bold text-cyan-600 tracking-wide mb-[2vh] mt-[8vh] ">
           Contacts
         </h1>
         <div className="flex justify-between items-center">
-          {searchBar}
+          <div>{searchBar}</div>
           <Link to="/contacts/new">
-            <button className="bg-cyan-600 text-white p-[1vh] rounded w-[10vw]">
+            <button className="bg-cyan-600 hover:bg-cyan-500 text-white tracking-wide py-2 px-4 rounded max-w-max">
               Add New +
             </button>
           </Link>
@@ -130,7 +130,7 @@ function Contacts({ userData }: UserInformationProps) {
           </p>
         ) : null}
         <table className="w-[70vw] mt-[1.5vh]">
-          <thead className="border-t bg-gray-200">
+          <thead className="border-t">
             <tr>
               <th className="text-left p-4 border-b">Name</th>
               <th className="text-left p-4 border-b">Company</th>

From 53f3715ed9fbf58ff5e740cd59afcc1d21f85eba Mon Sep 17 00:00:00 2001
From: Karl Fallenius <smilodon.p@gmail.com>
Date: Mon, 10 Feb 2025 19:25:27 -0700
Subject: [PATCH 2/3] Removes '...' from search bar assertions in Cypress Test

---
 cypress/e2e/contactsSpec.cy.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/contactsSpec.cy.js b/cypress/e2e/contactsSpec.cy.js
index bf8737c..caba173 100644
--- a/cypress/e2e/contactsSpec.cy.js
+++ b/cypress/e2e/contactsSpec.cy.js
@@ -75,7 +75,7 @@ describe("Contacts page", () => {
     cy.get("input[type='search']").should(
       "have.attr",
       "placeholder",
-      "Search Contacts..."
+      "Search Contacts"
     );
   });
 
@@ -342,7 +342,7 @@ describe("Sad Paths - Contacts Page", () => {
     cy.get("input[type='search']").should(
       "have.attr",
       "placeholder",
-      "Search Contacts..."
+      "Search Contacts"
     );
 
     cy.get("table").find("th").should("have.length", 3);

From 5fc5daa300e5e5ad1d2bbe866def256c0f2d3867 Mon Sep 17 00:00:00 2001
From: Karl Fallenius <smilodon.p@gmail.com>
Date: Mon, 10 Feb 2025 19:30:46 -0700
Subject: [PATCH 3/3] =?UTF-8?q?Adds=20'=F0=9F=94=8D=20'=20to=20beginning?=
 =?UTF-8?q?=20of=20search=20bar=20assertions=20in=20cypress=20test?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cypress/e2e/contactsSpec.cy.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/contactsSpec.cy.js b/cypress/e2e/contactsSpec.cy.js
index caba173..429d0be 100644
--- a/cypress/e2e/contactsSpec.cy.js
+++ b/cypress/e2e/contactsSpec.cy.js
@@ -75,7 +75,7 @@ describe("Contacts page", () => {
     cy.get("input[type='search']").should(
       "have.attr",
       "placeholder",
-      "Search Contacts"
+      "🔍 Search Contacts"
     );
   });
 
@@ -342,7 +342,7 @@ describe("Sad Paths - Contacts Page", () => {
     cy.get("input[type='search']").should(
       "have.attr",
       "placeholder",
-      "Search Contacts"
+      "🔍 Search Contacts"
     );
 
     cy.get("table").find("th").should("have.length", 3);