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;

package.json

@@ -9,15 +9,12 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@mattjennings/react-modal": "^1.0.3",
     "@monaco-editor/react": "^4.3.1",
     "@octokit/core": "^3.5.1",
     "@radix-ui/colors": "^0.1.7",
     "@radix-ui/react-dialog": "^0.1.1",
     "@radix-ui/react-dropdown-menu": "^0.1.1",
     "@stitches/react": "^1.2.5",
-    "@theme-ui/color": "^0.11.3",
-    "@theme-ui/match-media": "^0.11.3",
     "monaco-editor": "^0.29.1",
     "next": "^12.0.4",
     "next-auth": "^4.0.0-beta.5",

pages/_middleware.ts

@@ -5,7 +5,6 @@ import { getToken } from "next-auth/jwt"
 export default function middleware(req: NextRequest, ev: NextFetchEvent) {
 
   if (req.nextUrl.pathname === "/") {
-    console.log('kissa', ev);
     return Response.redirect("/develop");
 
   }

pages/deploy/index.tsx

@@ -1,11 +1,8 @@
-import { useSnapshot } from "valtio";
 import Container from "../../components/Container";
-import { state } from "../../state";
 
 const Deploy = () => {
-  const snap = useSnapshot(state);
   return (
-    <Container>This will be the deploy page {JSON.stringify(snap)}</Container>
+    <Container css={{ py: "$10" }}>This will be the deploy page</Container>
   );
 };
 

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,23 +19,9 @@ const Home: NextPage = () => {
       <main style={{ display: "flex", flex: 1 }}>
         <HooksEditor />
       </main>
-
       <Footer />
     </>
   );
 };
 
 export default Home;
-
-// export const getStaticPaths: GetStaticPaths = async () => {
-//   // ...
-//   return { paths: [], fallback: "blocking" };
-// };
-
-// export const getStaticProps: GetStaticProps = async (context) => {
-//   // ...
-//   return {
-//     props: {},
-//     revalidate: 60,
-//   };
-// };

pages/index.tsx

@@ -0,0 +1,5 @@
+const Home = () => {
+  return <p>homepage</p>;
+};
+
+export default Home;

pages/test/index.tsx

@@ -1,7 +1,7 @@
 import Container from "../../components/Container";
 
 const Test = () => {
-  return <Container>This will be the test page</Container>;
+  return <Container css={{ py: "$10" }}>This will be the test page</Container>;
 };
 
 export default Test;

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 {
@@ -40,6 +40,7 @@ let initialState = {
   }
 }
 
+// Check if there's a persited state in localStorage
 if (typeof window !== 'undefined') {
   try {
     localStorageState = localStorage.getItem('hooksIdeState');
@@ -97,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;
 }
 
@@ -134,9 +144,21 @@ 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 })
-  } catch {
+      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!' })
     state.compiling = false;
   }

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

yarn.lock

@@ -43,7 +43,7 @@
     core-js-pure "^3.16.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@7.15.4", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.0", "@babel/runtime@^7.15.4":
+"@babel/runtime@7.15.4", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
   integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
@@ -58,71 +58,6 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
-"@emotion/cache@^11.5.0":
-  version "11.5.0"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.5.0.tgz#a5eb78cbef8163939ee345e3ddf0af217b845e62"
-  integrity sha512-mAZ5QRpLriBtaj/k2qyrXwck6yeoz1V5lMt/jfj6igWU35yYlNKs2LziXVgvH81gnJZ+9QQNGelSsnuoAy6uIw==
-  dependencies:
-    "@emotion/memoize" "^0.7.4"
-    "@emotion/sheet" "^1.0.3"
-    "@emotion/utils" "^1.0.0"
-    "@emotion/weak-memoize" "^0.2.5"
-    stylis "^4.0.10"
-
-"@emotion/hash@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
-  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
-
-"@emotion/memoize@^0.7.4":
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
-  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
-
-"@emotion/react@^11.1.1":
-  version "11.5.0"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.5.0.tgz#19b5771bbfbda5e8517e948a2d9064810f0022bd"
-  integrity sha512-MYq/bzp3rYbee4EMBORCn4duPQfgpiEB5XzrZEBnUZAL80Qdfr7CEv/T80jwaTl/dnZmt9SnTa8NkTrwFNpLlw==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@emotion/cache" "^11.5.0"
-    "@emotion/serialize" "^1.0.2"
-    "@emotion/sheet" "^1.0.3"
-    "@emotion/utils" "^1.0.0"
-    "@emotion/weak-memoize" "^0.2.5"
-    hoist-non-react-statics "^3.3.1"
-
-"@emotion/serialize@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
-  integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
-  dependencies:
-    "@emotion/hash" "^0.8.0"
-    "@emotion/memoize" "^0.7.4"
-    "@emotion/unitless" "^0.7.5"
-    "@emotion/utils" "^1.0.0"
-    csstype "^3.0.2"
-
-"@emotion/sheet@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.3.tgz#00c326cd7985c5ccb8fe2c1b592886579dcfab8f"
-  integrity sha512-YoX5GyQ4db7LpbmXHMuc8kebtBGP6nZfRC5Z13OKJMixBEwdZrJ914D6yJv/P+ZH/YY3F5s89NYX2hlZAf3SRQ==
-
-"@emotion/unitless@^0.7.5":
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
-  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
-
-"@emotion/utils@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
-  integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
-
-"@emotion/weak-memoize@^0.2.5":
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
-  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
-
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
@@ -172,14 +107,6 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz#87de7af9c231826fdd68ac7258f77c429e0e5fcf"
   integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
 
-"@mattjennings/react-modal@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@mattjennings/react-modal/-/react-modal-1.0.3.tgz#f796c5238c6d799290edee2884f377aa2bc2902e"
-  integrity sha512-k3Kyhrt35fshWXa7jqAWCivf/aM5T5oM1kxc9zCsb3W87arRtt0s1pY43hQeV149OV3Wh9Tn+2xlgAq+Tsj0HQ==
-  dependencies:
-    "@theme-ui/match-media" "^0.3.1"
-    react-scrolllock "^5.0.1"
-
 "@monaco-editor/loader@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.2.0.tgz#373fad69973384624e3d9b60eefd786461a76acd"
@@ -830,32 +757,6 @@
   resolved "https://registry.yarnpkg.com/@stitches/react/-/react-1.2.5.tgz#2353343c220f0c59ba388a26fdd9ff7962cb6031"
   integrity sha512-95Wwjp5cvoYQjg616OBiHZM1PnIF51pnFQIgSPxPzS/xXBrer9sNO1tfpVfLYfOifvuotse2IFNbypJ92BXzvg==
 
-"@theme-ui/color@^0.11.3":
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/@theme-ui/color/-/color-0.11.3.tgz#5f85aae99178e51e4d63b1d3cb3e31cd209e7c49"
-  integrity sha512-Z8c0RXVsphzhGWZDgPowwFTOLwpOhHQ4Oz+EbZFphRmXe+t6LXBhJ8vzRFEC4H5i+tV3xmunVVX7hwKlfdjO7Q==
-  dependencies:
-    "@theme-ui/css" "0.11.3"
-    polished "^4.0.5"
-
-"@theme-ui/css@0.11.3":
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/@theme-ui/css/-/css-0.11.3.tgz#9962db78b9d60a96b2f6497f858e6baa7aa0f5c5"
-  integrity sha512-b2vRZEc6ZBMYCVFqvSSrWdVbKgSJHOOTMow1czApJjrmZBygkG9DN0/1hgO9spDkmfp/tmRmBzrTlgFlE6pybA==
-  dependencies:
-    "@emotion/react" "^11.1.1"
-    csstype "^3.0.5"
-
-"@theme-ui/match-media@^0.11.3":
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/@theme-ui/match-media/-/match-media-0.11.3.tgz#86fa82b47eae00e0f9dd5ae995e1fe5c28b4e48f"
-  integrity sha512-UZXJ5DI/Q+3h9JtK0FFxEesfLUEP6JNXukng3SqprYcKcDBQRqVa1+Qc/pPkIklEK9li3/c0MBGGNHqKFMRnig==
-
-"@theme-ui/match-media@^0.3.1":
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/@theme-ui/match-media/-/match-media-0.3.5.tgz#e676b9f74e1f58608cfdb48ae8be69c4b7517109"
-  integrity sha512-twhqy3H++jP7TqCZSRvSSc1/hxqjVokX+G/gf5S6lYQj4+zaksTO/AyzBzb/6iJLLkN2WeL9P2yjCeSTMxdJGw==
-
 "@types/aws-lambda@^8.10.83":
   version "8.10.84"
   resolved "https://registry.yarnpkg.com/@types/aws-lambda/-/aws-lambda-8.10.84.tgz#b1f391ceeb6908b28d8416d93f27afe8d1348d4e"
@@ -1505,7 +1406,7 @@ cssnano-simple@3.0.0:
   dependencies:
     cssnano-preset-simple "^3.0.0"
 
-csstype@^3.0.2, csstype@^3.0.4, csstype@^3.0.5:
+csstype@^3.0.2, csstype@^3.0.4:
   version "3.0.9"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b"
   integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==
@@ -1956,11 +1857,6 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
     md5.js "^1.3.4"
     safe-buffer "^5.1.1"
 
-exenv@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
-  integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
-
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -2239,13 +2135,6 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.1:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
-  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
-  dependencies:
-    react-is "^16.7.0"
-
 http-errors@1.7.3:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
@@ -3184,13 +3073,6 @@ platform@1.3.6:
   resolved "https://registry.yarnpkg.com/platform/-/platform-1.3.6.tgz#48b4ce983164b209c2d45a107adb31f473a6e7a7"
   integrity sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==
 
-polished@^4.0.5:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/polished/-/polished-4.1.3.tgz#7a3abf2972364e7d97770b827eec9a9e64002cfc"
-  integrity sha512-ocPAcVBUOryJEKe0z2KLd1l9EBa1r5mSwlKpExmrLzsnIzJo4axsoU9O2BjOTkDGDT4mZ0WFE5XKTlR3nLnZOA==
-  dependencies:
-    "@babel/runtime" "^7.14.0"
-
 postcss@8.2.15:
   version "8.2.15"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.15.tgz#9e66ccf07292817d226fc315cbbf9bc148fbca65"
@@ -3326,7 +3208,7 @@ react-is@17.0.2:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -3355,13 +3237,6 @@ react-remove-scroll@^2.4.0:
     use-callback-ref "^1.2.3"
     use-sidecar "^1.0.1"
 
-react-scrolllock@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/react-scrolllock/-/react-scrolllock-5.0.1.tgz#da1cfb7b6d55c86ae41dbad5274b778c307752b7"
-  integrity sha512-poeEsjnZAlpA6fJlaNo4rZtcip2j6l5mUGU/SJe1FFlicEudS943++u7ZSdA7lk10hoyYK3grOD02/qqt5Lxhw==
-  dependencies:
-    exenv "^1.2.2"
-
 react-style-singleton@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66"
@@ -3725,11 +3600,6 @@ stylis@3.5.4:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
   integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
 
-stylis@^4.0.10:
-  version "4.0.10"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
-  integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
-
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"