Button and theme colors changed

2021-11-20 01:34:40 +02:00
parent 1a182858b4
commit 460412d3d7
12 changed files with 387 additions and 162 deletions
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -1,4 +1,9 @@
+import { CSS } from "@stitches/react/types/css-util";
+import { StyledComponent } from "@stitches/react/types/styled-component";
+import React from "react";
 import { styled } from "../stitches.config";
+import Flex from "./Flex";
+import Spinner from "./Spinner";

 const Button = styled("button", {
  // Reset
@@ -30,8 +35,9 @@ const Button = styled("button", {
  backgroundColor: "red",
  cursor: "pointer",
  "&:disabled": {
-    opacity: 0.8,
+    opacity: 0.6,
    pointerEvents: "none",
+    cursor: "not-allowed",
  },
  variants: {
    size: {
@@ -56,27 +62,27 @@ const Button = styled("button", {
    },
    variant: {
      default: {
-        backgroundColor: "$slate12",
-        boxShadow: "inset 0 0 0 1px $colors$slate12",
-        color: "$slate1",
+        backgroundColor: "$mauve12",
+        boxShadow: "inset 0 0 0 1px $colors$mauve12",
+        color: "$mauve1",
        "@hover": {
          "&:hover": {
-            backgroundColor: "$slate12",
-            boxShadow: "inset 0 0 0 1px $colors$slate12",
+            backgroundColor: "$mauve12",
+            boxShadow: "inset 0 0 0 1px $colors$mauve12",
          },
        },
        "&:active": {
-          backgroundColor: "$slate10",
-          boxShadow: "inset 0 0 0 1px $colors$slate11",
+          backgroundColor: "$mauve10",
+          boxShadow: "inset 0 0 0 1px $colors$mauve11",
        },
        "&:focus": {
          boxShadow:
-            "inset 0 0 0 1px $colors$slate12, 0 0 0 1px $colors$slate12",
+            "inset 0 0 0 1px $colors$mauve12, 0 0 0 1px $colors$mauve12",
        },
        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
          {
-            backgroundColor: "$slate4",
-            boxShadow: "inset 0 0 0 1px $colors$slate8",
+            backgroundColor: "$mauve4",
+            boxShadow: "inset 0 0 0 1px $colors$mauve8",
          },
      },
      primary: {
@@ -98,7 +104,7 @@ const Button = styled("button", {
        },
        '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]':
          {
-            backgroundColor: "$slate4",
+            backgroundColor: "$mauve4",
            boxShadow: "inset 0 0 0 1px $colors$pink8",
          },
      },
@@ -117,15 +123,15 @@ const Button = styled("button", {
      true: {
        boxShadow: "none",
        background: "transparent",
-        color: "$slate12",
+        color: "$mauve12",
        "@hover": {
          "&:hover": {
-            backgroundColor: "$slate6",
+            backgroundColor: "$mauve6",
            boxShadow: "none",
          },
        },
        "&:active": {
-          backgroundColor: "$slate8",
+          backgroundColor: "$mauve8",
          boxShadow: "none",
        },
        "&:focus": {
@@ -133,19 +139,26 @@ const Button = styled("button", {
        },
      },
    },
+    isLoading: {
+      true: {
+        "& .button-content": {
+          visibility: "hidden",
+        },
+        pointerEvents: "none",
+      },
+    },
  },
-
  compoundVariants: [
    {
      outline: true,
      variant: "default",
      css: {
        background: "transparent",
-        color: "$slate12",
-        boxShadow: "inset 0 0 0 1px $colors$slate10",
+        color: "$mauve12",
+        boxShadow: "inset 0 0 0 1px $colors$mauve10",
        "&:hover": {
-          color: "$slate12",
-          background: "$slate5",
+          color: "$mauve12",
+          background: "$mauve5",
        },
      },
    },
@@ -154,10 +167,10 @@ const Button = styled("button", {
      variant: "primary",
      css: {
        background: "transparent",
-        color: "$slate12",
+        color: "$mauve12",
        "&:hover": {
-          color: "$slate12",
-          background: "$slate5",
+          color: "$mauve12",
+          background: "$mauve5",
        },
      },
    },
@@ -168,4 +181,22 @@ const Button = styled("button", {
  },
 });

-export default Button;
+const CustomButton: React.FC<
+  React.ComponentProps<typeof Button> & { as?: string }
+> = React.forwardRef(({ children, as = "button", ...rest }, ref) => (
+  // @ts-expect-error
+  <Button {...rest} ref={ref} as={as}>
+    <Flex
+      as="span"
+      css={{ gap: "$2", alignItems: "center" }}
+      className="button-content"
+    >
+      {children}
+    </Flex>
+    {rest.isLoading && <Spinner css={{ position: "absolute" }} />}
+  </Button>
+));
+
+CustomButton.displayName = "CustomButton";
+
+export default CustomButton;
--- a/components/Dialog.tsx
+++ b/components/Dialog.tsx
@@ -29,8 +29,8 @@ const StyledOverlay = styled(DialogPrimitive.Overlay, {

 const StyledContent = styled(DialogPrimitive.Content, {
  zIndex: 1000,
-  backgroundColor: "$slate2",
-  color: "$slate12",
+  backgroundColor: "$mauve2",
+  color: "$mauve12",
  borderRadius: "$md",
  boxShadow:
    "0px 10px 38px -5px rgba(22, 23, 24, 0.25), 0px 10px 20px -5px rgba(22, 23, 24, 0.2)",
@@ -47,7 +47,7 @@ const StyledContent = styled(DialogPrimitive.Content, {
  },
  "&:focus": { outline: "none" },
  ".dark &": {
-    backgroundColor: "$slate5",
+    backgroundColor: "$mauve5",
    boxShadow:
      "0px 10px 38px 0px rgba(22, 23, 24, 0.85), 0px 10px 20px 0px rgba(22, 23, 24, 0.6)",
  },
@@ -65,13 +65,13 @@ const Content: React.FC<{ css?: Stiches.CSS }> = ({ css, children }) => {
 const StyledTitle = styled(DialogPrimitive.Title, {
  margin: 0,
  fontWeight: 500,
-  color: "$slate12",
+  color: "$mauve12",
  fontSize: 17,
 });

 const StyledDescription = styled(DialogPrimitive.Description, {
  margin: "10px 0 20px",
-  color: "$slate11",
+  color: "$mauve11",
  fontSize: 15,
  lineHeight: 1.5,
 });
@@ -83,21 +83,3 @@ export const DialogContent = Content;
 export const DialogTitle = StyledTitle;
 export const DialogDescription = StyledDescription;
 export const DialogClose = DialogPrimitive.Close;
-
-const Input = styled("input", {
-  all: "unset",
-  width: "100%",
-  flex: "1",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  borderRadius: 4,
-  padding: "0 10px",
-  fontSize: 15,
-  lineHeight: 1,
-  color: violet.violet11,
-  boxShadow: `0 0 0 1px ${violet.violet7}`,
-  height: 35,
-
-  "&:focus": { boxShadow: `0 0 0 2px ${violet.violet8}` },
-});
--- a/components/DropdownMenu.tsx
+++ b/components/DropdownMenu.tsx
@@ -2,7 +2,6 @@ import { keyframes } from "@stitches/react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";

 import { styled } from "../stitches.config";
-import { blackA, slateDark } from "@radix-ui/colors";

 const slideUpAndFade = keyframes({
  "0%": { opacity: 0, transform: "translateY(2px)" },
@@ -26,7 +25,7 @@ const slideLeftAndFade = keyframes({

 const StyledContent = styled(DropdownMenuPrimitive.Content, {
  minWidth: 220,
-  backgroundColor: "$slate2",
+  backgroundColor: "$mauve2",
  borderRadius: 6,
  padding: 5,
  boxShadow:
@@ -43,7 +42,7 @@ const StyledContent = styled(DropdownMenuPrimitive.Content, {
    },
  },
  ".dark &": {
-    backgroundColor: "$slate5",
+    backgroundColor: "$mauve5",
    boxShadow:
      "0px 10px 38px -10px rgba(22, 23, 24, 0.85), 0px 10px 20px -15px rgba(22, 23, 24, 0.6)",
  },
@@ -53,7 +52,7 @@ const itemStyles = {
  all: "unset",
  fontSize: 13,
  lineHeight: 1,
-  color: "$slate12",
+  color: "$mauve12",
  borderRadius: 3,
  display: "flex",
  alignItems: "center",
@@ -65,7 +64,7 @@ const itemStyles = {
  gap: "$2",

  "&[data-disabled]": {
-    color: "$slate9",
+    color: "$mauve9",
    pointerEvents: "none",
  },

@@ -94,12 +93,12 @@ const StyledLabel = styled(DropdownMenuPrimitive.Label, {
  paddingLeft: 25,
  fontSize: 12,
  lineHeight: "25px",
-  color: "$slate11",
+  color: "$mauve11",
 });

 const StyledSeparator = styled(DropdownMenuPrimitive.Separator, {
  height: 1,
-  backgroundColor: "$slate7",
+  backgroundColor: "$mauve7",
  margin: 5,
 });

@@ -113,7 +112,7 @@ const StyledItemIndicator = styled(DropdownMenuPrimitive.ItemIndicator, {
 });

 const StyledArrow = styled(DropdownMenuPrimitive.Arrow, {
-  fill: "$slate2",
+  fill: "$mauve2",
 });

 // Exports
--- a/components/EditorNavigation.tsx
+++ b/components/EditorNavigation.tsx
@@ -19,6 +19,7 @@ import Stack from "./Stack";
 import { useSnapshot } from "valtio";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
+import Input from "./Input";

 const EditorNavigation = () => {
  const snap = useSnapshot(state);
@@ -40,7 +41,7 @@ const EditorNavigation = () => {
                  size="sm"
                  outline={snap.active !== index}
                  onClick={() => (state.active = index)}
-                  key={file.name}
+                  key={file.name + index}
                  css={{
                    "&:hover": {
                      span: {
@@ -54,13 +55,28 @@ const EditorNavigation = () => {
                    as="span"
                    css={{
                      display: "flex",
-                      p: "1px",
+                      p: "2px",
                      borderRadius: "$full",
                      mr: "-4px",
+                      "&:hover": {
+                        // boxSizing: "0px 0px 1px",
+                        backgroundColor: "$mauve2",
+                        color: "$mauve12",
+                      },
+                    }}
+                    onClick={(ev: React.MouseEvent<HTMLElement>) => {
+                      ev.stopPropagation();
+                      // Remove file from state
+                      state.files.splice(index, 1);
+                      // Change active file state
+                      // 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;
                    }}
-                    onClick={() => state.files.splice(index, 1)}
                  >
-                    <X size="13px" />
+                    <X size="9px" weight="bold" />
                  </Box>
                </Button>
              ))}
@@ -79,10 +95,8 @@ const EditorNavigation = () => {
              <DialogContent>
                <DialogTitle>Create new file</DialogTitle>
                <DialogDescription>
-                  <span>
-                    Create empty C file or select one of the existing ones
-                  </span>
-                  <input
+                  <label>Filename</label>
+                  <Input
                    value={filename}
                    onChange={(e) => setFilename(e.target.value)}
                  />
@@ -120,7 +134,7 @@ const EditorNavigation = () => {
      <Flex
        css={{
          py: "$3",
-          backgroundColor: "$slate3",
+          backgroundColor: "$mauve3",
          zIndex: 1,
        }}
      >
@@ -131,7 +145,7 @@ const EditorNavigation = () => {
              marginLeft: "auto",
              flexShrink: 0,
              gap: "$0",
-              border: "1px solid $slate10",
+              border: "1px solid $mauve10",
              borderRadius: "$sm",
              zIndex: 9,
              position: "relative",
@@ -185,8 +199,10 @@ const EditorNavigation = () => {
              <DialogContent>
                <DialogTitle>Editor settings</DialogTitle>
                <DialogDescription>
-                  <span>You can edit your editor settings here</span>
-                  <input
+                  <label>Tab size</label>
+                  <Input
+                    type="number"
+                    min="1"
                    value={editorSettings.tabSize}
                    onChange={(e) =>
                      setEditorSettings((curr) => ({
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -12,11 +12,11 @@ const Footer = () => {
      as="footer"
      css={{
        display: "flex",
-        borderTop: "1px solid $slate6",
-        background: "$slate1",
+        borderTop: "1px solid $mauve6",
+        background: "$mauve1",
      }}
    >
-      <Container css={{ py: "$4", flexShrink: 1 }}>
+      <Container css={{ py: "$3", flexShrink: 1 }}>
        <Box
          as="pre"
          css={{
@@ -35,7 +35,7 @@ const Footer = () => {
          }}
        >
          {snap.logs.map((log, index) => (
-            <Box key={log.type + index}>
+            <Box as="span" key={log.type + index}>
              <LogText capitalize variant={log.type}>
                {log.type}:{" "}
              </LogText>
--- a/components/HooksEditor.tsx
+++ b/components/HooksEditor.tsx
@@ -2,32 +2,23 @@ import React, { useEffect, useRef } from "react";
 import { useSnapshot, ref } from "valtio";
 import Editor from "@monaco-editor/react";
 import type monaco from "monaco-editor";
-import { Play } from "phosphor-react";
+import { ArrowBendLeftUp, Play } from "phosphor-react";
 import { useTheme } from "next-themes";

 import Box from "./Box";
 import Button from "./Button";
+import Container from "./Container";
 import dark from "../theme/editor/amy.json";
 import light from "../theme/editor/xcode_default.json";
 import { compileCode, saveFile, state } from "../state";

 import EditorNavigation from "./EditorNavigation";
-import Spinner from "./Spinner";
+import Text from "./Text";

 const HooksEditor = () => {
  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
  const snap = useSnapshot(state);
  const { theme } = useTheme();
-  // useEffect(() => {
-  //   if (snap.editorCtx) {
-  //     snap.editorCtx.getModels().forEach((model) => {
-  //       // console.log(model.id,);
-  //       snap.editorCtx?.createModel(model.getValue(), "c", model.uri);
-  //     });
-  //   }
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, []);
-  console.log("reinit");
  return (
    <Box
      css={{
@@ -36,48 +27,80 @@ const HooksEditor = () => {
        display: "flex",
        position: "relative",
        flexDirection: "column",
-        backgroundColor: "$slate3",
+        backgroundColor: "$mauve3",
        width: "100%",
      }}
    >
      <EditorNavigation />
-      <Editor
-        keepCurrentModel
-        // defaultLanguage={snap.files?.[snap.active]?.language}
-        path={snap.files?.[snap.active]?.name}
-        // defaultValue={snap.files?.[snap.active]?.content}
-        beforeMount={(monaco) => {
-          if (!state.editorCtx) {
-            state.editorCtx = ref(monaco.editor);
-            // @ts-expect-error
-            monaco.editor.defineTheme("dark", dark);
-            // @ts-expect-error
-            monaco.editor.defineTheme("light", light);
-          }
-        }}
-        onMount={(editor, monaco) => {
-          editorRef.current = editor;
-          // hook editor to global state
-          editor.updateOptions({
-            minimap: {
-              enabled: false,
-            },
-            ...snap.editorSettings,
-          });
-          editor.addCommand(
-            monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S,
-            () => {
-              saveFile(editor.getValue());
+      {snap.files.length > 0 ? (
+        <Editor
+          keepCurrentModel
+          defaultLanguage={snap.files?.[snap.active]?.language}
+          path={snap.files?.[snap.active]?.name}
+          defaultValue={snap.files?.[snap.active]?.content}
+          beforeMount={(monaco) => {
+            if (!state.editorCtx) {
+              state.editorCtx = ref(monaco.editor);
+              // @ts-expect-error
+              monaco.editor.defineTheme("dark", dark);
+              // @ts-expect-error
+              monaco.editor.defineTheme("light", light);
            }
-          );
-        }}
-        theme={theme === "dark" ? "dark" : "light"}
-      />
+          }}
+          onMount={(editor, monaco) => {
+            editorRef.current = editor;
+            // hook editor to global state
+            editor.updateOptions({
+              minimap: {
+                enabled: false,
+              },
+              ...snap.editorSettings,
+            });
+            editor.addCommand(
+              monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S,
+              () => {
+                saveFile(editor.getValue());
+              }
+            );
+          }}
+          theme={theme === "dark" ? "dark" : "light"}
+        />
+      ) : (
+        <Container>
+          <Box
+            css={{
+              flexDirection: "row",
+              width: "$spaces$wide",
+              gap: "$3",
+              display: "inline-flex",
+            }}
+          >
+            <Box css={{ display: "inline-flex", pl: "35px" }}>
+              <ArrowBendLeftUp size={30} />
+            </Box>
+            <Box
+              css={{ pl: "0px", pt: "15px", flex: 1, display: "inline-flex" }}
+            >
+              <Text
+                css={{
+                  fontSize: "14px",
+                  maxWidth: "220px",
+                  fontFamily: "$monospace",
+                }}
+              >
+                Click the link above to create a your file (until we get the
+                fancy modal, where you can select example files 😊)
+              </Text>
+            </Box>
+          </Box>
+        </Container>
+      )}
      <Button
        variant="primary"
        uppercase
+        disabled={!snap.files.length}
+        isLoading={snap.compiling}
        onClick={() => compileCode(snap.active)}
-        disabled={snap.compiling}
        css={{
          position: "absolute",
          bottom: "$4",
@@ -89,7 +112,6 @@ const HooksEditor = () => {
      >
        <Play weight="bold" size="16px" />
        Compile to Wasm
-        {snap.compiling && <Spinner />}
      </Button>
    </Box>
  );
--- a/components/Input.tsx
+++ b/components/Input.tsx
@@ -0,0 +1,139 @@
+import { styled } from "../stitches.config";
+
+export const Input = styled("input", {
+  // Reset
+  appearance: "none",
+  borderWidth: "0",
+  boxSizing: "border-box",
+  fontFamily: "inherit",
+  outline: "none",
+  width: "100%",
+  flex: "1",
+  backgroundColor: "$mauve4",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "$sm",
+  px: "$2",
+  fontSize: "$md",
+  lineHeight: 1,
+  color: "$mauve12",
+  boxShadow: `0 0 0 1px $colors$mauve8`,
+  height: 35,
+  WebkitTapHighlightColor: "rgba(0,0,0,0)",
+  "&::before": {
+    boxSizing: "border-box",
+  },
+  "&::after": {
+    boxSizing: "border-box",
+  },
+  fontVariantNumeric: "tabular-nums",
+
+  "&:-webkit-autofill": {
+    boxShadow: "inset 0 0 0 1px $colors$blue6, inset 0 0 0 100px $colors$blue3",
+  },
+
+  "&:-webkit-autofill::first-line": {
+    fontFamily: "$untitled",
+    color: "$mauve12",
+  },
+
+  "&:focus": {
+    boxShadow: `0 0 0 1px $colors$mauve10`,
+    "&:-webkit-autofill": {
+      boxShadow: `0 0 0 1px $colors$mauve10`,
+    },
+  },
+  "&::placeholder": {
+    color: "$mauve9",
+  },
+  "&:disabled": {
+    pointerEvents: "none",
+    backgroundColor: "$mauve2",
+    color: "$mauve8",
+    cursor: "not-allowed",
+    "&::placeholder": {
+      color: "$mauve7",
+    },
+  },
+  "&:read-only": {
+    backgroundColor: "$mauve2",
+    "&:focus": {
+      boxShadow: "inset 0px 0px 0px 1px $colors$mauve7",
+    },
+  },
+
+  variants: {
+    size: {
+      md: {
+        height: "$8",
+        fontSize: "$1",
+        lineHeight: "$sizes$5",
+        "&:-webkit-autofill::first-line": {
+          fontSize: "$1",
+        },
+      },
+      lg: {
+        height: "$12",
+        fontSize: "$2",
+        lineHeight: "$sizes$6",
+        "&:-webkit-autofill::first-line": {
+          fontSize: "$3",
+        },
+      },
+    },
+    variant: {
+      ghost: {
+        boxShadow: "none",
+        backgroundColor: "transparent",
+        "@hover": {
+          "&:hover": {
+            boxShadow: "inset 0 0 0 1px $colors$mauve7",
+          },
+        },
+        "&:focus": {
+          backgroundColor: "$loContrast",
+          boxShadow: `0 0 0 1px $colors$mauve10`,
+        },
+        "&:disabled": {
+          backgroundColor: "transparent",
+        },
+        "&:read-only": {
+          backgroundColor: "transparent",
+        },
+      },
+    },
+    state: {
+      invalid: {
+        boxShadow: "inset 0 0 0 1px $colors$red7",
+        "&:focus": {
+          boxShadow:
+            "inset 0px 0px 0px 1px $colors$red8, 0px 0px 0px 1px $colors$red8",
+        },
+      },
+      valid: {
+        boxShadow: "inset 0 0 0 1px $colors$green7",
+        "&:focus": {
+          boxShadow:
+            "inset 0px 0px 0px 1px $colors$green8, 0px 0px 0px 1px $colors$green8",
+        },
+      },
+    },
+    cursor: {
+      default: {
+        cursor: "default",
+        "&:focus": {
+          cursor: "text",
+        },
+      },
+      text: {
+        cursor: "text",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export default Input;
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -22,9 +22,9 @@ import {
 import Stack from "./Stack";
 import Logo from "./Logo";
 import Button from "./Button";
+import Flex from "./Flex";
 import Container from "./Container";
 import Box from "./Box";
-import Flex from "./Flex";
 import ThemeChanger from "./ThemeChanger";
 import { useRouter } from "next/router";

@@ -37,7 +37,7 @@ const Navigation = () => {
      css={{
        display: "flex",
        height: "60px",
-        borderBottom: "1px solid $slate6",
+        borderBottom: "1px solid $mauve6",
        position: "relative",
        zIndex: 2003,
      }}
@@ -52,42 +52,73 @@ const Navigation = () => {
        <Link href="/" passHref>
          <Box
            as="a"
-            css={{ display: "flex", alignItems: "center", color: "$textColor" }}
+            css={{
+              display: "flex",
+              alignItems: "center",
+              color: "$textColor",
+            }}
          >
            <Logo width="30px" height="30px" />
          </Box>
        </Link>
-        <Stack css={{ ml: "$4", gap: "$3" }}>
-          <Link href="/develop" passHref shallow>
-            <Button
-              as="a"
-              outline={!router.pathname.includes("/develop")}
-              uppercase
-            >
-              Develop
-            </Button>
-          </Link>
-          <Link href="/deploy" passHref shallow>
-            <Button
-              as="a"
-              outline={!router.pathname.includes("/deploy")}
-              uppercase
-            >
-              Deploy
-            </Button>
-          </Link>
-          <Link href="/test" passHref shallow>
-            <Button
-              as="a"
-              outline={!router.pathname.includes("/test")}
-              uppercase
-            >
-              Test
-            </Button>
-          </Link>
-        </Stack>
-        <Stack css={{ color: "text", ml: "auto" }}>
-          <ThemeChanger />
+        <Flex
+          css={{
+            flex: 1,
+            flexWrap: "nowrap",
+            marginLeft: "$3",
+            overflowX: "scroll",
+          }}
+        >
+          <Stack
+            css={{
+              ml: "$4",
+              gap: "$3",
+              flexWrap: "nowrap",
+              alignItems: "center",
+              pr: "$3",
+            }}
+          >
+            <Link href="/develop" passHref shallow>
+              <Button
+                as="a"
+                outline={!router.pathname.includes("/develop")}
+                uppercase
+              >
+                Develop
+              </Button>
+            </Link>
+            <Link href="/deploy" passHref shallow>
+              <Button
+                as="a"
+                outline={!router.pathname.includes("/deploy")}
+                uppercase
+              >
+                Deploy
+              </Button>
+            </Link>
+            <Link href="/test" passHref shallow>
+              <Button
+                as="a"
+                outline={!router.pathname.includes("/test")}
+                uppercase
+              >
+                Test
+              </Button>
+            </Link>
+            <ThemeChanger />
+          </Stack>
+        </Flex>
+        <Stack
+          css={{
+            color: "text",
+            ml: "auto",
+            flexWrap: "nowrap",
+            marginLeft: "$3",
+            "@sm": {
+              marginLeft: "auto",
+            },
+          }}
+        >
          {status === "authenticated" && (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
@@ -135,12 +166,15 @@ const Navigation = () => {
              </DropdownMenuContent>
            </DropdownMenu>
          )}
-          {status === "unauthenticated" && (
-            <Button outline onClick={() => signIn("github")}>
-              <GithubLogo size="16px" /> Github Login
+          {status !== "authenticated" && (
+            <Button
+              isLoading={status === "loading"}
+              outline
+              onClick={() => signIn("github")}
+            >
+              <GithubLogo size="16px" /> GitHub Login
            </Button>
          )}
-          {status === "loading" && "loading"}
          {/* <Box
              css={{
                border: "1px solid",
--- a/components/Spinner.tsx
+++ b/components/Spinner.tsx
@@ -3,11 +3,12 @@ import { styled, keyframes } from "../stitches.config";

 const rotate = keyframes({
  "0%": { transform: "rotate(0deg)" },
-  "100%": { transform: "rotate(360deg)" },
+  "100%": { transform: "rotate(-360deg)" },
 });

 const Spinner = styled(SpinnerIcon, {
-  animation: `${rotate} 150ms cubic-bezier(0.16, 1, 0.3, 1) infinite`,
+  animation: `${rotate} 150ms linear infinite`,
+  fontSize: "16px",
 });

 export default Spinner;
--- a/pages/develop/index.tsx
+++ b/pages/develop/index.tsx
@@ -2,12 +2,14 @@ import type { NextPage } from "next";
 import Head from "next/head";
 import dynamic from "next/dynamic";

-import Footer from "../../components/Footer";
-
 const HooksEditor = dynamic(() => import("../../components/HooksEditor"), {
  ssr: false,
 });

+const Footer = dynamic(() => import("../../components/Footer"), {
+  ssr: false,
+});
+
 const Home: NextPage = () => {
  return (
    <>
@@ -17,7 +19,6 @@ const Home: NextPage = () => {
      <main style={{ display: "flex", flex: 1 }}>
        <HooksEditor />
      </main>
-
      <Footer />
    </>
  );
--- a/theme/editor/amy.json
+++ b/theme/editor/amy.json
@@ -182,7 +182,7 @@
  ],
  "colors": {
    "editor.foreground": "#D0D0FF",
-    "editor.background": "#202425",
+    "editor.background": "#232326",
    "editor.selectionBackground": "#ffffff30",
    "editor.lineHighlightBackground": "#ffffff20",
    "editorCursor.foreground": "#7070FF",
--- a/theme/editor/xcode_default.json
+++ b/theme/editor/xcode_default.json
@@ -89,7 +89,7 @@
  ],
  "colors": {
    "editor.foreground": "#000000",
-    "editor.background": "#f1f3f5",
+    "editor.background": "#f4f2f4",
    "editor.selectionBackground": "#B5D5FF",
    "editor.lineHighlightBackground": "#00000012",
    "editorCursor.foreground": "#000000",