Skip to content

Commit

Permalink
Aligned buttons to right (ohcnetwork#6573)
Browse files Browse the repository at this point in the history
* aligned buttons to right

* fixed merge conflict

* added pading
  • Loading branch information
konavivekramakrishna authored Nov 21, 2023
1 parent 735fb5f commit 11da461
Showing 1 changed file with 93 additions and 93 deletions.
186 changes: 93 additions & 93 deletions src/Components/Facility/FacilityCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 11da461

Please sign in to comment.