styling fixes

src/containers/Editor/components/TextEditor.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { LoadingOverlay } from "@mantine/core";
 import styled from "styled-components";
-import Editor, { loader, useMonaco } from "@monaco-editor/react";
+import Editor, { type EditorProps, loader, useMonaco } from "@monaco-editor/react";
 import useConfig from "src/store/useConfig";
 import useFile from "src/store/useFile";
 
@@ -11,12 +11,13 @@ loader.config({
   },
 });
 
-const editorOptions = {
+const editorOptions: EditorProps["options"] = {
   formatOnPaste: true,
   formatOnType: true,
   minimap: {
     enabled: false,
   },
+  scrollBeyondLastLine: false,
 };
 
 const TextEditor = () => {

src/containers/Landing/SeePremium.tsx

@@ -64,7 +64,6 @@ export const SeePremium = () => {
               mt="xl"
               rightSection={<FaArrowRightLong />}
               radius="xl"
-              fz="md"
             >
               See more
             </Button>

src/containers/Modals/ImportModal/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import type { ModalProps } from "@mantine/core";
-import { Modal, Group, Button, TextInput, Stack, Divider, Paper, Text } from "@mantine/core";
+import { Modal, Group, Button, TextInput, Stack, Paper, Text } from "@mantine/core";
 import { Dropzone } from "@mantine/dropzone";
 import { event as gaEvent } from "nextjs-google-analytics";
 import toast from "react-hot-toast";
@@ -93,7 +93,6 @@ export const ImportModal = ({ opened, onClose }: ModalProps) => {
           </Dropzone>
         </Paper>
       </Stack>
-      <Divider my="xs" />
       <Group justify="right">
         <Button onClick={handleImportFile} disabled={!(file || url)}>
           Import

src/containers/Modals/JPathModal/index.tsx

@@ -28,7 +28,7 @@ export const JPathModal = ({ opened, onClose }: ModalProps) => {
 
   return (
     <Modal title="JSON Path" size="lg" opened={opened} onClose={onClose} centered>
-      <Stack py="sm">
+      <Stack>
         <Text fz="sm">
           JsonPath expressions always refer to a JSON structure in the same way as XPath expression
           are used in combination with an XML document. The &quot;root member object&quot; in
@@ -48,7 +48,7 @@ export const JPathModal = ({ opened, onClose }: ModalProps) => {
           placeholder="Enter JSON Path..."
           data-autofocus
         />
-        <Group justify="right" mt="sm">
+        <Group justify="right">
           <Button onClick={evaluteJsonPath} disabled={!query.length}>
             Run
           </Button>

src/containers/Modals/JQModal/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import type { ModalProps } from "@mantine/core";
-import { Stack, Modal, Button, Text, Anchor, Group, TextInput, Divider } from "@mantine/core";
+import { Stack, Modal, Button, Text, Anchor, Group, TextInput } from "@mantine/core";
 import { VscLinkExternal } from "react-icons/vsc";
 import useJsonQuery from "src/hooks/useJsonQuery";
 
@@ -10,7 +10,7 @@ export const JQModal = ({ opened, onClose }: ModalProps) => {
 
   return (
     <Modal title="JSON Query" size="lg" opened={opened} onClose={onClose} centered>
-      <Stack py="sm">
+      <Stack>
         <Text fz="sm">
           jq is a lightweight and flexible command-line JSON processor. JSON Crack uses simplified
           version of jq, not all features are supported.
@@ -30,7 +30,6 @@ export const JQModal = ({ opened, onClose }: ModalProps) => {
           value={query}
           onChange={e => setQuery(e.currentTarget.value)}
         />
-        <Divider my="xs" />
         <Group justify="right">
           <Button onClick={() => updateJson(query, onClose)}>Display on Graph</Button>
         </Group>

src/containers/Modals/JWTModal/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import type { ModalProps } from "@mantine/core";
-import { Modal, Button, Textarea, Divider, Group } from "@mantine/core";
+import { Modal, Button, Textarea, Group } from "@mantine/core";
 import { decode } from "jsonwebtoken";
 import { event as gaEvent } from "nextjs-google-analytics";
 import useFile from "src/store/useFile";
@@ -29,9 +29,10 @@ export const JWTModal = ({ opened, onClose }: ModalProps) => {
         minRows={5}
         data-autofocus
       />
-      <Divider my="md" />
-      <Group justify="right">
-        <Button onClick={resolve}>Resolve</Button>
+      <Group mt="xs" justify="right">
+        <Button onClick={resolve} disabled={!token}>
+          Resolve
+        </Button>
       </Group>
     </Modal>
   );

src/containers/Modals/SchemaModal/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import type { ModalProps } from "@mantine/core";
-import { Stack, Modal, Button, Text, Anchor, Divider, Menu, Group } from "@mantine/core";
+import { Stack, Modal, Button, Text, Anchor, Menu, Group, Paper } from "@mantine/core";
 import Editor from "@monaco-editor/react";
 import { event as gaEvent } from "nextjs-google-analytics";
 import { toast } from "react-hot-toast";
@@ -70,7 +70,7 @@ export const SchemaModal = ({ opened, onClose }: ModalProps) => {
 
   return (
     <Modal title="JSON Schema" size="lg" opened={opened} onClose={onClose} centered>
-      <Stack py="sm">
+      <Stack>
         <Text fz="sm">Any validation failures are shown at the bottom toolbar of pane.</Text>
         <Anchor
           fz="sm"
@@ -80,23 +80,25 @@ export const SchemaModal = ({ opened, onClose }: ModalProps) => {
         >
           View Examples <VscLinkExternal />
         </Anchor>
-        <Editor
-          value={schema ?? ""}
-          theme={darkmodeEnabled}
-          onChange={e => setSchema(e!)}
-          height={300}
-          language="json"
-          options={{
-            formatOnPaste: true,
-            formatOnType: true,
-            minimap: {
-              enabled: false,
-            },
-          }}
-        />
-        <Divider my="xs" />
+        <Paper withBorder radius="sm" style={{ overflow: "hidden" }}>
+          <Editor
+            value={schema ?? ""}
+            theme={darkmodeEnabled}
+            onChange={e => setSchema(e!)}
+            height={300}
+            language="json"
+            options={{
+              formatOnPaste: true,
+              formatOnType: true,
+              scrollBeyondLastLine: false,
+              minimap: {
+                enabled: false,
+              },
+            }}
+          />
+        </Paper>
         <Group p="0" justify="right">
-          <Button variant="subtle" onClick={onClear} disabled={!schema}>
+          <Button variant="subtle" color="gray" onClick={onClear} disabled={!schema}>
             Clear
           </Button>
           <Button.Group>

src/containers/Modals/UpgradeModal/index.tsx

@@ -20,7 +20,7 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
       centered
     >
       <Divider mb="xs" fz="md" labelPosition="left" label="Included features" color="dimmed" />
-      <List spacing="xs" c="gray" icon={<IoMdCheckmarkCircleOutline size="24" color="#16a34a" />}>
+      <List spacing="6" c="gray" icon={<IoMdCheckmarkCircleOutline size="24" color="#16a34a" />}>
         <List.Item>Larger data support up to 4 MB</List.Item>
         <List.Item>Edit data directly on visualizations</List.Item>
         <List.Item>Compare data differences on graphs</List.Item>
@@ -34,7 +34,8 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
           color="green"
           fullWidth
           mt="md"
-          size="lg"
+          size="md"
+          fw={500}
           radius="md"
           rightSection={<MdChevronRight size="24" />}
         >