From cb2ece1236a110f07bd65f4a61ba040ead3ea1d6 Mon Sep 17 00:00:00 2001
From: thecodrr <thecodrr@protonmail.com>
Date: Thu, 29 Jul 2021 14:38:28 +0500
Subject: [PATCH] feat: improve email confirmed ui

---
 apps/web/public/fonts.css              |  25 ++-
 apps/web/public/index.html             |   2 +-
 apps/web/src/components/icons/index.js |  22 ++-
 apps/web/src/views/email-confirmed.js  | 214 ++++++++++++++++++-------
 4 files changed, 186 insertions(+), 77 deletions(-)

diff --git a/apps/web/public/fonts.css b/apps/web/public/fonts.css
index 87c2bcef6..ed043415c 100644
--- a/apps/web/public/fonts.css
+++ b/apps/web/public/fonts.css
@@ -5,9 +5,9 @@
   font-style: normal;
   font-weight: 400;
   src: local(""),
-    url("./fonts/open-sans-v20-latin-regular.woff2") format("woff2"),
+    url("/fonts/open-sans-v20-latin-regular.woff2") format("woff2"),
     /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url("./fonts/open-sans-v20-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+      url("/fonts/open-sans-v20-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 /* open-sans-italic - latin */
@@ -16,10 +16,9 @@
   font-display: swap;
   font-style: italic;
   font-weight: 400;
-  src: local(""),
-    url("./fonts/open-sans-v20-latin-italic.woff2") format("woff2"),
+  src: local(""), url("/fonts/open-sans-v20-latin-italic.woff2") format("woff2"),
     /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url("./fonts/open-sans-v20-latin-italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+      url("/fonts/open-sans-v20-latin-italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 /* open-sans-600 - latin */
@@ -28,9 +27,9 @@
   font-display: swap;
   font-style: normal;
   font-weight: 600;
-  src: local(""), url("./fonts/open-sans-v20-latin-600.woff2") format("woff2"),
+  src: local(""), url("/fonts/open-sans-v20-latin-600.woff2") format("woff2"),
     /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url("./fonts/open-sans-v20-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+      url("/fonts/open-sans-v20-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 /* open-sans-600italic - latin */
@@ -40,9 +39,9 @@
   font-style: italic;
   font-weight: 600;
   src: local(""),
-    url("./fonts/open-sans-v20-latin-600italic.woff2") format("woff2"),
+    url("/fonts/open-sans-v20-latin-600italic.woff2") format("woff2"),
     /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url("./fonts/open-sans-v20-latin-600italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+      url("/fonts/open-sans-v20-latin-600italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 /* open-sans-700 - latin */
@@ -51,9 +50,9 @@
   font-display: swap;
   font-style: normal;
   font-weight: 700;
-  src: local(""), url("./fonts/open-sans-v20-latin-700.woff2") format("woff2"),
+  src: local(""), url("/fonts/open-sans-v20-latin-700.woff2") format("woff2"),
     /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url("./fonts/open-sans-v20-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+      url("/fonts/open-sans-v20-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
 /* open-sans-700italic - latin */
@@ -63,7 +62,7 @@
   font-style: italic;
   font-weight: 700;
   src: local(""),
-    url("./fonts/open-sans-v20-latin-700italic.woff2") format("woff2"),
+    url("/fonts/open-sans-v20-latin-700italic.woff2") format("woff2"),
     /* Chrome 26+, Opera 23+, Firefox 39+ */
-      url("./fonts/open-sans-v20-latin-700italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+      url("/fonts/open-sans-v20-latin-700italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
diff --git a/apps/web/public/index.html b/apps/web/public/index.html
index 591022012..bbb3b7f1f 100644
--- a/apps/web/public/index.html
+++ b/apps/web/public/index.html
@@ -97,7 +97,7 @@
         background-color: #f7f7f7;
       }
     </style>
-    <link rel="stylesheet" href="./fonts.css" />
+    <link rel="stylesheet" href="/fonts.css" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/apps/web/src/components/icons/index.js b/apps/web/src/components/icons/index.js
index bcf8ba3d9..6d0fc0369 100644
--- a/apps/web/src/components/icons/index.js
+++ b/apps/web/src/components/icons/index.js
@@ -1,9 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
 import MDIIcon from "@mdi/react";
 import * as Icons from "@mdi/js";
 import { useTheme } from "emotion-theming";
 import Animated from "../animated";
-//import useMobile from "../../utils/use-mobile";
 
 function Icon({ title, name, size = 24, color = "icon", stroke, rotate }) {
   const theme = useTheme();
@@ -24,6 +23,7 @@ function Icon({ title, name, size = 24, color = "icon", stroke, rotate }) {
 
 function createIcon(name, rotate = false) {
   return function (props) {
+    const [isHovering, setIsHovering] = useState();
     return (
       <Animated.Flex
         id={props.id}
@@ -37,8 +37,18 @@ function createIcon(name, rotate = false) {
         sx={props.sx}
         justifyContent="center"
         alignItems="center"
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => setIsHovering(false)}
       >
-        <Icon title={props.title} name={name} rotate={rotate} {...props} />
+        <Icon
+          title={props.title}
+          name={name}
+          rotate={rotate}
+          color={
+            props.hoverColor && isHovering ? props.hoverColor : props.color
+          }
+          {...props}
+        />
       </Animated.Flex>
     );
   };
@@ -161,3 +171,9 @@ export const Destruct = createIcon(Icons.mdiBomb);
 
 export const CompactView = createIcon(Icons.mdiViewHeadline);
 export const DetailedView = createIcon(Icons.mdiViewSequentialOutline);
+
+export const MailCheck = createIcon(Icons.mdiEmailCheckOutline);
+
+export const Discord = createIcon(Icons.mdiDiscord);
+export const Twitter = createIcon(Icons.mdiTwitter);
+export const Reddit = createIcon(Icons.mdiReddit);
diff --git a/apps/web/src/views/email-confirmed.js b/apps/web/src/views/email-confirmed.js
index 5b8d46ecc..0787f3eb9 100644
--- a/apps/web/src/views/email-confirmed.js
+++ b/apps/web/src/views/email-confirmed.js
@@ -1,8 +1,10 @@
 import { useEffect } from "react";
-import { Button, Flex, Text } from "rebass";
+import { Flex, Text } from "rebass";
 import ThemeProvider from "../components/theme-provider";
 import { trackEvent } from "../utils/analytics";
 import { useQueryParams } from "../navigation";
+import * as Icon from "../components/icons";
+import openLink from "../commands/openLink";
 
 function EmailConfirmed() {
   const [{ userId }] = useQueryParams();
@@ -13,43 +15,68 @@ function EmailConfirmed() {
   return (
     <ThemeProvider>
       <Flex
-        flexDirection="column"
         bg="background"
-        height="100%"
-        alignItems="center"
+        height={"100%"}
+        justifyContent={["start", "start", "space-evenly"]}
         overflowY="auto"
+        flexDirection={["column", "column", "row"]}
+        fontSize={[16, 16, 18]}
       >
-        <Flex flex={1} justifyContent="center" alignItems="center">
-          <Flex
-            maxWidth={["95%", "400px", "400px"]}
-            flexDirection="column"
-            sx={{
-              borderRadius: "default",
-              border: "1px solid",
-              borderTop: "none",
-              borderColor: "primary",
-            }}
+        <Flex
+          flexDirection="column"
+          justifyContent="center"
+          alignItems="center"
+          flex={1}
+          sx={{ flexShrink: 0 }}
+          py={[50, 50, 0]}
+          px={[2, 2, 0]}
+        >
+          <Icon.MailCheck
+            sx={{ bg: "shade", borderRadius: 100, p: 5 }}
+            size={72}
+            color="primary"
+          />
+          <Text
+            textAlign="center"
+            variant="heading"
+            fontWeight="heading"
+            fontSize="2.5em"
+            mt={5}
           >
-            <Text
-              variant="heading"
-              fontSize={32}
-              bg="primary"
-              textAlign="center"
-              color="static"
-              py={20}
-              sx={{
-                borderRadius: "default",
-                borderBottomLeftRadius: "0px",
-                borderBottomRightRadius: "0px",
-              }}
-            >
-              <Text variant="title" color="static" textAlign="center">
-                Notesnook
-              </Text>
-              Email confirmed
-            </Text>
-            <BlogPromoBanner link="https://blog.notesnook.com/why-another-note-taking-app/" />
-          </Flex>
+            Huzzah!
+          </Text>
+          <Text
+            textAlign="center"
+            variant="heading"
+            fontWeight="bold"
+            fontSize="1.5em"
+            color="icon"
+            mt={2}
+          >
+            Your account has been verified.
+          </Text>
+          <Text
+            textAlign="center"
+            variant="body"
+            fontSize="1.2em"
+            color="fontTertiary"
+            mt={2}
+            sx={{ wordWrap: "break-word" }}
+            mx={[2, 2, 100]}
+          >
+            Enjoy 14 days of Notesnook Pro completely free.
+          </Text>
+        </Flex>
+        <Flex
+          flexDirection="column"
+          bg="bgSecondary"
+          justifyContent="center"
+          p={5}
+          py={[50, 50, 5]}
+          flex={1}
+          sx={{ flexGrow: 0 }}
+        >
+          <BlogPromoBanner link="https://blog.notesnook.com/why-another-note-taking-app/" />
         </Flex>
       </Flex>
     </ThemeProvider>
@@ -57,36 +84,103 @@ function EmailConfirmed() {
 }
 export default EmailConfirmed;
 
+const social = [
+  {
+    title: "Discord",
+    hoverColor: "#7289da",
+    icon: Icon.Discord,
+    link: "https://discord.com/invite/zQBK97EE22",
+  },
+  {
+    title: "Twitter",
+    hoverColor: "#1da1f2",
+    icon: Icon.Twitter,
+    link: "https://twitter.com/notesnook",
+  },
+  {
+    title: "Reddit",
+    hoverColor: "#ff4500",
+    icon: Icon.Reddit,
+    link: "https://reddit.com/r/Notesnook",
+  },
+];
 function BlogPromoBanner(props) {
-  const { link } = props;
   return (
-    <Flex flexDirection="column" p={4}>
-      <Text variant="heading" textAlign="center">
-        Do you know why we made notesnook?
+    <Flex flexDirection="column" justifyContent="center" alignItems="center">
+      <Text variant="heading" fontSize="1.5em" textAlign="center">
+        Share Notesnook with your friends!
       </Text>
-      <Text variant="body" fontSize="title" mt={1}>
-        There are so many note taking apps out there. But none of them fix the
-        core issue with privacy.
+      <Text
+        textAlign="center"
+        variant="body"
+        fontSize="1.2em"
+        color="fontTertiary"
+        mt={2}
+        sx={{ wordWrap: "break-word" }}
+        mx={[2, 2, 100]}
+      >
+        Because where's the fun in nookin' alone?
       </Text>
-
-      <Text variant="body" fontSize="title" mt={1}>
-        Privacy has become undesirable because you have to sacrifice so much.
+      <Flex mt={5}>
+        {social.map((account) => (
+          <account.icon
+            hoverColor={account.hoverColor}
+            title={account.title}
+            onClick={() => {
+              openLink(account.link, "_blank");
+              trackEvent(account.title, "social-link");
+            }}
+            size={30}
+            sx={{ mr: 1, cursor: "pointer" }}
+          />
+        ))}
+      </Flex>
+      <Text
+        textAlign="center"
+        variant="body"
+        color="fontTertiary"
+        mt={2}
+        sx={{ wordWrap: "break-word" }}
+        mx={[2, 2, 100]}
+      >
+        Use{" "}
+        <Text as="span" fontWeight="bold" color="primary">
+          #notesnook
+        </Text>{" "}
+        and get a chance to win free promo codes.
       </Text>
-
-      <Text variant="body" fontSize="title" mt={1}>
-        In your heart, you know privacy is important. But you can't give up on
-        that awesome feature.
-      </Text>
-
-      <Text variant="body" fontSize="title" mt={1}>
-        You are forced to keep using privacy invasive apps because...the
-        alternative is not as productive.
-      </Text>
-
-      <Text variant="title" mt={1}>
-        But we are going to change that.
-      </Text>
-      <Button
+      {/* <p>
+        Listen. We want you to buy Notesnook Pro. It's as simple as that. Since
+        2019, we have been analyzing the ever increasing trend towards privacy
+        invasive apps.
+      </p>
+      <p>
+        Notion. Evernote. Google Keep. Trello. People flock to these apps to
+        solve their "problems". What they never realize is that Trello is packed
+        with 100+ trackers. What they don't realize is that Google is using
+        their "smart" notes to sell them ads. There is no end to this.
+      </p>
+      <p>
+        The result is clear. No one cares about privacy. Security &amp;
+        encryption are just buzzwords.
+      </p>
+      <p>
+        We want you to buy Notesnook Pro. Not to line our own pockets but to
+        bring a change. Instead of. We want to hear that phrase. "I bought
+        Notesnook instead of Evernote". For us, that is success.
+      </p>
+      <p>
+        There are no two ways about it. The world is moving towards a time when
+        privacy, security, freedom will be just words...memories. Call me a
+        conspiracy theorist but the evidence makes this clear. The world where
+        Big Data will govern us is not far.
+      </p>
+      <p>
+        99% of the people will shrug and move on. That's okay. But you can
+        choose not to. You can choose freedom, privacy, and security. I promise
+        it won't hurt.
+      </p> */}
+      {/* <Button
         mt={2}
         as="a"
         href={link}
@@ -100,7 +194,7 @@ function BlogPromoBanner(props) {
         }
       >
         How are we going to do that? Read on.
-      </Button>
+      </Button> */}
     </Flex>
   );
 }