mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-27 15:22:56 +08:00
fix: toolbar button widths
This commit is contained in:
AykutSarac
parent
59de261a1f
commit
614f02a347
@ -8,17 +8,17 @@ import {
|
||||
Stack,
|
||||
Title,
|
||||
ThemeIcon,
|
||||
AspectRatio,
|
||||
Paper,
|
||||
CloseButton,
|
||||
FocusTrap,
|
||||
Image,
|
||||
Divider,
|
||||
} from "@mantine/core";
|
||||
import { LuCrown, LuTrendingUp } from "react-icons/lu";
|
||||
|
||||
export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
|
||||
return (
|
||||
<Modal
|
||||
size="550"
|
||||
size="800"
|
||||
opened={opened}
|
||||
onClose={onClose}
|
||||
zIndex={1001}
|
||||
@ -29,83 +29,61 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
|
||||
overlayProps={{ blur: 1 }}
|
||||
>
|
||||
<FocusTrap.InitialFocus />
|
||||
<Stack gap="24" px="40" py="20">
|
||||
<Flex justify="space-between">
|
||||
<Title c="bright" fw="500" fz="24">
|
||||
Upgrade to unlock all features
|
||||
</Title>
|
||||
<CloseButton onClick={onClose} />
|
||||
</Flex>
|
||||
<Flex gap="20">
|
||||
<ThemeIcon color="green" variant="light" size="xl" radius="xl">
|
||||
<LuCrown size="20" />
|
||||
</ThemeIcon>
|
||||
<Stack gap="4">
|
||||
<Title c="gray" order={3} fw="500" fz="16">
|
||||
Accurate & beautiful diagrams
|
||||
<Flex>
|
||||
<Image src="./assets/todiagram_img.webp" alt="todiagram" w="350" fit="contain" px="lg" />
|
||||
<Divider orientation="vertical" />
|
||||
<Stack gap="24" px="40" py="20">
|
||||
<Flex justify="space-between">
|
||||
<Title c="bright" fw="500" fz="24">
|
||||
Upgrade to unlock all features
|
||||
</Title>
|
||||
<Text fz="14" c="dimmed">
|
||||
New diagram structure helps you to understand the data, modify from diagrams,
|
||||
customize colors, preview images.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Flex>
|
||||
<Flex gap="20">
|
||||
<ThemeIcon color="green" variant="light" size="xl" radius="xl">
|
||||
<LuTrendingUp size="20" />
|
||||
</ThemeIcon>
|
||||
<Stack gap="4">
|
||||
<Title c="gray" order={3} fw="500" fz="16">
|
||||
Larger file support, faster performance
|
||||
</Title>
|
||||
<Text fz="14" c="dimmed">
|
||||
Load up to 4MB without performance issues, open multiple documents, and save work
|
||||
faster.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Flex>
|
||||
<Paper
|
||||
p={0}
|
||||
w="100%"
|
||||
h="fit-content"
|
||||
bg="transparent"
|
||||
style={{
|
||||
overflow: "hidden",
|
||||
borderRadius: "12px",
|
||||
border: "1px solid #e5e5e5",
|
||||
boxShadow:
|
||||
"rgba(25, 86, 88, 0.06) 0px 17px 37px 0px, rgba(25, 86, 88, 0.05) 0px 67px 67px 0px",
|
||||
}}
|
||||
>
|
||||
<AspectRatio ratio={1000 / 528} w="100%" h="100%">
|
||||
<video
|
||||
autoPlay
|
||||
muted
|
||||
loop
|
||||
preload="auto"
|
||||
playsInline
|
||||
poster="https://todiagram.com/images/meta/design-tokens.webp"
|
||||
style={{ display: "block" }}
|
||||
>
|
||||
<source src="https://todiagram.com/videos/diagrams.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</AspectRatio>
|
||||
</Paper>
|
||||
<Button
|
||||
component="a"
|
||||
href="https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=upgrade_modal"
|
||||
target="_blank"
|
||||
mb="-16"
|
||||
color="green"
|
||||
size="md"
|
||||
radius="md"
|
||||
>
|
||||
Try premium for free
|
||||
</Button>
|
||||
<Button size="md" variant="subtle" color="gray" radius="md" onClick={onClose}>
|
||||
Maybe later
|
||||
</Button>
|
||||
</Stack>
|
||||
<CloseButton onClick={onClose} />
|
||||
</Flex>
|
||||
<Flex gap="20">
|
||||
<ThemeIcon color="violet" variant="light" size="xl" radius="xl">
|
||||
<LuCrown size="20" />
|
||||
</ThemeIcon>
|
||||
<Stack gap="4">
|
||||
<Title c="gray" order={3} fw="500" fz="16">
|
||||
Accurate & beautiful diagrams
|
||||
</Title>
|
||||
<Text fz="14" c="dimmed">
|
||||
New diagram structure helps you to understand the data, modify from diagrams,
|
||||
customize colors, preview images.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Flex>
|
||||
<Flex gap="20">
|
||||
<ThemeIcon color="violet" variant="light" size="xl" radius="xl">
|
||||
<LuTrendingUp size="20" />
|
||||
</ThemeIcon>
|
||||
<Stack gap="4">
|
||||
<Title c="gray" order={3} fw="500" fz="16">
|
||||
Larger file support, faster performance
|
||||
</Title>
|
||||
<Text fz="14" c="dimmed">
|
||||
Load up to 4MB without performance issues, open multiple documents, and save work
|
||||
faster.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Flex>
|
||||
<Button
|
||||
component="a"
|
||||
href="https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=upgrade_modal"
|
||||
target="_blank"
|
||||
mb="-16"
|
||||
color="violet"
|
||||
size="md"
|
||||
radius="md"
|
||||
leftSection={<LuCrown />}
|
||||
>
|
||||
Try premium for free
|
||||
</Button>
|
||||
<Button size="md" variant="subtle" color="gray" radius="md" onClick={onClose}>
|
||||
Maybe later
|
||||
</Button>
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
import React from "react";
|
||||
import { Menu, Avatar, Text } from "@mantine/core";
|
||||
import { FaRegCircleUser } from "react-icons/fa6";
|
||||
import { VscSignIn } from "react-icons/vsc";
|
||||
import { StyledToolElement } from "./styles";
|
||||
|
||||
export const AccountMenu = () => {
|
||||
return (
|
||||
<Menu shadow="md" trigger="click" closeOnItemClick={false} withArrow>
|
||||
<Menu.Target>
|
||||
<StyledToolElement>
|
||||
<Avatar color="blue" variant="filled" size={20} radius="xl">
|
||||
<FaRegCircleUser size="12" />
|
||||
</Avatar>
|
||||
</StyledToolElement>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<Menu.Item
|
||||
component="a"
|
||||
href="https://todiagram.com/sign-up?utm_source=signup&utm_medium=app&utm_content=toolbar"
|
||||
target="_blank"
|
||||
leftSection={<VscSignIn />}
|
||||
rel="noopener"
|
||||
>
|
||||
<Text size="xs">Sign up</Text>
|
||||
</Menu.Item>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
@ -28,7 +28,7 @@ export const ZoomMenu = () => {
|
||||
<Menu shadow="md" trigger="click" closeOnItemClick={false} withArrow>
|
||||
<Menu.Target>
|
||||
<StyledToolElement onClick={() => gaEvent("show_zoom_menu")}>
|
||||
<Flex gap={4} align="center">
|
||||
<Flex gap={4} align="center" justify="center" miw="50">
|
||||
{Math.round(zoomFactor * 100)}%
|
||||
<CgChevronDown />
|
||||
</Flex>
|
||||
|
||||
@ -10,7 +10,6 @@ import { type FileFormat, formats } from "src/enums/file.enum";
|
||||
import { JSONCrackLogo } from "src/layout/JsonCrackLogo";
|
||||
import useFile from "src/store/useFile";
|
||||
import useModal from "src/store/useModal";
|
||||
import { AccountMenu } from "./AccountMenu";
|
||||
import { FileMenu } from "./FileMenu";
|
||||
import { Logo } from "./Logo";
|
||||
import { OptionsMenu } from "./OptionsMenu";
|
||||
@ -84,20 +83,20 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
|
||||
<ToolsMenu />
|
||||
</Group>
|
||||
)}
|
||||
<Group gap="xs" justify="right" w="100%" style={{ flexWrap: "nowrap" }}>
|
||||
<Group gap="6" justify="right" w="100%" style={{ flexWrap: "nowrap" }}>
|
||||
{!isWidget && (
|
||||
<Button
|
||||
color="gray"
|
||||
variant="light"
|
||||
color="green"
|
||||
size="compact-sm"
|
||||
fz="12"
|
||||
fw="600"
|
||||
onClick={() => setVisible("upgrade")(true)}
|
||||
leftSection={<LuCrown />}
|
||||
mr="6"
|
||||
>
|
||||
Try premium for free
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<SearchInput />
|
||||
{!isWidget && (
|
||||
<>
|
||||
@ -105,7 +104,6 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
|
||||
<FiDownload size="18" />
|
||||
</StyledToolElement>
|
||||
<ZoomMenu />
|
||||
<AccountMenu />
|
||||
<OptionsMenu />
|
||||
<StyledToolElement title="Fullscreen" $hide={isWidget} onClick={fullscreenBrowser}>
|
||||
<AiOutlineFullscreen size="18" />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user