Fixing up some things with the modals and mobile and other bits

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

apps/comments-ui/src/components/Form.js

@@ -179,13 +179,15 @@ const Form = (props) => {
             setFormOpen(true);
             editor.commands.focus();
         } else {
-            dispatchAction('openPopup', {
-                type: 'addNameDialog',
-                callback: () => {
-                    setFormOpen(true);
-                    editor.commands.focus();
-                }
-            });
+            if (!props.isEdit) {
+                dispatchAction('openPopup', {
+                    type: 'addNameDialog',
+                    callback: () => {
+                        setFormOpen(true);
+                        editor.commands.focus();
+                    }
+                });
+            }
         }
     };
 

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

@@ -1,5 +1,6 @@
 import React, {useContext, useState, useRef} from 'react';
 import {Transition} from '@headlessui/react';
+import CloseButton from './CloseButton';
 import AppContext from '../../AppContext';
 
 const AddNameDialog = (props) => {
@@ -28,8 +29,8 @@ const AddNameDialog = (props) => {
     const [error, setError] = useState('');
     return (
         <>
-            <h1 className="font-sans font-bold tracking-tight text-[24px] mb-3 text-black">Add context to your comment</h1>
-            <p className="font-sans text-[1.45rem] text-neutral-500 px-8 leading-9">For a healthy discussion, let other members know who you are when commenting.</p>
+            <h1 className="font-sans font-bold tracking-tight text-[24px] mb-3 text-black">Add your name</h1>
+            <p className="font-sans text-[1.45rem] text-neutral-500 px-4 sm:px-8 leading-9">For a healthy discussion, let other members know who you are when commenting.</p>
             <section className="mt-8 text-left">
                 <div className="flex flex-row mb-2 justify-between">
                     <label htmlFor="comments-name" className="font-sans font-medium text-sm">Name</label>
@@ -57,15 +58,22 @@ const AddNameDialog = (props) => {
                     onChange={(e) => {
                         setName(e.target.value);
                     }}
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                            setName(e.target.value);
+                            submit();
+                        }
+                    }}
                     maxLength="64"
                 />
                 <button
-                    className="transition duration-200 ease-linear w-full h-[44px] mt-4 px-8 flex items-center justify-center rounded-md text-white font-sans font-semibold text-[15px] bg-blue-700"
+                    className="transition-opacity duration-200 ease-linear w-full h-[44px] mt-4 px-8 flex items-center justify-center rounded-md text-white font-sans font-semibold text-[15px] bg-[#3204F5] opacity-100 hover:opacity-90"
                     onClick={submit}
                 >
                     Save
                 </button>
             </section>
+            <CloseButton close={close} />
         </>
     );
 };

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import {ReactComponent as CloseIcon} from '../../images/icons/close.svg';
+
+const CloseButton = (props) => {
+    return (
+        <button className="transition-opacity duration-100 ease-out absolute top-[36px] sm:top-10 right-8 sm:right-10 opacity-20 hover:opacity-40" onClick={props.close}>
+            <CloseIcon className="w-[20px] h-[20px]" />
+        </button>
+    );
+};
+
+export default CloseButton;

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

@@ -36,7 +36,7 @@ const GenericDialog = (props) => {
                                 leaveFrom="translate-y-0 opacity-100"
                                 leaveTo="translate-y-4 opacity-0"
                             >
-                                <div className="bg-white w-screen sm:w-[500px] h-screen sm:h-auto p-8 rounded-none sm:rounded-xl text-center shadow-modal" onClick={stopPropagation}>
+                                <div className="relative bg-white w-screen sm:w-[500px] h-screen sm:h-auto p-[28px] sm:p-8 rounded-none sm:rounded-xl text-center shadow-modal" onClick={stopPropagation}>
                                     {props.children}
                                 </div>
                             </Transition.Child>

apps/comments-ui/src/images/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="gh-portal-closeicon" alt="Close"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2px !important;}</style></defs><path class="a" d="M.75 23.249l22.5-22.5M23.25 23.249L.75.749"></path></svg>