Skip to content

Commit 9bd914c

Browse files
AykutSaracAykutSarac
committed
fix icons and update upgrade wordings
1 parent 650e7e7 commit 9bd914c

File tree

10 files changed

+124
-137
lines changed

10 files changed

+124
-137
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
"react-countup": "^6.5.3",
5353
"react-dom": "^18.3.1",
5454
"react-hot-toast": "^2.4.1",
55-
"react-icons": "^5.2.1",
55+
"react-icons": "^5.4.0",
5656
"react-json-tree": "^0.18.0",
5757
"react-linkify-it": "^1.0.8",
5858
"react-text-transition": "^3.1.0",

‎pnpm-lock.yaml‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/features/editor/Toolbar/OptionsMenu.tsx‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,10 @@ import { Menu, Text, Flex } from "@mantine/core";
33
import { event as gaEvent } from "nextjs-google-analytics";
44
import { BsCheck2 } from "react-icons/bs";
55
import { MdSettings } from "react-icons/md";
6-
import { VscLock } from "react-icons/vsc";
76
import useConfig from "src/store/useConfig";
8-
import useModal from "src/store/useModal";
97
import { StyledToolElement } from "./styles";
108

119
export const OptionsMenu = () => {
12-
const setVisible = useModal(state => state.setVisible);
1310
const toggleGestures = useConfig(state => state.toggleGestures);
1411
const toggleChildrenCount = useConfig(state => state.toggleChildrenCount);
1512
const toggleDarkMode = useConfig(state => state.toggleDarkMode);
@@ -88,13 +85,6 @@ export const OptionsMenu = () => {
8885
>
8986
<Text size="xs">Dark Mode</Text>
9087
</Menu.Item>
91-
<Menu.Item
92-
closeMenuOnClick
93-
leftSection={<VscLock />}
94-
onClick={() => setVisible("UpgradeModal", true)}
95-
>
96-
<Text size="xs">Customize Graph Colors</Text>
97-
</Menu.Item>
9888
</Menu.Dropdown>
9989
</Menu>
10090
);

‎src/features/editor/Toolbar/ToolsMenu.tsx‎

Lines changed: 2 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,9 @@ import { event as gaEvent } from "nextjs-google-analytics";
55
import toast from "react-hot-toast";
66
import { CgChevronDown } from "react-icons/cg";
77
import { FaRandom } from "react-icons/fa";
8-
import { FaWandMagicSparkles } from "react-icons/fa6";
9-
import { LuGlobe } from "react-icons/lu";
10-
import { MdCompare, MdFilterListAlt } from "react-icons/md";
8+
import { MdFilterListAlt } from "react-icons/md";
119
import { SiJsonwebtokens } from "react-icons/si";
12-
import { VscSearchFuzzy, VscJson, VscGroupByRefType, VscLock } from "react-icons/vsc";
10+
import { VscSearchFuzzy, VscJson, VscGroupByRefType } from "react-icons/vsc";
1311
import { jsonToContent } from "src/lib/utils/jsonAdapter";
1412
import useFile from "src/store/useFile";
1513
import useJson from "src/store/useJson";
@@ -110,39 +108,6 @@ export const ToolsMenu = () => {
110108
<Menu.Item fz={12} leftSection={<FaRandom />} onClick={randomizeData}>
111109
Randomize Data
112110
</Menu.Item>
113-
<Menu.Item
114-
fz={12}
115-
leftSection={<LuGlobe />}
116-
rightSection={<VscLock />}
117-
onClick={() => {
118-
setVisible("UpgradeModal", true);
119-
gaEvent("rest_client_modal");
120-
}}
121-
>
122-
REST Client
123-
</Menu.Item>
124-
<Menu.Item
125-
fz={12}
126-
leftSection={<FaWandMagicSparkles />}
127-
rightSection={<VscLock />}
128-
onClick={() => {
129-
setVisible("UpgradeModal", true);
130-
gaEvent("open_ai_filter_modal");
131-
}}
132-
>
133-
AI-Powered Filter
134-
</Menu.Item>
135-
<Menu.Item
136-
fz={12}
137-
leftSection={<MdCompare />}
138-
rightSection={<VscLock />}
139-
onClick={() => {
140-
setVisible("UpgradeModal", true);
141-
gaEvent("open_compare_data_modal");
142-
}}
143-
>
144-
Compare Data
145-
</Menu.Item>
146111
</Menu.Dropdown>
147112
</Menu>
148113
);

‎src/features/editor/Toolbar/index.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,15 +87,13 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
8787
<Group gap="6" justify="right" w="100%" style={{ flexWrap: "nowrap" }}>
8888
{!isWidget && (
8989
<Button
90-
component="a"
91-
href="https://todiagram.com/?utm_source=jsoncrack&utm_medium=toolbar"
92-
target="_blank"
9390
variant="light"
9491
color="gray"
9592
size="compact-sm"
9693
fz="12"
9794
fw="600"
9895
mr="6"
96+
onClick={() => setVisible("UpgradeModal", true)}
9997
>
10098
JSON Crack v2.0 🔥
10199
</Button>

‎src/features/editor/views/GraphView/NotSupported.tsx‎

Lines changed: 15 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from "react";
22
import Link from "next/link";
3-
import { Button, Flex, Title, Image } from "@mantine/core";
3+
import { Button, Text } from "@mantine/core";
44
import styled from "styled-components";
5-
import { MdChevronRight } from "react-icons/md";
5+
import { UpgradeContent } from "src/features/modals/UpgradeModal";
66

77
const StyledNotSupported = styled.div`
88
position: relative;
@@ -12,13 +12,8 @@ const StyledNotSupported = styled.div`
1212
justify-content: center;
1313
width: 100%;
1414
height: 100%;
15-
background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
1615
overflow: hidden;
1716
18-
img {
19-
filter: drop-shadow(2px 2px 1px black);
20-
}
21-
2217
.glowing {
2318
position: relative;
2419
min-width: 700px;
@@ -132,14 +127,6 @@ const StyledNotSupported = styled.div`
132127
}
133128
`;
134129

135-
const StyledInfo = styled.p`
136-
max-width: 500px;
137-
font-weight: 600;
138-
font-size: 26px;
139-
text-align: center;
140-
color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
141-
`;
142-
143130
const StyledContent = styled.div`
144131
position: absolute;
145132
left: 0;
@@ -157,26 +144,19 @@ export const NotSupported = () => {
157144
return (
158145
<StyledNotSupported>
159146
<StyledContent>
160-
<Flex align="center" justify="center" gap="16" mb="lg">
161-
<Image src="https://todiagram.com/logo.svg" alt="ToDiagram" w="48" h="48" />
162-
<Title fz="48" style={{ pointerEvents: "none", mixBlendMode: "difference" }}>
163-
ToDiagram
164-
</Title>
165-
</Flex>
166-
<StyledInfo>
167-
Use ToDiagram for larger data size, faster performance, and more features.
168-
</StyledInfo>
169-
<Link href="https://todiagram.com" target="_blank" passHref rel="noopener">
170-
<Button
171-
mt="lg"
172-
size="lg"
173-
fw="bolder"
174-
color="#FE634E"
175-
autoContrast
176-
radius="md"
177-
rightSection={<MdChevronRight size="24" />}
178-
>
179-
Go to ToDiagram
147+
<UpgradeContent direction="column-reverse" />
148+
<Text c="dimmed" maw="400" my="lg" ta="center">
149+
JSON Crack is unable to support data of this size. Please try our new editor for better
150+
performance.
151+
</Text>
152+
<Link
153+
rel="noopener"
154+
href="https://todiagram.com?utm_source=jsoncrack&utm_medium=data_limit"
155+
target="_blank"
156+
passHref
157+
>
158+
<Button size="lg" color="green" radius="xl">
159+
Try New Editor &rarr;
180160
</Button>
181161
</Link>
182162
</StyledContent>

‎src/features/modals/UpgradeModal/index.tsx‎

Lines changed: 93 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,90 @@
11
import React from "react";
2-
import type { ModalProps } from "@mantine/core";
3-
import { Button, Modal, FocusTrap, Image, Text, Group, Divider } from "@mantine/core";
2+
import Link from "next/link";
3+
import type { FlexProps, ModalProps } from "@mantine/core";
4+
import {
5+
Modal,
6+
Text,
7+
Flex,
8+
List,
9+
ThemeIcon,
10+
Divider,
11+
Button,
12+
Group,
13+
Anchor,
14+
Image,
15+
Box,
16+
} from "@mantine/core";
417
import Cookie from "js-cookie";
18+
import { LuCheck } from "react-icons/lu";
19+
import { Logo } from "src/features/editor/Toolbar/Logo";
520
import useConfig from "src/store/useConfig";
621

7-
export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
22+
export const UpgradeContent = (props: FlexProps) => {
823
const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
924

25+
return (
26+
<Flex direction="column" gap="0" {...props}>
27+
<Flex gap="xl">
28+
<List
29+
icon={
30+
<ThemeIcon color="green" variant="transparent">
31+
<LuCheck />
32+
</ThemeIcon>
33+
}
34+
>
35+
<List.Item>Load larger datasets (100x more)</List.Item>
36+
<List.Item>See parent-child relationships</List.Item>
37+
<List.Item>Modify data from diagrams</List.Item>
38+
</List>
39+
<List
40+
icon={
41+
<ThemeIcon color="green" variant="transparent">
42+
<LuCheck />
43+
</ThemeIcon>
44+
}
45+
>
46+
<List.Item>Customization options</List.Item>
47+
<List.Item>Improved UI & Tools</List.Item>
48+
<List.Item>
49+
<Anchor
50+
href="https://chromewebstore.google.com/detail/todiagram/gpcnkpjdmgihedngamkhendifclghjhn"
51+
rel="noopener"
52+
target="_blank"
53+
inherit
54+
>
55+
Chrome Extension
56+
</Anchor>
57+
</List.Item>
58+
</List>
59+
</Flex>
60+
<Box mt="lg">
61+
<Image
62+
src={`/assets/diagram-${darkmodeEnabled ? "dark" : "light"}.png`}
63+
alt="diagram"
64+
mah="120"
65+
fit="cover"
66+
mx="auto"
67+
width="auto"
68+
style={{
69+
filter: "drop-shadow(3px -3px 2px rgba(0, 0, 0, 0.2))",
70+
objectPosition: "top",
71+
}}
72+
/>
73+
<Divider maw="600" w="100%" mb="lg" />
74+
</Box>
75+
</Flex>
76+
);
77+
};
78+
79+
export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
1080
const handleCloseModal = () => {
1181
Cookie.set("upgrade_shown", "true", { expires: 3 });
1282
onClose();
1383
};
1484

1585
return (
1686
<Modal
17-
size="500"
87+
size="auto"
1888
opened={opened}
1989
onClose={handleCloseModal}
2090
zIndex={1001}
@@ -23,45 +93,29 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
2393
overlayProps={{ blur: 2 }}
2494
withCloseButton={false}
2595
closeOnClickOutside={false}
96+
title={
97+
<Flex align="center" gap="sm">
98+
<Logo />
99+
<Text fz="lg" fw="600">
100+
Upgrade to New Editor
101+
</Text>
102+
</Flex>
103+
}
26104
>
27-
<FocusTrap.InitialFocus />
28-
<Image
29-
src={`/assets/diagram-${darkmodeEnabled ? "dark" : "light"}.png`}
30-
alt="diagram"
31-
width="auto"
32-
style={{
33-
filter: "drop-shadow(4px -3px 3px rgba(0, 0, 0, 0.2))",
34-
}}
35-
/>
36-
<Divider mx="-md" />
37-
<Text ta="center" fz="md" mt="lg">
38-
We&apos;ve been working on something big -{" "}
39-
<Text component="span" fw="bold" inherit>
40-
Ready to explore?
41-
</Text>
42-
</Text>
43-
<Group mt="md" justify="space-between">
44-
<Button variant="default" size="md" onClick={handleCloseModal}>
45-
Not now
105+
<UpgradeContent />
106+
<Group justify="space-between">
107+
<Button onClick={handleCloseModal} color="gray" variant="subtle">
108+
Maybe later
46109
</Button>
47-
<Button
48-
component="a"
49-
href="https://todiagram.com/?utm_source=jsoncrack&utm_medium=upgrade_modal"
110+
<Link
111+
href="https://todiagram.com/?utm_source=app&utm_medium=upgrade_modal"
112+
rel="noopener"
50113
target="_blank"
51-
color="green"
52-
size="md"
53-
onClick={handleCloseModal}
54-
leftSection={
55-
<Image
56-
src="https://todiagram.com/logo.svg"
57-
alt="logo"
58-
w={20}
59-
style={{ filter: "grayscale(1) brightness(0) invert(1)" }}
60-
/>
61-
}
62114
>
63-
Try ToDiagram!
64-
</Button>
115+
<Button onClick={handleCloseModal} color="gray" variant="outline">
116+
Try for Free &rarr;
117+
</Button>
118+
</Link>
65119
</Group>
66120
</Modal>
67121
);

‎src/layout/ConverterLayout/ToolPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from "react";
22
import { Box, Container, Flex, Paper, Text, Title } from "@mantine/core";
33
import { Editor } from "@monaco-editor/react";
44
import { NextSeo } from "next-seo";
5-
import { LuCheck, LuXCircle } from "react-icons/lu";
5+
import { LuCheck, LuCircleX } from "react-icons/lu";
66
import { SEO } from "src/constants/seo";
77
import { type FileFormat, formats } from "src/enums/file.enum";
88
import { PageLinks } from "src/layout/ConverterLayout/PageLinks";
@@ -68,7 +68,7 @@ export const ToolPage = ({ from, to }: ToolPageProps) => {
6868
<Flex justify="space-between" align="center">
6969
<Text c="gray.3">{fromLabel}</Text>
7070
{contentHasError && !!originalContent ? (
71-
<LuXCircle color="red" />
71+
<LuCircleX color="red" />
7272
) : (
7373
<LuCheck color="lightgreen" />
7474
)}

0 commit comments

Comments
 (0)