Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-25 07:59:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add carousel in buy dialog

Browse Source
This commit is contained in:
thecodrr
2021-02-15 19:38:52 +05:00
parent cc490a14d8
commit 5bbc447deb
7 changed files with 167 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/package.json
View File

@@ -29,6 +29,7 @@
"react-dom": "^17.0.1",
"react-modal": "^3.12.1",
"react-qrcode-logo": "^2.2.1",
"react-responsive-carousel": "^3.2.12",
"react-scripts": "4.0.2",
"react-scrollbars-custom": "^4.0.25",
"react-virtualized-auto-sizer": "^1.0.4",

38
apps/web/src/assets/sync.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 19 KiB

69
apps/web/src/assets/vault.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

170
apps/web/src/components/dialogs/buydialog.js
View File

@@ -1,71 +1,174 @@
import React from "react";
import React, { useEffect, useState } from "react";
import { Text, Flex, Button } from "rebass";
import Dialog, { showDialog } from "./dialog";
import * as Icon from "../icons";
import { useStore as useUserStore } from "../../stores/user-store";
import { useStore as useThemeStore } from "../../stores/theme-store";
import { upgrade } from "../../common/upgrade";
import { showSignUpDialog } from "./signupdialog";
import { ReactComponent as Personalization } from "../../assets/accent.svg";
import { ReactComponent as Backups } from "../../assets/backup.svg";
import { ReactComponent as Export } from "../../assets/export.svg";
import { ReactComponent as Organize } from "../../assets/organize.svg";
import { ReactComponent as RichText } from "../../assets/richtext.svg";
import { ReactComponent as Sync } from "../../assets/sync.svg";
import { ReactComponent as Vault } from "../../assets/vault.svg";
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from "react-responsive-carousel";
import { changeSvgTheme } from "../../utils/css";
const premiumDetails = [
{
title: "Cross Platfrom Sync",
description:
"Securely sync your notes on any device, Android, iOS, Windows, MacOS, Linux and Web!",
title: "Automatic syncing",
description: "Your notes will be automatically synced to all your devices.",
illustration: {
icon: Sync,
width: "40%",
},
},
{
title: "Zero Knowledge",
title: "Unlimited organization",
description:
"No sneaking, no stealing. We give all the keys for your data to you. Privacy is not just a word to us. We use industry-grade XChaChaPoly1305 and Argon2 which is miles ahead other solutions making sure your data is secure and private even a million years from now.",
"Make unlimited notebooks and tags, and assign colors to your notes for quick access.",
illustration: {
icon: Organize,
width: "40%",
},
},
{
title: "Organize Notes Like Never Before",
title: "Secure vault",
description:
"Organize your notes using notebooks, tags and colors. Add notes to favorites for quick access. Pin most important notes and notebooks on top for quick access. You can also pin notes and notebooks to quickly access them!",
"Lock any note with a password and keep sensitive data under lock and key.",
illustration: {
icon: Vault,
width: "35%",
},
},
{
title: "Full Rich Text Editor with Markdown",
title: "Full rich text editor",
description:
"Unleash the power of a complete Rich Text Editor in your notes app. You can add images, links and even embed videos! We have even added full markdown support too!",
"Add images, links, tables and lists to your notes, and use markdown for fast editing.",
illustration: {
icon: RichText,
width: "50%",
},
},
{
title: "Export Notes",
description:
"You can export your notes as PDF, Markdown, Plain text or HTML file.",
title: "Multi-format exports",
description: "Export your notes in PDF, Markdown, or HTML formats.",
illustration: {
icon: Export,
width: "25%",
},
},
{
title: "Backup and Restore",
title: "Automatic & encrypted backups",
description: "Enable daily or weekly backups with automatic encryption.",
illustration: {
icon: Backups,
width: "25%",
},
},
{
title: "Customize Notesnook",
description: "Change app colors and turn on automatic theme switching.",
illustration: {
icon: Personalization,
width: "50%",
},
},
{
title: "Get the pro badge on Discord",
description:
"Backup and restore your notes anytime into your phone storage. You can encrypt all your backups if required!",
"Pro users get access to special channels and priority support on our Discord server.",
illustration: {
icon: Personalization,
width: "50%",
},
},
];
function BuyDialog(props) {
const isLoggedIn = useUserStore((store) => store.isLoggedIn);
const user = useUserStore((store) => store.user);
const accent = useThemeStore((store) => store.accent);
useEffect(() => {
changeSvgTheme(accent);
}, [accent]);
const [slideIndex, setSlideIndex] = useState(0);
return (
<Dialog
isOpen={true}
title="Notesnook Pro"
onClose={props.onCancel}
showClose
>
<Flex flexDirection="column" flex={1} sx={{ overflow: "hidden" }}>
<Flex flexDirection="column" sx={{ overflowY: "scroll" }}>
{premiumDetails.map((detail) => (
<Flex mb={1}>
<Icon.CheckCircle
size={20}
color="primary"
sx={{ flexShrink: 0, mr: 2 }}
<Dialog isOpen={true} showClose onClose={props.onCancel} scrollable>
<Flex flexDirection="column" flex={1}>
<Carousel
autoPlay
showStatus={false}
swipeable
emulateTouch
showArrows
useKeyboardArrows
showThumbs={false}
showIndicators={false}
renderArrowNext={(click, hasNext) => (
<Button
variant="icon"
disabled={!hasNext}
onClick={click}
sx={{ alignSelf: "center" }}
>
<Icon.ArrowRight
color={hasNext ? "text" : "grey"}
sx={{
":hover": {
color: "primary",
},
}}
/>
<Text variant="body">
{detail.title}
<Text variant="subBody">{detail.description}</Text>
</Button>
)}
renderArrowPrev={(click, hasPrev) => (
<Button
variant="icon"
disabled={!hasPrev}
sx={{ alignSelf: "center" }}
onClick={click}
>
<Icon.ArrowLeft
color={hasPrev ? "text" : "grey"}
sx={{
":hover": {
color: "primary",
},
}}
/>
</Button>
)}
>
{premiumDetails.map((item) => (
<Flex
flexDirection="column"
justifyContent="center"
alignItems="center"
width="100%"
height="100%"
>
<item.illustration.icon height={"150px"} />
<Text variant="heading" color="primary" mt={2} textAlign="center">
{item.title}
</Text>
<Text
variant="body"
fontSize="title"
color="grey"
mt={1}
textAlign="center"
maxWidth="80%"
>
{item.description}
</Text>
</Flex>
))}
</Flex>
</Carousel>
<Flex
flex={1}
flexDirection="column"
@@ -73,6 +176,7 @@ function BuyDialog(props) {
sx={{
borderRadius: "default",
}}
mt={25}
>
<Text variant="title" color="primary">
{isLoggedIn ? "Upgrade now" : "Try it Now"}

2
apps/web/src/components/dialogs/dialog.js
View File

@@ -54,7 +54,7 @@ function Dialog(props) {
<Flex
p={30}
flexDirection="column"
width={["100%", "90%", "33%"]}
width={["100%", "90%", props.width || "33%"]}
maxHeight={["100%", "80%", "70%"]}
height={["100%", "auto", "auto"]}
bg="background"

9
apps/web/src/index.css
View File

@@ -60,3 +60,12 @@ body,
.ReactModal__Overlay--before-close {
opacity: 0;
}
.slide {
background-color: transparent !important;
}
.carousel.carousel-slider {
display: flex;
flex-direction: row;
}

18
apps/web/yarn.lock
View File

@@ -9860,7 +9860,7 @@ prompts@2.4.0, prompts@^2.0.1, prompts@^2.4.0:
kleur "^3.0.3"
sisteransi "^1.0.5"
prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -10156,6 +10156,13 @@ react-draggable@^4.4.2:
classnames "^2.2.5"
prop-types "^15.6.0"
react-easy-swipe@^0.0.21:
version "0.0.21"
resolved "https://registry.yarnpkg.com/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz#ce9384d576f7a8529dc2ca377c1bf03920bac8eb"
integrity sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==
dependencies:
prop-types "^15.5.8"
react-error-overlay@^6.0.9:
version "6.0.9"
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
@@ -10201,6 +10208,15 @@ react-refresh@^0.8.3:
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
react-responsive-carousel@^3.2.12:
version "3.2.12"
resolved "https://registry.yarnpkg.com/react-responsive-carousel/-/react-responsive-carousel-3.2.12.tgz#24d860e6d4e72b72e809b8718389290000605de5"
integrity sha512-Wdqpu7+xvn3RPy0Q0pIVOms8SsooYmsFLPgSSxOt+G0WvXHpNOZmnLUsI8EgRRhSww8GUXERKlIYy7MZLdOHPA==
dependencies:
classnames "^2.2.5"
prop-types "^15.5.8"
react-easy-swipe "^0.0.21"
react-scripts@4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.2.tgz#530fd934dfdf31c355e366df40bf488347c28de7"