fix icons and update upgrade wordings

2025-02-04 01:32:54 +08:00 · 2025-01-23 10:33:56 +03:00 · 2025-01-23 10:33:56 +03:00 · 9bd914cfb9
commit 9bd914cfb9
parent 650e7e7b52
10 changed files with 124 additions and 137 deletions
--- a/package.json
+++ b/package.json
@ -52,7 +52,7 @@
    "react-countup": "^6.5.3",
    "react-dom": "^18.3.1",
    "react-hot-toast": "^2.4.1",
-    "react-icons": "^5.2.1",
+    "react-icons": "^5.4.0",
    "react-json-tree": "^0.18.0",
    "react-linkify-it": "^1.0.8",
    "react-text-transition": "^3.1.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -105,8 +105,8 @@ importers:
        specifier: ^2.4.1
        version: 2.4.1(csstype@3.1.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
      react-icons:
-        specifier: ^5.2.1
-        version: 5.2.1(react@18.3.1)
+        specifier: ^5.4.0
+        version: 5.4.0(react@18.3.1)
      react-json-tree:
        specifier: ^0.18.0
        version: 0.18.0(@types/react@18.2.51)(react@18.3.1)
@ -2325,8 +2325,8 @@ packages:
      react: '>=16'
      react-dom: '>=16'

-  react-icons@5.2.1:
-    resolution: {integrity: sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==}
+  react-icons@5.4.0:
+    resolution: {integrity: sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==}
    peerDependencies:
      react: '*'

@ -5274,7 +5274,7 @@ snapshots:
    transitivePeerDependencies:
      - csstype

-  react-icons@5.2.1(react@18.3.1):
+  react-icons@5.4.0(react@18.3.1):
    dependencies:
      react: 18.3.1

--- a/src/features/editor/Toolbar/OptionsMenu.tsx
+++ b/src/features/editor/Toolbar/OptionsMenu.tsx
@ -3,13 +3,10 @@ import { Menu, Text, Flex } from "@mantine/core";
 import { event as gaEvent } from "nextjs-google-analytics";
 import { BsCheck2 } from "react-icons/bs";
 import { MdSettings } from "react-icons/md";
-import { VscLock } from "react-icons/vsc";
 import useConfig from "src/store/useConfig";
-import useModal from "src/store/useModal";
 import { StyledToolElement } from "./styles";

 export const OptionsMenu = () => {
-  const setVisible = useModal(state => state.setVisible);
  const toggleGestures = useConfig(state => state.toggleGestures);
  const toggleChildrenCount = useConfig(state => state.toggleChildrenCount);
  const toggleDarkMode = useConfig(state => state.toggleDarkMode);
@ -88,13 +85,6 @@ export const OptionsMenu = () => {
        >
          <Text size="xs">Dark Mode</Text>
        </Menu.Item>
-        <Menu.Item
-          closeMenuOnClick
-          leftSection={<VscLock />}
-          onClick={() => setVisible("UpgradeModal", true)}
-        >
-          <Text size="xs">Customize Graph Colors</Text>
-        </Menu.Item>
      </Menu.Dropdown>
    </Menu>
  );
--- a/src/features/editor/Toolbar/ToolsMenu.tsx
+++ b/src/features/editor/Toolbar/ToolsMenu.tsx
@ -5,11 +5,9 @@ import { event as gaEvent } from "nextjs-google-analytics";
 import toast from "react-hot-toast";
 import { CgChevronDown } from "react-icons/cg";
 import { FaRandom } from "react-icons/fa";
-import { FaWandMagicSparkles } from "react-icons/fa6";
-import { LuGlobe } from "react-icons/lu";
-import { MdCompare, MdFilterListAlt } from "react-icons/md";
+import { MdFilterListAlt } from "react-icons/md";
 import { SiJsonwebtokens } from "react-icons/si";
-import { VscSearchFuzzy, VscJson, VscGroupByRefType, VscLock } from "react-icons/vsc";
+import { VscSearchFuzzy, VscJson, VscGroupByRefType } from "react-icons/vsc";
 import { jsonToContent } from "src/lib/utils/jsonAdapter";
 import useFile from "src/store/useFile";
 import useJson from "src/store/useJson";
@ -110,39 +108,6 @@ export const ToolsMenu = () => {
        <Menu.Item fz={12} leftSection={<FaRandom />} onClick={randomizeData}>
          Randomize Data
        </Menu.Item>
-        <Menu.Item
-          fz={12}
-          leftSection={<LuGlobe />}
-          rightSection={<VscLock />}
-          onClick={() => {
-            setVisible("UpgradeModal", true);
-            gaEvent("rest_client_modal");
-          }}
-        >
-          REST Client
-        </Menu.Item>
-        <Menu.Item
-          fz={12}
-          leftSection={<FaWandMagicSparkles />}
-          rightSection={<VscLock />}
-          onClick={() => {
-            setVisible("UpgradeModal", true);
-            gaEvent("open_ai_filter_modal");
-          }}
-        >
-          AI-Powered Filter
-        </Menu.Item>
-        <Menu.Item
-          fz={12}
-          leftSection={<MdCompare />}
-          rightSection={<VscLock />}
-          onClick={() => {
-            setVisible("UpgradeModal", true);
-            gaEvent("open_compare_data_modal");
-          }}
-        >
-          Compare Data
-        </Menu.Item>
      </Menu.Dropdown>
    </Menu>
  );
--- a/src/features/editor/Toolbar/index.tsx
+++ b/src/features/editor/Toolbar/index.tsx
@ -87,15 +87,13 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
      <Group gap="6" justify="right" w="100%" style={{ flexWrap: "nowrap" }}>
        {!isWidget && (
          <Button
-            component="a"
-            href="https://todiagram.com/?utm_source=jsoncrack&utm_medium=toolbar"
-            target="_blank"
            variant="light"
            color="gray"
            size="compact-sm"
            fz="12"
            fw="600"
            mr="6"
+            onClick={() => setVisible("UpgradeModal", true)}
          >
            JSON Crack v2.0 🔥
          </Button>
--- a/src/features/editor/views/GraphView/NotSupported.tsx
+++ b/src/features/editor/views/GraphView/NotSupported.tsx
@ -1,8 +1,8 @@
 import React from "react";
 import Link from "next/link";
-import { Button, Flex, Title, Image } from "@mantine/core";
+import { Button, Text } from "@mantine/core";
 import styled from "styled-components";
-import { MdChevronRight } from "react-icons/md";
+import { UpgradeContent } from "src/features/modals/UpgradeModal";

 const StyledNotSupported = styled.div`
  position: relative;
@ -12,13 +12,8 @@ const StyledNotSupported = styled.div`
  justify-content: center;
  width: 100%;
  height: 100%;
-  background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
  overflow: hidden;

-  img {
-    filter: drop-shadow(2px 2px 1px black);
-  }
-
  .glowing {
    position: relative;
    min-width: 700px;
@ -132,14 +127,6 @@ const StyledNotSupported = styled.div`
  }
 `;

-const StyledInfo = styled.p`
-  max-width: 500px;
-  font-weight: 600;
-  font-size: 26px;
-  text-align: center;
-  color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
-`;
-
 const StyledContent = styled.div`
  position: absolute;
  left: 0;
@ -157,26 +144,19 @@ export const NotSupported = () => {
  return (
    <StyledNotSupported>
      <StyledContent>
-        <Flex align="center" justify="center" gap="16" mb="lg">
-          <Image src="https://todiagram.com/logo.svg" alt="ToDiagram" w="48" h="48" />
-          <Title fz="48" style={{ pointerEvents: "none", mixBlendMode: "difference" }}>
-            ToDiagram
-          </Title>
-        </Flex>
-        <StyledInfo>
-          Use ToDiagram for larger data size, faster performance, and more features.
-        </StyledInfo>
-        <Link href="https://todiagram.com" target="_blank" passHref rel="noopener">
-          <Button
-            mt="lg"
-            size="lg"
-            fw="bolder"
-            color="#FE634E"
-            autoContrast
-            radius="md"
-            rightSection={<MdChevronRight size="24" />}
-          >
-            Go to ToDiagram
+        <UpgradeContent direction="column-reverse" />
+        <Text c="dimmed" maw="400" my="lg" ta="center">
+          JSON Crack is unable to support data of this size. Please try our new editor for better
+          performance.
+        </Text>
+        <Link
+          rel="noopener"
+          href="https://todiagram.com?utm_source=jsoncrack&utm_medium=data_limit"
+          target="_blank"
+          passHref
+        >
+          <Button size="lg" color="green" radius="xl">
+            Try New Editor &rarr;
          </Button>
        </Link>
      </StyledContent>
--- a/src/features/modals/UpgradeModal/index.tsx
+++ b/src/features/modals/UpgradeModal/index.tsx
@ -1,12 +1,82 @@
 import React from "react";
-import type { ModalProps } from "@mantine/core";
-import { Button, Modal, FocusTrap, Image, Text, Group, Divider } from "@mantine/core";
+import Link from "next/link";
+import type { FlexProps, ModalProps } from "@mantine/core";
+import {
+  Modal,
+  Text,
+  Flex,
+  List,
+  ThemeIcon,
+  Divider,
+  Button,
+  Group,
+  Anchor,
+  Image,
+  Box,
+} from "@mantine/core";
 import Cookie from "js-cookie";
+import { LuCheck } from "react-icons/lu";
+import { Logo } from "src/features/editor/Toolbar/Logo";
 import useConfig from "src/store/useConfig";

-export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
+export const UpgradeContent = (props: FlexProps) => {
  const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);

+  return (
+    <Flex direction="column" gap="0" {...props}>
+      <Flex gap="xl">
+        <List
+          icon={
+            <ThemeIcon color="green" variant="transparent">
+              <LuCheck />
+            </ThemeIcon>
+          }
+        >
+          <List.Item>Load larger datasets (100x more)</List.Item>
+          <List.Item>See parent-child relationships</List.Item>
+          <List.Item>Modify data from diagrams</List.Item>
+        </List>
+        <List
+          icon={
+            <ThemeIcon color="green" variant="transparent">
+              <LuCheck />
+            </ThemeIcon>
+          }
+        >
+          <List.Item>Customization options</List.Item>
+          <List.Item>Improved UI & Tools</List.Item>
+          <List.Item>
+            <Anchor
+              href="https://chromewebstore.google.com/detail/todiagram/gpcnkpjdmgihedngamkhendifclghjhn"
+              rel="noopener"
+              target="_blank"
+              inherit
+            >
+              Chrome Extension
+            </Anchor>
+          </List.Item>
+        </List>
+      </Flex>
+      <Box mt="lg">
+        <Image
+          src={`/assets/diagram-${darkmodeEnabled ? "dark" : "light"}.png`}
+          alt="diagram"
+          mah="120"
+          fit="cover"
+          mx="auto"
+          width="auto"
+          style={{
+            filter: "drop-shadow(3px -3px 2px rgba(0, 0, 0, 0.2))",
+            objectPosition: "top",
+          }}
+        />
+        <Divider maw="600" w="100%" mb="lg" />
+      </Box>
+    </Flex>
+  );
+};
+
+export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
  const handleCloseModal = () => {
    Cookie.set("upgrade_shown", "true", { expires: 3 });
    onClose();
@ -14,7 +84,7 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {

  return (
    <Modal
-      size="500"
+      size="auto"
      opened={opened}
      onClose={handleCloseModal}
      zIndex={1001}
@ -23,45 +93,29 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
      overlayProps={{ blur: 2 }}
      withCloseButton={false}
      closeOnClickOutside={false}
+      title={
+        <Flex align="center" gap="sm">
+          <Logo />
+          <Text fz="lg" fw="600">
+            Upgrade to New Editor
+          </Text>
+        </Flex>
+      }
    >
-      <FocusTrap.InitialFocus />
-      <Image
-        src={`/assets/diagram-${darkmodeEnabled ? "dark" : "light"}.png`}
-        alt="diagram"
-        width="auto"
-        style={{
-          filter: "drop-shadow(4px -3px 3px rgba(0, 0, 0, 0.2))",
-        }}
-      />
-      <Divider mx="-md" />
-      <Text ta="center" fz="md" mt="lg">
-        We&apos;ve been working on something big -{" "}
-        <Text component="span" fw="bold" inherit>
-          Ready to explore?
-        </Text>
-      </Text>
-      <Group mt="md" justify="space-between">
-        <Button variant="default" size="md" onClick={handleCloseModal}>
-          Not now
+      <UpgradeContent />
+      <Group justify="space-between">
+        <Button onClick={handleCloseModal} color="gray" variant="subtle">
+          Maybe later
        </Button>
-        <Button
-          component="a"
-          href="https://todiagram.com/?utm_source=jsoncrack&utm_medium=upgrade_modal"
+        <Link
+          href="https://todiagram.com/?utm_source=app&utm_medium=upgrade_modal"
+          rel="noopener"
          target="_blank"
-          color="green"
-          size="md"
-          onClick={handleCloseModal}
-          leftSection={
-            <Image
-              src="https://todiagram.com/logo.svg"
-              alt="logo"
-              w={20}
-              style={{ filter: "grayscale(1) brightness(0) invert(1)" }}
-            />
-          }
        >
-          Try ToDiagram!
-        </Button>
+          <Button onClick={handleCloseModal} color="gray" variant="outline">
+            Try for Free &rarr;
+          </Button>
+        </Link>
      </Group>
    </Modal>
  );
--- a/src/layout/ConverterLayout/ToolPage.tsx
+++ b/src/layout/ConverterLayout/ToolPage.tsx
@ -2,7 +2,7 @@ import React, { useEffect, useRef } from "react";
 import { Box, Container, Flex, Paper, Text, Title } from "@mantine/core";
 import { Editor } from "@monaco-editor/react";
 import { NextSeo } from "next-seo";
-import { LuCheck, LuXCircle } from "react-icons/lu";
+import { LuCheck, LuCircleX } from "react-icons/lu";
 import { SEO } from "src/constants/seo";
 import { type FileFormat, formats } from "src/enums/file.enum";
 import { PageLinks } from "src/layout/ConverterLayout/PageLinks";
@ -68,7 +68,7 @@ export const ToolPage = ({ from, to }: ToolPageProps) => {
              <Flex justify="space-between" align="center">
                <Text c="gray.3">{fromLabel}</Text>
                {contentHasError && !!originalContent ? (
-                  <LuXCircle color="red" />
+                  <LuCircleX color="red" />
                ) : (
                  <LuCheck color="lightgreen" />
                )}
--- a/src/layout/TypeLayout/TypegenWrapper.tsx
+++ b/src/layout/TypeLayout/TypegenWrapper.tsx
@ -2,7 +2,7 @@ import React, { useEffect, useRef } from "react";
 import { Box, Container, Flex, Paper, Title, Text } from "@mantine/core";
 import { Editor } from "@monaco-editor/react";
 import { NextSeo } from "next-seo";
-import { LuCheck, LuXCircle } from "react-icons/lu";
+import { LuCheck, LuCircleX } from "react-icons/lu";
 import { SEO } from "src/constants/seo";
 import { type FileFormat, formats, type TypeLanguage, typeOptions } from "src/enums/file.enum";
 import { editorOptions } from "src/layout/ConverterLayout/options";
@ -58,7 +58,7 @@ export const TypegenWrapper = ({ from, to }: ConverterPagesProps) => {
              <Flex justify="space-between" align="center">
                <Text c="gray.3">{fromLabel}</Text>
                {contentHasError && !!originalContent ? (
-                  <LuXCircle color="red" />
+                  <LuCircleX color="red" />
                ) : (
                  <LuCheck color="lightgreen" />
                )}
--- a/src/pages/tools/json-schema.tsx
+++ b/src/pages/tools/json-schema.tsx
@ -3,7 +3,7 @@ import { Box, Button, Container, Flex, Paper, Title, Text } from "@mantine/core"
 import { Editor, type OnMount } from "@monaco-editor/react";
 import { JSONSchemaFaker } from "json-schema-faker";
 import { NextSeo } from "next-seo";
-import { LuCheck, LuXCircle } from "react-icons/lu";
+import { LuCheck, LuCircleX } from "react-icons/lu";
 import { SEO } from "src/constants/seo";
 import { FileFormat, TypeLanguage } from "src/enums/file.enum";
 import { editorOptions } from "src/layout/ConverterLayout/options";
@ -79,7 +79,7 @@ const JSONSchemaTool = () => {
            <Box p="xs" bg="gray">
              <Flex justify="space-between" align="center">
                <Text c="gray.3">JSON</Text>
-                {jsonError ? <LuXCircle color="red" /> : <LuCheck color="lightgreen" />}
+                {jsonError ? <LuCircleX color="red" /> : <LuCheck color="lightgreen" />}
              </Flex>
            </Box>
            <Editor
@ -96,7 +96,7 @@ const JSONSchemaTool = () => {
            <Box p="xs" bg="gray">
              <Flex justify="space-between" align="center">
                <Text c="gray.3">JSON Schema</Text>
-                {jsonSchemaError ? <LuXCircle color="red" /> : <LuCheck color="lightgreen" />}
+                {jsonSchemaError ? <LuCircleX color="red" /> : <LuCheck color="lightgreen" />}
              </Flex>
            </Box>
            <Editor