fix: toolbar button widths

AykutSarac · Dec 7, 2024 · 614f02a · 614f02a
1 parent 59de261
commit 614f02a
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 116 deletions.
diff --git 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
diff --git 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
@@ -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,28 +83,27 @@ 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 && (
           <>
             <StyledToolElement title="Save as Image" onClick={() => setVisible("download")(true)}>
               <FiDownload size="18" />
             </StyledToolElement>
             <ZoomMenu />
-            <AccountMenu />
             <OptionsMenu />
             <StyledToolElement title="Fullscreen" $hide={isWidget} onClick={fullscreenBrowser}>
               <AiOutlineFullscreen size="18" />