update upgrade modal text

Author: AykutSarac

src/containers/Modals/DownloadModal/index.tsx

@@ -136,9 +136,9 @@ export const DownloadModal = ({ opened, onClose }: ModalProps) => {
         onChange={e => setExtension(e as Extensions)}
         fullWidth
         data={[
-          { label: "SVG", value: Extensions.SVG },
           { label: "PNG", value: Extensions.PNG },
           { label: "JPEG", value: Extensions.JPEG },
+          { label: "SVG", value: Extensions.SVG },
         ]}
         mb="lg"
       />

src/containers/Modals/UpgradeModal/index.tsx

@@ -1,17 +1,33 @@
 import React from "react";
 import Link from "next/link";
 import type { ModalProps } from "@mantine/core";
-import { Text, Divider, List, Button, Modal, Flex, Box, AspectRatio } from "@mantine/core";
+import {
+  Text,
+  Divider,
+  List,
+  Button,
+  Modal,
+  Flex,
+  Box,
+  AspectRatio,
+  ThemeIcon,
+  Image,
+} from "@mantine/core";
 import { IoMdCheckmarkCircleOutline } from "react-icons/io";
 import { MdChevronRight } from "react-icons/md";
 
 export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
   return (
     <Modal
       title={
-        <Text fz="h2" fw={600}>
-          Try ToDiagram for free
-        </Text>
+        <Flex align="center" gap="8">
+          <ThemeIcon variant="transparent">
+            <Image src="https://todiagram.com/logo.svg" alt="ToDiagram" width={24} height={24} />
+          </ThemeIcon>
+          <Text fz="h2" fw={600}>
+            Get more with ToDiagram
+          </Text>
+        </Flex>
       }
       size="1000"
       opened={opened}
@@ -22,21 +38,27 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
       <Flex align="center">
         <Box flex="0.6">
           <Text fz="sm" mb="sm">
-            More productivity. More power. Try our most-requested features, free for 7 days.
+            More productivity. More power. Our most-requested features are now available on a
+            refined platform.
           </Text>
           <Text fz="sm" fw={500} mb="sm">
-            Here&apos;s what you get with ToDiagram.
+            Here&apos;s what you get with ToDiagram:
           </Text>
           <List spacing="6" fz="sm" icon={<IoMdCheckmarkCircleOutline size="24" color="#16a34a" />}>
-            <List.Item>Larger data support up to 4 MB</List.Item>
+            <List.Item>
+              Larger data support up to{" "}
+              <Text component="span" inherit fw={600}>
+                4 MB
+              </Text>
+            </List.Item>
             <List.Item>Edit data directly on visualizations</List.Item>
             <List.Item>Compare data differences on graphs</List.Item>
             <List.Item>AI-powered data filter</List.Item>
             <List.Item>Customizable graph colors</List.Item>
             <List.Item>Tabs for multiple documents</List.Item>
-            <List.Item>...and more</List.Item>
+            <List.Item>...faster, and more</List.Item>
           </List>
-          <Link href="https://todiagram.com/#pricing" target="_blank" passHref>
+          <Link href="https://todiagram.com" target="_blank" passHref>
             <Button
               color="green"
               fullWidth
@@ -46,7 +68,7 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
               radius="md"
               rightSection={<MdChevronRight size="24" />}
             >
-              Start free trial
+              Get Started
             </Button>
           </Link>
         </Box>

src/containers/Toolbar/index.tsx

@@ -103,7 +103,7 @@ export const Toolbar = ({ isWidget = false }: ToolbarProps) => {
             <Flex align="center" gap="6">
               <LuCrown size="16" />
               <Text c="bright" fw={600} fz="xs">
-                Try Pro for 7 days
+                Unlock advanced features
               </Text>
             </Flex>
           </StyledToolElement>