Button and theme colors changed

Add styles to empty pages

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",
+        backgroundColor: "$mauve12",
-        boxShadow: "inset 0 0 0 1px $colors$slate12",
+        boxShadow: "inset 0 0 0 1px $colors$mauve12",
-        color: "$slate1",
+        color: "$mauve1",
         "@hover": {
           "&:hover": {
-            backgroundColor: "$slate12",
+            backgroundColor: "$mauve12",
-            boxShadow: "inset 0 0 0 1px $colors$slate12",
+            boxShadow: "inset 0 0 0 1px $colors$mauve12",
           },
         },
         "&:active": {
-          backgroundColor: "$slate10",
+          backgroundColor: "$mauve10",
-          boxShadow: "inset 0 0 0 1px $colors$slate11",
+          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",
+            backgroundColor: "$mauve4",
-            boxShadow: "inset 0 0 0 1px $colors$slate8",
+            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",
+        color: "$mauve12",
-        boxShadow: "inset 0 0 0 1px $colors$slate10",
+        boxShadow: "inset 0 0 0 1px $colors$mauve10",
         "&:hover": {
-          color: "$slate12",
+          color: "$mauve12",
-          background: "$slate5",
+          background: "$mauve5",
         },
       },
     },
@@ -154,10 +167,10 @@ const Button = styled("button", {
       variant: "primary",
       css: {
         background: "transparent",
-        color: "$slate12",
+        color: "$mauve12",
         "&:hover": {
-          color: "$slate12",
+          color: "$mauve12",
-          background: "$slate5",
+          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;

components/Dialog.tsx

@@ -29,8 +29,8 @@ const StyledOverlay = styled(DialogPrimitive.Overlay, {
 
 const StyledContent = styled(DialogPrimitive.Content, {
   zIndex: 1000,
-  backgroundColor: "$slate2",
+  backgroundColor: "$mauve2",
-  color: "$slate12",
+  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}` },
-});

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

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>
+                  <label>Filename</label>
-                    Create empty C file or select one of the existing ones
+                  <Input
-                  </span>
-                  <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>
+                  <label>Tab size</label>
-                  <input
+                  <Input
+                    type="number"
+                    min="1"
                     value={editorSettings.tabSize}
                     onChange={(e) =>
                       setEditorSettings((curr) => ({

components/Footer.tsx

@@ -12,11 +12,11 @@ const Footer = () => {
       as="footer"
       css={{
         display: "flex",
-        borderTop: "1px solid $slate6",
+        borderTop: "1px solid $mauve6",
-        background: "$slate1",
+        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>

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
+      {snap.files.length > 0 ? (
-        keepCurrentModel
+        <Editor
-        // defaultLanguage={snap.files?.[snap.active]?.language}
+          keepCurrentModel
-        path={snap.files?.[snap.active]?.name}
+          defaultLanguage={snap.files?.[snap.active]?.language}
-        // defaultValue={snap.files?.[snap.active]?.content}
+          path={snap.files?.[snap.active]?.name}
-        beforeMount={(monaco) => {
+          defaultValue={snap.files?.[snap.active]?.content}
-          if (!state.editorCtx) {
+          beforeMount={(monaco) => {
-            state.editorCtx = ref(monaco.editor);
+            if (!state.editorCtx) {
-            // @ts-expect-error
+              state.editorCtx = ref(monaco.editor);
-            monaco.editor.defineTheme("dark", dark);
+              // @ts-expect-error
-            // @ts-expect-error
+              monaco.editor.defineTheme("dark", dark);
-            monaco.editor.defineTheme("light", light);
+              // @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());
             }
-          );
+          }}
-        }}
+          onMount={(editor, monaco) => {
-        theme={theme === "dark" ? "dark" : "light"}
+            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>
   );

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;

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" }}>
+        <Flex
-          <Link href="/develop" passHref shallow>
+          css={{
-            <Button
+            flex: 1,
-              as="a"
+            flexWrap: "nowrap",
-              outline={!router.pathname.includes("/develop")}
+            marginLeft: "$3",
-              uppercase
+            overflowX: "scroll",
-            >
+          }}
-              Develop
+        >
-            </Button>
+          <Stack
-          </Link>
+            css={{
-          <Link href="/deploy" passHref shallow>
+              ml: "$4",
-            <Button
+              gap: "$3",
-              as="a"
+              flexWrap: "nowrap",
-              outline={!router.pathname.includes("/deploy")}
+              alignItems: "center",
-              uppercase
+              pr: "$3",
-            >
+            }}
-              Deploy
+          >
-            </Button>
+            <Link href="/develop" passHref shallow>
-          </Link>
+              <Button
-          <Link href="/test" passHref shallow>
+                as="a"
-            <Button
+                outline={!router.pathname.includes("/develop")}
-              as="a"
+                uppercase
-              outline={!router.pathname.includes("/test")}
+              >
-              uppercase
+                Develop
-            >
+              </Button>
-              Test
+            </Link>
-            </Button>
+            <Link href="/deploy" passHref shallow>
-          </Link>
+              <Button
-        </Stack>
+                as="a"
-        <Stack css={{ color: "text", ml: "auto" }}>
+                outline={!router.pathname.includes("/deploy")}
-          <ThemeChanger />
+                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" && (
+          {status !== "authenticated" && (
-            <Button outline onClick={() => signIn("github")}>
+            <Button
-              <GithubLogo size="16px" /> Github Login
+              isLoading={status === "loading"}
+              outline
+              onClick={() => signIn("github")}
+            >
+              <GithubLogo size="16px" /> GitHub Login
             </Button>
           )}
-          {status === "loading" && "loading"}
           {/* <Box
               css={{
                 border: "1px solid",

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;

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 />
     </>
   );

state.ts

@@ -7,9 +7,9 @@ import toast from 'react-hot-toast';
 const octokit = new Octokit();
 
 interface File {
-  name: string,
+  name: string;
-  language: string,
+  language: string;
-  content: string
+  content: string;
 }
 
 interface IState {
@@ -98,11 +98,20 @@ export const updateEditorSettings = (editorSettings: IState['editorSettings']) =
 }
 
 export const saveFile = (value: string) => {
+  const editorModels = state.editorCtx?.getModels();
+  const currentModel = editorModels?.find(editorModel => editorModel.uri.path === `/${state.files[state.active].name}`);
+  console.log(currentModel?.getValue())
+  if (state.files.length > 0) {
+    console.log('häää')
+    state.files[state.active].content = currentModel?.getValue() || '';
+  }
+  console.log(state.files[state.active])
   toast.success('Saved successfully', { position: 'bottom-center' })
 }
 
 export const createNewFile = (name: string) => {
-  state.files.push({ name, language: 'c', content: "" })
+  const emptyFile: File = { name, language: 'c', content: "" };
+  state.files.push(emptyFile)
   state.active = state.files.length - 1;
 }
 
@@ -135,8 +144,19 @@ export const compileCode = async (activeId: number) => {
     });
     const json = await res.json();
     state.compiling = false;
-    toast.success('Compiled successfully!');
+    if (!json.success) {
-    console.log(json)
+      state.logs.push({ type: 'error', message: json.message })
+      if (json.tasks && json.tasks.length > 0) {
+        json.tasks.forEach((task: any) => {
+          if (!task.success) {
+            state.logs.push({ type: 'error', message: task?.console })
+          }
+        })
+      }
+      return toast.error(`Couldn't compile!`, { position: 'bottom-center' });
+    }
+    state.logs.push({ type: 'log', message: 'Compiled successfully ✅' })
+    toast.success('Compiled successfully!', { position: 'bottom-center' });
   } catch (err) {
     console.log(err)
     state.logs.push({ type: 'error', message: 'Error occured while compiling!' })

stitches.config.ts

@@ -8,6 +8,7 @@ import {
   green,
   plum,
   slate,
+  mauve,
   pink,
   yellow,
   grayDark,
@@ -16,8 +17,9 @@ import {
   greenDark,
   plumDark,
   slateDark,
+  mauveDark,
   pinkDark,
-  yellowDark
+  yellowDark,
 } from '@radix-ui/colors';
 
 export const {
@@ -38,6 +40,7 @@ export const {
       ...green,
       ...plum,
       ...slate,
+      ...mauve,
       ...pink,
       ...yellow,
       background: "$gray1",
@@ -293,6 +296,7 @@ export const darkTheme = createTheme('dark', {
     ...greenDark,
     ...plumDark,
     ...slateDark,
+    ...mauveDark,
     ...pinkDark,
     ...yellowDark
   },
@@ -300,5 +304,12 @@ export const darkTheme = createTheme('dark', {
 
 export const globalStyles = globalCss({
   // body: { backgroundColor: '$background', color: '$text', fontFamily: 'Helvetica' },
-  'html, body': { backgroundColor: '$gray1', color: '$gray12', fontFamily: '$body', fontSize: '$md' },
+  'html, body': {
+    backgroundColor: '$gray1',
+    color: '$gray12',
+    fontFamily: '$body',
+    fontSize: '$md',
+    '-webkit-font-smoothing': 'antialiased',
+    '-moz-osx-font-smoothing': 'grayscale'
+  },
 });

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",

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",