Merge pull request #116 from turingschool/styling/applications-index

Styling/applications index
turingschool · Feb 20, 2025 · dde87a2 · dde87a2
2 parents 9bebfe0 + d5ff69d
commit dde87a2
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 56 deletions.
diff --git a/cypress/downloads/downloads.html b/cypress/downloads/downloads.html
diff --git a/cypress/e2e/jobsApplicationSpec.cy.js b/cypress/e2e/jobsApplicationSpec.cy.js
@@ -46,8 +46,6 @@ describe("Job app page after logging in", () => {
     cy.wait("@getJobApplications");
 
     cy.get("h1").should("have.text", "Applications");
-
-    cy.get(".border.rounded-lg.overflow-hidden").should("exist");
   });
 
   it("Should display a spinner while loading and show data after loading completes", () => {

diff --git a/cypress/e2e/newJobApplicationSpec.cy.js b/cypress/e2e/newJobApplicationSpec.cy.js
@@ -102,7 +102,7 @@ describe('Create New Job Application page after logging in', () => {
     cy.wait('@postUserInfo');
     cy.get('a[href="/job_applications"]').first().click();
     cy.wait('@getJobApplications')
-    cy.get('.bg-teal-500').click();
+    cy.get('a > .bg-cyan-600').click();
   })
 
   describe("Happy Paths", () => {
@@ -192,7 +192,7 @@ describe('Create New Job Application page after logging in', () => {
       cy.get('button[type="submit"]').click();
       cy.url().should('include', '/job_applications');
       cy.get(':nth-child(3) > :nth-child(2) > a').should('contain', 'Test Position');
-      cy.get(':nth-child(3) > :nth-child(3) > a > .py-1').should('contain', 'Offer');
+      cy.get(':nth-child(3) > :nth-child(3) > a > .py-2').should('contain', 'Offer');
     });
   })
 

diff --git a/src/components/JobApplicationUtilities.tsx b/src/components/JobApplicationUtilities.tsx
@@ -9,11 +9,11 @@ export const statusMap: { [key: number]: string } = {
 };
 
 export const statusStyles: { [key: string]: string } = {
-  Submitted: 'bg-yellow-200 text-yellow-800',
-  Interviewing: 'bg-green-200 text-green-800',
-  Offer: 'bg-teal-300 text-teal-900',
-  Rejected: 'bg-red-200 text-red-800',
-  'Phone Screen': 'bg-yellow-300 text-yellow-900',
-  'Code Challenge': 'bg-blue-200 text-blue-800',
-  'Not Yet Applied': 'bg-orange-200 text-orange-800',
-};
+  Submitted: 'bg-[#e7e07e] text-black',
+  Interviewing: 'bg-[#e1f3e4] text-black',
+  Offer: 'bg-[#10a689] text-white',
+  Rejected: 'bg-[#cd644f] text-white',
+  'Phone Screen': 'bg-[#fac712] text-black',
+  'Code Challenge': 'bg-blue-200 text-black',
+  'Not Yet Applied': 'bg-[#e6e6e6] text-black',
+};
diff --git a/src/components/JobApplications/JobApplications.tsx b/src/components/JobApplications/JobApplications.tsx
@@ -33,73 +33,73 @@ const ApplicationsGrid: React.FC = () => {
   }
 
   return (
-    <div className="p-6">
-      {isLoading ? (
-        <div className="flex justify-center items-center h-64">
-          <ClipLoader
-            color={"#3498db"}
-            loading={isLoading}
-            size={60}
-            aria-label="Loading Applications"
-          />
-        </div>
-      ) : (
-        <>
-          <h1 className="text-3xl font-bold text-gray-800 mb-4">Applications</h1>
-
-          <div className="flex justify-between items-center mb-4">
-            <div className="flex items-center">
+    <main className="flex">
+      <div className="w-[76vw] pl-[6vw]">
+        {isLoading ? (
+          <div className="flex justify-center items-center h-64">
+            <ClipLoader
+              color={"#3498db"}
+              loading={isLoading}
+              size={60}
+              aria-label="Loading Applications"
+            />
+          </div>
+        ) : (
+          <>
+            <h1 className="text-[5.5vh] font-bold text-cyan-600 tracking-wide mb-[2vh] mt-[8vh]">
+              Applications
+            </h1>
+
+            <div className="flex justify-between items-center">
               <input
                 type="search"
-                placeholder="Search Company"
-                className="border rounded px-4 py-2 w-64"
+                placeholder="🔍 Search Applications"
+                className="py-2 px-4 rounded w-[22vw] min-w-min border-2 border-slate-800"
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
-              />
+              />  
+              <Link to="/jobapplications/new">
+                <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>
             </div>
-            <Link to="/jobapplications/new">
-              <button className="bg-teal-500 hover:bg-teal-600 text-white py-2 px-4 rounded">
-                Add New +
-              </button>
-            </Link>
-          </div>
-
-          <div className="border rounded-lg overflow-hidden">
-            <table className="min-w-full bg-white border-collapse">
-              <thead>
-                <tr className="text-left bg-gray-50 border-b">
-                  <th className="p-4 font-semibold text-gray-600">Company</th>
-                  <th className="p-4 font-semibold text-gray-600">Title</th>
-                  <th className="p-4 font-semibold text-gray-600">Status</th>
-                  <th className="p-4 font-semibold text-gray-600">Last Updated</th>
+            <table className="w-[70vw] mt-[1.5vh]">
+              <thead className="border-t">
+                <tr>
+                  <th className="text-left p-4 border-b">Company</th>
+                  <th className="text-left p-4 border-b">Title</th>
+                  <th className="text-left p-4 border-b">Status</th>
+                  <th className="text-left p-4 border-b">Last Updated</th>
                 </tr>
               </thead>
               <tbody>
                 {filteredApplications.map((app) => (
                   <tr
                     key={app.id}
-                    className="hover:bg-gray-50 border-b transition-colors duration-200"
+                    className="hover:bg-gray-100 cursor-pointer"
                   >
-                    <td className="p-4 text-gray-700">
+                    <td className="p-4 border-b">
                       <Link to={`/job_applications/${app.id}`}>
                         {app.company_name || app.company_id}
                       </Link>
                     </td>
-                    <td className="p-4 text-gray-700">
+                    <td className="p-4 border-b">
                       <Link to={`/job_applications/${app.id}`}>
                         {app.position_title}
                       </Link>
                     </td>
-                    <td className="p-4">
+                    <td className="p-4 border-b">
                       <Link to={`/job_applications/${app.id}`}>
                         <span
-                          className={`py-1 px-2 rounded-md text-sm font-medium ${statusStyles[statusMap[app.status]]}`}
+                          className={`py-2 px-6 text-sm inline-block text-center w-[10vw] min-w-[80px] max-w-[200px] 
+              truncate overflow-hidden whitespace-nowrap ${statusStyles[statusMap[app.status]]}`}
                         >
                           {statusMap[app.status]}
                         </span>
                       </Link>
                     </td>
-                    <td className="p-4 text-gray-700">
+                    <td className="p-4 border-b">
                       <Link to={`/job_applications/${app.id}`}>
                         {app.updated_at}
                       </Link>
@@ -115,10 +115,10 @@ const ApplicationsGrid: React.FC = () => {
                 )}
               </tbody>
             </table>
-          </div>
-        </>
-      )}
-    </div>
+          </>
+        )}
+      </div>
+    </main>
   );
 
 };