feat: ui improvements

src/containers/Modals/DownloadModal/index.tsx

@@ -157,7 +157,7 @@ export const DownloadModal: React.FC<ModalProps> = ({ opened, onClose }) => {
         withPicker={false}
         fullWidth
       />
-      <Divider my="lg" />
+      <Divider my="xs" />
       <Group justify="right">
         <Button leftSection={<FiCopy />} onClick={clipboardImage}>
           Clipboard

src/containers/Modals/ImportModal/index.tsx

@@ -101,7 +101,7 @@ export const ImportModal: React.FC<ModalProps> = ({ opened, onClose }) => {
           <StyledFileName>{jsonFile?.name ?? "None"}</StyledFileName>
         </StyledUploadWrapper>
       </Stack>
-      <Divider py="xs" />
+      <Divider my="xs" />
       <Group justify="right">
         <Button onClick={handleImportFile} disabled={!(jsonFile || url)}>
           Import

src/containers/Modals/JQModal/index.tsx

@@ -1,5 +1,15 @@
 import React from "react";
-import { Stack, Modal, Button, ModalProps, Text, Anchor, Group, TextInput } from "@mantine/core";
+import {
+  Stack,
+  Modal,
+  Button,
+  ModalProps,
+  Text,
+  Anchor,
+  Group,
+  TextInput,
+  Divider,
+} from "@mantine/core";
 import { VscLinkExternal } from "react-icons/vsc";
 import useJsonQuery from "src/hooks/useJsonQuery";
 
@@ -28,6 +38,7 @@ export const JQModal: React.FC<ModalProps> = ({ opened, onClose }) => {
           value={query}
           onChange={e => setQuery(e.currentTarget.value)}
         />
+        <Divider my="xs" />
         <Group justify="right">
           <Button onClick={onApply}>Display on Graph</Button>
         </Group>

src/containers/Modals/JWTModal/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Stack, Modal, Button, ModalProps, Textarea } from "@mantine/core";
+import { Modal, Button, ModalProps, Textarea, Divider } from "@mantine/core";
 import { decode } from "jsonwebtoken";
 import useFile from "src/store/useFile";
 
@@ -18,22 +18,18 @@ export const JWTModal: React.FC<ModalProps> = ({ opened, onClose }) => {
 
   return (
     <Modal title="Decode JSON Web Token" opened={opened} onClose={onClose} centered>
-      <Stack py="sm">
+      <Textarea
-        <Textarea
+        placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6Ikhlcm93YW5kIiwidXJsIjoiaHR0cHM6Ly9oZXJvd2FuZC5jb20iLCJpYXQiOjE1MTYyMzkwMjJ9.Tmm3Miq6KWCF_QRn3iERhhXThJzv4LQPKYwBhYUld88"
-          placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6Ikhlcm93YW5kIiwidXJsIjoiaHR0cHM6Ly9oZXJvd2FuZC5jb20iLCJpYXQiOjE1MTYyMzkwMjJ9.Tmm3Miq6KWCF_QRn3iERhhXThJzv4LQPKYwBhYUld88"
+        value={token}
-          value={token}
+        onChange={e => setToken(e.target.value)}
-          onChange={e => setToken(e.target.value)}
+        autosize
-          fz="sm"
+        minRows={4}
-          fw={700}
+        data-autofocus
-          minRows={8}
+      />
-          data-autofocus
+      <Divider my="xs" />
-        >
+      <Button onClick={resolve} fullWidth>
-          Share Link
+        Resolve
-        </Textarea>
+      </Button>
-        <Button onClick={resolve} fullWidth>
-          Resolve
-        </Button>
-      </Stack>
     </Modal>
   );
 };

src/containers/Modals/SchemaModal/index.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { Stack, Modal, Button, ModalProps, Text, Anchor, Group } from "@mantine/core";
+import { Stack, Modal, Button, ModalProps, Text, Anchor, Group, Divider } from "@mantine/core";
 import Editor from "@monaco-editor/react";
 import { toast } from "react-hot-toast";
-import { VscLock } from "react-icons/vsc";
+import { VscLinkExternal, VscLock } from "react-icons/vsc";
 import useConfig from "src/store/useConfig";
 import useFile from "src/store/useFile";
 import useModal from "src/store/useModal";
@@ -12,7 +12,25 @@ export const SchemaModal: React.FC<ModalProps> = ({ opened, onClose }) => {
   const isPremium = useUser(state => state.premium);
   const showPremiumModal = useModal(state => state.setVisible("premium"));
   const setJsonSchema = useFile(state => state.setJsonSchema);
-  const [schema, setSchema] = React.useState("");
+  const [schema, setSchema] = React.useState(
+    JSON.stringify(
+      {
+        $schema: "http://json-schema.org/draft-04/schema#",
+        title: "Product",
+        description: "A product from Acme's catalog",
+        type: "object",
+        properties: {
+          id: {
+            description: "The unique identifier for a product",
+            type: "integer",
+          },
+        },
+        required: ["id"],
+      },
+      null,
+      2
+    )
+  );
   const darkmodeEnabled = useConfig(state => (state.darkmodeEnabled ? "vs-dark" : "light"));
 
   const onApply = () => {
@@ -39,12 +57,10 @@ export const SchemaModal: React.FC<ModalProps> = ({ opened, onClose }) => {
   return (
     <Modal title="JSON Schema" size="lg" opened={opened} onClose={onClose} centered>
       <Stack py="sm">
-        <Text fz="sm">
+        <Text fz="sm">Any validation failures are shown at the bottom toolbar of pane.</Text>
-          Any validation failures are shown at the bottom toolbar of pane.{" "}
+        <Anchor fz="sm" target="_blank" href="https://niem.github.io/json/sample-schema/">
-          <Anchor target="_blank" href="https://json-schema.org/">
+          View Examples <VscLinkExternal />
-            What is a JSON Schema?
+        </Anchor>
-          </Anchor>
-        </Text>
         <Editor
           value={schema ?? ""}
           theme={darkmodeEnabled}
@@ -59,7 +75,8 @@ export const SchemaModal: React.FC<ModalProps> = ({ opened, onClose }) => {
             },
           }}
         />
-        <Group justify="right">
+        <Divider my="xs" />
+        <Group p="0" justify="right">
           <Button variant="outline" onClick={onClear} disabled={!schema}>
             Clear
           </Button>

src/containers/Toolbar/AccountMenu.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import Link from "next/link";
 import { Menu, Avatar, Text } from "@mantine/core";
-import { MdOutlineWorkspacePremium } from "react-icons/md";
 import { VscSignIn, VscFeedback, VscSignOut } from "react-icons/vsc";
 import useModal from "src/store/useModal";
 import useUser from "src/store/useUser";
@@ -9,7 +8,6 @@ import * as Styles from "./styles";
 
 export const AccountMenu = () => {
   const user = useUser(state => state.user);
-  const premium = useUser(state => state.premium);
   const logout = useUser(state => state.logout);
   const setVisible = useModal(state => state.setVisible);
 
@@ -47,17 +45,6 @@ export const AccountMenu = () => {
             </Menu.Item>
           </Link>
         )}
-        {!premium && (
-          <Menu.Item
-            leftSection={<MdOutlineWorkspacePremium color="red" />}
-            onClick={() => setVisible("premium")(true)}
-            closeMenuOnClick
-          >
-            <Text variant="gradient" fw="bold" gradient={{ from: "orange", to: "red" }} size="xs">
-              Get Premium
-            </Text>
-          </Menu.Item>
-        )}
         {user && (
           <>
             <Menu.Divider />

src/containers/Toolbar/index.tsx

@@ -1,14 +1,16 @@
 import React from "react";
-import { Flex, Group, Select } from "@mantine/core";
+import { Flex, Group, Select, Text } from "@mantine/core";
 import toast from "react-hot-toast";
 import { AiOutlineFullscreen } from "react-icons/ai";
 import { FiDownload } from "react-icons/fi";
+import { MdWorkspacePremium } from "react-icons/md";
 import { SearchInput } from "src/components/SearchInput";
 import { FileFormat } from "src/enums/file.enum";
 import { JSONCrackLogo } from "src/layout/JsonCrackLogo";
 import useFile from "src/store/useFile";
 import useJson from "src/store/useJson";
 import useModal from "src/store/useModal";
+import useUser from "src/store/useUser";
 import { AccountMenu } from "./AccountMenu";
 import { Logo } from "./Logo";
 import { OptionsMenu } from "./OptionsMenu";
@@ -34,6 +36,7 @@ export const Toolbar: React.FC<{ isWidget?: boolean }> = ({ isWidget = false })
 
   const setFormat = useFile(state => state.setFormat);
   const format = useFile(state => state.format);
+  const premium = useUser(state => state.premium);
 
   const handleSave = () => {
     const a = document.createElement("a");
@@ -86,6 +89,15 @@ export const Toolbar: React.FC<{ isWidget?: boolean }> = ({ isWidget = false })
         </Group>
       )}
       <Group gap="xs" justify="right" w="100%" style={{ flexWrap: "nowrap" }}>
+        {!premium && (
+          <Styles.StyledToolElement onClick={() => setVisible("premium")(true)}>
+            <Text display="flex" c="teal" fz="xs" fw="bold" style={{ textAlign: "center", gap: 4 }}>
+              <MdWorkspacePremium size="18" />
+              Get Premium
+            </Text>
+          </Styles.StyledToolElement>
+        )}
+
         <SearchInput />
         {!isWidget && (
           <>

src/layout/ExternalMode/index.tsx

@@ -81,7 +81,7 @@ const ExternalMode = () => {
             variant="light"
             color="red"
           >
-            Donate
+            ❤️
           </Button>
         </Group>
       </Modal>