From a15d05be86c989f57e8c6214a28ff96a49e8aea3 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@richelsen.net>
Date: Sun, 15 Aug 2021 13:10:01 +0200
Subject: [PATCH] tried fixing the layout of new CalDav integration

---
 pages/integrations/index.tsx | 58 ++++++++++++------------------------
 1 file changed, 19 insertions(+), 39 deletions(-)

diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx
index 9b6f634526..ef9cde377b 100644
--- a/pages/integrations/index.tsx
+++ b/pages/integrations/index.tsx
@@ -236,45 +236,25 @@ export default function Home({ integrations }: Props) {
     return (
       <Dialog open={isOpen}>
         <DialogContent>
-          <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-            <div
-              className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
-              aria-hidden="true"></div>
-            <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
-              &#8203;
-            </span>
-            <div className="inline-block align-bottom bg-white rounded-sm px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
-              <div className="sm:flex sm:items-start">
-                <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-neutral-100 sm:mx-0 sm:h-10 sm:w-10">
-                  <PlusIcon className="h-6 w-6 text-neutral-900" />
-                </div>
-                <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                  <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
-                    Connect to CalDav Server
-                  </h3>
-                  <div>
-                    <p className="text-sm text-gray-400">Your credentials will be stored and encrypted.</p>
-                  </div>
-                </div>
-              </div>
-              <div className="my-4">
-                <AddCalDavIntegration
-                  ref={addCalDavIntegrationRef}
-                  onSubmit={handleAddCalDavIntegrationSaveButtonPress}
-                />
-              </div>
-
-              <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                <button
-                  onClick={onSubmit}
-                  className="flex justify-center py-2 px-4 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900">
-                  Save
-                </button>
-                <DialogClose as="button" className="btn btn-white mx-2">
-                  Cancel
-                </DialogClose>
-              </div>
-            </div>
+          <DialogHeader
+            title="Connect to CalDav Server"
+            subtitle="Your credentials will be stored and encrypted."
+          />
+          <div className="my-4">
+            <AddCalDavIntegration
+              ref={addCalDavIntegrationRef}
+              onSubmit={handleAddCalDavIntegrationSaveButtonPress}
+            />
+          </div>
+          <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+            <button
+              onClick={onSubmit}
+              className="flex justify-center py-2 px-4 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900">
+              Save
+            </button>
+            <DialogClose as="button" className="btn btn-white mx-2">
+              Cancel
+            </DialogClose>
           </div>
         </DialogContent>
       </Dialog>