From 85fd874769db37c87005bedc28f9879dcfdcf4b2 Mon Sep 17 00:00:00 2001
From: Zhang Ziqing <69516975+ziqing26@users.noreply.github.com>
Date: Mon, 31 Oct 2022 11:12:57 +0800
Subject: [PATCH] [offers][style] fix offer card style (#469)

* [offers][style] fix offer card style

* [offers][style] fix OEA offer card style
---
 .../offers/offerAnalysis/OfferProfileCard.tsx |  2 +-
 .../components/offers/profile/OfferCard.tsx   | 30 ++++++++++++-------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx b/apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx
index 6d57e2b8..6be21d1b 100644
--- a/apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx
+++ b/apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx
@@ -70,7 +70,7 @@ export default function OfferProfileCard({
           <p>
             Company: {company.name}, {location}
           </p>
-          <p>Level: {level}</p>
+          {level && <p>Level: {level}</p>}
         </div>
         <div className="col-span-1 row-span-3">
           <p className="text-end">{formatDate(monthYearReceived)}</p>
diff --git a/apps/portal/src/components/offers/profile/OfferCard.tsx b/apps/portal/src/components/offers/profile/OfferCard.tsx
index 4678ea67..6d02f134 100644
--- a/apps/portal/src/components/offers/profile/OfferCard.tsx
+++ b/apps/portal/src/components/offers/profile/OfferCard.tsx
@@ -36,12 +36,14 @@ export default function OfferCard({
       <div className="flex justify-between px-8">
         <div className="flex flex-col">
           <div className="flex flex-row">
-            <BuildingOffice2Icon className="mr-1 h-5" />
+            <span>
+              <BuildingOffice2Icon className="mr-3 h-5" />
+            </span>
             <span className="font-bold">
               {location ? `${companyName}, ${location}` : companyName}
             </span>
           </div>
-          <div className="ml-6 flex flex-row">
+          <div className="ml-8 flex flex-row">
             <p>
               {jobLevel ? `${jobTitle}, ${jobLevel}` : jobTitle}{' '}
               {jobType && `(${JobTypeLabel[jobType]})`}
@@ -79,15 +81,19 @@ export default function OfferCard({
           <div className="flex flex-col py-2">
             {(totalCompensation || monthlySalary) && (
               <div className="flex flex-row">
-                <CurrencyDollarIcon className="mr-1 h-5" />
-                <p>
-                  {totalCompensation && `TC: ${totalCompensation}`}
-                  {monthlySalary && `Monthly Salary: ${monthlySalary}`}
-                </p>
+                <span>
+                  <CurrencyDollarIcon className="mr-3 h-5" />
+                </span>
+                <span>
+                  <p>
+                    {totalCompensation && `TC: ${totalCompensation}`}
+                    {monthlySalary && `Monthly Salary: ${monthlySalary}`}
+                  </p>
+                </span>
               </div>
             )}
             {totalCompensation && (
-              <div className="ml-6 flex flex-row font-light">
+              <div className="ml-8 flex flex-row font-light">
                 <p>
                   Base / year: {base} ⋅ Stocks / year: {stocks} ⋅ Bonus / year:{' '}
                   {bonus}
@@ -98,7 +104,9 @@ export default function OfferCard({
           {negotiationStrategy && (
             <div className="flex flex-col py-2">
               <div className="flex flex-row">
-                <ScaleIcon className="h-5 w-5" />
+                <span>
+                  <ScaleIcon className="h-5 w-5" />
+                </span>
                 <span className="overflow-wrap ml-2">
                   "{negotiationStrategy}"
                 </span>
@@ -108,7 +116,9 @@ export default function OfferCard({
           {otherComment && (
             <div className="flex flex-col py-2">
               <div className="flex flex-row">
-                <ChatBubbleBottomCenterTextIcon className="h-5 w-5" />
+                <span>
+                  <ChatBubbleBottomCenterTextIcon className="h-5 w-5" />
+                </span>
                 <span className="overflow-wrap ml-2">"{otherComment}"</span>
               </div>
             </div>