From 255c56a0582e12f7d2e86adf72a756401d95b0f0 Mon Sep 17 00:00:00 2001 From: Dennis Kigen Date: Wed, 18 Dec 2024 15:55:42 +0300 Subject: [PATCH] (fix) Standardize modal header close button styles (#1420) Standardizes the positioning and styling of modal close buttons across the application by: - Adding consistent modal header styles across all modals - Positioning close buttons absolutely in the top-right corner - Adding hover state styling for close buttons - Fixing popover positioning for left-aligned modals This change affects modals in: - Appointments app - Bed management app - Patient registration app - Service queues app This resolves an issue that we think is caused by Carbon version mismatches. The hope is that this [pull request](https://github.com/openmrs/openmrs-esm-core/pull/1215) in Core will fix the issue more permanently. --- .../patient-appointments-cancel.modal.tsx | 7 ++++- .../patient-appointments-cancel.scss | 29 ++++++++++++++++++ .../bed-administration-form.component.tsx | 5 ++-- .../bed-tag/bed-tags-admin-form.component.tsx | 3 +- .../bed-type-admin-form.component.tsx | 3 +- .../esm-bed-management-app/src/modals.scss | 29 ++++++++++++++++++ .../src/widgets/cancel-patient-edit.modal.tsx | 2 ++ .../src/widgets/cancel-patient-edit.scss | 29 ++++++++++++++++++ .../delete-identifier-confirmation.modal.tsx | 2 ++ .../delete-identifier-confirmation.scss | 29 ++++++++++++++++++ .../change-status-dialog.component.tsx | 9 +++++- .../active-visits/change-status-dialog.scss | 30 ++++++++++++++++++- .../add-provider-queue-room.component.tsx | 6 +++- .../add-provider-queue-room.scss | 28 +++++++++++++++++ .../clear-queue-entries-dialog.component.tsx | 1 + .../clear-queue-entries-dialog.scss | 29 ++++++++++++++++++ .../queue-entry-actions-modal.scss | 28 +++++++++++++++++ .../queue-entry-actions.modal.tsx | 2 +- .../queue-entry-confirm-action.modal.tsx | 3 +- .../queue-entry-confirm-action.scss | 29 ++++++++++++++++++ .../remove-queue-entry.component.tsx | 7 +++-- .../remove-queue-entry.scss | 29 ++++++++++++++++++ ...ransition-queue-entry-dialog.component.tsx | 2 +- .../transition-queue-entry-dialog.scss | 28 +++++++++++++++++ 24 files changed, 355 insertions(+), 14 deletions(-) create mode 100644 packages/esm-appointments-app/src/patient-appointments/patient-appointments-cancel.scss create mode 100644 packages/esm-bed-management-app/src/modals.scss create mode 100644 packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.scss create mode 100644 packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.scss create mode 100644 packages/esm-service-queues-app/src/queue-table/queue-entry-actions/queue-entry-confirm-action.scss diff --git a/packages/esm-appointments-app/src/patient-appointments/patient-appointments-cancel.modal.tsx b/packages/esm-appointments-app/src/patient-appointments/patient-appointments-cancel.modal.tsx index 725fa9a5f..5028bff34 100644 --- a/packages/esm-appointments-app/src/patient-appointments/patient-appointments-cancel.modal.tsx +++ b/packages/esm-appointments-app/src/patient-appointments/patient-appointments-cancel.modal.tsx @@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'; import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react'; import { showSnackbar } from '@openmrs/esm-framework'; import { changeAppointmentStatus, usePatientAppointments } from './patient-appointments.resource'; +import styles from './patient-appointments-cancel.scss'; interface PatientCancelAppointmentModalProps { closeCancelModal: () => void; @@ -47,7 +48,11 @@ const PatientCancelAppointmentModal: React.FC - +

{t('cancelAppointmentModalConfirmationText', 'Are you sure you want to cancel this appointment?')}

 diff --git a/packages/esm-appointments-app/src/patient-appointments/patient-appointments-cancel.scss b/packages/esm-appointments-app/src/patient-appointments/patient-appointments-cancel.scss new file mode 100644 index 000000000..4e3cc34d3 --- /dev/null +++ b/packages/esm-appointments-app/src/patient-appointments/patient-appointments-cancel.scss @@ -0,0 +1,29 @@ +@use '@carbon/layout'; + +.modalHeader { + :global { + .cds--modal-close-button { + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + margin: 0; + margin-top: calc(-1 * #{layout.$spacing-05}); + } + + .cds--modal-close { + background-color: rgba(0, 0, 0, 0); + + &:hover { + background-color: var(--cds-layer-hover); + } + } + + .cds--popover--left > .cds--popover > .cds--popover-content { + transform: translate(-4rem, 0.85rem); + } + + .cds--popover--left > .cds--popover > .cds--popover-caret { + transform: translate(-3.75rem, 1.25rem); + } + } +} diff --git a/packages/esm-bed-management-app/src/bed-administration/bed-administration-form.component.tsx b/packages/esm-bed-management-app/src/bed-administration/bed-administration-form.component.tsx index 11e6f44eb..e994785dc 100644 --- a/packages/esm-bed-management-app/src/bed-administration/bed-administration-form.component.tsx +++ b/packages/esm-bed-management-app/src/bed-administration/bed-administration-form.component.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from 'react'; +import React, { useState } from 'react'; import capitalize from 'lodash-es/capitalize'; import { z } from 'zod'; import { useForm, Controller } from 'react-hook-form'; @@ -24,6 +24,7 @@ import { useTranslation } from 'react-i18next'; import { getCoreTranslation, type Location } from '@openmrs/esm-framework'; import { type BedAdministrationData } from './bed-administration-types'; import { type BedType, type BedFormData } from '../types'; +import styles from '../modals.scss'; interface BedAdministrationFormProps { allLocations: Location[]; @@ -115,7 +116,7 @@ const BedAdministrationForm: React.FC = ({ return ( // TODO: Port this over to the modal system or create individual modals for each form onModalChange(false)} preventCloseOnClickOutside> - +
diff --git a/packages/esm-bed-management-app/src/bed-tag/bed-tags-admin-form.component.tsx b/packages/esm-bed-management-app/src/bed-tag/bed-tags-admin-form.component.tsx index 3e9cbd94e..21a43a634 100644 --- a/packages/esm-bed-management-app/src/bed-tag/bed-tags-admin-form.component.tsx +++ b/packages/esm-bed-management-app/src/bed-tag/bed-tags-admin-form.component.tsx @@ -17,6 +17,7 @@ import { import { useTranslation } from 'react-i18next'; import { getCoreTranslation, type Location } from '@openmrs/esm-framework'; import type { BedTagData } from '../types'; +import styles from '../modals.scss'; const BedTagAdministrationSchema = z.object({ name: z.string().max(255), @@ -76,7 +77,7 @@ const BedTagsAdministrationForm: React.FC = ({ return ( onModalChange(false)} preventCloseOnClickOutside> - + diff --git a/packages/esm-bed-management-app/src/bed-type/bed-type-admin-form.component.tsx b/packages/esm-bed-management-app/src/bed-type/bed-type-admin-form.component.tsx index 125d95d62..bfe513c40 100644 --- a/packages/esm-bed-management-app/src/bed-type/bed-type-admin-form.component.tsx +++ b/packages/esm-bed-management-app/src/bed-type/bed-type-admin-form.component.tsx @@ -18,6 +18,7 @@ import { import { useTranslation } from 'react-i18next'; import { getCoreTranslation, type Location } from '@openmrs/esm-framework'; import type { BedType, BedTypeData } from '../types'; +import styles from '../modals.scss'; const BedTypeAdministrationSchema = z.object({ name: z.string().max(255), @@ -80,7 +81,7 @@ const BedTypeAdministrationForm: React.FC = ({ return ( onModalChange(false)} preventCloseOnClickOutside> - + diff --git a/packages/esm-bed-management-app/src/modals.scss b/packages/esm-bed-management-app/src/modals.scss new file mode 100644 index 000000000..4e3cc34d3 --- /dev/null +++ b/packages/esm-bed-management-app/src/modals.scss @@ -0,0 +1,29 @@ +@use '@carbon/layout'; + +.modalHeader { + :global { + .cds--modal-close-button { + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + margin: 0; + margin-top: calc(-1 * #{layout.$spacing-05}); + } + + .cds--modal-close { + background-color: rgba(0, 0, 0, 0); + + &:hover { + background-color: var(--cds-layer-hover); + } + } + + .cds--popover--left > .cds--popover > .cds--popover-content { + transform: translate(-4rem, 0.85rem); + } + + .cds--popover--left > .cds--popover > .cds--popover-caret { + transform: translate(-3.75rem, 1.25rem); + } + } +} diff --git a/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.modal.tsx b/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.modal.tsx index 26ffd7b59..603f869a2 100644 --- a/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.modal.tsx +++ b/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.modal.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react'; +import styles from './cancel-patient-edit.scss'; interface CancelPatientEditPropsModal { close(): void; @@ -12,6 +13,7 @@ const CancelPatientEditModal: React.FC = ({ close, return ( <> diff --git a/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.scss b/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.scss new file mode 100644 index 000000000..4e3cc34d3 --- /dev/null +++ b/packages/esm-patient-registration-app/src/widgets/cancel-patient-edit.scss @@ -0,0 +1,29 @@ +@use '@carbon/layout'; + +.modalHeader { + :global { + .cds--modal-close-button { + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + margin: 0; + margin-top: calc(-1 * #{layout.$spacing-05}); + } + + .cds--modal-close { + background-color: rgba(0, 0, 0, 0); + + &:hover { + background-color: var(--cds-layer-hover); + } + } + + .cds--popover--left > .cds--popover > .cds--popover-content { + transform: translate(-4rem, 0.85rem); + } + + .cds--popover--left > .cds--popover > .cds--popover-caret { + transform: translate(-3.75rem, 1.25rem); + } + } +} diff --git a/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.modal.tsx b/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.modal.tsx index f62e89717..08da387c3 100644 --- a/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.modal.tsx +++ b/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.modal.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { Button, ModalBody, ModalHeader, ModalFooter } from '@carbon/react'; +import styles from './delete-identifier-confirmation.scss'; interface DeleteIdentifierConfirmationModalProps { closeModal: () => void; @@ -20,6 +21,7 @@ const DeleteIdentifierConfirmationModal: React.FC diff --git a/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.scss b/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.scss new file mode 100644 index 000000000..4e3cc34d3 --- /dev/null +++ b/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.scss @@ -0,0 +1,29 @@ +@use '@carbon/layout'; + +.modalHeader { + :global { + .cds--modal-close-button { + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + margin: 0; + margin-top: calc(-1 * #{layout.$spacing-05}); + } + + .cds--modal-close { + background-color: rgba(0, 0, 0, 0); + + &:hover { + background-color: var(--cds-layer-hover); + } + } + + .cds--popover--left > .cds--popover > .cds--popover-content { + transform: translate(-4rem, 0.85rem); + } + + .cds--popover--left > .cds--popover > .cds--popover-caret { + transform: translate(-3.75rem, 1.25rem); + } + } +} diff --git a/packages/esm-service-queues-app/src/active-visits/change-status-dialog.component.tsx b/packages/esm-service-queues-app/src/active-visits/change-status-dialog.component.tsx index 6477d75ed..18459efb0 100644 --- a/packages/esm-service-queues-app/src/active-visits/change-status-dialog.component.tsx +++ b/packages/esm-service-queues-app/src/active-visits/change-status-dialog.component.tsx @@ -106,7 +106,13 @@ const ChangeStatus: React.FC = ({ queueEntry, closeModa const onError = (errors) => console.error(errors); if (Object.keys(queueEntry)?.length === 0) { - return ; + return ( + + ); } if (Object.keys(queueEntry)?.length > 0) { @@ -114,6 +120,7 @@ const ChangeStatus: React.FC = ({ queueEntry, closeModa
diff --git a/packages/esm-service-queues-app/src/active-visits/change-status-dialog.scss b/packages/esm-service-queues-app/src/active-visits/change-status-dialog.scss index e1f6e4a25..61a077fa5 100644 --- a/packages/esm-service-queues-app/src/active-visits/change-status-dialog.scss +++ b/packages/esm-service-queues-app/src/active-visits/change-status-dialog.scss @@ -1,6 +1,6 @@ +@use '@carbon/colors'; @use '@carbon/layout'; @use '@carbon/type'; -@use '@carbon/colors'; .radioButtonGroup { display: flex; @@ -45,3 +45,31 @@ section { color: colors.$red-60; @include type.type-style('label-01'); } + +.modalHeader { + :global { + .cds--modal-close-button { + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + margin: 0; + margin-top: calc(-1 * #{layout.$spacing-05}); + } + + .cds--modal-close { + background-color: rgba(0, 0, 0, 0); + + &:hover { + background-color: var(--cds-layer-hover); + } + } + + .cds--popover--left > .cds--popover > .cds--popover-content { + transform: translate(-4rem, 0.85rem); + } + + .cds--popover--left > .cds--popover > .cds--popover-caret { + transform: translate(-3.75rem, 1.25rem); + } + } +} diff --git a/packages/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.component.tsx b/packages/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.component.tsx index 8b3bd0698..eb6e2cd96 100644 --- a/packages/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.component.tsx +++ b/packages/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.component.tsx @@ -140,7 +140,11 @@ const AddProviderQueueRoom: React.FC = ({ closeModal, return (
- +
diff --git a/packages/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.scss b/packages/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.scss index 1b586eeeb..b5340bf1b 100644 --- a/packages/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.scss +++ b/packages/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.scss @@ -2,6 +2,34 @@ @use '@carbon/type'; @use '@openmrs/esm-styleguide/src/vars' as *; +.modalHeader { + :global { + .cds--modal-close-button { + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + margin: 0; + margin-top: calc(-1 * #{layout.$spacing-05}); + } + + .cds--modal-close { + background-color: rgba(0, 0, 0, 0); + + &:hover { + background-color: var(--cds-layer-hover); + } + } + + .cds--popover--left > .cds--popover > .cds--popover-content { + transform: translate(-4rem, 0.85rem); + } + + .cds--popover--left > .cds--popover > .cds--popover-caret { + transform: translate(-3.75rem, 1.25rem); + } + } +} + .section { margin: layout.$spacing-03; } diff --git a/packages/esm-service-queues-app/src/clear-queue-entries-dialog/clear-queue-entries-dialog.component.tsx b/packages/esm-service-queues-app/src/clear-queue-entries-dialog/clear-queue-entries-dialog.component.tsx index 559367bf7..59b463e65 100644 --- a/packages/esm-service-queues-app/src/clear-queue-entries-dialog/clear-queue-entries-dialog.component.tsx +++ b/packages/esm-service-queues-app/src/clear-queue-entries-dialog/clear-queue-entries-dialog.component.tsx @@ -45,6 +45,7 @@ const ClearQueueEntriesDialog: React.FC = ({ queue return (
.cds--popover > .cds--popover-content { + transform: translate(-4rem, 0.85rem); + } + + .cds--popover--left > .cds--popover > .cds--popover-caret { + transform: translate(-3.75rem, 1.25rem); + } + } +} diff --git a/packages/esm-service-queues-app/src/queue-table/queue-entry-actions/queue-entry-actions-modal.scss b/packages/esm-service-queues-app/src/queue-table/queue-entry-actions/queue-entry-actions-modal.scss index ccc6e37d1..c06752371 100644 --- a/packages/esm-service-queues-app/src/queue-table/queue-entry-actions/queue-entry-actions-modal.scss +++ b/packages/esm-service-queues-app/src/queue-table/queue-entry-actions/queue-entry-actions-modal.scss @@ -34,3 +34,31 @@ section { .dateTimeFields { display: flex; } + +.modalHeader { + :global { + .cds--modal-close-button { + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + margin: 0; + margin-top: calc(-1 * #{layout.$spacing-05}); + } + + .cds--modal-close { + background-color: rgba(0, 0, 0, 0); + + &:hover { + background-color: var(--cds-layer-hover); + } + } + + .cds--popover--left > .cds--popover > .cds--popover-content { + transform: translate(-4rem, 0.85rem); + } + + .cds--popover--left > .cds--popover > .cds--popover-caret { + transform: translate(-3.75rem, 1.25rem); + } + } +} diff --git a/packages/esm-service-queues-app/src/queue-table/queue-entry-actions/queue-entry-actions.modal.tsx b/packages/esm-service-queues-app/src/queue-table/queue-entry-actions/queue-entry-actions.modal.tsx index 47cac0227..b540ebc35 100644 --- a/packages/esm-service-queues-app/src/queue-table/queue-entry-actions/queue-entry-actions.modal.tsx +++ b/packages/esm-service-queues-app/src/queue-table/queue-entry-actions/queue-entry-actions.modal.tsx @@ -210,7 +210,7 @@ export const QueueEntryActionModal: React.FC = ({ return ( <> - +
diff --git a/packages/esm-service-queues-app/src/queue-table/queue-entry-actions/queue-entry-confirm-action.modal.tsx b/packages/esm-service-queues-app/src/queue-table/queue-entry-actions/queue-entry-confirm-action.modal.tsx index 3e55028f0..8235d7363 100644 --- a/packages/esm-service-queues-app/src/queue-table/queue-entry-actions/queue-entry-confirm-action.modal.tsx +++ b/packages/esm-service-queues-app/src/queue-table/queue-entry-actions/queue-entry-confirm-action.modal.tsx @@ -4,6 +4,7 @@ import { type QueueEntry } from '../../types'; import { Button, ModalHeader, ModalBody, ModalFooter, Stack } from '@carbon/react'; import { type FetchResponse, showSnackbar } from '@openmrs/esm-framework'; import { useMutateQueueEntries } from '../../hooks/useQueueEntries'; +import styles from './queue-entry-confirm-action.scss'; interface QueueEntryUndoActionsModalProps { queueEntry: QueueEntry; @@ -75,7 +76,7 @@ export const QueueEntryConfirmActionModal: React.FC - +
{queueEntry.display}
diff --git a/packages/esm-service-queues-app/src/queue-table/queue-entry-actions/queue-entry-confirm-action.scss b/packages/esm-service-queues-app/src/queue-table/queue-entry-actions/queue-entry-confirm-action.scss new file mode 100644 index 000000000..4e3cc34d3 --- /dev/null +++ b/packages/esm-service-queues-app/src/queue-table/queue-entry-actions/queue-entry-confirm-action.scss @@ -0,0 +1,29 @@ +@use '@carbon/layout'; + +.modalHeader { + :global { + .cds--modal-close-button { + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + margin: 0; + margin-top: calc(-1 * #{layout.$spacing-05}); + } + + .cds--modal-close { + background-color: rgba(0, 0, 0, 0); + + &:hover { + background-color: var(--cds-layer-hover); + } + } + + .cds--popover--left > .cds--popover > .cds--popover-content { + transform: translate(-4rem, 0.85rem); + } + + .cds--popover--left > .cds--popover > .cds--popover-caret { + transform: translate(-3.75rem, 1.25rem); + } + } +} diff --git a/packages/esm-service-queues-app/src/remove-queue-entry-dialog/remove-queue-entry.component.tsx b/packages/esm-service-queues-app/src/remove-queue-entry-dialog/remove-queue-entry.component.tsx index 1a7b255ce..595e6dd6a 100644 --- a/packages/esm-service-queues-app/src/remove-queue-entry-dialog/remove-queue-entry.component.tsx +++ b/packages/esm-service-queues-app/src/remove-queue-entry-dialog/remove-queue-entry.component.tsx @@ -5,8 +5,8 @@ import { parseDate, showSnackbar, useVisit } from '@openmrs/esm-framework'; import { type MappedQueueEntry } from '../types'; import { startOfDay } from '../constants'; import { useCheckedInAppointments, endQueueEntry } from './remove-queue-entry.resource'; -import styles from './remove-queue-entry.scss'; import { useMutateQueueEntries } from '../hooks/useQueueEntries'; +import styles from './remove-queue-entry.scss'; interface RemoveQueueEntryDialogProps { queueEntry: MappedQueueEntry; @@ -70,8 +70,9 @@ const RemoveQueueEntryDialog: React.FC = ({ queueEn ]); return ( -
+ <> = ({ queueEn {t('endVisit', 'End visit')} -
+ ); }; diff --git a/packages/esm-service-queues-app/src/remove-queue-entry-dialog/remove-queue-entry.scss b/packages/esm-service-queues-app/src/remove-queue-entry-dialog/remove-queue-entry.scss index 7af637105..ae647a8ea 100644 --- a/packages/esm-service-queues-app/src/remove-queue-entry-dialog/remove-queue-entry.scss +++ b/packages/esm-service-queues-app/src/remove-queue-entry-dialog/remove-queue-entry.scss @@ -1,6 +1,35 @@ +@use '@carbon/layout'; @use '@carbon/type'; @use '@openmrs/esm-styleguide/src/vars' as *; +.modalHeader { + :global { + .cds--modal-close-button { + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + margin: 0; + margin-top: calc(-1 * #{layout.$spacing-05}); + } + + .cds--modal-close { + background-color: rgba(0, 0, 0, 0); + + &:hover { + background-color: var(--cds-layer-hover); + } + } + + .cds--popover--left > .cds--popover > .cds--popover-content { + transform: translate(-4rem, 0.85rem); + } + + .cds--popover--left > .cds--popover > .cds--popover-caret { + transform: translate(-3.75rem, 1.25rem); + } + } +} + #subHeading { @include type.type-style('heading-compact-01'); color: $ui-05; diff --git a/packages/esm-service-queues-app/src/transition-queue-entry/transition-queue-entry-dialog.component.tsx b/packages/esm-service-queues-app/src/transition-queue-entry/transition-queue-entry-dialog.component.tsx index 6203f677a..fc9c65a3d 100644 --- a/packages/esm-service-queues-app/src/transition-queue-entry/transition-queue-entry-dialog.component.tsx +++ b/packages/esm-service-queues-app/src/transition-queue-entry/transition-queue-entry-dialog.component.tsx @@ -107,7 +107,7 @@ const TransitionQueueEntryModal: React.FC = ({ c return (
- +
diff --git a/packages/esm-service-queues-app/src/transition-queue-entry/transition-queue-entry-dialog.scss b/packages/esm-service-queues-app/src/transition-queue-entry/transition-queue-entry-dialog.scss index 4e9743ca7..86162c272 100644 --- a/packages/esm-service-queues-app/src/transition-queue-entry/transition-queue-entry-dialog.scss +++ b/packages/esm-service-queues-app/src/transition-queue-entry/transition-queue-entry-dialog.scss @@ -6,6 +6,34 @@ margin-bottom: 0; } +.modalHeader { + :global { + .cds--modal-close-button { + position: absolute; + inset-block-start: 0; + inset-inline-end: 0; + margin: 0; + margin-top: calc(-1 * #{layout.$spacing-05}); + } + + .cds--modal-close { + background-color: rgba(0, 0, 0, 0); + + &:hover { + background-color: var(--cds-layer-hover); + } + } + + .cds--popover--left > .cds--popover > .cds--popover-content { + transform: translate(-4rem, 0.85rem); + } + + .cds--popover--left > .cds--popover > .cds--popover-caret { + transform: translate(-3.75rem, 1.25rem); + } + } +} + .p { margin-bottom: layout.$spacing-02; @include type.type-style('body-01');