rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: update ConfirmationModal styling for improved layout and responsiveness

Browse source
This commit is contained in:
swve 2025-03-13 14:53:20 +01:00
parent 0229380cba
commit d244ff2076
1 changed files with 7 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

12
apps/web/components/Objects/StyledElements/ConfirmationModal/ConfirmationModal.tsx
View file

@ -38,7 +38,7 @@ const ConfirmationModal = (params: ModalParams) => {
<Dialog.Portal> <Dialog.Portal>
<DialogOverlay /> <DialogOverlay />
<DialogContent> <DialogContent>
<div className="h-26 flex space-x-4 tracking-tight"> <div className="flex space-x-4 tracking-tight">
<div <div
className={`icon p-6 rounded-xl flex items-center align-content-center ${ className={`icon p-6 rounded-xl flex items-center align-content-center ${
params.status === 'warning' ? warningColors : infoColors params.status === 'warning' ? warningColors : infoColors
@ -54,10 +54,10 @@ const ConfirmationModal = (params: ModalParams) => {
<div className="text-xl font-bold text-black"> <div className="text-xl font-bold text-black">
{params.dialogTitle} {params.dialogTitle}
</div> </div>
<div className="text-md text-gray-500 w-60 leading-tight"> <div className="text-md text-gray-500 leading-tight mt-1">
{params.confirmationMessage} {params.confirmationMessage}
</div> </div>
<div className="flex flex-row-reverse pt-2"> <div className="flex flex-row-reverse mt-4">
<div <div
id={params.buttonid} id={params.buttonid}
className={`rounded-md text-sm px-3 py-2 font-bold flex justify-center items-center hover:cursor-pointer ${ className={`rounded-md text-sm px-3 py-2 font-bold flex justify-center items-center hover:cursor-pointer ${
@ -126,11 +126,11 @@ const DialogContent = styled(Dialog.Content, {
transform: 'translate(-50%, -50%)', transform: 'translate(-50%, -50%)',
width: 'auto', width: 'auto',
minWidth: '500px', minWidth: '500px',
overflow: 'hidden', maxWidth: '600px',
overflow: 'visible',
height: 'auto', height: 'auto',
maxHeight: '85vh', maxHeight: '85vh',
maxWidth: '600px', padding: '24px',
padding: 11,
animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`, animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
'&:focus': { outline: 'none' }, '&:focus': { outline: 'none' },