From b49cc9fbb68f96d329fea4aae957ceef226b98eb Mon Sep 17 00:00:00 2001
From: Nikhil Rao <nikhil@pynecone.io>
Date: Mon, 21 Nov 2022 12:17:08 -0800
Subject: [PATCH] Remove blue box around focused items (#10)

---
 pynecone/.templates/web/pages/_app.js | 9 +++++++++
 pynecone/base.py                      | 1 +
 pynecone/compiler/compiler.py         | 1 +
 3 files changed, 11 insertions(+)

diff --git a/pynecone/.templates/web/pages/_app.js b/pynecone/.templates/web/pages/_app.js
index d0b7c53ef..d7323cfeb 100644
--- a/pynecone/.templates/web/pages/_app.js
+++ b/pynecone/.templates/web/pages/_app.js
@@ -1,9 +1,18 @@
 import { ChakraProvider, extendTheme } from "@chakra-ui/react";
+import { Global, css } from "@emotion/react";
 import theme from "/utils/theme";
 
+const GlobalStyles = css`
+  /* Hide the blue border around Chakra components. */
+  .js-focus-visible :focus:not([data-focus-visible-added]) {
+     outline: none;
+     box-shadow: none;
+`;
+
 function MyApp({ Component, pageProps }) {
   return (
     <ChakraProvider theme={extendTheme(theme)}>
+      <Global styles={GlobalStyles} />
       <Component {...pageProps} />
     </ChakraProvider>
   );
diff --git a/pynecone/base.py b/pynecone/base.py
index d91c17807..66818342d 100644
--- a/pynecone/base.py
+++ b/pynecone/base.py
@@ -23,6 +23,7 @@ class Base(pydantic.BaseModel):
         """Pydantic config."""
 
         arbitrary_types_allowed = True
+        use_enum_values = True
 
     def json(self) -> str:
         """Convert the object to a json string.
diff --git a/pynecone/compiler/compiler.py b/pynecone/compiler/compiler.py
index 36ee36b1e..74021edc4 100644
--- a/pynecone/compiler/compiler.py
+++ b/pynecone/compiler/compiler.py
@@ -13,6 +13,7 @@ DEFAULT_IMPORTS: ImportDict = {
     "react": {"useEffect", "useState"},
     "next/router": {"useRouter"},
     f"/{constants.STATE_PATH}": {"updateState", "E"},
+    "": {"focus-visible/dist/focus-visible"},
 }