feat: update upgrade ui

Author: AykutSarac

src/features/editor/Toolbar/index.tsx

@@ -83,7 +83,9 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
       <Group gap="6" justify="right" w="100%" style={{ flexWrap: "nowrap" }}>
         {!isWidget && (
           <Button
-            variant="default"
+            variant="gradient"
+            gradient={{ from: "teal", to: "blue", deg: 45 }}
+            autoContrast
             size="compact-sm"
             fz="12"
             fw="600"

src/features/editor/views/GraphView/NotSupported.tsx

@@ -151,12 +151,12 @@ export const NotSupported = () => {
         </Text>
         <Link
           rel="noopener"
-          href="https://todiagram.com?utm_source=jsoncrack&utm_medium=data_limit"
+          href="https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=data_limit"
           target="_blank"
           passHref
         >
-          <Button size="lg" color="green" radius="xl">
-            Try New Editor &rarr;
+          <Button size="lg" color="indigo" radius="xl">
+            Open New Editor &rarr;
           </Button>
         </Link>
       </StyledContent>

src/features/modals/UpgradeModal/index.tsx

@@ -94,7 +94,7 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
       withCloseButton={false}
       closeOnClickOutside={false}
       title={
-        <Flex align="center" gap="sm">
+        <Flex align="center" gap="4">
           <Logo />
           <Text fz="lg" fw="600">
             Upgrade to New Editor
@@ -108,12 +108,12 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
           Maybe later
         </Button>
         <Link
-          href="https://todiagram.com/?utm_source=jsoncrack&utm_medium=upgrade_modal"
+          href="https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=upgrade_modal"
           rel="noopener"
           target="_blank"
         >
           <Button onClick={handleCloseModal} color="gray" variant="outline">
-            Try for Free &rarr;
+            Open Editor &rarr;
           </Button>
         </Link>
       </Group>

src/layout/Landing/LovedBy.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Container, Flex, Text, Image } from "@mantine/core";
+import { Button, Container, Flex, Text } from "@mantine/core";
 import styled from "styled-components";
 import CountUp from "react-countup";
 import { FaGithub, FaHackerNews, FaLinkedin, FaProductHunt, FaXTwitter } from "react-icons/fa6";
@@ -84,23 +84,6 @@ export const LovedBy = ({ stars }: LovedByProps) => {
         >
           Share on LinkedIn
         </Button>
-        <Button
-          component="a"
-          href="https://todiagram.com?utm_source=jsoncrack&utm_medium=loved_by"
-          color="#fe5e49"
-          leftSection={
-            <Image
-              src="https://todiagram.com/192.png"
-              loading="lazy"
-              alt="Todiagram Logo"
-              w={14}
-              h={14}
-              style={{ filter: "brightness(0) saturate(100%) invert(100%)" }}
-            />
-          }
-        >
-          ToDiagram
-        </Button>
       </Flex>
     </Container>
   );

src/store/useFile.ts

@@ -11,42 +11,40 @@ import useJson from "./useJson";
 
 const defaultJson = JSON.stringify(
   {
-    appName: "JSON Crack",
-    author: "Aykut Saraç",
-    launched: 2022,
-    openSource: true,
-    stars: 34633,
-    upgrade: {
-      appName: "ToDiagram",
-      detail: "New powerful JSON editor.",
-      website: "https://todiagram.com",
-      brandColor: "#fe5e49",
-      paid: true,
-    },
-    milestones: [
-      {
-        title: "Launch",
-        year: 2022,
-      },
-      {
-        title: "10K Stars",
-        date: 2022,
+    orderId: "A12345",
+    customer: {
+      name: "Jane Doe",
+      email: "[email protected]",
+      address: {
+        street: "123 Main St",
+        city: "New York",
+        state: "NY",
+        zipCode: "10001",
       },
+      isMember: true,
+    },
+    products: [
       {
-        title: "20K Stars",
-        date: 2023,
+        productId: "P001",
+        name: "Wireless Mouse",
+        quantity: 2,
+        price: 25.5,
+        image: "https://example.com/wireless-mouse.jpg",
+        color: "#3498db",
       },
       {
-        title: "30K Stars",
-        date: 2024,
+        productId: "P002",
+        name: "Keyboard",
+        quantity: 1,
+        price: 45,
+        image: "https://example.com/keyboard.jpg",
+        color: "#2ecc71",
       },
     ],
-    social: {
-      github: "https://github.com/AykutSarac/jsoncrack.com",
-      twitter: "https://x.com/jsoncrack",
-      linkedin: "https://linkedin.com/company/todiagram",
-    },
-    images: ["https://jsoncrack.com/assets/192.png"],
+    orderDate: "2025-01-02T10:15:30Z",
+    status: "Processing",
+    isPaid: false,
+    totalAmount: 96,
   },
   null,
   2