feat: update modal UI

AykutSarac · AykutSarac · commit 8a933f1de4c3 · 2025-04-04T00:42:37.000+03:00
diff --git a/src/features/editor/Toolbar/index.tsx b/src/features/editor/Toolbar/index.tsx
@@ -4,7 +4,7 @@ import { Flex, Group, Select, Button } from "@mantine/core";
 import styled from "styled-components";
 import toast from "react-hot-toast";
 import { AiOutlineFullscreen } from "react-icons/ai";
-import { FaGithub } from "react-icons/fa6";
+import { FaBolt, FaGithub } from "react-icons/fa6";
 import { type FileFormat, formats } from "../../../enums/file.enum";
 import { JSONCrackLogo } from "../../../layout/JsonCrackLogo";
 import useFile from "../../../store/useFile";
@@ -71,18 +71,19 @@ export const Toolbar = () => {
         <ViewMenu />
         <ToolsMenu />
         <Button
-          color="teal"
           autoContrast
+          variant="outline"
+          color="gray"
           size="compact-sm"
           fz="12"
           fw="600"
           onClick={() => setVisible("UpgradeModal", true)}
-          leftSection={"⚡️"}
+          leftSection={<FaBolt />}
         >
-          Try New Editor
+          JSON Crack v2.0
         </Button>
       </Group>
-      <Group gap="6" justify="right" w="100%" style={{ flexWrap: "nowrap" }}>
+      <Group gap="xs" justify="right" w="100%" style={{ flexWrap: "nowrap" }}>
         <Link href="https://github.com/AykutSarac/jsoncrack.com" rel="noopener" target="_blank">
           <StyledToolElement title="GitHub">
             <FaGithub size="18" />
diff --git a/src/features/editor/views/GraphView/NotSupported.tsx b/src/features/editor/views/GraphView/NotSupported.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import Link from "next/link";
 import { Button, Text } from "@mantine/core";
 import styled from "styled-components";
-import { LuZap } from "react-icons/lu";
 import { UpgradeContent } from "../../../modals/UpgradeModal";
 
 const StyledNotSupported = styled.div`
@@ -145,7 +144,7 @@ export const NotSupported = () => {
   return (
     <StyledNotSupported>
       <StyledContent>
-        <UpgradeContent direction="column-reverse" />
+        <UpgradeContent direction="column-reverse" maw="550" />
         <Text c="dimmed" maw="400" my="lg" ta="center">
           JSON Crack is unable to support data of this size. <br />
           Try the new editor for better performance.
@@ -156,8 +155,8 @@ export const NotSupported = () => {
           target="_blank"
           passHref
         >
-          <Button size="lg" color="teal" leftSection={<LuZap />} radius="xl">
-            Try new editor &rarr;
+          <Button size="lg" color="teal" radius="xl">
+            Upgrade now
           </Button>
         </Link>
       </StyledContent>
diff --git a/src/features/modals/UpgradeModal/index.tsx b/src/features/modals/UpgradeModal/index.tsx
@@ -15,22 +15,31 @@ import {
   Box,
   CloseButton,
   FocusTrap,
+  Stack,
+  Paper,
 } from "@mantine/core";
 import Cookie from "js-cookie";
-import { LuCheck, LuZap } from "react-icons/lu";
+import { GoDependabot } from "react-icons/go";
+import {
+  LuCheck,
+  LuChevronRight,
+  LuGitCompareArrows,
+  LuInfinity,
+  LuPencilRuler,
+} from "react-icons/lu";
 import useConfig from "../../../store/useConfig";
 
 export const UpgradeContent = (props: FlexProps) => {
   const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
 
   return (
     <Flex direction="column" gap="0" {...props}>
-      <Flex justify="center" gap="60" px="sm">
+      <Flex justify="space-between" gap="4" px="sm" wrap="wrap">
         <List
           center
           c="bright"
           fz="lg"
-          spacing="xs"
+          spacing="4"
           icon={
             <ThemeIcon color="green" variant="transparent">
               <LuCheck size="18" />
@@ -45,7 +54,7 @@ export const UpgradeContent = (props: FlexProps) => {
           center
           c="bright"
           fz="lg"
-          spacing="xs"
+          spacing="4"
           icon={
             <ThemeIcon color="green" variant="transparent">
               <LuCheck size="18" />
@@ -71,7 +80,6 @@ export const UpgradeContent = (props: FlexProps) => {
         <Image
           src={`/assets/diagram-${darkmodeEnabled ? "dark" : "light"}.png`}
           alt="diagram"
-          mah="120"
           fit="cover"
           mx="auto"
           width="auto"
@@ -86,6 +94,26 @@ export const UpgradeContent = (props: FlexProps) => {
   );
 };
 
+const FeatureCard = (props: { title: string; description: string; icon: React.ReactNode }) => {
+  return (
+    <Paper withBorder p="xs" radius="md">
+      <Flex gap="md" align="flex-start">
+        <ThemeIcon variant="light" color="teal" radius="xl" size="36">
+          {props.icon}
+        </ThemeIcon>
+        <Stack gap="4">
+          <Text fz="md" fw="600" c="bright">
+            {props.title}
+          </Text>
+          <Text fz="sm" c="gray" opacity={0.8}>
+            {props.description}
+          </Text>
+        </Stack>
+      </Flex>
+    </Paper>
+  );
+};
+
 export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
   const handleCloseModal = () => {
     Cookie.set("upgrade_shown", "true", { expires: 3 });
@@ -94,46 +122,74 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
 
   return (
     <Modal
-      size="lg"
+      size="xl"
       opened={opened}
       onClose={handleCloseModal}
       zIndex={1001}
       centered
       radius="md"
       overlayProps={{ blur: 2 }}
       withCloseButton={false}
-      closeOnClickOutside={false}
     >
       <FocusTrap.InitialFocus />
-      <Flex justify="center" align="center" gap="xs">
-        <Image
-          ml="auto"
-          pl="28"
-          src="https://todiagram.com/logo-64x64.png"
-          alt="todiagram"
-          width={30}
-          height={30}
-        />
-        <Text fz="24" fw="600" c="bright">
-          Try JSON Crack 2.0
-        </Text>
-        <CloseButton ml="auto" onClick={handleCloseModal} />
+      <Flex>
+        <Stack>
+          <FeatureCard
+            title="No File Size Limits"
+            description="Load and edit even the largest data files without restrictions."
+            icon={<LuInfinity size={20} />}
+          />
+          <FeatureCard
+            title="Visual Data Editing"
+            description="Edit JSON, YAML, CSV, and XML directly on the diagram."
+            icon={<LuPencilRuler size={20} />}
+          />
+          <FeatureCard
+            title="Live JSON Schema Validation"
+            description="Instantly see invalid fields highlighted in red on the diagram."
+            icon={<LuGitCompareArrows size={20} />}
+          />
+          <FeatureCard
+            title="AI Assistant"
+            description="Use AI to filter and transform data based on your needs."
+            icon={<GoDependabot size={20} />}
+          />
+        </Stack>
+        <Divider orientation="vertical" mx="md" />
+        <Box>
+          <Flex justify="center" align="center" gap="xs">
+            <Image
+              ml="auto"
+              pl="28"
+              src="https://todiagram.com/logo-64x64.png"
+              alt="todiagram"
+              width={30}
+              height={30}
+            />
+            <Text fz="24" fw="600" c="bright">
+              JSON Crack 2.0
+            </Text>
+            <CloseButton ml="auto" onClick={handleCloseModal} />
+          </Flex>
+          <UpgradeContent direction="column-reverse" maw="400" />
+          <Group justify="center" gap="xs" mt="md">
+            <Button
+              component={Link}
+              href="https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=upgrade_modal"
+              rel="noopener"
+              target="_blank"
+              fz="lg"
+              fw="600"
+              size="md"
+              rightSection={<LuChevronRight />}
+              color="green"
+              fullWidth
+            >
+              Try now
+            </Button>
+          </Group>
+        </Box>
       </Flex>
-      <UpgradeContent direction="column-reverse" />
-      <Group justify="center" gap="lg" mt="xl">
-        <Button size="md" onClick={handleCloseModal} color="gray" variant="light">
-          Maybe later
-        </Button>
-        <Link
-          href="https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=upgrade_modal"
-          rel="noopener"
-          target="_blank"
-        >
-          <Button size="md" onClick={handleCloseModal} leftSection={<LuZap />} color="teal">
-            Try for free &rarr;
-          </Button>
-        </Link>
-      </Group>
     </Modal>
   );
 };
diff --git a/src/pages/editor.tsx b/src/pages/editor.tsx
@@ -7,7 +7,7 @@ import styled, { ThemeProvider } from "styled-components";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Allotment } from "allotment";
 import "allotment/dist/style.css";
-import Cookie from "js-cookie";
+// import Cookie from "js-cookie";
 import { NextSeo } from "next-seo";
 import { SEO } from "../constants/seo";
 import { darkTheme, lightTheme } from "../constants/theme";
@@ -74,10 +74,10 @@ const EditorPage = () => {
   const setVisible = useModal(state => state.setVisible);
 
   useEffect(() => {
-    const isUpgradeShown = Cookie.get("upgrade_shown");
-    if (!isUpgradeShown) {
-      setTimeout(() => setVisible("UpgradeModal", true), 30_000);
-    }
+    // const isUpgradeShown = Cookie.get("upgrade_shown");
+    // if (!isUpgradeShown) {
+    setTimeout(() => setVisible("UpgradeModal", true), 3_000);
+    // }
   }, [setVisible]);
 
   useEffect(() => {
