Change home facility indicator in linked facilities slideover (#7710)

* Change home facility indicator in linked facilitites slideover * Update home facility indicator styling in ManageUsers.tsx
coronasafe · Apr 30, 2024 · e28f92d · e28f92d
1 parent 283d098
commit e28f92d
Showing 1 changed file with 21 additions and 12 deletions.
diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
@@ -465,7 +465,7 @@ export default function ManageUsers() {
         open={expandFacilityList}
         setOpen={setExpandFacilityList}
         slideFrom="right"
-        title={t("facilities")}
+        title={t("linked_facilities")}
         dialogClass="md:w-[400px]"
       >
         <UserFacilities user={selectedUser} />
@@ -728,6 +728,7 @@ export function UserFacilities(props: { user: any }) {
           handleOk={handleUnlinkFacilitySubmit}
         />
       )}
+
       <div className="mb-4 flex items-stretch gap-2">
         <FacilitySelect
           multiple={false}
@@ -749,6 +750,8 @@ export function UserFacilities(props: { user: any }) {
           {t("add")}
         </ButtonV2>
       </div>
+      <hr className="my-2 border-gray-300" />
+
       {isLoading || userFacilitiesLoading ? (
         <div className="flex items-center justify-center">
           <CircularProgress />
@@ -757,13 +760,23 @@ export function UserFacilities(props: { user: any }) {
         <div className="flex flex-col">
           {/* Home Facility section */}
           {user?.home_facility_object && (
-            <div className="mt-2" id="home-facility">
-              <div className="mb-2 ml-2 text-lg font-bold">
-                {t("home_facility")}
-              </div>
+            <div className="py-2" id="home-facility">
               <div className="relative rounded p-2 transition hover:bg-gray-200 focus:bg-gray-200 md:rounded-lg">
-                <div className="flex items-center justify-between">
-                  <span>{user?.home_facility_object?.name}</span>
+                <div className="flex items-center justify-between gap-2">
+                  <div className="flex content-center items-center justify-center gap-2">
+                    <span>{user?.home_facility_object?.name}</span>{" "}
+                    <span
+                      className={
+                        "flex items-center justify-center  rounded-xl bg-green-600 px-2 py-0.5 text-sm font-medium text-white"
+                      }
+                    >
+                      <CareIcon
+                        icon="l-estate"
+                        className="mr-1 pt-[1px] text-lg"
+                      />
+                      Home Facility
+                    </span>
+                  </div>
                   <div className="flex items-center gap-2">
                     <button
                       className="tooltip text-lg text-red-600"
@@ -784,16 +797,12 @@ export function UserFacilities(props: { user: any }) {
                   </div>
                 </div>
               </div>
-              <hr className="my-2 border-gray-300" />
             </div>
           )}
 
           {/* Linked Facilities section */}
           {!!userFacilities?.results.length && (
-            <div className="mt-2" id="linked-facility-list">
-              <div className="mb-2 ml-2 text-lg font-bold">
-                {t("linked_facilities")}
-              </div>
+            <div id="linked-facility-list">
               <div className="flex flex-col">
                 {userFacilities.results.map(
                   (facility: FacilityModel, i: number) => {