fix: toolbar button widths

src/containers/Modals/UpgradeModal/index.tsx

@@ -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>
-        <Flex justify="space-between">
+        <Image src="./assets/todiagram_img.webp" alt="todiagram" w="350" fit="contain" px="lg" />
-          <Title c="bright" fw="500" fz="24">
+        <Divider orientation="vertical" />
-            Upgrade to unlock all features
+        <Stack gap="24" px="40" py="20">
-          </Title>
+          <Flex justify="space-between">
-          <CloseButton onClick={onClose} />
+            <Title c="bright" fw="500" fz="24">
-        </Flex>
+              Upgrade to unlock all features
-        <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
             </Title>
-            <Text fz="14" c="dimmed">
+            <CloseButton onClick={onClose} />
-              New diagram structure helps you to understand the data, modify from diagrams,
+          </Flex>
-              customize colors, preview images.
+          <Flex gap="20">
-            </Text>
+            <ThemeIcon color="violet" variant="light" size="xl" radius="xl">
-          </Stack>
+              <LuCrown size="20" />
-        </Flex>
+            </ThemeIcon>
-        <Flex gap="20">
+            <Stack gap="4">
-          <ThemeIcon color="green" variant="light" size="xl" radius="xl">
+              <Title c="gray" order={3} fw="500" fz="16">
-            <LuTrendingUp size="20" />
+                Accurate & beautiful diagrams
-          </ThemeIcon>
+              </Title>
-          <Stack gap="4">
+              <Text fz="14" c="dimmed">
-            <Title c="gray" order={3} fw="500" fz="16">
+                New diagram structure helps you to understand the data, modify from diagrams,
-              Larger file support, faster performance
+                customize colors, preview images.
-            </Title>
+              </Text>
-            <Text fz="14" c="dimmed">
+            </Stack>
-              Load up to 4MB without performance issues, open multiple documents, and save work
+          </Flex>
-              faster.
+          <Flex gap="20">
-            </Text>
+            <ThemeIcon color="violet" variant="light" size="xl" radius="xl">
-          </Stack>
+              <LuTrendingUp size="20" />
-        </Flex>
+            </ThemeIcon>
-        <Paper
+            <Stack gap="4">
-          p={0}
+              <Title c="gray" order={3} fw="500" fz="16">
-          w="100%"
+                Larger file support, faster performance
-          h="fit-content"
+              </Title>
-          bg="transparent"
+              <Text fz="14" c="dimmed">
-          style={{
+                Load up to 4MB without performance issues, open multiple documents, and save work
-            overflow: "hidden",
+                faster.
-            borderRadius: "12px",
+              </Text>
-            border: "1px solid #e5e5e5",
+            </Stack>
-            boxShadow:
+          </Flex>
-              "rgba(25, 86, 88, 0.06) 0px 17px 37px 0px, rgba(25, 86, 88, 0.05) 0px 67px 67px 0px",
+          <Button
-          }}
+            component="a"
-        >
+            href="https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=upgrade_modal"
-          <AspectRatio ratio={1000 / 528} w="100%" h="100%">
+            target="_blank"
-            <video
+            mb="-16"
-              autoPlay
+            color="violet"
-              muted
+            size="md"
-              loop
+            radius="md"
-              preload="auto"
+            leftSection={<LuCrown />}
-              playsInline
+          >
-              poster="https://todiagram.com/images/meta/design-tokens.webp"
+            Try premium for free
-              style={{ display: "block" }}
+          </Button>
-            >
+          <Button size="md" variant="subtle" color="gray" radius="md" onClick={onClose}>
-              <source src="https://todiagram.com/videos/diagrams.mp4" type="video/mp4" />
+            Maybe later
-            </video>
+          </Button>
-          </AspectRatio>
+        </Stack>
-        </Paper>
+      </Flex>
-        <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>
     </Modal>
   );
 };

src/containers/Toolbar/AccountMenu.tsx

@@ -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>
-  );
-};

src/containers/Toolbar/ZoomMenu.tsx

@@ -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>

src/containers/Toolbar/index.tsx

@@ -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"
+            color="green"
-            variant="light"
             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" />