From 614f02a3473f16591cd16364f0bc46ae27448522 Mon Sep 17 00:00:00 2001
From: AykutSarac <aykutsarac0@gmail.com>
Date: Sat, 7 Dec 2024 23:49:44 +0300
Subject: [PATCH] fix: toolbar button widths

---
 src/containers/Modals/UpgradeModal/index.tsx | 136 ++++++++-----------
 src/containers/Toolbar/AccountMenu.tsx       |  30 ----
 src/containers/Toolbar/ZoomMenu.tsx          |   2 +-
 src/containers/Toolbar/index.tsx             |  10 +-
 4 files changed, 62 insertions(+), 116 deletions(-)
 delete mode 100644 src/containers/Toolbar/AccountMenu.tsx

diff --git a/src/containers/Modals/UpgradeModal/index.tsx b/src/containers/Modals/UpgradeModal/index.tsx
index cdfd8825f3d..be4f734a1dc 100644
--- a/src/containers/Modals/UpgradeModal/index.tsx
+++ b/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 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>
   );
 };
diff --git a/src/containers/Toolbar/AccountMenu.tsx b/src/containers/Toolbar/AccountMenu.tsx
deleted file mode 100644
index f94af376826..00000000000
--- a/src/containers/Toolbar/AccountMenu.tsx
+++ /dev/null
@@ -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>
-  );
-};
diff --git a/src/containers/Toolbar/ZoomMenu.tsx b/src/containers/Toolbar/ZoomMenu.tsx
index 085b72b4bf9..e46ca9106df 100644
--- a/src/containers/Toolbar/ZoomMenu.tsx
+++ b/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>
diff --git a/src/containers/Toolbar/index.tsx b/src/containers/Toolbar/index.tsx
index 6a1689ea2e8..415da12801c 100644
--- a/src/containers/Toolbar/index.tsx
+++ b/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"
-            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" />