Made Bed No. Badges Consistent (#3490)

* Made bed badges consistent * made the text fit inside the box
coronasafe · Sep 8, 2022 · d0c6406 · d0c6406
1 parent 623b57f
commit d0c6406
Showing 1 changed file with 22 additions and 6 deletions.
diff --git a/src/Components/TeleIcu/Patient/InfoCard.tsx b/src/Components/TeleIcu/Patient/InfoCard.tsx
@@ -46,13 +46,29 @@ export default function TeleICUPatientInfoCard(props: {
       <div className="bg-white px-4 py-2 lg:p-6 flex flex-col lg:flex-row lg:w-7/12 w-full">
         {/* Can support for patient picture in the future */}
         <div className="mt-2 flex flex-col items-center">
-          <div className="w-24 h-24 rounded-2xl bg-primary-100 text-5xl flex justify-center items-center">
-            {!patient.last_consultation?.current_bed ? (
-              <i className="fas fa-user-injured text-primary-600"></i>
+          <div className="w-24 h-24 min-w-[5rem] bg-gray-200 rounded border border-gray-500 overflow-">
+            {patient?.last_consultation &&
+            patient?.last_consultation?.current_bed ? (
+              <div
+                className="flex flex-col items-center justify-center h-full"
+                title={`
+                ${patient?.last_consultation?.current_bed?.bed_object?.location_object?.name}\n${patient?.last_consultation?.current_bed?.bed_object.name}
+              `}
+              >
+                <p className="overflow-hidden px-2 whitespace-nowrap w-full text-gray-900 text-sm text-center text-ellipsis ">
+                  {
+                    patient?.last_consultation?.current_bed?.bed_object
+                      ?.location_object?.name
+                  }
+                </p>
+                <p className="w-full text-base px-2 text-ellipsis overflow-hidden whitespace-nowrap font-bold text-center">
+                  {patient?.last_consultation?.current_bed?.bed_object.name}
+                </p>
+              </div>
             ) : (
-              <span className="text-base text-primary-600 font-semibold whitespace-normal leading-tight">
-                {patient.last_consultation?.current_bed?.bed_object?.name}
-              </span>
+              <div className="flex items-center justify-center h-full">
+                <i className="fas fa-user-injured text-3xl text-gray-500"></i>
+              </div>
             )}
           </div>
           <button