Skip to content

Commit 1ee5c1f

Browse files
AykutSaracAykutSarac
committed
feat: update notsupported ui
1 parent 038b4f0 commit 1ee5c1f

File tree

3 files changed

+92
-167
lines changed

3 files changed

+92
-167
lines changed

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

Lines changed: 84 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -1,171 +1,101 @@
11
import React from "react";
2-
import Link from "next/link";
3-
import { Button, Text } from "@mantine/core";
4-
import styled from "styled-components";
5-
import { UpgradeContent } from "../../../modals/UpgradeModal";
6-
7-
const StyledNotSupported = styled.div`
8-
position: relative;
9-
display: flex;
10-
flex-direction: column;
11-
align-items: center;
12-
justify-content: center;
13-
width: 100%;
14-
height: 100%;
15-
overflow: hidden;
16-
17-
.glowing {
18-
position: relative;
19-
min-width: 700px;
20-
height: 550px;
21-
margin: -150px;
22-
transform-origin: right;
23-
animation: colorChange 5s linear infinite;
24-
}
25-
26-
.glowing:nth-child(even) {
27-
transform-origin: left;
28-
}
29-
30-
@keyframes colorChange {
31-
0% {
32-
filter: hue-rotate(0deg);
33-
transform: rotate(0deg);
34-
}
35-
100% {
36-
filter: hue-rotate(360deg);
37-
transform: rotate(360deg);
38-
}
39-
}
40-
41-
.glowing span {
42-
--i: 1;
43-
position: absolute;
44-
top: calc(80px * var(--i));
45-
left: calc(80px * var(--i));
46-
bottom: calc(80px * var(--i));
47-
right: calc(80px * var(--i));
48-
}
49-
50-
.glowing span::before {
51-
content: "";
52-
position: absolute;
53-
top: 50%;
54-
left: -8px;
55-
width: 15px;
56-
height: 15px;
57-
background: #f00;
58-
border-radius: 50%;
59-
}
60-
61-
.glowing span:nth-child(3n + 1)::before {
62-
background: rgba(134, 255, 0, 1);
63-
box-shadow:
64-
0 0 20px rgba(134, 255, 0, 1),
65-
0 0 40px rgba(134, 255, 0, 1),
66-
0 0 60px rgba(134, 255, 0, 1),
67-
0 0 80px rgba(134, 255, 0, 1),
68-
0 0 0 8px rgba(134, 255, 0, 0.1);
69-
}
70-
71-
.glowing span:nth-child(3n + 2)::before {
72-
background: rgba(255, 214, 0, 1);
73-
box-shadow:
74-
0 0 20px rgba(255, 214, 0, 1),
75-
0 0 40px rgba(255, 214, 0, 1),
76-
0 0 60px rgba(255, 214, 0, 1),
77-
0 0 80px rgba(255, 214, 0, 1),
78-
0 0 0 8px rgba(255, 214, 0, 0.1);
2+
import { Anchor, Button, Image, Overlay, Stack, Text } from "@mantine/core";
3+
import styled, { keyframes } from "styled-components";
4+
import useConfig from "../../../../store/useConfig";
5+
import { useModal } from "../../../../store/useModal";
6+
7+
const shineEffect = keyframes`
8+
0% {
9+
transform: translateX(-120%) rotate(25deg);
10+
opacity: 0.5;
7911
}
80-
81-
.glowing span:nth-child(3n + 3)::before {
82-
background: rgba(0, 226, 255, 1);
83-
box-shadow:
84-
0 0 20px rgba(0, 226, 255, 1),
85-
0 0 40px rgba(0, 226, 255, 1),
86-
0 0 60px rgba(0, 226, 255, 1),
87-
0 0 80px rgba(0, 226, 255, 1),
88-
0 0 0 8px rgba(0, 226, 255, 0.1);
12+
5% {
13+
opacity: 0.5;
14+
transform: translateX(-80%) rotate(25deg);
8915
}
90-
91-
.glowing span:nth-child(3n + 1) {
92-
animation: animate 10s alternate infinite;
16+
70% {
17+
transform: translateX(80%) rotate(25deg);
18+
opacity: 0.5;
9319
}
94-
95-
.glowing span:nth-child(3n + 2) {
96-
animation: animate-reverse 3s alternate infinite;
20+
80% {
21+
transform: translateX(120%) rotate(25deg);
22+
opacity: 0;
9723
}
98-
99-
.glowing span:nth-child(3n + 3) {
100-
animation: animate 8s alternate infinite;
24+
100% {
25+
transform: translateX(120%) rotate(25deg);
26+
opacity: 0;
10127
}
28+
`;
10229

103-
@keyframes animate {
104-
0% {
105-
transform: rotate(180deg);
106-
}
107-
50% {
108-
transform: rotate(0deg);
109-
}
110-
100% {
111-
transform: rotate(360deg);
112-
}
113-
}
114-
115-
@keyframes animate-reverse {
116-
0% {
117-
transform: rotate(360deg);
118-
}
119-
120-
50% {
121-
transform: rotate(180deg);
122-
}
30+
const ShiningButton = styled.div`
31+
position: relative;
32+
overflow: hidden;
33+
display: inline-block;
34+
border-radius: 0.5rem;
35+
z-index: 10;
12336
124-
100% {
125-
transform: rotate(0deg);
126-
}
37+
&::before {
38+
content: "";
39+
position: absolute;
40+
top: -50%;
41+
left: -50%;
42+
width: 200%;
43+
height: 200%;
44+
background: linear-gradient(
45+
to right,
46+
rgba(255, 255, 255, 0) 0%,
47+
rgba(255, 255, 255, 0) 35%,
48+
rgba(255, 255, 255, 0.5) 50%,
49+
rgba(255, 255, 255, 0) 65%,
50+
rgba(255, 255, 255, 0) 100%
51+
);
52+
transform: translateX(-120%) rotate(25deg);
53+
z-index: 20;
54+
pointer-events: none;
55+
animation: ${shineEffect} 4s ease-out infinite;
56+
transition: transform 0.2s ease-out;
12757
}
12858
`;
12959

130-
const StyledContent = styled.div`
131-
position: absolute;
132-
left: 0;
133-
top: 0;
134-
width: 100%;
135-
height: 100%;
136-
display: flex;
137-
flex-direction: column;
138-
align-items: center;
139-
justify-content: center;
140-
z-index: 1;
141-
`;
142-
14360
export const NotSupported = () => {
61+
const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
62+
const setVisible = useModal(state => state.setVisible);
63+
14464
return (
145-
<StyledNotSupported>
146-
<StyledContent>
147-
<UpgradeContent direction="column-reverse" maw="550" />
148-
<Text c="dimmed" maw="400" my="lg" ta="center">
149-
JSON Crack is unable to support data of this size. <br />
150-
Try the new editor for better performance.
65+
<Overlay
66+
backgroundOpacity={0.8}
67+
color={darkmodeEnabled ? "gray" : "rgb(226, 240, 243)"}
68+
blur="1.5"
69+
center
70+
>
71+
<Stack maw="60%" align="center" justify="center" gap="sm">
72+
<Image src="https://todiagram.com/logo.svg" alt="Unsupported" w={72} h={72} />
73+
<Text fz="48" fw={600} c="bright">
74+
Time to upgrade!
15175
</Text>
152-
<Link
153-
rel="noopener"
154-
href="https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=data_limit"
155-
target="_blank"
156-
passHref
157-
>
158-
<Button size="lg" color="teal" radius="xl">
159-
Upgrade now
76+
<Text ta="center" size="lg" fw={500} c="gray" maw="600">
77+
This diagram is too large and not supported at JSON Crack.
78+
<br />
79+
Try{" "}
80+
<Anchor inherit c="teal" fw="500" onClick={() => setVisible("UpgradeModal", true)}>
81+
ToDiagram
82+
</Anchor>{" "}
83+
for larger diagrams and more features.
84+
</Text>
85+
<ShiningButton style={{ marginTop: "16px", position: "relative" }}>
86+
<Button
87+
component="a"
88+
href="https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=data_limit"
89+
rel="noopener"
90+
size="lg"
91+
w="200"
92+
target="_blank"
93+
color="teal"
94+
>
95+
Try now &rarr;
16096
</Button>
161-
</Link>
162-
</StyledContent>
163-
164-
<div className="glowing">
165-
<span></span>
166-
<span></span>
167-
<span></span>
168-
</div>
169-
</StyledNotSupported>
97+
</ShiningButton>
98+
</Stack>
99+
</Overlay>
170100
);
171101
};

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

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { LoadingOverlay, useComputedColorScheme } from "@mantine/core";
2+
import { Box, LoadingOverlay, useComputedColorScheme } from "@mantine/core";
33
import { useDebouncedValue } from "@mantine/hooks";
44
import styled from "styled-components";
55
import debounce from "lodash.debounce";
@@ -168,12 +168,9 @@ export const GraphView = ({ isWidget = false }: GraphProps) => {
168168
setViewPort(viewPort!);
169169
}, 300);
170170

171-
if (aboveSupportedLimit) {
172-
return <NotSupported />;
173-
}
174-
175171
return (
176-
<>
172+
<Box pos="relative" h="100%" w="100%">
173+
{!aboveSupportedLimit && <NotSupported />}
177174
<LoadingOverlay visible={debouncedLoading} />
178175
{!isWidget && <OptionsMenu />}
179176
{!isWidget && <SecureInfo />}
@@ -197,6 +194,6 @@ export const GraphView = ({ isWidget = false }: GraphProps) => {
197194
<GraphCanvas isWidget={isWidget} />
198195
</Space>
199196
</StyledEditorWrapper>
200-
</>
197+
</Box>
201198
);
202199
};

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ const StyledFeatureItem = styled.div`
137137
--gradient-1: 0.1;
138138
--gradient-2: 0.15;
139139
--gradient-3: 0.15;
140-
border-color: rgba(130, 174, 255, 0.567);
140+
border-color: rgba(130, 255, 203, 0.567);
141141
}
142142
143143
&:hover {
@@ -157,15 +157,15 @@ const FeatureCard = (props: {
157157
return (
158158
<StyledFeatureItem className={props.selected ? "selected" : ""} onClick={props.onClick}>
159159
<Flex gap="md" align="flex-start">
160-
<ThemeIcon variant="light" color="grape" radius="xl" size="36">
160+
<ThemeIcon variant="light" color="teal" radius="xl" size="36">
161161
{props.icon}
162162
</ThemeIcon>
163163
<Stack gap="4">
164164
<Flex justify="space-between" align="center">
165165
<Text fz="md" fw="600" c="bright">
166166
{props.title}
167167
</Text>
168-
<ThemeIcon variant="transparent" color="grape">
168+
<ThemeIcon variant="transparent" color="teal">
169169
{props.selected ? <LuCheck size={20} /> : null}
170170
</ThemeIcon>
171171
</Flex>
@@ -262,10 +262,8 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
262262
target="_blank"
263263
radius="lg"
264264
size="lg"
265-
c="black"
265+
color="teal"
266266
autoContrast
267-
variant="gradient"
268-
gradient={{ from: "#FF75B7", to: "#FED761" }}
269267
leftSection={<FaPlay />}
270268
fullWidth
271269
fw="600"

0 commit comments

Comments
 (0)