First version of basic reporting modal

refs https://github.com/TryGhost/Team/issues/1685

apps/comments-ui/src/components/modals/GenericDialog.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import {Transition} from '@headlessui/react';
+
+const GenericDialog = (props) => {
+    return (
+        <Transition
+            show={props.show}
+            enter="transition duration-200 linear"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="transition duration-200 linear"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+        >
+            <div className="fixed top-0 left-0 overflow-hidden w-screen h-screen z-[99999999] flex pt-12 justify-center bg-gradient-to-b from-[rgba(0,0,0,0.2)] to-rgba(0,0,0,0.1) backdrop-blur-[2px]" onClick={props.cancel}>
+                <Transition.Child
+                    enter="transition duration-200 delay-150 linear"
+                    enterFrom="translate-y-4 opacity-0"
+                    enterTo="translate-y-0 opacity-100"
+                    leave="transition duration-200 linear"
+                    leaveFrom="translate-y-0 opacity-100"
+                    leaveTo="translate-y-4 opacity-0"
+                >
+                    <div className="bg-white w-[500px] p-8 rounded-xl text-center shadow-modal">
+                        {props.children}
+                    </div>
+                </Transition.Child>
+            </div>
+        </Transition>
+    );
+};
+
+export default GenericDialog;

apps/comments-ui/src/components/modals/NotAuthorContextMenu.js

@@ -1,12 +1,19 @@
-import React, {useContext} from 'react';
+import React, {useState} from 'react';
-import AppContext from '../../AppContext';
+// import React, {useContext, useState} from 'react';
+import ReportDialog from './ReportDialog';
+// import AppContext from '../../AppContext';
 
 const NotAuthorContextMenu = (props) => {
-    const {dispatchAction} = useContext(AppContext);
+    // const {dispatchAction} = useContext(AppContext);
+    let [isOpen, setIsOpen] = useState(false);
 
     const reportComment = (event) => {
-        dispatchAction('reportComment', props.comment);
+        // dispatchAction('reportComment', props.comment);
-        props.close();
+        setIsOpen(true);
+    };
+
+    const closeModal = () => {
+        setIsOpen(false);
     };
 
     return (
@@ -14,6 +21,7 @@ const NotAuthorContextMenu = (props) => {
             <button className="text-[14px]" onClick={reportComment}>
                 Report comment
             </button>
+            <ReportDialog show={isOpen} submit={reportComment} cancel={closeModal} />
         </div>
     );
 };

apps/comments-ui/src/components/modals/ReportDialog.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import GenericDialog from './GenericDialog';
+
+const ReportDialog = (props) => {
+    return (
+        <GenericDialog show={props.show} submit={props.submit} cancel={props.cancel}>
+            <h1 className="font-sans font-bold tracking-tight text-[24px] mb-3">You sure you want to report?</h1>
+            <p className="font-sans text-[1.45rem] text-neutral-500">You request will be sent to the owner of this site.</p>
+            <div className="mt-10">
+                <button className="w-full h-[44px] bg-red-600 px-8 flex items-center justify-center rounded-md text-white font-sans font-semibold text-lg" onClick={props.submit}>Yes</button>
+                <p className="font-sans font-medium text-[1.45rem] text-neutral-500 mt-4 -mb-1">No, <button className="font-sans underline" onClick={props.cancel}>I've changed my mind</button></p>
+            </div>
+        </GenericDialog>
+    );
+};
+
+export default ReportDialog;

apps/comments-ui/tailwind.config.js

@@ -133,6 +133,14 @@ module.exports = {
                 '0px 0px 1px rgba(0, 0, 0, 0.12)', 
                 '0px 13px 20px rgba(0, 0, 0, 0.04)', 
                 '0px 14px 57px rgba(0, 0, 0, 0.06)'
+            ],
+            modal: [
+                '0 3.8px 2.2px rgba(0, 0, 0, 0.028)',
+                '0 9.2px 5.3px rgba(0, 0, 0, 0.04)',
+                '0 17.3px 10px rgba(0, 0, 0, 0.05)',
+                '0 30.8px 17.9px rgba(0, 0, 0, 0.06)',
+                '0 57.7px 33.4px rgba(0, 0, 0, 0.072)',
+                '0 138px 80px rgba(0, 0, 0, 0.1)'
             ]
         },
         animation: {