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

@@ -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',
 };

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>