improve styling

src/components/Graph/index.tsx

@@ -36,6 +36,10 @@ const StyledEditorWrapper = styled.div`
   rect {
     fill: ${({ theme }) => theme.BACKGROUND_NODE};
   }
+
+  @media only screen and (max-width: 320px) {
+    height: 100vh;
+  }
 `;
 
 const GraphComponent = ({ isWidget = false, openModal, setSelectedNode }: GraphProps) => {

src/components/Modal/styles.tsx

@@ -51,7 +51,6 @@ export const HeaderWrapper = styled.div`
 `;
 
 export const ContentWrapper = styled.div`
-  color: ${({ theme }) => theme.TEXT_NORMAL};
   background: ${({ theme }) => theme.MODAL_BACKGROUND};
   padding: 16px;
   overflow: hidden auto;

src/components/Sidebar/index.tsx

@@ -2,8 +2,6 @@ import React from "react";
 import toast from "react-hot-toast";
 import { AiOutlineDelete, AiOutlineSave, AiOutlineFileAdd, AiOutlineEdit } from "react-icons/ai";
 import { CgArrowsMergeAltH, CgArrowsShrinkH } from "react-icons/cg";
-import { FiDownload } from "react-icons/fi";
-import { MdCenterFocusWeak } from "react-icons/md";
 import { TiFlowMerge } from "react-icons/ti";
 import {
   VscAccount,
@@ -213,13 +211,6 @@ export const Sidebar: React.FC = () => {
           component={<StyledFlowIcon rotate={rotateLayout(direction)} />}
         />
 
-        <SidebarButton
-          title="Center View"
-          deviceDisplay="mobile"
-          onClick={centerView}
-          component={<MdCenterFocusWeak />}
-        />
-
         <SidebarButton
           title={foldNodes ? "Unfold Nodes" : "Fold Nodes"}
           deviceDisplay="desktop"
@@ -229,7 +220,6 @@ export const Sidebar: React.FC = () => {
 
         <SidebarButton
           title={graphCollapsed ? "Expand Graph" : "Collapse Graph"}
-          deviceDisplay="desktop"
           onClick={toggleExpandCollapseGraph}
           component={graphCollapsed ? <VscExpandAll /> : <VscCollapseAll />}
         />
@@ -241,13 +231,6 @@ export const Sidebar: React.FC = () => {
           component={<AiOutlineSave />}
         />
 
-        <SidebarButton
-          title="Download Image"
-          deviceDisplay="mobile"
-          onClick={() => setVisible("download")(true)}
-          component={<FiDownload />}
-        />
-
         <SidebarButton
           title="Delete JSON"
           onClick={() => setVisible("clear")(true)}
@@ -260,6 +243,13 @@ export const Sidebar: React.FC = () => {
           onClick={() => setVisible("cloud")(true)}
           component={<VscCloud />}
         />
+
+        <SidebarButton
+          title="Settings"
+          deviceDisplay="mobile"
+          onClick={() => setVisible("settings")(true)}
+          component={<VscSettingsGear />}
+        />
       </StyledTopWrapper>
       <StyledBottomWrapper>
         <SidebarButton

src/containers/Editor/LiveEditor/Tools.tsx

@@ -7,7 +7,7 @@ import useGraph from "src/store/useGraph";
 import useModal from "src/store/useModal";
 import styled from "styled-components";
 
-export const StyledTools = styled.div<{ isWidget: boolean }>`
+export const StyledTools = styled.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -20,11 +20,7 @@ export const StyledTools = styled.div<{ isWidget: boolean }>`
   box-shadow: 0 1px 0px ${({ theme }) => theme.BACKGROUND_TERTIARY};
   z-index: 1;
 
-  @media only screen and (max-width: 768px) {
-    display: ${({ isWidget }) => !isWidget && "none"};
-  }
-
-  @media only screen and (max-width: 480px) {
+  @media only screen and (max-width: 320px) {
     display: none;
   }
 `;
@@ -61,25 +57,23 @@ export const Tools: React.FC<{ isWidget?: boolean }> = ({ isWidget = false }) =>
   const toggleEditor = () => toggleFullscreen(!fullscreen);
 
   return (
-    <>
-      <StyledTools isWidget={isWidget}>
-        <StyledToolElement aria-label="fullscreen" hide={isWidget} onClick={toggleEditor}>
-          <AiOutlineFullscreen />
-        </StyledToolElement>
-        <SearchInput />
-        <StyledToolElement aria-label="save" onClick={() => setVisible("download")(true)}>
-          <FiDownload />
-        </StyledToolElement>
-        <StyledToolElement aria-label="center canvas" onClick={centerView}>
-          <MdCenterFocusWeak />
-        </StyledToolElement>
-        <StyledToolElement aria-label="zoom out" onClick={zoomOut}>
-          <AiOutlineMinus />
-        </StyledToolElement>
-        <StyledToolElement aria-label="zoom in" onClick={zoomIn}>
-          <AiOutlinePlus />
-        </StyledToolElement>
-      </StyledTools>
-    </>
+    <StyledTools>
+      <StyledToolElement aria-label="fullscreen" hide={isWidget} onClick={toggleEditor}>
+        <AiOutlineFullscreen />
+      </StyledToolElement>
+      <SearchInput />
+      <StyledToolElement aria-label="save" onClick={() => setVisible("download")(true)}>
+        <FiDownload />
+      </StyledToolElement>
+      <StyledToolElement aria-label="center canvas" onClick={centerView}>
+        <MdCenterFocusWeak />
+      </StyledToolElement>
+      <StyledToolElement aria-label="zoom out" onClick={zoomOut}>
+        <AiOutlineMinus />
+      </StyledToolElement>
+      <StyledToolElement aria-label="zoom in" onClick={zoomIn}>
+        <AiOutlinePlus />
+      </StyledToolElement>
+    </StyledTools>
   );
 };

src/containers/ModalController/index.tsx

@@ -8,7 +8,7 @@ import { LoginModal } from "src/containers/Modals/LoginModal";
 import { SettingsModal } from "src/containers/Modals/SettingsModal";
 import { ShareModal } from "src/containers/Modals/ShareModal";
 import useModal from "src/store/useModal";
-import shallow from "zustand/shallow";
+import { shallow } from "zustand/shallow";
 
 export const ModalController = () => {
   const setVisible = useModal(state => state.setVisible);

src/containers/Modals/DownloadModal/index.tsx

@@ -111,7 +111,7 @@ export const DownloadModal: React.FC<ModalProps> = ({ visible, setVisible }) =>
 
       if (!blob) return;
 
-      navigator.clipboard.write([
+      navigator.clipboard?.write([
         new ClipboardItem({
           [blob.type]: blob,
         }),

src/containers/Modals/NodeModal/index.tsx

@@ -1,9 +1,19 @@
 import React from "react";
+import dynamic from "next/dynamic";
 import toast from "react-hot-toast";
 import { FiCopy } from "react-icons/fi";
+import { vscDarkPlus } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import { vs } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { Button } from "src/components/Button";
 import { Modal } from "src/components/Modal";
-import styled from "styled-components";
+import useStored from "src/store/useStored";
+
+const SyntaxHighlighter = dynamic(
+  () => import("react-syntax-highlighter/dist/esm/prism-async").then(c => c),
+  {
+    ssr: false,
+  }
+);
 
 interface NodeModalProps {
   selectedNode: object;
@@ -11,26 +21,13 @@ interface NodeModalProps {
   closeModal: () => void;
 }
 
-const StyledTextarea = styled.textarea`
-  resize: none;
-  width: 100%;
-  min-height: 200px;
-
-  padding: 10px;
-  background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
-  color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
-  outline: none;
-  border-radius: 4px;
-  line-height: 20px;
-  border: none;
-`;
-
 export const NodeModal = ({ selectedNode, visible, closeModal }: NodeModalProps) => {
+  const lightmode = useStored(state => state.lightmode);
   const nodeData = Array.isArray(selectedNode) ? Object.fromEntries(selectedNode) : selectedNode;
 
   const handleClipboard = () => {
     toast.success("Content copied to clipboard!");
-    navigator.clipboard.writeText(JSON.stringify(nodeData));
+    navigator.clipboard?.writeText(JSON.stringify(nodeData));
     closeModal();
   };
 
@@ -38,8 +35,17 @@ export const NodeModal = ({ selectedNode, visible, closeModal }: NodeModalProps)
     <Modal visible={visible} setVisible={closeModal}>
       <Modal.Header>Node Content</Modal.Header>
       <Modal.Content>
-        <StyledTextarea
-          defaultValue={JSON.stringify(
+        <SyntaxHighlighter
+          style={lightmode ? vs : vscDarkPlus}
+          customStyle={{
+            borderRadius: "4px",
+            fontSize: "14px",
+            margin: "0",
+          }}
+          language="json"
+          showLineNumbers
+        >
+          {JSON.stringify(
             nodeData,
             (_, v) => {
               if (typeof v === "string") return v.replaceAll('"', "");
@@ -47,8 +53,7 @@ export const NodeModal = ({ selectedNode, visible, closeModal }: NodeModalProps)
             },
             2
           )}
-          readOnly
-        />
+        </SyntaxHighlighter>
       </Modal.Content>
       <Modal.Controls setVisible={closeModal}>
         <Button status="SECONDARY" onClick={handleClipboard}>

src/containers/Modals/SettingsModal/index.tsx

@@ -3,7 +3,7 @@ import { Modal, ModalProps } from "src/components/Modal";
 import Toggle from "src/components/Toggle";
 import useStored from "src/store/useStored";
 import styled from "styled-components";
-import shallow from "zustand/shallow";
+import { shallow } from "zustand/shallow";
 
 const StyledToggle = styled(Toggle)`
   flex-flow: row-reverse;

src/containers/Modals/ShareModal/index.tsx

@@ -34,7 +34,7 @@ export const ShareModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
   const shareURL = `https://jsoncrack.com/editor?json=${query.json}`;
 
   const handleShare = (value: string) => {
-    navigator.clipboard.writeText(value);
+    navigator.clipboard?.writeText(value);
     toast.success(`Link copied to clipboard.`);
     setVisible(false);
   };

src/pages/index.tsx

@@ -1,8 +1,14 @@
 import React from "react";
+import { darkTheme } from "src/constants/theme";
 import Home from "src/containers/Home";
+import { ThemeProvider } from "styled-components";
 
 const HomePage = () => {
-  return <Home />;
+  return (
+    <ThemeProvider theme={darkTheme}>
+      <Home />
+    </ThemeProvider>
+  );
 };
 
 export default HomePage;