adjusting colors and themes

2022-02-08 18:07:37 +02:00
parent 37a3d2b207
commit 78b5dcceb6
15 changed files with 288 additions and 168 deletions
--- a/components/Accounts.tsx
+++ b/components/Accounts.tsx
@@ -186,7 +186,7 @@ const AccountDialog = ({
                  <Button
                    size="sm"
                    ghost
-                    css={{ color: "$green11 !important", mt: "$3" }}
+                    css={{ color: "$grass11 !important", mt: "$3" }}
                  >
                    <ArrowSquareOut size="15px" />
                  </Button>
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -91,26 +91,26 @@ export const StyledButton = styled("button", {
          },
      },
      primary: {
-        backgroundColor: `$pink9`,
-        boxShadow: "inset 0 0 0 1px $colors$pink9",
+        backgroundColor: `$accent`,
+        boxShadow: "inset 0 0 0 1px $colors$purple9",
        color: "$white",
        "@hover": {
          "&:hover": {
-            backgroundColor: "$pink10",
-            boxShadow: "inset 0 0 0 1px $colors$pink11",
+            backgroundColor: "$purple10",
+            boxShadow: "inset 0 0 0 1px $colors$purple11",
          },
        },
        "&:active": {
-          backgroundColor: "$pink8",
-          boxShadow: "inset 0 0 0 1px $colors$pink8",
+          backgroundColor: "$purple8",
+          boxShadow: "inset 0 0 0 1px $colors$purple8",
        },
        "&:focus": {
-          boxShadow: "inset 0 0 0 2px $colors$pink12",
+          boxShadow: "inset 0 0 0 2px $colors$purple12",
        },
        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
          {
            backgroundColor: "$mauve4",
-            boxShadow: "inset 0 0 0 1px $colors$pink8",
+            boxShadow: "inset 0 0 0 1px $colors$purple8",
          },
      },
      secondary: {
--- a/components/DeployEditor.tsx
+++ b/components/DeployEditor.tsx
@@ -34,7 +34,7 @@ const DeployEditor = () => {
        display: "flex",
        position: "relative",
        flexDirection: "column",
-        backgroundColor: "$mauve3",
+        backgroundColor: "$mauve2",
        width: "100%",
      }}
    >
--- a/components/DropdownMenu.tsx
+++ b/components/DropdownMenu.tsx
@@ -71,7 +71,7 @@ const itemStyles = {
  },

  "&:focus": {
-    backgroundColor: "$pink9",
+    backgroundColor: "$purple9",
    color: "$white",
  },
 };
@@ -85,8 +85,8 @@ const StyledRadioItem = styled(DropdownMenuPrimitive.RadioItem, {
 });
 const StyledTriggerItem = styled(DropdownMenuPrimitive.TriggerItem, {
  '&[data-state="open"]': {
-    backgroundColor: "$pink9",
-    color: "$pink9",
+    backgroundColor: "$purple9",
+    color: "$purple9",
  },
  ...itemStyles,
 });
--- a/components/EditorNavigation.tsx
+++ b/components/EditorNavigation.tsx
@@ -26,7 +26,12 @@ import NewWindow from "react-new-window";
 import { signOut, useSession } from "next-auth/react";
 import { useSnapshot } from "valtio";

-import { createNewFile, syncToGist, updateEditorSettings, downloadAsZip } from "../state/actions";
+import {
+  createNewFile,
+  syncToGist,
+  updateEditorSettings,
+  downloadAsZip,
+} from "../state/actions";
 import state from "../state";
 import Box from "./Box";
 import Button from "./Button";
@@ -57,7 +62,7 @@ import { styled } from "../stitches.config";
 const DEFAULT_EXTENSION = ".c";

 const ErrorText = styled(Text, {
-  color: "$red9",
+  color: "$crimson9",
  mt: "$1",
  display: "block",
 });
@@ -85,7 +90,7 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {

  const validateFilename = useCallback(
    (filename: string): { error: string | null } => {
-      if (snap.files.find(file => file.name === filename)) {
+      if (snap.files.find((file) => file.name === filename)) {
        return { error: "Filename already exists." };
      }
      // More checks in future
@@ -95,7 +100,9 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
  );
  const handleConfirm = useCallback(() => {
    // add default extension in case omitted
-    let _filename = filename.includes(".") ? filename : filename + DEFAULT_EXTENSION;
+    let _filename = filename.includes(".")
+      ? filename
+      : filename + DEFAULT_EXTENSION;
    const chk = validateFilename(_filename);
    if (chk.error) {
      setNewfileError(`Error: ${chk.error}`);
@@ -139,7 +146,9 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
                return (
                  <Button
                    size="sm"
-                    outline={showWat ? snap.activeWat !== index : snap.active !== index}
+                    outline={
+                      showWat ? snap.activeWat !== index : snap.active !== index
+                    }
                    onClick={() => (state.active = index)}
                    key={file.name + index}
                    css={{
@@ -174,7 +183,8 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
                          // If deleted file is behind active tab
                          // we keep the current state otherwise
                          // select previous file on the list
-                          state.active = index > snap.active ? snap.active : snap.active - 1;
+                          state.active =
+                            index > snap.active ? snap.active : snap.active - 1;
                        }}
                      >
                        <X size="9px" weight="bold" />
@@ -184,10 +194,18 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
                );
              })}
            {!showWat && (
-              <Dialog open={isNewfileDialogOpen} onOpenChange={setIsNewfileDialogOpen}>
+              <Dialog
+                open={isNewfileDialogOpen}
+                onOpenChange={setIsNewfileDialogOpen}
+              >
                <DialogTrigger asChild>
-                  <Button ghost size="sm" css={{ alignItems: "center", px: "$2", mr: "$3" }}>
-                    <Plus size="16px" /> {snap.files.length === 0 && "Add new file"}
+                  <Button
+                    ghost
+                    size="sm"
+                    css={{ alignItems: "center", px: "$2", mr: "$3" }}
+                  >
+                    <Plus size="16px" />{" "}
+                    {snap.files.length === 0 && "Add new file"}
                  </Button>
                </DialogTrigger>
                <DialogContent>
@@ -196,8 +214,8 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
                    <label>Filename</label>
                    <Input
                      value={filename}
-                      onChange={e => setFilename(e.target.value)}
-                      onKeyPress={e => {
+                      onChange={(e) => setFilename(e.target.value)}
+                      onKeyPress={(e) => {
                        if (e.key === "Enter") {
                          handleConfirm();
                        }
@@ -216,10 +234,7 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
                    <DialogClose asChild>
                      <Button outline>Cancel</Button>
                    </DialogClose>
-                    <Button
-                      variant="primary"
-                      onClick={handleConfirm}
-                    >
+                    <Button variant="primary" onClick={handleConfirm}>
                      Create file
                    </Button>
                  </Flex>
@@ -237,11 +252,13 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
      <Flex
        css={{
          py: "$3",
-          backgroundColor: "$mauve3",
+          backgroundColor: "$mauve2",
          zIndex: 1,
        }}
      >
-        <Container css={{ width: "unset", display: "flex", alignItems: "center" }}>
+        <Container
+          css={{ width: "unset", display: "flex", alignItems: "center" }}
+        >
          {status === "authenticated" ? (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
@@ -274,10 +291,15 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
              </DropdownMenuTrigger>
              <DropdownMenuContent>
                <DropdownMenuItem disabled onClick={() => signOut()}>
-                  <User size="16px" /> {session?.user?.username} ({session?.user.name})
+                  <User size="16px" /> {session?.user?.username} (
+                  {session?.user.name})
                </DropdownMenuItem>
                <DropdownMenuItem
-                  onClick={() => window.open(`http://gist.github.com/${session?.user.username}`)}
+                  onClick={() =>
+                    window.open(
+                      `http://gist.github.com/${session?.user.username}`
+                    )
+                  }
                >
                  <ArrowSquareOut size="16px" />
                  Go to your Gist
@@ -291,7 +313,12 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
              </DropdownMenuContent>
            </DropdownMenu>
          ) : (
-            <Button outline size="sm" css={{ mr: "$3" }} onClick={() => setPopUp(true)}>
+            <Button
+              outline
+              size="sm"
+              css={{ mr: "$3" }}
+              onClick={() => setPopUp(true)}
+            >
              <GithubLogo size="16px" /> Login
            </Button>
          )}
@@ -330,7 +357,13 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
              },
            }}
          >
-            <Button isLoading={snap.zipLoading} onClick={downloadAsZip} outline size="sm" css={{ alignItems: "center" }}>
+            <Button
+              isLoading={snap.zipLoading}
+              onClick={downloadAsZip}
+              outline
+              size="sm"
+              css={{ alignItems: "center" }}
+            >
              <DownloadSimple size="16px" />
            </Button>
            <Button
@@ -338,7 +371,9 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
              size="sm"
              css={{ alignItems: "center" }}
              onClick={() => {
-                navigator.clipboard.writeText(`${window.location.origin}/develop/${snap.gistId}`);
+                navigator.clipboard.writeText(
+                  `${window.location.origin}/develop/${snap.gistId}`
+                );
                toast.success("Copied share link to clipboard!");
              }}
            >
@@ -368,7 +403,10 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent>
-                <DropdownMenuItem disabled={snap.zipLoading} onClick={downloadAsZip}>
+                <DropdownMenuItem
+                  disabled={snap.zipLoading}
+                  onClick={downloadAsZip}
+                >
                  <DownloadSimple size="16px" /> Download as ZIP
                </DropdownMenuItem>
                <DropdownMenuItem
@@ -383,7 +421,9 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
                  Copy share link to clipboard
                </DropdownMenuItem>
                <DropdownMenuItem
-                  disabled={session?.user.username !== snap.gistOwner || !snap.gistId}
+                  disabled={
+                    session?.user.username !== snap.gistOwner || !snap.gistId
+                  }
                  onClick={() => {
                    syncToGist(session);
                  }}
@@ -409,15 +449,21 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
            </DropdownMenu>
          </Stack>

-          {popup && !session ? <NewWindow center="parent" url="/sign-in" /> : null}
+          {popup && !session ? (
+            <NewWindow center="parent" url="/sign-in" />
+          ) : null}
        </Container>
      </Flex>
-      <AlertDialog open={createNewAlertOpen} onOpenChange={value => setCreateNewAlertOpen(value)}>
+      <AlertDialog
+        open={createNewAlertOpen}
+        onOpenChange={(value) => setCreateNewAlertOpen(value)}
+      >
        <AlertDialogContent>
          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
          <AlertDialogDescription>
-            This action will create new <strong>public</strong> Github Gist from your current saved
-            files. You can delete gist anytime from your GitHub Gists page.
+            This action will create new <strong>public</strong> Github Gist from
+            your current saved files. You can delete gist anytime from your
+            GitHub Gists page.
          </AlertDialogDescription>
          <Flex css={{ justifyContent: "flex-end", gap: "$3" }}>
            <AlertDialogCancel asChild>
@@ -451,8 +497,8 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {
              type="number"
              min="1"
              value={editorSettings.tabSize}
-              onChange={e =>
-                setEditorSettings(curr => ({
+              onChange={(e) =>
+                setEditorSettings((curr) => ({
                  ...curr,
                  tabSize: Number(e.target.value),
                }))
@@ -462,12 +508,18 @@ const EditorNavigation = ({ showWat }: { showWat?: boolean }) => {

          <Flex css={{ marginTop: 25, justifyContent: "flex-end", gap: "$3" }}>
            <DialogClose asChild>
-              <Button outline onClick={() => updateEditorSettings(editorSettings)}>
+              <Button
+                outline
+                onClick={() => updateEditorSettings(editorSettings)}
+              >
                Cancel
              </Button>
            </DialogClose>
            <DialogClose asChild>
-              <Button variant="primary" onClick={() => updateEditorSettings(editorSettings)}>
+              <Button
+                variant="primary"
+                onClick={() => updateEditorSettings(editorSettings)}
+              >
                Save changes
              </Button>
            </DialogClose>
--- a/components/HooksEditor.tsx
+++ b/components/HooksEditor.tsx
@@ -29,7 +29,7 @@ loader.config({

 const validateWritability = (editor: monaco.editor.IStandaloneCodeEditor) => {
  const currPath = editor.getModel()?.uri.path;
-  if (apiHeaderFiles.find(h => currPath?.endsWith(h))) {
+  if (apiHeaderFiles.find((h) => currPath?.endsWith(h))) {
    editor.updateOptions({ readOnly: true });
  } else {
    editor.updateOptions({ readOnly: false });
@@ -60,7 +60,7 @@ const HooksEditor = () => {
        display: "flex",
        position: "relative",
        flexDirection: "column",
-        backgroundColor: "$mauve3",
+        backgroundColor: "$mauve2",
        width: "100%",
      }}
    >
@@ -73,9 +73,9 @@ const HooksEditor = () => {
          language={snap.files?.[snap.active]?.language}
          path={`file:///work/c/${snap.files?.[snap.active]?.name}`}
          defaultValue={snap.files?.[snap.active]?.content}
-          beforeMount={monaco => {
+          beforeMount={(monaco) => {
            if (!snap.editorCtx) {
-              snap.files.forEach(file =>
+              snap.files.forEach((file) =>
                monaco.editor.createModel(
                  file.content,
                  file.language,
@@ -100,7 +100,7 @@ const HooksEditor = () => {
              // listen when the web socket is opened
              listen({
                webSocket: webSocket as WebSocket,
-                onConnection: connection => {
+                onConnection: (connection) => {
                  // create and start the language client
                  const languageClient = createLanguageClient(connection);
                  const disposable = languageClient.start();
@@ -139,10 +139,13 @@ const HooksEditor = () => {
                enabled: true,
              },
            });
-            editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
-              saveFile();
-            });
-            validateWritability(editor)
+            editor.addCommand(
+              monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
+              () => {
+                saveFile();
+              }
+            );
+            validateWritability(editor);
          }}
          theme={theme === "dark" ? "dark" : "light"}
        />
@@ -160,7 +163,9 @@ const HooksEditor = () => {
              <Box css={{ display: "inline-flex", pl: "35px" }}>
                <ArrowBendLeftUp size={30} />
              </Box>
-              <Box css={{ pl: "0px", pt: "15px", flex: 1, display: "inline-flex" }}>
+              <Box
+                css={{ pl: "0px", pt: "15px", flex: 1, display: "inline-flex" }}
+              >
                <Text
                  css={{
                    fontSize: "14px",
--- a/components/Input.tsx
+++ b/components/Input.tsx
@@ -117,15 +117,17 @@ export const Input = styled("input", {
    },
    state: {
      invalid: {
-        boxShadow: "inset 0 0 0 1px $colors$red7",
+        boxShadow: "inset 0 0 0 1px $colors$crimson7",
        "&:focus": {
-          boxShadow: "inset 0px 0px 0px 1px $colors$red8, 0px 0px 0px 1px $colors$red8",
+          boxShadow:
+            "inset 0px 0px 0px 1px $colors$crimson8, 0px 0px 0px 1px $colors$crimson8",
        },
      },
      valid: {
-        boxShadow: "inset 0 0 0 1px $colors$green7",
+        boxShadow: "inset 0 0 0 1px $colors$grass7",
        "&:focus": {
-          boxShadow: "inset 0px 0px 0px 1px $colors$green8, 0px 0px 0px 1px $colors$green8",
+          boxShadow:
+            "inset 0px 0px 0px 1px $colors$grass8, 0px 0px 0px 1px $colors$grass8",
        },
      },
    },
--- a/components/LogText.tsx
+++ b/components/LogText.tsx
@@ -11,13 +11,13 @@ const Text = styled("span", {
        color: "$text",
      },
      warning: {
-        color: "$yellow11",
+        color: "$amber11",
      },
      error: {
-        color: "$red11",
+        color: "$crimson11",
      },
      success: {
-        color: "$green11",
+        color: "$grass11",
      },
    },
    capitalize: {
--- a/components/Logo.tsx
+++ b/components/Logo.tsx
@@ -2,7 +2,7 @@ import { styled } from "../stitches.config";

 const SVG = styled("svg", {
  "& #path": {
-    fill: "$text",
+    fill: "$accent",
  },
 });
 function Logo({
@@ -14,9 +14,9 @@ function Logo({
 }) {
  return (
    <SVG
-      width={width || "1em"}
-      height={height || "1em"}
-      viewBox="0 0 31 20"
+      width={width || "1.1em"}
+      height={height || "1.1em"}
+      viewBox="0 0 294 283"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
@@ -24,7 +24,8 @@ function Logo({
        fillRule="evenodd"
        clipRule="evenodd"
        id="path"
-        d="M27.3592 0H30.9723L31 0.0223244L23.1184 9.80415L30.7749 19.3066H27.116L20.6074 11.2287H12.9394L19.5082 19.3066H15.8361L9.75411 11.8274L3.67217 19.3066H0L7.91803 9.56953L0.136216 0H3.80838L9.75411 7.31164L15.6998 0H19.372L12.5578 8.37963H20.6074L27.3592 0Z"
+        d="M265.827 235L172.416 141.589L265.005 49H226.822L147.732 128.089H53.5514L27.4824 155.089H147.732L227.643 235H265.827Z"
+        fill="#9D2DFF"
      />
    </SVG>
  );
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -40,6 +40,7 @@ const Navigation = () => {
      as="nav"
      css={{
        display: "flex",
+        backgroundColor: "$mauve1",
        borderBottom: "1px solid $mauve6",
        position: "relative",
        zIndex: 2003,
@@ -70,7 +71,7 @@ const Navigation = () => {
                color: "$textColor",
              }}
            >
-              <Logo width="30px" height="30px" />
+              <Logo width="32px" height="32px" />
            </Box>
          </Link>
          <Flex
@@ -153,10 +154,12 @@ const Navigation = () => {
                        flexDirection: "column",
                        p: "$7",
                        height: "100%",
+                        backgroundColor: "$mauve2",
                        "@md": {
                          width: "30%",
+                          maxWidth: "300px",
                          borderBottom: "0px",
-                          borderRight: "1px solid $colors$mauve5",
+                          borderRight: "1px solid $colors$mauve6",
                        },
                      }}
                    >
@@ -167,9 +170,11 @@ const Navigation = () => {
                          alignItems: "center",
                          gap: "$3",
                          fontSize: "$xl",
+                          lineHeight: "$one",
+                          fontWeight: "$bold",
                        }}
                      >
-                        <Logo width="30px" height="30px" /> XRPL Hooks Editor
+                        <Logo width="48px" height="48px" /> XRPL Hooks Builder
                      </DialogTitle>
                      <DialogDescription as="div">
                        <Text
@@ -191,9 +196,9 @@ const Navigation = () => {
                              display: "inline-flex",
                              alignItems: "center",
                              gap: "$3",
-                              color: "$green9",
+                              color: "$purple10",
                              "&:hover": {
-                                color: "$green11 !important",
+                                color: "$purple11",
                              },
                              "&:focus": {
                                outline: 0,
@@ -204,7 +209,7 @@ const Navigation = () => {
                            target="_blank"
                            href="https://github.com/XRPL-Labs/xrpld-hooks"
                          >
-                            <ArrowUpRight size="15px" /> Developing Hooks
+                            <ArrowUpRight size="15px" /> Hooks Github
                          </Text>

                          <Text
@@ -212,9 +217,9 @@ const Navigation = () => {
                              display: "inline-flex",
                              alignItems: "center",
                              gap: "$3",
-                              color: "$green9",
+                              color: "$purple10",
                              "&:hover": {
-                                color: "$green11 !important",
+                                color: "$purple11",
                              },
                              "&:focus": {
                                outline: 0,
@@ -232,9 +237,9 @@ const Navigation = () => {
                              display: "inline-flex",
                              alignItems: "center",
                              gap: "$3",
-                              color: "$green9",
+                              color: "$purple10",
                              "&:hover": {
-                                color: "$green11 !important",
+                                color: "$purple11",
                              },
                              "&:focus": {
                                outline: 0,
@@ -261,9 +266,7 @@ const Navigation = () => {
                        gap: "$3",
                        alignItems: "flex-start",
                        flexWrap: "wrap",
-                        backgroundImage: `url('/pattern.svg'), url('/pattern-2.svg')`,
-                        backgroundRepeat: "no-repeat",
-                        backgroundPosition: "bottom left, top right",
+                        backgroundColor: "$mauve1",
                        "@md": {
                          gridTemplateColumns: "1fr 1fr 1fr",
                          gridTemplateRows: "max-content",
--- a/components/PanelBox.tsx
+++ b/components/PanelBox.tsx
@@ -5,8 +5,8 @@ import Text from "./Text";
 const PanelBox = styled("div", {
  display: "flex",
  flexDirection: "column",
-  border: "1px solid $colors$mauve5",
-  backgroundColor: "$mauve1",
+  border: "1px solid $colors$mauve6",
+  backgroundColor: "$mauve2",
  padding: "$3",
  borderRadius: "$sm",
  fontWeight: "lighter",
--- a/components/Tabs.tsx
+++ b/components/Tabs.tsx
@@ -1,4 +1,10 @@
-import React, { useEffect, useState, Fragment, isValidElement, useCallback } from "react";
+import React, {
+  useEffect,
+  useState,
+  Fragment,
+  isValidElement,
+  useCallback,
+} from "react";
 import type { ReactNode, ReactElement } from "react";
 import { Box, Button, Flex, Input, Stack, Text } from ".";
 import {
@@ -13,7 +19,7 @@ import { Plus, X } from "phosphor-react";
 import { styled } from "../stitches.config";

 const ErrorText = styled(Text, {
-  color: "$red9",
+  color: "$crimson9",
  mt: "$1",
  display: "block",
 });
@@ -50,7 +56,7 @@ export const Tabs = ({
  forceDefaultExtension,
 }: Props) => {
  const [active, setActive] = useState(activeIndex || 0);
-  const tabs: TabProps[] = children.map(elem => elem.props);
+  const tabs: TabProps[] = children.map((elem) => elem.props);

  const [isNewtabDialogOpen, setIsNewtabDialogOpen] = useState(false);
  const [tabname, setTabname] = useState("");
@@ -62,7 +68,7 @@ export const Tabs = ({

  useEffect(() => {
    if (activeHeader) {
-      const idx = tabs.findIndex(tab => tab.header === activeHeader);
+      const idx = tabs.findIndex((tab) => tab.header === activeHeader);
      setActive(idx);
    }
  }, [activeHeader, tabs]);
@@ -74,7 +80,7 @@ export const Tabs = ({

  const validateTabname = useCallback(
    (tabname: string): { error: string | null } => {
-      if (tabs.find(tab => tab.header === tabname)) {
+      if (tabs.find((tab) => tab.header === tabname)) {
        return { error: "Name already exists." };
      }
      return { error: null };
@@ -170,9 +176,16 @@ export const Tabs = ({
            </Button>
          ))}
          {onCreateNewTab && (
-            <Dialog open={isNewtabDialogOpen} onOpenChange={setIsNewtabDialogOpen}>
+            <Dialog
+              open={isNewtabDialogOpen}
+              onOpenChange={setIsNewtabDialogOpen}
+            >
              <DialogTrigger asChild>
-                <Button ghost size="sm" css={{ alignItems: "center", px: "$2", mr: "$3" }}>
+                <Button
+                  ghost
+                  size="sm"
+                  css={{ alignItems: "center", px: "$2", mr: "$3" }}
+                >
                  <Plus size="16px" /> {tabs.length === 0 && "Add new tab"}
                </Button>
              </DialogTrigger>
@@ -182,8 +195,8 @@ export const Tabs = ({
                  <label>Tabname</label>
                  <Input
                    value={tabname}
-                    onChange={e => setTabname(e.target.value)}
-                    onKeyPress={e => {
+                    onChange={(e) => setTabname(e.target.value)}
+                    onKeyPress={(e) => {
                      if (e.key === "Enter") {
                        handleCreateTab();
                      }
@@ -235,7 +248,9 @@ export const Tabs = ({
          );
        })
      ) : (
-        <Fragment key={tabs[active].header || active}>{tabs[active].children}</Fragment>
+        <Fragment key={tabs[active].header || active}>
+          {tabs[active].children}
+        </Fragment>
      )}
    </>
  );
--- a/stitches.config.ts
+++ b/stitches.config.ts
@@ -1,29 +1,25 @@
 // stitches.config.ts
-import type Stitches from '@stitches/react';
-import { createStitches } from '@stitches/react';
+import type Stitches from "@stitches/react";
+import { createStitches } from "@stitches/react";

 import {
  gray,
  blue,
-  red,
-  green,
-  plum,
+  crimson,
+  grass,
  slate,
  mauve,
-  pink,
-  yellow,
+  amber,
  purple,
  grayDark,
  blueDark,
-  redDark,
-  greenDark,
-  plumDark,
+  crimsonDark,
+  grassDark,
  slateDark,
  mauveDark,
-  pinkDark,
-  yellowDark,
+  amberDark,
  purpleDark,
-} from '@radix-ui/colors';
+} from "@radix-ui/colors";

 export const {
  styled,
@@ -39,26 +35,25 @@ export const {
    colors: {
      ...gray,
      ...blue,
-      ...red,
-      ...green,
-      ...plum,
+      ...crimson,
+      ...grass,
      ...slate,
      ...mauve,
-      ...pink,
-      ...yellow,
+      ...amber,
      ...purple,
+      accent: "#9D2DFF",
      background: "$gray1",
      backgroundAlt: "$gray4",
      text: "$gray12",
      primary: "$plum",
      white: "white",
      black: "black",
-      'deep': 'rgb(244, 244, 244)'
+      deep: "rgb(244, 244, 244)",
    },
    fonts: {
      body: 'Work Sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
-      heading: 'Work Sans, sans-serif',
-      monospace: 'Roboto Mono, monospace',
+      heading: "Work Sans, sans-serif",
+      monospace: "Roboto Mono, monospace",
    },
    fontSizes: {
      xs: "0.6875rem",
@@ -74,7 +69,7 @@ export const {
      "7xl": "4.5rem",
      "8xl": "6rem",
      "9xl": "8rem",
-      default: '$md'
+      default: "$md",
    },
    space: {
      px: "1px",
@@ -110,15 +105,15 @@ export const {
      72: "18rem",
      80: "20rem",
      96: "24rem",
-      "widePlus": '2048px',
-      "wide": '1536px',
-      "layoutPlus": '1260px',
-      "layout": '1024px',
-      "copyUltra": '980px',
-      "copyPlus": '768px',
-      "copy": '680px',
-      "narrowPlus": '600px',
-      "narrow": '512px',
+      widePlus: "2048px",
+      wide: "1536px",
+      layoutPlus: "1260px",
+      layout: "1024px",
+      copyUltra: "980px",
+      copyPlus: "768px",
+      copy: "680px",
+      narrowPlus: "600px",
+      narrow: "512px",
      xs: "20rem",
      sm: "24rem",
      md: "28rem",
@@ -218,62 +213,112 @@ export const {
    lg: "(min-width: 62em)",
    xl: "(min-width: 80em)",
    "2xl": "(min-width: 96em)",
-    hover: '(any-hover: hover)',
-    dark: '(prefers-color-scheme: dark)',
-    light: '(prefers-color-scheme: light)',
+    hover: "(any-hover: hover)",
+    dark: "(prefers-color-scheme: dark)",
+    light: "(prefers-color-scheme: light)",
  },
  utils: {
    // Abbreviated margin properties
-    m: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'margin'>) => ({
+    m: (
+      value: Stitches.ScaleValue<"space"> | Stitches.PropertyValue<"margin">
+    ) => ({
      margin: value,
    }),
-    mt: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginTop'>) => ({
+    mt: (
+      value: Stitches.ScaleValue<"space"> | Stitches.PropertyValue<"marginTop">
+    ) => ({
      marginTop: value,
    }),
-    mr: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginRight'>) => ({
+    mr: (
+      value:
+        | Stitches.ScaleValue<"space">
+        | Stitches.PropertyValue<"marginRight">
+    ) => ({
      marginRight: value,
    }),
-    mb: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginBottom'>) => ({
+    mb: (
+      value:
+        | Stitches.ScaleValue<"space">
+        | Stitches.PropertyValue<"marginBottom">
+    ) => ({
      marginBottom: value,
    }),
-    ml: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginLeft'>) => ({
+    ml: (
+      value: Stitches.ScaleValue<"space"> | Stitches.PropertyValue<"marginLeft">
+    ) => ({
      marginLeft: value,
    }),
-    mx: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginLeft' | 'marginRight'>) => ({
+    mx: (
+      value:
+        | Stitches.ScaleValue<"space">
+        | Stitches.PropertyValue<"marginLeft" | "marginRight">
+    ) => ({
      marginLeft: value,
      marginRight: value,
    }),
-    my: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'marginTop' | 'marginBottom'>) => ({
+    my: (
+      value:
+        | Stitches.ScaleValue<"space">
+        | Stitches.PropertyValue<"marginTop" | "marginBottom">
+    ) => ({
      marginTop: value,
      marginBottom: value,
    }),
    // Abbreviated margin properties
-    p: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'padding'>) => ({
+    p: (
+      value: Stitches.ScaleValue<"space"> | Stitches.PropertyValue<"padding">
+    ) => ({
      padding: value,
    }),
-    pt: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingTop'>) => ({
+    pt: (
+      value: Stitches.ScaleValue<"space"> | Stitches.PropertyValue<"paddingTop">
+    ) => ({
      paddingTop: value,
    }),
-    pr: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingRight'>) => ({
+    pr: (
+      value:
+        | Stitches.ScaleValue<"space">
+        | Stitches.PropertyValue<"paddingRight">
+    ) => ({
      paddingRight: value,
    }),
-    pb: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingBottom'>) => ({
+    pb: (
+      value:
+        | Stitches.ScaleValue<"space">
+        | Stitches.PropertyValue<"paddingBottom">
+    ) => ({
      paddingBottom: value,
    }),
-    pl: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingLeft'>) => ({
+    pl: (
+      value:
+        | Stitches.ScaleValue<"space">
+        | Stitches.PropertyValue<"paddingLeft">
+    ) => ({
      paddingLeft: value,
    }),
-    px: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingLeft' | 'paddingRight'>) => ({
+    px: (
+      value:
+        | Stitches.ScaleValue<"space">
+        | Stitches.PropertyValue<"paddingLeft" | "paddingRight">
+    ) => ({
      paddingLeft: value,
      paddingRight: value,
    }),
-    py: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'paddingTop' | 'paddingBottom'>) => ({
+    py: (
+      value:
+        | Stitches.ScaleValue<"space">
+        | Stitches.PropertyValue<"paddingTop" | "paddingBottom">
+    ) => ({
      paddingTop: value,
      paddingBottom: value,
    }),

    // A property for applying width/height together
-    size: (value: Stitches.ScaleValue<'space'> | Stitches.PropertyValue<'width' | 'height'>) => ({
+    size: (
+      value:
+        | Stitches.ScaleValue<"space">
+        | Stitches.PropertyValue<"width" | "height">
+    ) => ({
      width: value,
      height: value,
    }),
@@ -282,47 +327,44 @@ export const {
    // }),

    // A property to apply linear gradient
-    linearGradient: (value: Stitches.ScaleValue<'space'>) => ({
+    linearGradient: (value: Stitches.ScaleValue<"space">) => ({
      backgroundImage: `linear-gradient(${value})`,
    }),

    // An abbreviated property for border-radius
-    br: (value: Stitches.ScaleValue<'space'>) => ({
+    br: (value: Stitches.ScaleValue<"space">) => ({
      borderRadius: value,
    }),
  },
-
 });

-export const darkTheme = createTheme('dark', {
+export const darkTheme = createTheme("dark", {
  colors: {
    ...grayDark,
    ...blueDark,
-    ...redDark,
-    ...greenDark,
-    ...plumDark,
+    ...crimsonDark,
+    ...grassDark,
    ...slateDark,
    ...mauveDark,
-    ...pinkDark,
-    ...yellowDark,
+    ...amberDark,
    ...purpleDark,
-    deep: 'rgb(10, 10, 10)',
+    deep: "rgb(10, 10, 10)",
    // backgroundA: transparentize(0.1, grayDark.gray1),
  },
 });

 export const globalStyles = globalCss({
  // body: { backgroundColor: '$background', color: '$text', fontFamily: 'Helvetica' },
-  'html, body': {
-    backgroundColor: '$gray1',
-    color: '$gray12',
-    fontFamily: '$body',
-    fontSize: '$md',
-    '-webkit-font-smoothing': 'antialiased',
-    '-moz-osx-font-smoothing': 'grayscale'
+  "html, body": {
+    backgroundColor: "$mauve2",
+    color: "$mauve12",
+    fontFamily: "$body",
+    fontSize: "$md",
+    "-webkit-font-smoothing": "antialiased",
+    "-moz-osx-font-smoothing": "grayscale",
+  },
+  a: {
+    color: "inherit",
+    textDecoration: "none",
  },
-  'a': {
-    color: 'inherit',
-    textDecoration: 'none'
-  }
 });
--- a/theme/editor/amy.json
+++ b/theme/editor/amy.json
@@ -3,7 +3,7 @@
  "inherit": true,
  "rules": [
    {
-      "background": "1a1d1e",
+      "background": "161618",
      "token": ""
    },
    {
@@ -182,10 +182,10 @@
  ],
  "colors": {
    "editor.foreground": "#D0D0FF",
-    "editor.background": "#232326",
+    "editor.background": "#1C1C1F",
    "editor.selectionBackground": "#ffffff30",
    "editor.lineHighlightBackground": "#ffffff20",
    "editorCursor.foreground": "#7070FF",
    "editorWhitespace.foreground": "#BFBFBF"
  }
-}
+}
--- a/theme/editor/xcode_default.json
+++ b/theme/editor/xcode_default.json
@@ -3,7 +3,7 @@
  "inherit": true,
  "rules": [
    {
-      "background": "FFFFFF",
+      "background": "F4F2F4",
      "token": ""
    },
    {
@@ -89,10 +89,10 @@
  ],
  "colors": {
    "editor.foreground": "#000000",
-    "editor.background": "#f4f2f4",
+    "editor.background": "#F9F8F9",
    "editor.selectionBackground": "#B5D5FF",
    "editor.lineHighlightBackground": "#00000012",
    "editorCursor.foreground": "#000000",
    "editorWhitespace.foreground": "#BFBFBF"
  }
-}
+}