From c99685de2cefb2d23e8a7e3b98044a07863547f9 Mon Sep 17 00:00:00 2001 From: James Morris Date: Wed, 9 Nov 2022 10:14:49 +0000 Subject: [PATCH] Toning down the audience feedback error modal refs https://github.com/TryGhost/Team/issues/2234 --- .../src/components/pages/FeedbackPage.js | 18 +++++++++++++----- ghost/portal/src/images/icons/thumbs-error.svg | 4 ++++ 2 files changed, 17 insertions(+), 5 deletions(-) create mode 100644 ghost/portal/src/images/icons/thumbs-error.svg diff --git a/ghost/portal/src/components/pages/FeedbackPage.js b/ghost/portal/src/components/pages/FeedbackPage.js index 39b6281fd6..c1f7893bb6 100644 --- a/ghost/portal/src/components/pages/FeedbackPage.js +++ b/ghost/portal/src/components/pages/FeedbackPage.js @@ -2,7 +2,7 @@ import {useContext, useEffect, useState} from 'react'; import AppContext from '../../AppContext'; import {ReactComponent as ThumbDownIcon} from '../../images/icons/thumbs-down.svg'; import {ReactComponent as ThumbUpIcon} from '../../images/icons/thumbs-up.svg'; -import {ReactComponent as WarningIcon} from '../../images/icons/warning-fill.svg'; +import {ReactComponent as ThumbErrorIcon} from '../../images/icons/thumbs-error.svg'; import setupGhostApi from '../../utils/api'; import {HumanReadableError} from '../../utils/errors'; import ActionButton from '../common/ActionButton'; @@ -26,10 +26,11 @@ export const FeedbackPageStyles = ` .gh-portal-feedback .gh-feedback-icon.gh-feedback-icon-error { color: #f50b23; + width: 96px; } .gh-portal-feedback .gh-portal-text-center { - padding: 15px 0; + padding: 16px 32px 12px; } .gh-portal-confirm-title { @@ -97,6 +98,13 @@ export const FeedbackPageStyles = ` .gh-feedback-button svg path { stroke-width: 4px; } + + @media (max-width: 480px) { + .gh-portal-feedback .gh-portal-text-center { + padding-left: 8px; + padding-right: 8px; + } + } `; function ErrorPage({error}) { @@ -106,9 +114,9 @@ function ErrorPage({error}) {
- +
-

It's not you, it's us

+

Sorry, that didn’t work.

{error}

@@ -252,7 +260,7 @@ export default function FeedbackPage() { 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.'); + const text = HumanReadableError.getMessageFromError(e, 'There was a problem submitting your feedback. Please try again a little later.'); setError(text); } setLoading(false); diff --git a/ghost/portal/src/images/icons/thumbs-error.svg b/ghost/portal/src/images/icons/thumbs-error.svg new file mode 100644 index 0000000000..a02ccd3d55 --- /dev/null +++ b/ghost/portal/src/images/icons/thumbs-error.svg @@ -0,0 +1,4 @@ + + + +