Skip to content

Commit 614f02a

Browse files
AykutSaracAykutSarac
committed
fix: toolbar button widths
1 parent 59de261 commit 614f02a

File tree

4 files changed

+62
-116
lines changed

4 files changed

+62
-116
lines changed

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

Lines changed: 57 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@ import {
88
Stack,
99
Title,
1010
ThemeIcon,
11-
AspectRatio,
12-
Paper,
1311
CloseButton,
1412
FocusTrap,
13+
Image,
14+
Divider,
1515
} from "@mantine/core";
1616
import { LuCrown, LuTrendingUp } from "react-icons/lu";
1717

1818
export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
1919
return (
2020
<Modal
21-
size="550"
21+
size="800"
2222
opened={opened}
2323
onClose={onClose}
2424
zIndex={1001}
@@ -29,83 +29,61 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
2929
overlayProps={{ blur: 1 }}
3030
>
3131
<FocusTrap.InitialFocus />
32-
<Stack gap="24" px="40" py="20">
33-
<Flex justify="space-between">
34-
<Title c="bright" fw="500" fz="24">
35-
Upgrade to unlock all features
36-
</Title>
37-
<CloseButton onClick={onClose} />
38-
</Flex>
39-
<Flex gap="20">
40-
<ThemeIcon color="green" variant="light" size="xl" radius="xl">
41-
<LuCrown size="20" />
42-
</ThemeIcon>
43-
<Stack gap="4">
44-
<Title c="gray" order={3} fw="500" fz="16">
45-
Accurate & beautiful diagrams
32+
<Flex>
33+
<Image src="./assets/todiagram_img.webp" alt="todiagram" w="350" fit="contain" px="lg" />
34+
<Divider orientation="vertical" />
35+
<Stack gap="24" px="40" py="20">
36+
<Flex justify="space-between">
37+
<Title c="bright" fw="500" fz="24">
38+
Upgrade to unlock all features
4639
</Title>
47-
<Text fz="14" c="dimmed">
48-
New diagram structure helps you to understand the data, modify from diagrams,
49-
customize colors, preview images.
50-
</Text>
51-
</Stack>
52-
</Flex>
53-
<Flex gap="20">
54-
<ThemeIcon color="green" variant="light" size="xl" radius="xl">
55-
<LuTrendingUp size="20" />
56-
</ThemeIcon>
57-
<Stack gap="4">
58-
<Title c="gray" order={3} fw="500" fz="16">
59-
Larger file support, faster performance
60-
</Title>
61-
<Text fz="14" c="dimmed">
62-
Load up to 4MB without performance issues, open multiple documents, and save work
63-
faster.
64-
</Text>
65-
</Stack>
66-
</Flex>
67-
<Paper
68-
p={0}
69-
w="100%"
70-
h="fit-content"
71-
bg="transparent"
72-
style={{
73-
overflow: "hidden",
74-
borderRadius: "12px",
75-
border: "1px solid #e5e5e5",
76-
boxShadow:
77-
"rgba(25, 86, 88, 0.06) 0px 17px 37px 0px, rgba(25, 86, 88, 0.05) 0px 67px 67px 0px",
78-
}}
79-
>
80-
<AspectRatio ratio={1000 / 528} w="100%" h="100%">
81-
<video
82-
autoPlay
83-
muted
84-
loop
85-
preload="auto"
86-
playsInline
87-
poster="https://todiagram.com/images/meta/design-tokens.webp"
88-
style={{ display: "block" }}
89-
>
90-
<source src="https://todiagram.com/videos/diagrams.mp4" type="video/mp4" />
91-
</video>
92-
</AspectRatio>
93-
</Paper>
94-
<Button
95-
component="a"
96-
href="https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=upgrade_modal"
97-
target="_blank"
98-
mb="-16"
99-
color="green"
100-
size="md"
101-
radius="md"
102-
>
103-
Try premium for free
104-
</Button>
105-
<Button size="md" variant="subtle" color="gray" radius="md" onClick={onClose}>
106-
Maybe later
107-
</Button>
108-
</Stack>
40+
<CloseButton onClick={onClose} />
41+
</Flex>
42+
<Flex gap="20">
43+
<ThemeIcon color="violet" variant="light" size="xl" radius="xl">
44+
<LuCrown size="20" />
45+
</ThemeIcon>
46+
<Stack gap="4">
47+
<Title c="gray" order={3} fw="500" fz="16">
48+
Accurate & beautiful diagrams
49+
</Title>
50+
<Text fz="14" c="dimmed">
51+
New diagram structure helps you to understand the data, modify from diagrams,
52+
customize colors, preview images.
53+
</Text>
54+
</Stack>
55+
</Flex>
56+
<Flex gap="20">
57+
<ThemeIcon color="violet" variant="light" size="xl" radius="xl">
58+
<LuTrendingUp size="20" />
59+
</ThemeIcon>
60+
<Stack gap="4">
61+
<Title c="gray" order={3} fw="500" fz="16">
62+
Larger file support, faster performance
63+
</Title>
64+
<Text fz="14" c="dimmed">
65+
Load up to 4MB without performance issues, open multiple documents, and save work
66+
faster.
67+
</Text>
68+
</Stack>
69+
</Flex>
70+
<Button
71+
component="a"
72+
href="https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=upgrade_modal"
73+
target="_blank"
74+
mb="-16"
75+
color="violet"
76+
size="md"
77+
radius="md"
78+
leftSection={<LuCrown />}
79+
>
80+
Try premium for free
81+
</Button>
82+
<Button size="md" variant="subtle" color="gray" radius="md" onClick={onClose}>
83+
Maybe later
84+
</Button>
85+
</Stack>
86+
</Flex>
10987
</Modal>
11088
);
11189
};

‎src/containers/Toolbar/AccountMenu.tsx‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎src/containers/Toolbar/ZoomMenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const ZoomMenu = () => {
2828
<Menu shadow="md" trigger="click" closeOnItemClick={false} withArrow>
2929
<Menu.Target>
3030
<StyledToolElement onClick={() => gaEvent("show_zoom_menu")}>
31-
<Flex gap={4} align="center">
31+
<Flex gap={4} align="center" justify="center" miw="50">
3232
{Math.round(zoomFactor * 100)}%
3333
<CgChevronDown />
3434
</Flex>

‎src/containers/Toolbar/index.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { type FileFormat, formats } from "src/enums/file.enum";
1010
import { JSONCrackLogo } from "src/layout/JsonCrackLogo";
1111
import useFile from "src/store/useFile";
1212
import useModal from "src/store/useModal";
13-
import { AccountMenu } from "./AccountMenu";
1413
import { FileMenu } from "./FileMenu";
1514
import { Logo } from "./Logo";
1615
import { OptionsMenu } from "./OptionsMenu";
@@ -84,28 +83,27 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
8483
<ToolsMenu />
8584
</Group>
8685
)}
87-
<Group gap="xs" justify="right" w="100%" style={{ flexWrap: "nowrap" }}>
86+
<Group gap="6" justify="right" w="100%" style={{ flexWrap: "nowrap" }}>
8887
{!isWidget && (
8988
<Button
90-
color="gray"
91-
variant="light"
89+
color="green"
9290
size="compact-sm"
9391
fz="12"
92+
fw="600"
9493
onClick={() => setVisible("upgrade")(true)}
9594
leftSection={<LuCrown />}
95+
mr="6"
9696
>
9797
Try premium for free
9898
</Button>
9999
)}
100-
101100
<SearchInput />
102101
{!isWidget && (
103102
<>
104103
<StyledToolElement title="Save as Image" onClick={() => setVisible("download")(true)}>
105104
<FiDownload size="18" />
106105
</StyledToolElement>
107106
<ZoomMenu />
108-
<AccountMenu />
109107
<OptionsMenu />
110108
<StyledToolElement title="Fullscreen" $hide={isWidget} onClick={fullscreenBrowser}>
111109
<AiOutlineFullscreen size="18" />

0 commit comments

Comments
 (0)