big cleanup

components/code-panel/code-docs.tsx

@@ -1,6 +1,10 @@
-import styled from "styles"
+import styled from 'styles'
 
-export default function CodeDocs({ isHidden }: { isHidden: boolean }) {
+export default function CodeDocs({
+  isHidden,
+}: {
+  isHidden: boolean
+}): JSX.Element {
   return (
     <StyledDocs isHidden={isHidden}>
       <h2>Docs</h2>
@@ -8,94 +12,94 @@ export default function CodeDocs({ isHidden }: { isHidden: boolean }) {
   )
 }
 
-const StyledDocs = styled("div", {
-  position: "absolute",
-  backgroundColor: "$panel",
+const StyledDocs = styled('div', {
+  position: 'absolute',
+  backgroundColor: '$panel',
   top: 0,
   left: 0,
-  width: "100%",
-  height: "100%",
+  width: '100%',
+  height: '100%',
   padding: 16,
-  font: "$docs",
-  overflowY: "scroll",
-  userSelect: "none",
+  font: '$docs',
+  overflowY: 'scroll',
+  userSelect: 'none',
   paddingBottom: 64,
 
   variants: {
     isHidden: {
       true: {
-        visibility: "hidden",
+        visibility: 'hidden',
       },
       false: {
-        visibility: "visible",
+        visibility: 'visible',
       },
     },
   },
 
-  "& ol": {},
+  '& ol': {},
 
-  "& li": {
+  '& li': {
     marginTop: 8,
     marginBottom: 4,
   },
 
-  "& code": {
-    font: "$mono",
+  '& code': {
+    font: '$mono',
   },
 
-  "& hr": {
-    margin: "32px 0",
-    borderColor: "$muted",
+  '& hr': {
+    margin: '32px 0',
+    borderColor: '$muted',
   },
 
-  "& h2": {
-    margin: "24px 0px",
+  '& h2': {
+    margin: '24px 0px',
   },
 
-  "& h3": {
+  '& h3': {
     fontSize: 20,
-    margin: "48px 0px 32px 0px",
+    margin: '48px 0px 32px 0px',
   },
 
-  "& h3 > code": {
+  '& h3 > code': {
     fontWeight: 600,
-    font: "$monoheading",
+    font: '$monoheading',
   },
 
-  "& h4": {
-    margin: "32px 0px 0px 0px",
+  '& h4': {
+    margin: '32px 0px 0px 0px',
   },
 
-  "& h4 > code": {
-    font: "$monoheading",
+  '& h4 > code': {
+    font: '$monoheading',
     fontSize: 16,
-    userSelect: "all",
+    userSelect: 'all',
   },
 
-  "& h4 > code > i": {
+  '& h4 > code > i': {
     fontSize: 14,
-    color: "$muted",
+    color: '$muted',
   },
 
-  "& pre": {
-    backgroundColor: "$bounds_bg",
+  '& pre': {
+    backgroundColor: '$bounds_bg',
     padding: 16,
     borderRadius: 4,
-    userSelect: "all",
-    margin: "24px 0",
+    userSelect: 'all',
+    margin: '24px 0',
   },
 
-  "& p > code, blockquote > code": {
-    backgroundColor: "$bounds_bg",
-    padding: "2px 4px",
+  '& p > code, blockquote > code': {
+    backgroundColor: '$bounds_bg',
+    padding: '2px 4px',
     borderRadius: 2,
-    color: "$code",
+    color: '$code',
   },
 
-  "& blockquote": {
-    backgroundColor: "rgba(144, 144, 144, .05)",
+  '& blockquote': {
+    backgroundColor: 'rgba(144, 144, 144, .05)',
     padding: 12,
-    margin: "20px 0",
+    margin: '20px 0',
     borderRadius: 8,
   },
 })