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 {
+import { Button, Modal, FocusTrap, Image, Text, Group, Divider } from "@mantine/core";
-  Button,
-  Modal,
-  Flex,
-  Stack,
-  Title,
-  CloseButton,
-  FocusTrap,
-  Image,
-  Divider,
-  List,
-  ThemeIcon,
-  Anchor,
-} 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"
+      radius="md"
-      withCloseButton={false}
-      styles={{ body: { padding: 0 } }}
       overlayProps={{ blur: 2 }}
+      withCloseButton={false}
+      closeOnClickOutside={false}
     >
       <FocusTrap.InitialFocus />
-      <Flex>
+      <Image
-        <Image
+        src={`/assets/diagram-${darkmodeEnabled ? "dark" : "light"}.png`}
-          src={`/assets/hp-${darkmodeEnabled ? "dark" : "light"}.png`}
+        alt="diagram"
-          alt="diagram"
+        width="auto"
-          maw={300}
+        style={{
-          height="auto"
+          filter: "drop-shadow(4px -3px 3px rgba(0, 0, 0, 0.2))",
-          style={{ objectPosition: "left" }}
+        }}
-        />
+      />
-        <Divider orientation="vertical" />
+      <Divider mx="-md" />
-        <Stack gap="24" px="40" py="20" w="100%">
+      <Text ta="center" fz="md" mt="lg">
-          <Flex justify="space-between" mr="-20">
+        We&apos;ve been working on something big -{" "}
-            <Title c="bright" fw="500" fz="24">
+        <Text component="span" fw="bold" inherit>
-              Try the new editor!
+          Ready to explore?
-            </Title>
+        </Text>
-            <CloseButton onClick={handleCloseModal} />
+      </Text>
-          </Flex>
+      <Group mt="md" justify="space-between">
-          <List
+        <Button variant="default" size="md" onClick={handleCloseModal}>
-            spacing="4"
+          Not now
-            icon={
+        </Button>
-              <ThemeIcon variant="transparent" radius="xl" size="sm" color="green">
+        <Button
-                <LuCheckCircle size="16" />
+          component="a"
-              </ThemeIcon>
+          href="https://todiagram.com/editor?utm_source=jsoncrack&utm_medium=upgrade_modal"
-            }
+          target="_blank"
-          >
+          color="red"
-            <List.Item>Large data support</List.Item>
+          size="md"
-            <List.Item>Custom themes</List.Item>
+          leftSection={
-            <List.Item>Cloud Storage</List.Item>
+            <Image
-            <List.Item>Compare Data</List.Item>
+              src="https://todiagram.com/logo.svg"
-            <List.Item>AI-Filter</List.Item>
+              alt="logo"
-            <List.Item>API Integration</List.Item>
+              w={20}
-            <List.Item>
+              style={{ filter: "grayscale(1) brightness(0) invert(1)" }}
-              <Anchor
+            />
-                href="https://chromewebstore.google.com/detail/todiagram/gpcnkpjdmgihedngamkhendifclghjhn"
+          }
-                target="_blank"
+        >
-                rel="noopener"
+          Try ToDiagram!
-                c="inherit"
+        </Button>
-                td="underline"
+      </Group>
-              >
-                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>
     </Modal>
   );
 };