From 0b82e7f9342de6fd6a1bc02027393accdb5639db Mon Sep 17 00:00:00 2001
From: Tin Geber <tin@greenhost.nl>
Date: Thu, 12 Oct 2023 00:33:23 +0200
Subject: [PATCH] styling tweaks to fix modal breakage
---
frontend/src/components/Modal/Modal/Modal.tsx | 121 +++++++++---------
1 file changed, 61 insertions(+), 60 deletions(-)
diff --git a/frontend/src/components/Modal/Modal/Modal.tsx b/frontend/src/components/Modal/Modal/Modal.tsx
index deef0d97..24bd4813 100644
--- a/frontend/src/components/Modal/Modal/Modal.tsx
+++ b/frontend/src/components/Modal/Modal/Modal.tsx
@@ -23,7 +23,24 @@ export const Modal: React.FC<ModalProps> = ({
return (
<Transition.Root show={open} as={Fragment}>
<Dialog as="div" className="fixed z-10 inset-0 overflow-y-auto" initialFocus={cancelButtonRef} onClose={() => {}}>
- <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+ {isLoading && (
+ <Dialog.Overlay className="isloading inset-0 bg-gray-400 z-20 bg-opacity-75 transition-opacity absolute flex justify-center items-center">
+ <svg
+ className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ >
+ <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+ <path
+ className="opacity-75"
+ fill="currentColor"
+ d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+ />
+ </svg>
+ </Dialog.Overlay>
+ )}
+ <div className="pt-4 h-full px-4 pb-20 text-center sm:block sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
@@ -37,9 +54,9 @@ export const Modal: React.FC<ModalProps> = ({
</Transition.Child>
{/* This element is to trick the browser into centering the modal contents. */}
- <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+ {/* <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
​
- </span>
+ </span> */}
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
@@ -49,72 +66,56 @@ export const Modal: React.FC<ModalProps> = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
- <div className="inline-block align-bottom bg-white max-h-screen rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full relative">
- {isLoading && (
- <Dialog.Overlay className="inset-0 bg-gray-400 bg-opacity-75 transition-opacity absolute flex justify-center items-center">
- <svg
- className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
- xmlns="http://www.w3.org/2000/svg"
- fill="none"
- viewBox="0 0 24 24"
- >
- <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
- <path
- className="opacity-75"
- fill="currentColor"
- d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
- />
- </svg>
- </Dialog.Overlay>
- )}
-
- {!useCancelButton && (
- <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:items-center sm:justify-between">
- <div className="flex items-center">
- <img className="rounded-md" width={32} src={img} alt={title} />
- <span className="ml-2 uppercase font-bold">{title}</span>
- </div>
- <button
- type="button"
- className="w-full inline-flex justify-center rounded-md border border-gray-200 p-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
- onClick={onClose}
- ref={cancelButtonRef}
- >
- <XIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
- </button>
- </div>
- )}
-
- <div className="bg-white px-4 p-6 overflow-scroll">{children}</div>
-
- {onSave && (
- <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex absolute bottom-0 w-full">
- <div className="mr-auto sm:flex gap-2">{leftActions}</div>
- <div className="ml-auto sm:flex sm:flex-row-reverse">
+ <div className="w-full h-full flex justify-center items-center">
+ <div className="bg-white h-4/5 overflow-auto flex flex-col rounded-lg text-left shadow-xl transform transition-all sm:max-w-2xl sm:w-full">
+ {!useCancelButton && (
+ <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:items-center sm:justify-between">
+ <div className="flex items-center">
+ <img className="rounded-md" width={32} src={img} alt={title} />
+ <span className="ml-2 uppercase font-bold">{title}</span>
+ </div>
<button
type="button"
- className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm ${
- saveButtonDisabled ? 'opacity-50' : ''
- }`}
- onClick={onSave}
- ref={saveButtonRef}
- disabled={saveButtonDisabled}
+ className="w-full inline-flex justify-center rounded-md border border-gray-200 p-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+ onClick={onClose}
+ ref={cancelButtonRef}
>
- {saveButtonTitle}
+ <XIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</button>
- {useCancelButton && (
+ </div>
+ )}
+
+ <div className="bg-white px-4 p-6 relative overflow-y-auto">{children}</div>
+
+ {onSave && (
+ <div className="bg-gray-50 px-4 py-5 flex flex-shrink-0 w-full">
+ <div className="mr-auto sm:flex gap-2">{leftActions}</div>
+ <div className="ml-auto sm:flex sm:flex-row-reverse">
<button
type="button"
- className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-200 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
- onClick={onClose}
- ref={cancelButtonRef}
+ className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm ${
+ saveButtonDisabled ? 'opacity-50' : ''
+ }`}
+ onClick={onSave}
+ ref={saveButtonRef}
+ disabled={saveButtonDisabled}
>
- {cancelButtonTitle}
+ {saveButtonTitle}
</button>
- )}
+ {useCancelButton && (
+ <button
+ type="button"
+ className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-200 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+ onClick={onClose}
+ ref={cancelButtonRef}
+ >
+ {cancelButtonTitle}
+ </button>
+ )}
+ </div>
</div>
- </div>
- )}
+ )}
+ </div>
</div>
</Transition.Child>
</div>
--
GitLab