Skip to content

Commit a57c46c

Browse files
AykutSaracAykutSarac
committed
update upgrade modal
1 parent 84c832d commit a57c46c

File tree

3 files changed

+60
-34
lines changed

3 files changed

+60
-34
lines changed

‎src/containers/Modals/UpgradeModal/index.tsx‎

Lines changed: 51 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,71 @@
11
import React from "react";
22
import Link from "next/link";
33
import type { ModalProps } from "@mantine/core";
4-
import { Text, Divider, List, Button, Modal } from "@mantine/core";
4+
import { Text, Divider, List, Button, Modal, Flex, Box, AspectRatio } from "@mantine/core";
55
import { IoMdCheckmarkCircleOutline } from "react-icons/io";
66
import { MdChevronRight } from "react-icons/md";
77

88
export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
99
return (
1010
<Modal
1111
title={
12-
<Text c="bright" fz="h2" fw={600}>
13-
Upgrade
12+
<Text fz="h2" fw={600}>
13+
Try ToDiagram for free
1414
</Text>
1515
}
16-
size="md"
16+
size="1000"
1717
opened={opened}
1818
onClose={onClose}
1919
zIndex={1001}
2020
centered
2121
>
22-
<Divider mb="xs" fz="md" labelPosition="left" label="Included features" color="dimmed" />
23-
<List spacing="6" c="gray" icon={<IoMdCheckmarkCircleOutline size="24" color="#16a34a" />}>
24-
<List.Item>Larger data support up to 4 MB</List.Item>
25-
<List.Item>Edit data directly on visualizations</List.Item>
26-
<List.Item>Compare data differences on graphs</List.Item>
27-
<List.Item>AI-powered data filter</List.Item>
28-
<List.Item>Customizable graph colors</List.Item>
29-
<List.Item>Tabs for multiple documents</List.Item>
30-
<List.Item>...and more</List.Item>
31-
</List>
32-
<Link href="https://todiagram.com/#preview" target="_blank" passHref>
33-
<Button
34-
color="green"
35-
fullWidth
36-
mt="md"
37-
size="md"
38-
fw={500}
39-
radius="md"
40-
rightSection={<MdChevronRight size="24" />}
41-
>
42-
See more
43-
</Button>
44-
</Link>
22+
<Flex align="center">
23+
<Box flex="0.6">
24+
<Text fz="sm" mb="sm">
25+
More productivity. More power. Try our most-requested features, free for 7 days.
26+
</Text>
27+
<Text fz="sm" fw={500} mb="sm">
28+
Here&apos;s what you get with ToDiagram.
29+
</Text>
30+
<List spacing="6" fz="sm" icon={<IoMdCheckmarkCircleOutline size="24" color="#16a34a" />}>
31+
<List.Item>Larger data support up to 4 MB</List.Item>
32+
<List.Item>Edit data directly on visualizations</List.Item>
33+
<List.Item>Compare data differences on graphs</List.Item>
34+
<List.Item>AI-powered data filter</List.Item>
35+
<List.Item>Customizable graph colors</List.Item>
36+
<List.Item>Tabs for multiple documents</List.Item>
37+
<List.Item>...and more</List.Item>
38+
</List>
39+
<Link href="https://todiagram.com/#pricing" target="_blank" passHref>
40+
<Button
41+
color="green"
42+
fullWidth
43+
mt="md"
44+
size="md"
45+
fw={500}
46+
radius="md"
47+
rightSection={<MdChevronRight size="24" />}
48+
>
49+
Start free trial
50+
</Button>
51+
</Link>
52+
</Box>
53+
<Divider orientation="vertical" mx="md" />
54+
<Box flex="1">
55+
<AspectRatio ratio={16 / 9}>
56+
<video
57+
autoPlay
58+
height="auto"
59+
muted
60+
loop
61+
playsInline
62+
style={{ display: "block", borderRadius: "8px", border: "2px solid #e9e9e9" }}
63+
>
64+
<source src="https://todiagram.com/videos/diagrams.mp4" type="video/mp4" />
65+
</video>
66+
</AspectRatio>
67+
</Box>
68+
</Flex>
4569
</Modal>
4670
);
4771
};

‎src/containers/Toolbar/index.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from "react";
2-
import { Text, Flex, Group, Select, Image } from "@mantine/core";
2+
import { Text, Flex, Group, Select } from "@mantine/core";
33
import styled from "styled-components";
44
import toast from "react-hot-toast";
55
import { AiOutlineFullscreen } from "react-icons/ai";
66
import { FiDownload } from "react-icons/fi";
7+
import { LuCrown } from "react-icons/lu";
78
import { SearchInput } from "src/containers/Toolbar/SearchInput";
89
import { FileFormat } from "src/enums/file.enum";
910
import { JSONCrackLogo } from "src/layout/JsonCrackLogo";
@@ -98,11 +99,11 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
9899
)}
99100
<Group gap="xs" justify="right" w="100%" style={{ flexWrap: "nowrap" }}>
100101
{!isWidget && (
101-
<StyledToolElement onClick={() => window.open("https://todiagram.com?ref=jsoncrack.com")}>
102-
<Flex align="center" gap="4">
103-
<Image src="https://todiagram.com/logo.svg" alt="ToDiagram" width={14} height={14} />
102+
<StyledToolElement onClick={() => setVisible("upgrade")(true)} $highlight>
103+
<Flex align="center" gap="6">
104+
<LuCrown size="16" />
104105
<Text c="bright" fw={600} fz="xs">
105-
ToDiagram
106+
Try Pro for 7 days
106107
</Text>
107108
</Flex>
108109
</StyledToolElement>

‎src/containers/Toolbar/styles.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import styled from "styled-components";
22

3-
export const StyledToolElement = styled.button<{ $hide?: boolean }>`
3+
export const StyledToolElement = styled.button<{ $hide?: boolean; $highlight?: boolean }>`
44
display: ${({ $hide }) => ($hide ? "none" : "flex")};
55
align-items: center;
66
gap: 4px;
77
place-content: center;
88
font-size: 12px;
9-
background: none;
9+
background: ${({ $highlight }) =>
10+
$highlight ? "linear-gradient(rgba(0, 0, 0, 0.1) 0 0)" : "none"};
1011
color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
1112
padding: 6px;
1213
border-radius: 3px;

0 commit comments

Comments
 (0)