From afe18d54de39b775edbf355b369d3a0f00146d3a Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Fri, 9 Jun 2023 11:35:36 +0200
Subject: [PATCH] Added email icon to signup form success page

Refs https://www.notion.so/ghost/Embed-testing-0193905e46d449b5ad865f7364176814?pvs=4#de29f9cc1a364a12a4a0eeebef68f3a4
---
 ghost/signup-form/assets/icons/email.svg               | 1 +
 ghost/signup-form/src/components/pages/SuccessPage.tsx | 4 +---
 ghost/signup-form/src/components/pages/SuccessView.tsx | 7 +++----
 3 files changed, 5 insertions(+), 7 deletions(-)
 create mode 100644 ghost/signup-form/assets/icons/email.svg

diff --git a/ghost/signup-form/assets/icons/email.svg b/ghost/signup-form/assets/icons/email.svg
new file mode 100644
index 0000000000..f09e4ffb74
--- /dev/null
+++ b/ghost/signup-form/assets/icons/email.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1px;}</style></defs><rect class="a" x="0.75" y="4.5" width="22.5" height="15" rx="1.5" ry="1.5"/><line class="a" x1="15.687" y1="9.975" x2="19.5" y2="13.5"/><line class="a" x1="8.313" y1="9.975" x2="4.5" y2="13.5"/><path class="a" d="M22.88,5.014l-9.513,6.56a2.406,2.406,0,0,1-2.734,0L1.12,5.014"/></svg>
\ No newline at end of file
diff --git a/ghost/signup-form/src/components/pages/SuccessPage.tsx b/ghost/signup-form/src/components/pages/SuccessPage.tsx
index 0b03b3d144..39a7b93122 100644
--- a/ghost/signup-form/src/components/pages/SuccessPage.tsx
+++ b/ghost/signup-form/src/components/pages/SuccessPage.tsx
@@ -12,7 +12,5 @@ export const SuccessPage: React.FC<SuccessPageProps> = ({email}) => {
     return <SuccessView
         backgroundColor={options.backgroundColor}
         email={email}
-        icon={options.icon}
-        textColor={options.textColor}
-        title={options.title} />;
+        textColor={options.textColor} />;
 };
diff --git a/ghost/signup-form/src/components/pages/SuccessView.tsx b/ghost/signup-form/src/components/pages/SuccessView.tsx
index e14951729d..84e4e9fc08 100644
--- a/ghost/signup-form/src/components/pages/SuccessView.tsx
+++ b/ghost/signup-form/src/components/pages/SuccessView.tsx
@@ -1,13 +1,12 @@
 import React from 'react';
+import {ReactComponent as EmailIcon} from '../../../assets/icons/email.svg';
 import {useAppContext} from '../../AppContext';
 
 export const SuccessView: React.FC<{
     email: string;
-    title?: string;
-    icon?: string;
     backgroundColor?: string;
     textColor?: string;
-}> = ({title, icon, backgroundColor, textColor}) => {
+}> = ({backgroundColor, textColor}) => {
     const {t} = useAppContext();
     return (
         <div
@@ -15,7 +14,7 @@ export const SuccessView: React.FC<{
             data-testid="success-page"
             style={{backgroundColor, color: textColor}}
         >
-            {icon && <img alt={title} className='mb-2 h-[64px] w-auto' src={icon}/>}
+            <EmailIcon className='my-3 w-8' />
             <h1 className='text-center text-lg font-bold sm:text-xl md:text-2xl lg:text-3xl'>{t(`Now check your email!`)}</h1>
             <p className='mb-4 max-w-[600px] text-center sm:mb-[4.1rem]'>{t(`To complete signup, click the confirmation link in your inbox. If it doesn't arrive within 3 minutes, check your spam folder!`)}</p>
         </div>