Remove blue box around focused items (#10)

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

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.

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