update modal ui

Author: AykutSarac

public/assets/hp-dark.png

@@ -10,15 +10,26 @@ import {
   ThemeIcon,
   CloseButton,
   FocusTrap,
+  Image,
+  Divider,
 } from "@mantine/core";
+import Cookie from "js-cookie";
 import { LuCrown, LuTrendingUp } from "react-icons/lu";
+import useConfig from "src/store/useConfig";
 
 export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
+  const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
+
+  const handleCloseModal = () => {
+    Cookie.set("upgrade_shown", "true", { expires: 3 });
+    onClose();
+  };
+
   return (
     <Modal
-      size="430"
+      size="700"
       opened={opened}
-      onClose={onClose}
+      onClose={handleCloseModal}
       zIndex={1001}
       centered
       radius="lg"
@@ -28,23 +39,31 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
     >
       <FocusTrap.InitialFocus />
       <Flex>
+        <Image
+          src={`/assets/hp-${darkmodeEnabled ? "dark" : "light"}.png`}
+          alt="diagram"
+          maw={300}
+          height="auto"
+          style={{ objectPosition: "left" }}
+        />
+        <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>
-            <CloseButton onClick={onClose} />
+            <CloseButton onClick={handleCloseModal} />
           </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">
-                New diagram structure
+                Load up to 4 MBs
               </Title>
               <Text fz="14" c="dimmed">
-                50% less size, faster & customizable!
+                We made it easy to visualize, format, and explore JSON data, faster than ever.
               </Text>
             </Stack>
           </Flex>
@@ -54,7 +73,7 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
             </ThemeIcon>
             <Stack gap="4">
               <Title c="gray" order={3} fw="500" fz="16">
-                Powerful
+                Powerful, colorful editor
               </Title>
               <Text fz="14" c="dimmed">
                 Modify data, preview images, inspect nodes, and more!
@@ -73,7 +92,7 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
           >
             Try premium for free, no registration
           </Button>
-          <Button size="md" variant="subtle" color="gray" radius="md" onClick={onClose}>
+          <Button size="md" variant="subtle" color="gray" radius="md" onClick={handleCloseModal}>
             Maybe later
           </Button>
         </Stack>

public/assets/hp-light.png

@@ -136,18 +136,6 @@ export const HeroSection = () => {
             >
               Go to Editor
             </Button>
-            <Button
-              component="a"
-              color="#202842"
-              href="https://todiagram.com/editor?utm_source=jsoncrack.com&utm_medium=cta&utm_campaign=hero"
-              target="_blank"
-              size="md"
-              variant="light"
-              radius="md"
-              fw="500"
-            >
-              Try Premium for Free
-            </Button>
           </Flex>
           <Flex gap="lg" wrap="wrap" justify="center" visibleFrom="xs">
             <Button
@@ -161,18 +149,6 @@ export const HeroSection = () => {
             >
               Go to Editor
             </Button>
-            <Button
-              component="a"
-              color="#202842"
-              href="https://todiagram.com/editor?utm_source=jsoncrack.com&utm_medium=cta&utm_campaign=hero"
-              target="_blank"
-              size="lg"
-              variant="light"
-              radius="md"
-              fw="500"
-            >
-              Try Premium for Free
-            </Button>
           </Flex>
         </Stack>
       </StyledHeroSectionBody>

src/features/modals/UpgradeModal/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useEffect } from "react";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import { useMantineColorScheme } from "@mantine/core";
@@ -7,6 +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 { NextSeo } from "next-seo";
 import { SEO } from "src/constants/seo";
 import { darkTheme, lightTheme } from "src/constants/theme";
@@ -16,6 +17,7 @@ import { Toolbar } from "src/features/editor/Toolbar";
 import useGraph from "src/features/editor/views/GraphView/stores/useGraph";
 import useConfig from "src/store/useConfig";
 import useFile from "src/store/useFile";
+import useModal from "src/store/useModal";
 
 const ModalController = dynamic(() => import("src/features/modals/ModalController"));
 const ExternalMode = dynamic(() => import("src/features/editor/ExternalMode"));
@@ -69,12 +71,18 @@ const EditorPage = () => {
   const checkEditorSession = useFile(state => state.checkEditorSession);
   const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
   const fullscreen = useGraph(state => state.fullscreen);
+  const setVisible = useModal(state => state.setVisible);
 
-  React.useEffect(() => {
+  useEffect(() => {
+    const isUpgradeShown = Cookie.get("upgrade_shown");
+    if (!isUpgradeShown) setVisible("UpgradeModal", true);
+  }, [setVisible]);
+
+  useEffect(() => {
     if (isReady) checkEditorSession(query?.json);
   }, [checkEditorSession, isReady, query]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setColorScheme(darkmodeEnabled ? "dark" : "light");
   }, [darkmodeEnabled, setColorScheme]);