From 11da46137e66b9e6a491fc3f3de909711aba6709 Mon Sep 17 00:00:00 2001
From: konavivekramakrishna
 <101407963+konavivekramakrishna@users.noreply.github.com>
Date: Tue, 21 Nov 2023 17:10:45 +0530
Subject: [PATCH] Aligned buttons to right (#6573)

* aligned buttons to right

* fixed merge conflict

* added pading
---
 src/Components/Facility/FacilityCard.tsx | 186 +++++++++++------------
 1 file changed, 93 insertions(+), 93 deletions(-)

diff --git a/src/Components/Facility/FacilityCard.tsx b/src/Components/Facility/FacilityCard.tsx
index ab37ac20c96..e8e0dbef70f 100644
--- a/src/Components/Facility/FacilityCard.tsx
+++ b/src/Components/Facility/FacilityCard.tsx
@@ -157,109 +157,109 @@ export const FacilityCard = (props: { facility: any; userType: any }) => {
                 </div>
               </div>
               <div className="flex flex-wrap border-t bg-gray-50 px-2 py-1 md:px-3">
-                <div className="flex justify-between py-2">
-                  <div className="flex w-full flex-wrap justify-between gap-2">
-                    <div className="flex flex-wrap gap-2">
-                      <div
-                        className={`tooltip ml-auto flex h-[38px] w-fit items-center justify-center rounded-md px-2 text-xl ${
+                {/* <div className="flex justify-between py-2"> */}
+                <div className="flex w-full flex-wrap justify-between gap-2 py-2">
+                  <div className="flex flex-wrap gap-2">
+                    <div
+                      className={`tooltip ml-auto flex h-[38px] w-fit items-center justify-center rounded-md px-2 text-xl ${
+                        facility.patient_count / facility.bed_count > 0.85
+                          ? "button-danger-border bg-red-500"
+                          : "button-primary-border bg-primary-100"
+                      }`}
+                    >
+                      <span className="tooltip-text tooltip-top">
+                        Live Patients / Total beds
+                      </span>{" "}
+                      <CareIcon
+                        className={classNames(
+                          "care-l-bed mr-2",
+                          facility.patient_count / facility.bed_count > 0.85
+                            ? "text-white"
+                            : "text-primary-600"
+                        )}
+                      />{" "}
+                      <dt
+                        className={`my-1 text-sm font-semibold ${
                           facility.patient_count / facility.bed_count > 0.85
-                            ? "button-danger-border bg-red-500"
-                            : "button-primary-border bg-primary-100"
+                            ? "text-white"
+                            : "text-gray-700"
                         }`}
                       >
-                        <span className="tooltip-text tooltip-top">
-                          Live Patients / Total beds
-                        </span>{" "}
-                        <CareIcon
-                          className={classNames(
-                            "care-l-bed mr-2",
-                            facility.patient_count / facility.bed_count > 0.85
-                              ? "text-white"
-                              : "text-primary-600"
-                          )}
-                        />{" "}
-                        <dt
-                          className={`my-1 text-sm font-semibold ${
-                            facility.patient_count / facility.bed_count > 0.85
-                              ? "text-white"
-                              : "text-gray-700"
-                          }`}
-                        >
-                          Occupancy: {facility.patient_count} /{" "}
-                          {facility.bed_count}{" "}
-                        </dt>{" "}
-                      </div>
-                      <DialogModal
-                        show={notifyModalFor === facility.id}
-                        title={
-                          <span className="flex justify-center text-2xl">
-                            Notify: {facility.name}
-                          </span>
-                        }
-                        onClose={() => setNotifyModalFor(undefined)}
+                        Occupancy: {facility.patient_count} /{" "}
+                        {facility.bed_count}{" "}
+                      </dt>{" "}
+                    </div>
+                    <DialogModal
+                      show={notifyModalFor === facility.id}
+                      title={
+                        <span className="flex justify-center text-2xl">
+                          Notify: {facility.name}
+                        </span>
+                      }
+                      onClose={() => setNotifyModalFor(undefined)}
+                    >
+                      <form
+                        onSubmit={(event) => {
+                          event.preventDefault();
+                          handleNotifySubmit(notifyModalFor);
+                        }}
+                        className="flex w-full flex-col bg-white text-center"
                       >
-                        <form
-                          onSubmit={(event) => {
-                            event.preventDefault();
-                            handleNotifySubmit(notifyModalFor);
-                          }}
-                          className="flex w-full flex-col bg-white text-center"
-                        >
-                          <TextAreaFormField
-                            id="NotifyModalMessageInput"
-                            name="message"
-                            rows={5}
-                            className="pb-2 pt-4"
-                            onChange={(e) => setNotifyMessage(e.value)}
-                            placeholder="Type your message..."
-                            error={notifyError}
+                        <TextAreaFormField
+                          id="NotifyModalMessageInput"
+                          name="message"
+                          rows={5}
+                          className="pb-2 pt-4"
+                          onChange={(e) => setNotifyMessage(e.value)}
+                          placeholder="Type your message..."
+                          error={notifyError}
+                        />
+                        <div className="flex flex-col-reverse justify-between gap-2 md:flex-row">
+                          <Cancel
+                            onClick={() => setNotifyModalFor(undefined)}
                           />
-                          <div className="flex flex-col-reverse justify-between gap-2 md:flex-row">
-                            <Cancel
-                              onClick={() => setNotifyModalFor(undefined)}
-                            />
-                            <Submit label="Notify" />
-                          </div>
-                        </form>
-                      </DialogModal>
-                    </div>
-                    <div className="flex flex-wrap gap-2">
-                      {userType !== "Staff" ? (
-                        <ButtonV2
-                          id="facility-notify"
-                          ghost
-                          border
-                          className="h-[38px]"
-                          onClick={(_) => setNotifyModalFor(facility.id)}
-                        >
-                          <CareIcon className="care-l-megaphone text-lg" />
-                          <span className="hidden md:block">Notify</span>
-                        </ButtonV2>
-                      ) : (
-                        <></>
-                      )}
+                          <Submit label="Notify" />
+                        </div>
+                      </form>
+                    </DialogModal>
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    {userType !== "Staff" ? (
                       <ButtonV2
-                        href={`/facility/${facility.id}`}
-                        id="facility-details"
-                        border
+                        id="facility-notify"
                         ghost
-                        className="h-[38px]"
-                      >
-                        <CareIcon className="care-l-hospital text-lg" />
-                        <span className="hidden md:inline">
-                          {t("view_faciliy")}
-                        </span>
-                      </ButtonV2>
-                      <ButtonV2
-                        href={`/patients?facility=${facility.id}`}
-                        id="facility-patients"
                         border
-                        ghost
+                        className="h-[38px]"
+                        onClick={(_) => setNotifyModalFor(facility.id)}
                       >
-                        <CareIcon className="care-l-user-injured text-lg" />
-                        {t("view_patients")}
+                        <CareIcon className="care-l-megaphone text-lg" />
+                        <span className="hidden md:block">Notify</span>
                       </ButtonV2>
-                    </div>
+                    ) : (
+                      <></>
+                    )}
+                    <ButtonV2
+                      href={`/facility/${facility.id}`}
+                      id="facility-details"
+                      border
+                      ghost
+                      className="h-[38px]"
+                    >
+                      <CareIcon className="care-l-hospital text-lg" />
+                      <span className="hidden md:inline">
+                        {t("view_faciliy")}
+                      </span>
+                    </ButtonV2>
+                    <ButtonV2
+                      href={`/patients?facility=${facility.id}`}
+                      id="facility-patients"
+                      border
+                      ghost
+                    >
+                      <CareIcon className="care-l-user-injured text-lg" />
+                      {t("view_patients")}
+                    </ButtonV2>
+                    {/* </div> */}
                   </div>
                 </div>
               </div>