feat: ui improvements

2025-01-27 15:22:56 +08:00 · 2023-12-24 22:19:12 +03:00 · 2023-12-24 22:19:12 +03:00 · a5c87be832
commit a5c87be832
parent c609c59371
8 changed files with 68 additions and 45 deletions
--- a/src/containers/Modals/DownloadModal/index.tsx
+++ b/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
--- a/src/containers/Modals/ImportModal/index.tsx
+++ b/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
--- a/src/containers/Modals/JQModal/index.tsx
+++ b/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>
--- a/src/containers/Modals/JWTModal/index.tsx
+++ b/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
-          placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6Ikhlcm93YW5kIiwidXJsIjoiaHR0cHM6Ly9oZXJvd2FuZC5jb20iLCJpYXQiOjE1MTYyMzkwMjJ9.Tmm3Miq6KWCF_QRn3iERhhXThJzv4LQPKYwBhYUld88"
-          value={token}
-          onChange={e => setToken(e.target.value)}
-          fz="sm"
-          fw={700}
-          minRows={8}
-          data-autofocus
-        >
-          Share Link
-        </Textarea>
-        <Button onClick={resolve} fullWidth>
-          Resolve
-        </Button>
-      </Stack>
+      <Textarea
+        placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6Ikhlcm93YW5kIiwidXJsIjoiaHR0cHM6Ly9oZXJvd2FuZC5jb20iLCJpYXQiOjE1MTYyMzkwMjJ9.Tmm3Miq6KWCF_QRn3iERhhXThJzv4LQPKYwBhYUld88"
+        value={token}
+        onChange={e => setToken(e.target.value)}
+        autosize
+        minRows={4}
+        data-autofocus
+      />
+      <Divider my="xs" />
+      <Button onClick={resolve} fullWidth>
+        Resolve
+      </Button>
    </Modal>
  );
 };
--- a/src/containers/Modals/SchemaModal/index.tsx
+++ b/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">
-          Any validation failures are shown at the bottom toolbar of pane.{" "}
-          <Anchor target="_blank" href="https://json-schema.org/">
-            What is a JSON Schema?
-          </Anchor>
-        </Text>
+        <Text fz="sm">Any validation failures are shown at the bottom toolbar of pane.</Text>
+        <Anchor fz="sm" target="_blank" href="https://niem.github.io/json/sample-schema/">
+          View Examples <VscLinkExternal />
+        </Anchor>
        <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>
--- a/src/containers/Toolbar/AccountMenu.tsx
+++ b/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 />
--- a/src/containers/Toolbar/index.tsx
+++ b/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 && (
          <>
--- a/src/layout/ExternalMode/index.tsx
+++ b/src/layout/ExternalMode/index.tsx
@ -81,7 +81,7 @@ const ExternalMode = () => {
            variant="light"
            color="red"
          >
-            Donate
+            ❤️
          </Button>
        </Group>
      </Modal>