From 924713879b0c5a61991edcaec83d010060facc7c Mon Sep 17 00:00:00 2001
From: Karl Fallenius <smilodon.p@gmail.com>
Date: Thu, 13 Feb 2025 17:28:10 -0700
Subject: [PATCH] Styling - Refactors status elements for reactivity & color
 accuracy

This commit:
  - makes status colors perfectly accurate to the mock up.
    - I had to guess for "code challenge" because it was not included in the mockup.
  - makes the status elements reactive to screen size and adds truncation.

[Ticket: #84]
---
 src/components/JobApplicationUtilities.tsx         | 12 ++++++------
 src/components/JobApplications/JobApplications.tsx |  3 ++-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/JobApplicationUtilities.tsx b/src/components/JobApplicationUtilities.tsx
index c26a061..6710cdb 100644
--- 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-black',
-  Interviewing: 'bg-green-100 text-black',
-  Offer: 'bg-teal-600 text-white',
-  Rejected: 'bg-red-500 text-white',
-  'Phone Screen': 'bg-yellow-300 text-black',
+  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-gray-200 text-black',
+  'Not Yet Applied': 'bg-[#e6e6e6] text-black',
 };
\ No newline at end of file
diff --git a/src/components/JobApplications/JobApplications.tsx b/src/components/JobApplications/JobApplications.tsx
index 97fb589..d544c1d 100644
--- a/src/components/JobApplications/JobApplications.tsx
+++ b/src/components/JobApplications/JobApplications.tsx
@@ -92,7 +92,8 @@ const ApplicationsGrid: React.FC = () => {
                     <td className="p-4 border-b">
                       <Link to={`/job_applications/${app.id}`}>
                         <span
-                          className={`py-2 px-6 text-sm inline-block w-[10vw] text-center ${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>