update upgrade modal ui

src/features/modals/UpgradeModal/index.tsx

@@ -1,21 +1,7 @@
 import React from "react";
 import type { ModalProps } from "@mantine/core";
-import {
-  Button,
-  Modal,
-  Flex,
-  Stack,
-  Title,
-  CloseButton,
-  FocusTrap,
-  Image,
-  Divider,
-  List,
-  ThemeIcon,
-  Anchor,
-} from "@mantine/core";
+import { Button, Modal, FocusTrap, Image, Text, Group, Divider } from "@mantine/core";
 import Cookie from "js-cookie";
-import { LuCheckCircle } from "react-icons/lu";
 import useConfig from "src/store/useConfig";
 
 export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
@@ -28,80 +14,54 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
 
   return (
     <Modal
-      size="700"
+      size="500"
       opened={opened}
       onClose={handleCloseModal}
       zIndex={1001}
       centered
-      radius="lg"
-      withCloseButton={false}
-      styles={{ body: { padding: 0 } }}
+      radius="md"
       overlayProps={{ blur: 2 }}
+      withCloseButton={false}
+      closeOnClickOutside={false}
     >
       <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" w="100%">
-          <Flex justify="space-between" mr="-20">
-            <Title c="bright" fw="500" fz="24">
-              Try the new editor!
-            </Title>
-            <CloseButton onClick={handleCloseModal} />
-          </Flex>
-          <List
-            spacing="4"
-            icon={
-              <ThemeIcon variant="transparent" radius="xl" size="sm" color="green">
-                <LuCheckCircle size="16" />
-              </ThemeIcon>
-            }
-          >
-            <List.Item>Large data support</List.Item>
-            <List.Item>Custom themes</List.Item>
-            <List.Item>Cloud Storage</List.Item>
-            <List.Item>Compare Data</List.Item>
-            <List.Item>AI-Filter</List.Item>
-            <List.Item>API Integration</List.Item>
-            <List.Item>
-              <Anchor
-                href="https://chromewebstore.google.com/detail/todiagram/gpcnkpjdmgihedngamkhendifclghjhn"
-                target="_blank"
-                rel="noopener"
-                c="inherit"
-                td="underline"
-              >
-                Chrome Extension
-              </Anchor>
-            </List.Item>
-          </List>
-          <Button
-            component="a"
-            href="https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=upgrade_modal"
-            target="_blank"
-            color="green"
-            size="md"
-            radius="md"
-            fullWidth
-            leftSection={
-              <Image
-                src="https://todiagram.com/logo.svg"
-                alt="logo"
-                w={20}
-                style={{ filter: "grayscale(1) brightness(0) invert(1)" }}
-              />
-            }
-          >
-            Open Editor
-          </Button>
-        </Stack>
-      </Flex>
+      <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
+        </Button>
+        <Button
+          component="a"
+          href="https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=upgrade_modal"
+          target="_blank"
+          color="red"
+          size="md"
+          leftSection={
+            <Image
+              src="https://todiagram.com/logo.svg"
+              alt="logo"
+              w={20}
+              style={{ filter: "grayscale(1) brightness(0) invert(1)" }}
+            />
+          }
+        >
+          Try ToDiagram!
+        </Button>
+      </Group>
     </Modal>
   );
 };