Updated feedback confirmation modal styles (#15706)

closes TryGhost/Team#2173

ghost/portal/src/components/pages/FeedbackPage.js

@@ -34,7 +34,7 @@ export const FeedbackPageStyles = `
 
     .gh-portal-confirm-title {
         line-height: inherit;
-        text-align: left;
+        text-align: center;
         box-sizing: border-box;
         margin: 0;
         margin-bottom: .4rem;
@@ -43,44 +43,59 @@ export const FeedbackPageStyles = `
         letter-spacing: -.018em;
     }
 
-    .gh-portal-confirm-description {
+    .gh-portal-confirm-button {
-        font-size: 1.5rem;
+        width: 100%;
-        text-align: left;
+        margin-top: 3.6rem;
-        box-sizing: border-box;
-        margin: 0;
-        line-height: 2.25rem;
-        padding-right: 1.6rem;
-        padding-left: 0;
-        color: rgb(115, 115, 115);
     }
 
-    .gh-portal-confirm-buttons {
+    .gh-feedback-buttons-group {
-        font-size: 1.5rem;
+        display: grid;
-        text-align: left;
+        grid-template-columns: 1fr 1fr;
-        box-sizing: border-box;
+        gap: 16px;
-        margin-top: 4rem;
+        margin-top: 3.6rem;
+    }
+
+    .gh-feedback-button {
+        position: relative;
         display: flex;
         align-items: center;
-        justify-content: flex-start;
+        justify-content: center;
-        gap: 1.6rem;
+        gap: 8px;
-        flex-direction: row;
+        font-size: 1.4rem;
+        line-height: 1.2;
+        font-weight: 700;
+        border: none;
+        border-radius: 22px;
+        padding: 12px 8px;
+        color: #505050;
+        background: none;
+        cursor: pointer;
     }
 
-    .gh-portal-confirm-button-secundary {
+    .gh-feedback-button::before {
-        tab-size: 4;
+        content: '';
-        box-sizing: border-box;
+        position: absolute;
-        line-height: inherit;
+        width: 100%;
-        margin: 0;
+        height: 100%;
-        padding: 0;
+        left: 0;
-        text-transform: none;
+        top: 0;
-        cursor: pointer;
+        border-radius: inherit;
-        -webkit-appearance: button;
+        background: currentColor;
-        background-color: initial;
+        opacity: 0.10;
-        background-image: none;
+    }
-        font-size: 1.4rem;
+
-        font-weight: 500;
+    .gh-feedback-button-selected {
-        color: rgb(115, 115, 115);
+        box-shadow: inset 0 0 0 2px currentColor;
-        border: 0;
+    }
+
+    .gh-feedback-button svg {
+        width: 24px;
+        height: 24px;
+        color: inherit;
+    }
+
+    .gh-feedback-button svg path {
+        stroke-width: 4px;
     }
 `;
 
@@ -112,8 +127,9 @@ function ErrorPage({error}) {
     );
 }
 
-const ConfirmDialog = ({onConfirm, loading, positive}) => {
+const ConfirmDialog = ({onConfirm, loading, initialScore}) => {
     const {onAction, brandColor} = useContext(AppContext);
+    const [score, setScore] = useState(initialScore);
 
     const stopPropagation = (event) => {
         event.stopPropagation();
@@ -125,29 +141,52 @@ const ConfirmDialog = ({onConfirm, loading, positive}) => {
 
     const submit = async (event) => {
         event.stopPropagation();
-
+        await onConfirm(score);
-        await onConfirm();
     };
 
-    const title = positive ? 'You want more posts like this?' : 'You want less posts like this?';
+    const getButtonClassNames = (value) => {
+        const baseClassName = 'gh-feedback-button';
+        return value === score ? `${baseClassName} gh-feedback-button-selected` : baseClassName;
+    };
+
+    const getInlineStyles = (value) => {
+        return value === score ? {color: brandColor} : {};
+    };
 
     return (
         <div className="gh-portal-confirm-dialog" onMouseDown={stopPropagation}>
-            <h1 className="gh-portal-confirm-title">{title}</h1>
+            <h1 className="gh-portal-confirm-title">Give feedback on this post</h1>
-            <p className="gh-portal-confirm-description">Your feedback will be sent to the owner of this site.</p>
-            <div className="gh-portal-confirm-buttons">
-                <ActionButton
-                    retry={false}
-                    onClick = {submit}
-                    disabled={false}
-                    brandColor={brandColor}
-                    label={'Yes!'}
-                    isRunning={loading}
-                    tabindex='3'
-                />
 
-                <button type="button" onClick={close} className="gh-portal-confirm-button-secundary">Cancel</button>
+            <div className="gh-feedback-buttons-group">
+                <button
+                    className={getButtonClassNames(1)}
+                    style={getInlineStyles(1)}
+                    onClick={() => setScore(1)}
+                >
+                    <ThumbUpIcon />
+                    More like this
+                </button>
+
+                <button
+                    className={getButtonClassNames(0)}
+                    style={getInlineStyles(0)}
+                    onClick={() => setScore(0)}
+                >
+                    <ThumbDownIcon />
+                    Less like this
+                </button>
             </div>
+
+            <ActionButton
+                classes="gh-portal-confirm-button"
+                retry={false}
+                onClick={submit}
+                disabled={false}
+                brandColor={brandColor}
+                label="Submit feedback"
+                isRunning={loading}
+                tabindex="3"
+            />
             <CloseButton close={() => close(false)} />
         </div>
     );
@@ -175,7 +214,7 @@ const ConfirmFeedback = ({positive}) => {
         <div className='gh-portal-content gh-portal-feedback'>
             <CloseButton />
 
-            <div class="gh-feedback-icon">
+            <div className="gh-feedback-icon">
                 {icon}
             </div>
             <h1 className="gh-portal-main-title">Thanks for the feedback!</h1>
@@ -197,7 +236,8 @@ const ConfirmFeedback = ({positive}) => {
 
 export default function FeedbackPage() {
     const {site, pageData, member} = useContext(AppContext);
-    const {uuid, postId, score} = pageData;
+    const {uuid, postId, score: initialScore} = pageData;
+    const [score, setScore] = useState(initialScore);
     const positive = score === 1;
 
     const isLoggedIn = !!member;
@@ -206,10 +246,11 @@ export default function FeedbackPage() {
     const [loading, setLoading] = useState(isLoggedIn);
     const [error, setError] = useState(null);
 
-    const doSendFeedback = async () => {
+    const doSendFeedback = async (selectedScore) => {
         setLoading(true);
         try {
-            await sendFeedback({siteUrl: site.url, uuid, postId, score});
+            await sendFeedback({siteUrl: site.url, uuid, postId, score: selectedScore});
+            setScore(selectedScore);
         } catch (e) {
             const text = HumanReadableError.getMessageFromError(e, 'There was a problem submitting your feedback. Please try again or contact the site owner.');
             setError(text);
@@ -217,8 +258,8 @@ export default function FeedbackPage() {
         setLoading(false);
     };
 
-    const onConfirm = async (event) => {
+    const onConfirm = async (selectedScore) => {
-        await doSendFeedback();
+        await doSendFeedback(selectedScore);
         setConfirmed(true);
     };
 
@@ -228,7 +269,7 @@ export default function FeedbackPage() {
     }
 
     if (!confirmed) {
-        return (<ConfirmDialog onConfirm={onConfirm} loading={loading} positive={positive} />);
+        return (<ConfirmDialog onConfirm={onConfirm} loading={loading} initialScore={score} />);
     } else {
         if (loading) {
             return <LoadingFeedbackView action={doSendFeedback} />;