From d3f2b3aa50b6492702490bbd1619590cdbb6e360 Mon Sep 17 00:00:00 2001
From: Rodrigo Perez <rodrigopi1989@gmail.com>
Date: Fri, 15 May 2020 14:20:10 -0300
Subject: [PATCH] Notifications: Verify email screen from preferences (#324)

* Veriy email screen from preferences

* Padding fix
---
 .../VerifyEmailAddressPreferences.js          | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/components/GlobalPreferences/Notifications/VerifyEmailAddressPreferences.js

diff --git a/src/components/GlobalPreferences/Notifications/VerifyEmailAddressPreferences.js b/src/components/GlobalPreferences/Notifications/VerifyEmailAddressPreferences.js
new file mode 100644
index 00000000..0ff13039
--- /dev/null
+++ b/src/components/GlobalPreferences/Notifications/VerifyEmailAddressPreferences.js
@@ -0,0 +1,64 @@
+import React from 'react'
+import { Button, GU, textStyle, useTheme, useViewport } from '@aragon/ui'
+import emailNotifcationIllustration from '../../../../src/assets/emailNotifications.svg'
+
+const VerifyEmailAddressPreferences = React.memo(
+  function VerifyEmailAddressPreferences({ email, onResend }) {
+    const theme = useTheme()
+    const { below } = useViewport()
+    const compact = below('medium')
+
+    return (
+      <div
+        css={`
+          display: flex;
+          flex-direction: column;
+          text-align: center;
+          align-items: center;
+        `}
+      >
+        <div>
+          <img
+            src={emailNotifcationIllustration}
+            width={181}
+            height={181}
+            alt=""
+          />
+        </div>
+        <h3
+          css={`
+            ${textStyle('title2')};
+            margin-top: ${4 * GU}px;
+          `}
+        >
+          Verify your email address
+        </h3>
+        <span
+          css={`
+            ${textStyle('body2')};
+            color: ${theme.surfaceContentSecondary};
+            margin-top: ${1.5 * GU}px;
+            padding: 0px ${(compact ? 3 : 20) * GU}px;
+          `}
+        >
+          Almost there! We’ve sent a verification email to{' '}
+          <strong>{email}</strong>. Kindly check your inbox and click the link
+          to verify your account.
+        </span>
+
+        <Button
+          css={`
+            margin-top: ${3 * GU}px;
+            width: ${35 * GU}px;
+          `}
+          mode="strong"
+          onClick={onResend}
+        >
+          Resend verification email
+        </Button>
+      </div>
+    )
+  }
+)
+
+export default VerifyEmailAddressPreferences