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; } - + 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 ( setIsHovering(true)} + onMouseLeave={() => setIsHovering(false)} > - + ); }; @@ -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 ( - - + + - - - Notesnook - - Email confirmed - - - + Huzzah! + + + Your account has been verified. + + + Enjoy 14 days of Notesnook Pro completely free. + + + + @@ -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 ( - - - Do you know why we made notesnook? + + + Share Notesnook with your friends! - - There are so many note taking apps out there. But none of them fix the - core issue with privacy. + + Because where's the fun in nookin' alone? - - - Privacy has become undesirable because you have to sacrifice so much. + + {social.map((account) => ( + { + openLink(account.link, "_blank"); + trackEvent(account.title, "social-link"); + }} + size={30} + sx={{ mr: 1, cursor: "pointer" }} + /> + ))} + + + Use{" "} + + #notesnook + {" "} + and get a chance to win free promo codes. - - - In your heart, you know privacy is important. But you can't give up on - that awesome feature. - - - - You are forced to keep using privacy invasive apps because...the - alternative is not as productive. - - - - But we are going to change that. - - + */} ); }