Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styling Refactor for Contacts Index #102

Merged
merged 4 commits into from
Feb 11, 2025
Merged

Styling Refactor for Contacts Index #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1a63e13
Corrects styling of Contacts Index
SmilodonP Feb 11, 2025
0f714cc
Merge branch 'main' of github.com:turingschool/tracker-crm-fe into st…
SmilodonP Feb 11, 2025
53f3715
Removes '...' from search bar assertions in Cypress Test
SmilodonP Feb 11, 2025
5fc5daa
Adds '🔍 ' to beginning of search bar assertions in cypress test
SmilodonP Feb 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions cypress/e2e/contactsSpec.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ describe("Contacts page", () => {
cy.get("input[type='search']").should(
"have.attr",
"placeholder",
"Search Contacts..."
"🔍 Search Contacts"
);
});

Expand Down Expand Up @@ -342,7 +342,7 @@ describe("Sad Paths - Contacts Page", () => {
cy.get("input[type='search']").should(
"have.attr",
"placeholder",
"Search Contacts..."
"🔍 Search Contacts"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding the 🔍 doesn't change much but it makes the search bar more professional looking. Great addition!

);

cy.get("table").find("th").should("have.length", 3);
Expand Down
22 changes: 11 additions & 11 deletions src/components/contacts/Contacts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
Expand All @@ -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">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for changing this. It was really hard to see the name because it was always showing only part of the name. For example: Jane Sm... or Jan...

It was really hard to read.

{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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down