Add VSCode Extensions, style cleanup

leerob · Aug 13, 2020 · 20b5eab · 20b5eab · vercel · Aug 13, 2020
1 parent 45e0ee1
commit 20b5eab
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 12 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,21 @@
+{
+  "recommendations": [
+    "bierner.markdown-preview-github-styles",
+    "Compulim.vscode-clock",
+    "dbaeumer.vscode-eslint",
+    "eamodio.gitlens",
+    "earshinov.sort-lines-by-selection",
+    "esbenp.prettier-vscode",
+    "formulahendry.auto-rename-tag",
+    "legfrey.javascript-test-runner",
+    "MarkThomasMiller.sorcerer",
+    "Nautigsam.go-to-test",
+    "NuclleaR.vscode-extension-auto-import",
+    "Orta.vscode-jest",
+    "pnp.polacode",
+    "shyykoserhiy.vscode-spotify",
+    "silvenon.mdx",
+    "vscode-icons-team.vscode-icons",
+    "Zignd.html-css-class-completion"
+  ]
+}
diff --git a/components/DashboardShell.js b/components/DashboardShell.js
@@ -41,14 +41,11 @@ const DashboardShell = ({ children }) => {
             </NextLink>
           </Flex>
           <Flex justifyContent="center" alignItems="center">
-            {user && (
-              <NextLink href="/account" passHref>
-                <Button as="a" variant="ghost" mr={2}>
-                  Account
-                </Button>
-              </NextLink>
-            )}
-            <Avatar size="sm" src={user?.photoUrl} />
+            <NextLink href="/account" passHref>
+              <Link>
+                <Avatar size="sm" src={user?.photoUrl} />
+              </Link>
+            </NextLink>
           </Flex>
         </Flex>
       </Flex>

diff --git a/components/FeedbackRow.js b/components/FeedbackRow.js
@@ -21,7 +21,15 @@ const FeedbackRow = ({ id, author, text, route, status }) => {
       <Td fontWeight="medium">{author}</Td>
       <Td>{text}</Td>
       <Td>
-        <Code>{route || '/'}</Code>
+        <Code
+          maxW="150px"
+          textOverflow="ellipsis"
+          whiteSpace="nowrap"
+          overflow="hidden"
+          display="inherit"
+        >
+          {route || '/'}
+        </Code>
       </Td>
       <Td>
         <Switch color="green" onChange={toggleFeedback} isChecked={isChecked} />

diff --git a/components/FeedbackTable.js b/components/FeedbackTable.js
@@ -10,7 +10,7 @@ const FeedbackTable = (props) => {
       <Table w="full">
         <thead>
           <Tr>
-            <Th>Name</Th>
+            <Th minW="150px">Name</Th>
             <Th>Feedback</Th>
             <Th>Route</Th>
             <Th>Visible</Th>

diff --git a/pages/_document.js b/pages/_document.js
@@ -3,7 +3,7 @@ import Document, { Html, Head, Main, NextScript } from 'next/document';
 class MyDocument extends Document {
   render() {
     return (
-      <Html>
+      <Html lang="en">
         <Head>
           <meta content="IE=edge" httpEquiv="X-UA-Compatible" />
           <meta content="#ffffff" name="theme-color" />

diff --git a/pages/docs.mdx b/pages/docs.mdx
@@ -30,7 +30,7 @@ When embedding your feedback iframe, you might want it to automatically resize t
 height to its contents. This can be achieved using [iframe-resizer](https://github.com/davidjbradshaw/iframe-resizer).
 
 For example, if you are using React, you can add [iframe-resizer-react](https://github.com/davidjbradshaw/iframe-resizer-react) and do
-something like this.
+something like this. This library is [5.8kB](https://bundlephobia.com/result?p=iframe-resizer-react@1.0.4) minified + gzipped with no dependencies.
 
 ```jsx
 <IframeResizer