Toning down the audience feedback error modal

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

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}) {
         <div className='gh-portal-content gh-portal-feedback with-footer'>
             <CloseButton />
             <div class="gh-feedback-icon gh-feedback-icon-error">
-                <WarningIcon />
+                <ThumbErrorIcon />
             </div>
-            <h1 className="gh-portal-main-title">It's not you, it's us</h1>
+            <h1 className="gh-portal-main-title">Sorry, that didn’t work.</h1>
             <div>
                 <p className="gh-portal-text-center">{error}</p>
             </div>
@@ -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);

ghost/portal/src/images/icons/thumbs-error.svg

@@ -0,0 +1,4 @@
+<svg width="96" height="56" viewBox="0 0 96 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.00004 34.973C9.66499 35.3085 10.3322 35.6418 11.0017 35.9729C23.3405 42.0995 22.7366 40.9062 33.3011 40.9062C37.7115 40.9062 39.954 38.0862 41.2567 33.9563V33.9296L44.4627 23.4164V23.3964C44.6151 22.9038 44.6477 22.3828 44.5578 21.8756C44.4679 21.3683 44.2581 20.8888 43.9453 20.4757C43.6324 20.0626 43.2253 19.7275 42.7565 19.4972C42.2878 19.2669 41.7706 19.1479 41.2466 19.1498H33.0026C32.489 19.1484 31.9825 19.0325 31.5211 18.8108C31.0598 18.5891 30.6558 18.2673 30.3394 17.8698C30.025 17.4718 29.8084 17.0078 29.7066 16.5141C29.6048 16.0203 29.6205 15.51 29.7525 15.0232L31.235 9.5266C31.3503 9.09972 31.3609 8.65208 31.2659 8.2204C31.171 7.78873 30.9732 7.38533 30.6888 7.0433C30.4078 6.70494 30.0511 6.43489 29.6465 6.2542C29.2418 6.07351 28.8002 5.98706 28.3559 6.00157C27.9117 6.01609 27.4769 6.13118 27.0854 6.33789C26.6938 6.5446 26.3562 6.83734 26.0987 7.19329L17.8784 19.6098C17.5652 20.0388 17.1527 20.3885 16.6749 20.6301C16.1971 20.8718 15.6678 20.9985 15.1304 20.9998H9.00004M9 17.6666L9 40.9997" stroke="black" stroke-width="2.85" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M86.2148 20.027C85.5499 19.6915 84.8826 19.3582 84.2132 19.0271C71.8743 12.9005 72.4782 14.0938 61.9137 14.0938C57.5034 14.0938 55.2609 16.9138 53.9581 21.0437V21.0704L50.7521 31.5836V31.6036C50.5997 32.0962 50.5672 32.6172 50.657 33.1244C50.7469 33.6317 50.9567 34.1112 51.2695 34.5243C51.5824 34.9374 51.9896 35.2725 52.4583 35.5028C52.927 35.7331 53.4442 35.8521 53.9683 35.8502H62.2123C62.7258 35.8516 63.2324 35.9675 63.6937 36.1892C64.155 36.4109 64.5591 36.7327 64.8754 37.1302C65.1899 37.5282 65.4064 37.9922 65.5082 38.4859C65.61 38.9797 65.5943 39.49 65.4624 39.9768L63.9798 45.4734C63.8646 45.9003 63.854 46.3479 63.9489 46.7796C64.0439 47.2113 64.2416 47.6147 64.526 47.9567C64.807 48.2951 65.1637 48.5651 65.5684 48.7458C65.973 48.9265 66.4147 49.0129 66.8589 48.9984C67.3031 48.9839 67.7379 48.8688 68.1295 48.6621C68.521 48.4554 68.8587 48.1627 69.1162 47.8067L77.3364 35.3902C77.6497 34.9612 78.0622 34.6115 78.5399 34.3699C79.0177 34.1282 79.547 34.0015 80.0844 34.0002H86.2148M86.2148 37.3334V14.0003" stroke="black" stroke-width="2.85" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>