feat: ui updates

src/containers/Modals/LoginModal/index.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import { Modal, Stack, Button, Text, Title, ModalProps } from "@mantine/core";
+import { Modal, Stack, Button, Text, ModalProps } from "@mantine/core";
 
 export const LoginModal: React.FC<ModalProps> = ({ opened, onClose }) => {
   return (
     <Modal title="Sign In" opened={opened} onClose={onClose} centered>
       <Stack py="sm">
-        <Title order={2}>Welcome Back!</Title>
         <Text>Login to unlock full potential of JSON Crack!</Text>
         <Button component="a" href="https://app.jsoncrack.com/sign-in" size="md" fullWidth>
           Sign In

src/containers/Modals/NodeModal/index.tsx

@@ -1,7 +1,9 @@
 import React from "react";
-import { Modal, Stack, Text, ScrollArea, ModalProps } from "@mantine/core";
+import { Modal, Stack, Text, ScrollArea, ModalProps, Button } from "@mantine/core";
 import { CodeHighlight } from "@mantine/code-highlight";
+import { VscLock } from "react-icons/vsc";
 import useGraph from "src/store/useGraph";
+import useModal from "src/store/useModal";
 
 const dataToString = (data: any) => {
   const text = Array.isArray(data) ? Object.fromEntries(data) : data;
@@ -14,6 +16,7 @@ const dataToString = (data: any) => {
 };
 
 export const NodeModal: React.FC<ModalProps> = ({ opened, onClose }) => {
+  const setVisible = useModal(state => state.setVisible);
   const nodeData = useGraph(state => dataToString(state.selectedNode?.text));
   const path = useGraph(state => state.selectedNode?.path || "");
 
@@ -28,8 +31,14 @@ export const NodeModal: React.FC<ModalProps> = ({ opened, onClose }) => {
             <CodeHighlight code={nodeData} miw={350} maw={600} language="json" withCopyButton />
           </ScrollArea.Autosize>
         </Stack>
+        <Button
+          onClick={() => setVisible("premium")(true)}
+          rightSection={<VscLock strokeWidth={0.5} />}
+        >
+          Edit
+        </Button>
         <Text fz="sm" fw={700}>
-          Node Path
+          JSON Path
         </Text>
         <ScrollArea.Autosize maw={600}>
           <CodeHighlight

src/containers/Modals/PremiumModal/index.tsx

@@ -15,7 +15,7 @@ import { BsCheck } from "react-icons/bs";
 
 export const PremiumModal: React.FC<ModalProps> = ({ opened, onClose }) => {
   return (
-    <Modal title="Your Plan" size="auto" opened={opened} onClose={onClose} centered zIndex={202}>
+    <Modal title="Upgrade Plan" size="auto" opened={opened} onClose={onClose} centered zIndex={202}>
       <Flex gap="lg" justify="center" px="md">
         <Stack gap="xs">
           <Title order={3}>Free plan</Title>
@@ -62,10 +62,10 @@ export const PremiumModal: React.FC<ModalProps> = ({ opened, onClose }) => {
               </ThemeIcon>
             }
           >
-            <List.Item>5X Faster visualizations, no freezing</List.Item>
+            <List.Item>5X Faster visualizations, no lagging</List.Item>
             <List.Item>Accurate and compact graphs</List.Item>
             <List.Item>Edit data through visualizations</List.Item>
-            <List.Item>Bigger data support</List.Item>
+            <List.Item>Visualize data up to 5 MBs</List.Item>
             <List.Item>Compare data on graphs</List.Item>
             <List.Item>Save & share up to 200 files</List.Item>
           </List>

src/containers/Toolbar/ToolsMenu.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { Menu, Flex } from "@mantine/core";
 import { CgChevronDown } from "react-icons/cg";
+import { MdCompare } from "react-icons/md";
 import { SiJsonwebtokens } from "react-icons/si";
-import { VscSearchFuzzy, VscJson, VscGroupByRefType } from "react-icons/vsc";
+import { VscSearchFuzzy, VscJson, VscGroupByRefType, VscLock } from "react-icons/vsc";
 import { gaEvent } from "src/lib/utils/gaEvent";
 import useModal from "src/store/useModal";
 import * as Styles from "./styles";
@@ -20,6 +21,14 @@ export const ToolsMenu = () => {
         </Styles.StyledToolElement>
       </Menu.Target>
       <Menu.Dropdown>
+        <Menu.Item
+          fz={12}
+          leftSection={<MdCompare />}
+          rightSection={<VscLock />}
+          onClick={() => setVisible("premium")(true)}
+        >
+          Compare Data
+        </Menu.Item>
         <Menu.Item fz={12} leftSection={<VscSearchFuzzy />} onClick={() => setVisible("jq")(true)}>
           JSON Query (jq)
         </Menu.Item>

src/containers/Views/GraphView/index.tsx

@@ -138,10 +138,12 @@ const GraphCanvas = ({ isWidget }: GraphProps) => {
   );
 };
 
+const SUPPORTED_LIMIT = 600;
+
 export const Graph = ({ isWidget = false }: GraphProps) => {
   const setViewPort = useGraph(state => state.setViewPort);
   const viewPort = useGraph(state => state.viewPort);
-  const aboveSupportedLimit = useGraph(state => state.nodes.length > 800);
+  const aboveSupportedLimit = useGraph(state => state.nodes.length > SUPPORTED_LIMIT);
   const loading = useGraph(state => state.loading);
   const gesturesEnabled = useConfig(state => state.gesturesEnabled);
   const rulersEnabled = useConfig(state => state.rulersEnabled);

src/pages/pricing.tsx

@@ -60,7 +60,7 @@ export const PricingCards = () => {
           size="md"
           data={["Monthly", "Yearly"]}
           w={200}
-          radius="lg"
+          radius="xl"
         />
       </Center>
       <Flex gap="lg" wrap="wrap" justify="center" w="fit-content" p="lg" mx="auto" maw="100%">
@@ -140,8 +140,8 @@ export const PricingCards = () => {
         <StyledPaper>
           <Flex justify="space-between">
             <Stack gap="0">
-              <Badge mb="lg" size="lg" variant="outline" color="gray.3" c="dark" leftSection="✦">
-                Premium
+              <Badge mb="lg" size="lg" variant="filled" color="violet" c="white" leftSection="✦">
+                Popular
               </Badge>
 
               <Flex gap="xs" align="baseline">