From a40d7703a7c1573024aeade5daf902f3ad96e9ec Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Fri, 15 Jul 2022 22:43:59 +0200
Subject: [PATCH 01/12] Added New Responsive table and data

---
 .../components/elements/Table-Responsive.tsx  | 78 +++++++++++++++++++
 packages/web/package.json                     |  1 +
 packages/web/pages/settings/api.tsx           | 27 +++++--
 3 files changed, 101 insertions(+), 5 deletions(-)
 create mode 100644 packages/web/components/elements/Table-Responsive.tsx

diff --git a/packages/web/components/elements/Table-Responsive.tsx b/packages/web/components/elements/Table-Responsive.tsx
new file mode 100644
index 000000000..f029e54e6
--- /dev/null
+++ b/packages/web/components/elements/Table-Responsive.tsx
@@ -0,0 +1,78 @@
+import React from 'react'
+import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
+import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
+import { styled } from '../tokens/stitches.config'
+import { Button } from './Button'
+import { Trash } from 'phosphor-react'
+import { isDarkTheme } from '../../lib/themeUpdater'
+
+interface TableProps {
+  heading: string
+  infoLink?: string
+  onAdd?: () => void
+  headers: string[]
+  rows: Map<string, Record<string, any>>
+  onDelete?: (id: string) => void
+  onEdit?: (obj: any) => void
+}
+
+const IconButton = styled(Button, {
+  variants: {
+    style: {
+      ctaWhite: {
+        color: 'red',
+        padding: '10px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        border: '1px solid $grayBorder',
+        boxSizing: 'border-box',
+        borderRadius: 6,
+        width: 40,
+        height: 40,
+      },
+    },
+  },
+})
+
+export default function TableR(props: TableProps): JSX.Element {
+  const { headers } = props
+  const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
+  console.log(props.rows)
+  return (
+    <Table>
+      <Thead>
+        <Tr>
+          {headers.map((header: string, index: number) => (
+            <Th key={index}>
+              {header}
+            </Th>
+          ))}
+        </Tr>
+      </Thead>
+      <Tbody>
+        {Array.from(props.rows.keys()).map((key, index) => (
+          <Tr key={index}>
+            {Object.values(props.rows.get(key) || {}).map((cell, index) => (
+              <Td key={index}>{cell}</Td>
+            ))}
+
+            {props.onDelete && (
+              <Td>
+                <IconButton
+                  style="ctaWhite"
+                  css={{ mr: '$1', background: '$labelButtonsBg' }}
+                  onClick={() => {
+                    props.onDelete && props.onDelete(key)
+                  }}
+                >
+                  <Trash size={16} color={iconColor} />
+                </IconButton>
+              </Td>
+            )}
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  )
+}
diff --git a/packages/web/package.json b/packages/web/package.json
index 8d7aad7f2..cf0f6317f 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -43,6 +43,7 @@
     "react-colorful": "^5.5.1",
     "react-dom": "^17.0.2",
     "react-hot-toast": "^2.1.1",
+    "react-super-responsive-table": "^5.2.1",
     "react-topbar-progress-indicator": "^4.1.1",
     "react-twitter-widgets": "^1.10.0",
     "swr": "^1.0.1",
diff --git a/packages/web/pages/settings/api.tsx b/packages/web/pages/settings/api.tsx
index 1060a24a8..83a408390 100644
--- a/packages/web/pages/settings/api.tsx
+++ b/packages/web/pages/settings/api.tsx
@@ -10,6 +10,8 @@ import { revokeApiKeyMutation } from '../../lib/networking/mutations/revokeApiKe
 
 import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
 import { Table } from '../../components/elements/Table'
+import TableR from '../../components/elements/Table-Responsive'
+
 import { FormInputProps } from '../../components/elements/FormElements'
 import { FormModal } from '../../components/patterns/FormModal'
 import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
@@ -57,9 +59,10 @@ export default function Api(): JSX.Element {
         usedAt: apiKey.usedAt
           ? new Date(apiKey.usedAt).toISOString()
           : 'Never used',
-        expiresAt: new Date(apiKey.expiresAt).getTime() != neverExpiresDate.getTime()
-          ? new Date(apiKey.expiresAt).toDateString()
-          : 'Never',
+        expiresAt:
+          new Date(apiKey.expiresAt).getTime() != neverExpiresDate.getTime()
+            ? new Date(apiKey.expiresAt).toDateString()
+            : 'Never',
       })
     )
     return rows
@@ -117,7 +120,7 @@ export default function Api(): JSX.Element {
               additionalDays = 365
               break
             case 'Never':
-              break;
+              break
           }
           const newExpires = additionalDays ? new Date() : neverExpiresDate
           if (additionalDays) {
@@ -126,7 +129,13 @@ export default function Api(): JSX.Element {
           setExpiresAt(newExpires)
         },
         type: 'select',
-        options: ['in 7 days', 'in 30 days', 'in 90 days', 'in 1 year', 'Never'],
+        options: [
+          'in 7 days',
+          'in 30 days',
+          'in 90 days',
+          'in 1 year',
+          'Never',
+        ],
         value: defaultExpiresAt,
       },
     ])
@@ -187,6 +196,14 @@ export default function Api(): JSX.Element {
           setAddModalOpen(true)
         }}
       />
+      
+      {/* TESTING NEW TABLE */}
+      <TableR
+        headers={headers}
+        heading={'API Keys1'}
+        rows={rows}
+        onDelete={setOnDeleteId}
+      />
     </PrimaryLayout>
   )
 }

From 5b6b9afd47ecb4cff7bc779e941444b4d08da821 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Tue, 19 Jul 2022 23:29:52 +0200
Subject: [PATCH 02/12] Refactor + commented out code

---
 packages/web/components/elements/Button.tsx   |  19 ++
 .../components/elements/Table-Responsive.tsx  | 187 +++++++++-------
 packages/web/components/elements/Table.tsx    | 207 +++++++++++++-----
 packages/web/pages/settings/api.tsx           |  21 +-
 4 files changed, 294 insertions(+), 140 deletions(-)

diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx
index 2d0fe45d3..1b4cce9da 100644
--- a/packages/web/components/elements/Button.tsx
+++ b/packages/web/components/elements/Button.tsx
@@ -217,3 +217,22 @@ export const Button = styled('button', {
     style: 'ctaWhite',
   },
 })
+
+export const IconButton = styled(Button, {
+  variants: {
+    style: {
+      ctaWhite: {
+        color: 'red',
+        padding: '10px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        border: '1px solid $grayBorder',
+        boxSizing: 'border-box',
+        borderRadius: 6,
+        width: 40,
+        height: 40,
+      },
+    },
+  },
+})
\ No newline at end of file
diff --git a/packages/web/components/elements/Table-Responsive.tsx b/packages/web/components/elements/Table-Responsive.tsx
index f029e54e6..72a66d626 100644
--- a/packages/web/components/elements/Table-Responsive.tsx
+++ b/packages/web/components/elements/Table-Responsive.tsx
@@ -1,78 +1,115 @@
-import React from 'react'
-import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
-import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
-import { styled } from '../tokens/stitches.config'
-import { Button } from './Button'
-import { Trash } from 'phosphor-react'
-import { isDarkTheme } from '../../lib/themeUpdater'
+// import React from 'react'
+// import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
+// import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
+// import { IconButton } from './Button'
+// import { PencilSimple, Trash } from 'phosphor-react'
+// import { isDarkTheme } from '../../lib/themeUpdater'
+// import { Box, SpanBox } from './LayoutPrimitives'
+// import { StyledText } from './StyledText'
 
-interface TableProps {
-  heading: string
-  infoLink?: string
-  onAdd?: () => void
-  headers: string[]
-  rows: Map<string, Record<string, any>>
-  onDelete?: (id: string) => void
-  onEdit?: (obj: any) => void
-}
+// interface TableProps {
+//   heading: string
+//   infoLink?: string
+//   onAdd?: () => void
+//   headers: string[]
+//   rows: Map<string, Record<string, any>>
+//   onDelete?: (id: string) => void
+//   onEdit?: (obj: any) => void
+// }
 
-const IconButton = styled(Button, {
-  variants: {
-    style: {
-      ctaWhite: {
-        color: 'red',
-        padding: '10px',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        border: '1px solid $grayBorder',
-        boxSizing: 'border-box',
-        borderRadius: 6,
-        width: 40,
-        height: 40,
-      },
-    },
-  },
-})
+// export default function TableR(props: TableProps): JSX.Element {
+//   const { headers } = props
+//   const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
+//   return (
+//     <>
+//       <Box css={{ml:'25px'}}>
+//         <StyledText style="fixedHeadline">{props.heading}</StyledText>
+//       </Box>
+//       <Box
+//         css={{
+//           backgroundColor: '$grayBg',
+//           margin: ' 0 auto',
+//           border: '0.5px solid $grayBgActive',
+//           width: '95%',
+//           mt: '$3',
+//           '&:hover': {
+//             border: '0.5px solid #FFD234',
+//           },
+//         }}
+//       >
+//         <Table>
+//           <Thead>
+//             <Tr>
+//               {headers.map((header: string, index: number) => (
+//                 <Th key={index}>
+//                   <SpanBox
+//                     css={{
+//                       textTransform: 'uppercase',
+//                       display: 'flex',
+//                       fontWeight: 600,
+//                       padding: '20px 10px',
+//                       color: '$grayTextContrast',
+//                       fontSize: '$2',
+//                     }}
+//                   >
+//                     {header}
+//                   </SpanBox>
+//                 </Th>
+//               ))}
+//             </Tr>
+//           </Thead>
+//           <Tbody>
+//             {Array.from(props.rows.keys()).map((key, index) => (
+//               <Tr key={index}>
+//                 {Object.values(props.rows.get(key) || {}).map((cell, index) => (
+//                   <Td key={index}>
+//                     <SpanBox
+//                       key={index}
+//                       css={{
+//                         display: 'flex',
+//                         justifyContent: 'left',
+//                         padding: '15px 10px',
+//                         color: '$grayTextContrast',
+//                         fontSize: '$1',
+//                       }}
+//                     >
+//                       {cell}
+//                     </SpanBox>
+//                   </Td>
+//                 ))}
 
-export default function TableR(props: TableProps): JSX.Element {
-  const { headers } = props
-  const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
-  console.log(props.rows)
-  return (
-    <Table>
-      <Thead>
-        <Tr>
-          {headers.map((header: string, index: number) => (
-            <Th key={index}>
-              {header}
-            </Th>
-          ))}
-        </Tr>
-      </Thead>
-      <Tbody>
-        {Array.from(props.rows.keys()).map((key, index) => (
-          <Tr key={index}>
-            {Object.values(props.rows.get(key) || {}).map((cell, index) => (
-              <Td key={index}>{cell}</Td>
-            ))}
-
-            {props.onDelete && (
-              <Td>
-                <IconButton
-                  style="ctaWhite"
-                  css={{ mr: '$1', background: '$labelButtonsBg' }}
-                  onClick={() => {
-                    props.onDelete && props.onDelete(key)
-                  }}
-                >
-                  <Trash size={16} color={iconColor} />
-                </IconButton>
-              </Td>
-            )}
-          </Tr>
-        ))}
-      </Tbody>
-    </Table>
-  )
-}
+//                 {props.onDelete && (
+//                   <Td>
+//                     <IconButton
+//                       style="ctaWhite"
+//                       css={{ mr: '$1', background: '$labelButtonsBg' }}
+//                       onClick={() => {
+//                         props.onDelete && props.onDelete(key)
+//                       }}
+//                     >
+//                       <Trash size={16} color={iconColor} />
+//                     </IconButton>
+//                   </Td>
+//                 )}
+//                 {props.onEdit && (
+//                   <Td>
+//                     <IconButton
+//                       style="ctaWhite"
+//                       css={{ mr: '$1', background: '$labelButtonsBg' }}
+//                       onClick={() => {
+//                         props.onEdit &&
+//                           props.onEdit({ ...props.rows.get(key), id: key })
+//                       }}
+//                     >
+//                       <PencilSimple size={24} color={iconColor} />
+//                     </IconButton>
+//                   </Td>
+//                 )}
+//               </Tr>
+//             ))}
+//           </Tbody>
+//         </Table>
+//       </Box>
+//     </>
+//   )
+// }
diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx
index d854dedb3..299fbaf24 100644
--- a/packages/web/components/elements/Table.tsx
+++ b/packages/web/components/elements/Table.tsx
@@ -1,10 +1,13 @@
-import { Box, HStack, SpanBox, VStack } from './LayoutPrimitives'
+import { Box, SpanBox, VStack } from './LayoutPrimitives'
 import { styled } from '../tokens/stitches.config'
 import { StyledText } from './StyledText'
 import { InfoLink } from './InfoLink'
 import { Button } from './Button'
 import { PencilSimple, Plus, Trash } from 'phosphor-react'
 import { isDarkTheme } from '../../lib/themeUpdater'
+import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
+import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
+import { IconButton } from './Button'
 
 interface TableProps {
   heading: string
@@ -23,64 +26,64 @@ const HeaderWrapper = styled(Box, {
   },
 })
 
-const TableCard = styled(Box, {
-  backgroundColor: '$grayBg',
-  display: 'flex',
-  alignItems: 'center',
-  padding: '10px 12px',
-  border: '0.5px solid $grayBgActive',
-  width: '100%',
+// const TableCard = styled(Box, {
+//   backgroundColor: '$grayBg',
+//   display: 'flex',
+//   alignItems: 'center',
+//   padding: '10px 12px',
+//   border: '0.5px solid $grayBgActive',
+//   width: '100%',
 
-  '&:hover': {
-    border: '0.5px solid #FFD234',
-  },
-  '@md': {
-    paddingLeft: '0',
-  },
-})
+//   '&:hover': {
+//     border: '0.5px solid #FFD234',
+//   },
+//   '@md': {
+//     paddingLeft: '0',
+//   },
+// })
 
-const TableHeading = styled(Box, {
-  backgroundColor: '$grayBgActive',
-  border: '1px solid rgba(0, 0, 0, 0.06)',
-  display: 'none',
-  alignItems: 'center',
-  padding: '14px 0 14px 40px',
-  borderRadius: '5px 5px 0px 0px',
-  width: '100%',
-  '@md': {
-    display: 'flex',
-  },
-})
+// const TableHeading = styled(Box, {
+//   backgroundColor: '$grayBgActive',
+//   border: '1px solid rgba(0, 0, 0, 0.06)',
+//   display: 'none',
+//   alignItems: 'center',
+//   padding: '14px 0 14px 40px',
+//   borderRadius: '5px 5px 0px 0px',
+//   width: '100%',
+//   '@md': {
+//     display: 'flex',
+//   },
+// })
 
-const Input = styled('input', {
-  backgroundColor: 'transparent',
-  color: '$grayTextContrast',
-  marginTop: '5px',
-  '&[disabled]': {
-    border: 'none',
-  },
-})
+// const Input = styled('input', {
+//   backgroundColor: 'transparent',
+//   color: '$grayTextContrast',
+//   marginTop: '5px',
+//   '&[disabled]': {
+//     border: 'none',
+//   },
+// })
 
-const IconButton = styled(Button, {
-  variants: {
-    style: {
-      ctaWhite: {
-        color: 'red',
-        padding: '10px',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        border: '1px solid $grayBorder',
-        boxSizing: 'border-box',
-        borderRadius: 6,
-        width: 40,
-        height: 40,
-      },
-    },
-  },
-})
+// const IconButton = styled(Button, {
+//   variants: {
+//     style: {
+//       ctaWhite: {
+//         color: 'red',
+//         padding: '10px',
+//         display: 'flex',
+//         justifyContent: 'center',
+//         alignItems: 'center',
+//         border: '1px solid $grayBorder',
+//         boxSizing: 'border-box',
+//         borderRadius: 6,
+//         width: 40,
+//         height: 40,
+//       },
+//     },
+//   },
+// })
 
-export function Table(props: TableProps): JSX.Element {
+export function TableR(props: TableProps): JSX.Element {
   const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
 
   return (
@@ -140,7 +143,7 @@ export function Table(props: TableProps): JSX.Element {
           )}
         </Box>
       </HeaderWrapper>
-      <TableHeading>
+      {/* <TableHeading>
         {props.headers.map((header, index) => (
           <Box
             key={index}
@@ -170,8 +173,8 @@ export function Table(props: TableProps): JSX.Element {
             width: '120px',
           }}
         ></Box>
-      </TableHeading>
-      {Array.from(props.rows.keys()).map((key, index) => (
+      </TableHeading> */}
+      {/* {Array.from(props.rows.keys()).map((key, index) => (
         <TableCard
           key={index}
           css={{
@@ -241,7 +244,95 @@ export function Table(props: TableProps): JSX.Element {
             )}
           </Box>
         </TableCard>
-      ))}
+      ))} */}
+      {/* <Box css={{ ml: '25px' }}>
+        <StyledText style="fixedHeadline">{props.heading}</StyledText>
+      </Box> */}
+      <Box
+        css={{
+          backgroundColor: '$grayBg',
+          margin: ' 0 auto',
+          border: '0.5px solid $grayBgActive',
+          width: '100%',
+          mt: '$3',
+          '&:hover': {
+            border: '0.5px solid #FFD234',
+          },
+        }}
+      >
+        <Table>
+          <Thead>
+            <Tr>
+              {props.headers.map((header: string, index: number) => (
+                <Th key={index}>
+                  <SpanBox
+                    css={{
+                      textTransform: 'uppercase',
+                      display: 'flex',
+                      fontWeight: 600,
+                      padding: '20px 10px',
+                      color: '$grayTextContrast',
+                      fontSize: '$2',
+                    }}
+                  >
+                    {header}
+                  </SpanBox>
+                </Th>
+              ))}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {Array.from(props.rows.keys()).map((key, index) => (
+              <Tr key={index}>
+                {Object.values(props.rows.get(key) || {}).map((cell, index) => (
+                  <Td key={index}>
+                    <SpanBox
+                      key={index}
+                      css={{
+                        display: 'flex',
+                        justifyContent: 'left',
+                        padding: '20px 10px',
+                        color: '$grayTextContrast',
+                        fontSize: '$1',
+                      }}
+                    >
+                      {cell}
+                    </SpanBox>
+                  </Td>
+                ))}
+
+                {props.onDelete && (
+                  <Td>
+                    <IconButton
+                      style="ctaWhite"
+                      css={{ mr: '$1', background: '$labelButtonsBg' }}
+                      onClick={() => {
+                        props.onDelete && props.onDelete(key)
+                      }}
+                    >
+                      <Trash size={16} color={iconColor} />
+                    </IconButton>
+                  </Td>
+                )}
+                {props.onEdit && (
+                  <Td>
+                    <IconButton
+                      style="ctaWhite"
+                      css={{ mr: '$1', background: '$labelButtonsBg' }}
+                      onClick={() => {
+                        props.onEdit &&
+                          props.onEdit({ ...props.rows.get(key), id: key })
+                      }}
+                    >
+                      <PencilSimple size={24} color={iconColor} />
+                    </IconButton>
+                  </Td>
+                )}
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </Box>
     </VStack>
   )
 }
diff --git a/packages/web/pages/settings/api.tsx b/packages/web/pages/settings/api.tsx
index 83a408390..1a9787e4d 100644
--- a/packages/web/pages/settings/api.tsx
+++ b/packages/web/pages/settings/api.tsx
@@ -9,8 +9,7 @@ import { generateApiKeyMutation } from '../../lib/networking/mutations/generateA
 import { revokeApiKeyMutation } from '../../lib/networking/mutations/revokeApiKeyMutation'
 
 import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
-import { Table } from '../../components/elements/Table'
-import TableR from '../../components/elements/Table-Responsive'
+import { TableR } from '../../components/elements/Table'
 
 import { FormInputProps } from '../../components/elements/FormElements'
 import { FormModal } from '../../components/patterns/FormModal'
@@ -184,7 +183,7 @@ export default function Api(): JSX.Element {
         />
       )}
 
-      <Table
+      <TableR
         heading={'API Keys'}
         headers={headers}
         rows={rows}
@@ -196,14 +195,22 @@ export default function Api(): JSX.Element {
           setAddModalOpen(true)
         }}
       />
-      
+
       {/* TESTING NEW TABLE */}
-      <TableR
+
+      
+      {/* <TableR
         headers={headers}
-        heading={'API Keys1'}
+        heading={'API Keys'}
         rows={rows}
         onDelete={setOnDeleteId}
-      />
+        onAdd={() => {
+          onAdd()
+          setName('')
+          setExpiresAt(new Date(defaultExpiresAt))
+          setAddModalOpen(true)
+        }} */}
+   
     </PrimaryLayout>
   )
 }

From ba945b36a428b9d943d03ddb7bb9e488a6b05454 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Tue, 19 Jul 2022 23:37:32 +0200
Subject: [PATCH 03/12] Deleting testing file for table and cleaning up
 commented code

---
 .../components/elements/Table-Responsive.tsx  | 115 ------------
 packages/web/components/elements/Table.tsx    | 177 +-----------------
 2 files changed, 7 insertions(+), 285 deletions(-)
 delete mode 100644 packages/web/components/elements/Table-Responsive.tsx

diff --git a/packages/web/components/elements/Table-Responsive.tsx b/packages/web/components/elements/Table-Responsive.tsx
deleted file mode 100644
index 72a66d626..000000000
--- a/packages/web/components/elements/Table-Responsive.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-// import React from 'react'
-// import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
-// import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
-// import { IconButton } from './Button'
-// import { PencilSimple, Trash } from 'phosphor-react'
-// import { isDarkTheme } from '../../lib/themeUpdater'
-// import { Box, SpanBox } from './LayoutPrimitives'
-// import { StyledText } from './StyledText'
-
-// interface TableProps {
-//   heading: string
-//   infoLink?: string
-//   onAdd?: () => void
-//   headers: string[]
-//   rows: Map<string, Record<string, any>>
-//   onDelete?: (id: string) => void
-//   onEdit?: (obj: any) => void
-// }
-
-// export default function TableR(props: TableProps): JSX.Element {
-//   const { headers } = props
-//   const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
-//   return (
-//     <>
-//       <Box css={{ml:'25px'}}>
-//         <StyledText style="fixedHeadline">{props.heading}</StyledText>
-//       </Box>
-//       <Box
-//         css={{
-//           backgroundColor: '$grayBg',
-//           margin: ' 0 auto',
-//           border: '0.5px solid $grayBgActive',
-//           width: '95%',
-//           mt: '$3',
-//           '&:hover': {
-//             border: '0.5px solid #FFD234',
-//           },
-//         }}
-//       >
-//         <Table>
-//           <Thead>
-//             <Tr>
-//               {headers.map((header: string, index: number) => (
-//                 <Th key={index}>
-//                   <SpanBox
-//                     css={{
-//                       textTransform: 'uppercase',
-//                       display: 'flex',
-//                       fontWeight: 600,
-//                       padding: '20px 10px',
-//                       color: '$grayTextContrast',
-//                       fontSize: '$2',
-//                     }}
-//                   >
-//                     {header}
-//                   </SpanBox>
-//                 </Th>
-//               ))}
-//             </Tr>
-//           </Thead>
-//           <Tbody>
-//             {Array.from(props.rows.keys()).map((key, index) => (
-//               <Tr key={index}>
-//                 {Object.values(props.rows.get(key) || {}).map((cell, index) => (
-//                   <Td key={index}>
-//                     <SpanBox
-//                       key={index}
-//                       css={{
-//                         display: 'flex',
-//                         justifyContent: 'left',
-//                         padding: '15px 10px',
-//                         color: '$grayTextContrast',
-//                         fontSize: '$1',
-//                       }}
-//                     >
-//                       {cell}
-//                     </SpanBox>
-//                   </Td>
-//                 ))}
-
-//                 {props.onDelete && (
-//                   <Td>
-//                     <IconButton
-//                       style="ctaWhite"
-//                       css={{ mr: '$1', background: '$labelButtonsBg' }}
-//                       onClick={() => {
-//                         props.onDelete && props.onDelete(key)
-//                       }}
-//                     >
-//                       <Trash size={16} color={iconColor} />
-//                     </IconButton>
-//                   </Td>
-//                 )}
-//                 {props.onEdit && (
-//                   <Td>
-//                     <IconButton
-//                       style="ctaWhite"
-//                       css={{ mr: '$1', background: '$labelButtonsBg' }}
-//                       onClick={() => {
-//                         props.onEdit &&
-//                           props.onEdit({ ...props.rows.get(key), id: key })
-//                       }}
-//                     >
-//                       <PencilSimple size={24} color={iconColor} />
-//                     </IconButton>
-//                   </Td>
-//                 )}
-//               </Tr>
-//             ))}
-//           </Tbody>
-//         </Table>
-//       </Box>
-//     </>
-//   )
-// }
diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx
index 299fbaf24..ccc117b79 100644
--- a/packages/web/components/elements/Table.tsx
+++ b/packages/web/components/elements/Table.tsx
@@ -1,14 +1,13 @@
+import { isDarkTheme } from '../../lib/themeUpdater'
+import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
+import { PencilSimple, Plus, Trash } from 'phosphor-react'
 import { Box, SpanBox, VStack } from './LayoutPrimitives'
 import { styled } from '../tokens/stitches.config'
 import { StyledText } from './StyledText'
 import { InfoLink } from './InfoLink'
 import { Button } from './Button'
-import { PencilSimple, Plus, Trash } from 'phosphor-react'
-import { isDarkTheme } from '../../lib/themeUpdater'
-import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
 import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
 import { IconButton } from './Button'
-
 interface TableProps {
   heading: string
   infoLink?: string
@@ -26,63 +25,6 @@ const HeaderWrapper = styled(Box, {
   },
 })
 
-// const TableCard = styled(Box, {
-//   backgroundColor: '$grayBg',
-//   display: 'flex',
-//   alignItems: 'center',
-//   padding: '10px 12px',
-//   border: '0.5px solid $grayBgActive',
-//   width: '100%',
-
-//   '&:hover': {
-//     border: '0.5px solid #FFD234',
-//   },
-//   '@md': {
-//     paddingLeft: '0',
-//   },
-// })
-
-// const TableHeading = styled(Box, {
-//   backgroundColor: '$grayBgActive',
-//   border: '1px solid rgba(0, 0, 0, 0.06)',
-//   display: 'none',
-//   alignItems: 'center',
-//   padding: '14px 0 14px 40px',
-//   borderRadius: '5px 5px 0px 0px',
-//   width: '100%',
-//   '@md': {
-//     display: 'flex',
-//   },
-// })
-
-// const Input = styled('input', {
-//   backgroundColor: 'transparent',
-//   color: '$grayTextContrast',
-//   marginTop: '5px',
-//   '&[disabled]': {
-//     border: 'none',
-//   },
-// })
-
-// const IconButton = styled(Button, {
-//   variants: {
-//     style: {
-//       ctaWhite: {
-//         color: 'red',
-//         padding: '10px',
-//         display: 'flex',
-//         justifyContent: 'center',
-//         alignItems: 'center',
-//         border: '1px solid $grayBorder',
-//         boxSizing: 'border-box',
-//         borderRadius: 6,
-//         width: 40,
-//         height: 40,
-//       },
-//     },
-//   },
-// })
-
 export function TableR(props: TableProps): JSX.Element {
   const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
 
@@ -143,111 +85,6 @@ export function TableR(props: TableProps): JSX.Element {
           )}
         </Box>
       </HeaderWrapper>
-      {/* <TableHeading>
-        {props.headers.map((header, index) => (
-          <Box
-            key={index}
-            css={{
-              flex: 'auto',
-            }}
-          >
-            <StyledText
-              key={index}
-              style="menuTitle"
-              css={{
-                color: '$grayTextContrast',
-                '@md': {
-                  fontWeight: '600',
-                  color: '$grayTextContrast',
-                  textTransform: 'uppercase',
-                },
-                width: '240px',
-              }}
-            >
-              {header}
-            </StyledText>
-          </Box>
-        ))}
-        <Box
-          css={{
-            width: '120px',
-          }}
-        ></Box>
-      </TableHeading> */}
-      {/* {Array.from(props.rows.keys()).map((key, index) => (
-        <TableCard
-          key={index}
-          css={{
-            '&:hover': {
-              background: 'rgba(255, 234, 159, 0.12)',
-            },
-            '@mdDown': {
-              borderTopLeftRadius: index === 0 ? '5px' : '',
-              borderTopRightRadius: index === 0 ? '5px' : '',
-            },
-            borderBottomLeftRadius: index == props.rows.size - 1 ? '5px' : '',
-            borderBottomRightRadius: index == props.rows.size - 1 ? '5px' : '',
-            padding: '10px 20px 10px 40px',
-          }}
-        >
-          <Box
-            css={{
-              display: 'flex',
-              width: '100%',
-              flexDirection: 'column',
-              '@md': {
-                flexDirection: 'row',
-              },
-            }}
-          >
-            {Object.values(props.rows.get(key) || {}).map((cell, index) => (
-              <HStack
-                key={index}
-                css={{
-                  flex: 'auto',
-                  display: 'flex',
-                  padding: '4px 4px 4px 0px',
-                }}
-              >
-                <Input
-                  type="text"
-                  value={cell}
-                  disabled
-                  css={{
-                    width: '100%',
-                  }}
-                ></Input>
-              </HStack>
-            ))}
-            {props.onEdit && (
-              <IconButton
-                style="ctaWhite"
-                css={{ mr: '$1', background: '$labelButtonsBg' }}
-                onClick={() => {
-                  props.onEdit &&
-                    props.onEdit({ ...props.rows.get(key), id: key })
-                }}
-              >
-                <PencilSimple size={24} color={iconColor} />
-              </IconButton>
-            )}
-            {props.onDelete && (
-              <IconButton
-                style="ctaWhite"
-                css={{ mr: '$1', background: '$labelButtonsBg' }}
-                onClick={() => {
-                  props.onDelete && props.onDelete(key)
-                }}
-              >
-                <Trash size={16} color={iconColor} />
-              </IconButton>
-            )}
-          </Box>
-        </TableCard>
-      ))} */}
-      {/* <Box css={{ ml: '25px' }}>
-        <StyledText style="fixedHeadline">{props.heading}</StyledText>
-      </Box> */}
       <Box
         css={{
           backgroundColor: '$grayBg',
@@ -270,7 +107,7 @@ export function TableR(props: TableProps): JSX.Element {
                       textTransform: 'uppercase',
                       display: 'flex',
                       fontWeight: 600,
-                      padding: '20px 10px',
+                      padding: '20px 10px 20px 40px',
                       color: '$grayTextContrast',
                       fontSize: '$2',
                     }}
@@ -291,7 +128,7 @@ export function TableR(props: TableProps): JSX.Element {
                       css={{
                         display: 'flex',
                         justifyContent: 'left',
-                        padding: '20px 10px',
+                        padding: '20px 10px 20px 40px',
                         color: '$grayTextContrast',
                         fontSize: '$1',
                       }}
@@ -305,7 +142,7 @@ export function TableR(props: TableProps): JSX.Element {
                   <Td>
                     <IconButton
                       style="ctaWhite"
-                      css={{ mr: '$1', background: '$labelButtonsBg' }}
+                      css={{ mr: '$1', background: '$labelButtonsBg', margin: '20px 10px 20px 40px', }}
                       onClick={() => {
                         props.onDelete && props.onDelete(key)
                       }}
@@ -318,7 +155,7 @@ export function TableR(props: TableProps): JSX.Element {
                   <Td>
                     <IconButton
                       style="ctaWhite"
-                      css={{ mr: '$1', background: '$labelButtonsBg' }}
+                      css={{ mr: '$1', background: '$labelButtonsBg', margin: '20px 10px 20px 40px', }}
                       onClick={() => {
                         props.onEdit &&
                           props.onEdit({ ...props.rows.get(key), id: key })

From 3e1ecaad76db528f230642e80af8a7ab1fedcdd2 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Wed, 20 Jul 2022 23:35:32 +0200
Subject: [PATCH 04/12] Fixing z-index issue on modal

---
 .../components/elements/ModalPrimitives.tsx   |  1 +
 packages/web/components/elements/Table.tsx    | 58 ++++++++++++-------
 packages/web/pages/settings/api.tsx           | 20 +------
 3 files changed, 39 insertions(+), 40 deletions(-)

diff --git a/packages/web/components/elements/ModalPrimitives.tsx b/packages/web/components/elements/ModalPrimitives.tsx
index 876104de3..33006fc8b 100644
--- a/packages/web/components/elements/ModalPrimitives.tsx
+++ b/packages/web/components/elements/ModalPrimitives.tsx
@@ -34,6 +34,7 @@ const Modal = styled(Content, {
   boxShadow: theme.shadows.cardBoxShadow.toString(),
   position: 'fixed',
   '&:focus': { outline: 'none' },
+  zIndex:'1',
 })
 
 export const ModalContent = styled(Modal, {
diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx
index ccc117b79..e8f9b582c 100644
--- a/packages/web/components/elements/Table.tsx
+++ b/packages/web/components/elements/Table.tsx
@@ -8,6 +8,7 @@ import { InfoLink } from './InfoLink'
 import { Button } from './Button'
 import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
 import { IconButton } from './Button'
+
 interface TableProps {
   heading: string
   infoLink?: string
@@ -25,7 +26,11 @@ const HeaderWrapper = styled(Box, {
   },
 })
 
-export function TableR(props: TableProps): JSX.Element {
+const newThead = {
+  background: '#156'
+}
+
+export function TableNew(props: TableProps): JSX.Element {
   const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
 
   return (
@@ -98,26 +103,27 @@ export function TableR(props: TableProps): JSX.Element {
         }}
       >
         <Table>
-          <Thead>
-            <Tr>
-              {props.headers.map((header: string, index: number) => (
-                <Th key={index}>
-                  <SpanBox
-                    css={{
-                      textTransform: 'uppercase',
-                      display: 'flex',
-                      fontWeight: 600,
-                      padding: '20px 10px 20px 40px',
-                      color: '$grayTextContrast',
-                      fontSize: '$2',
-                    }}
-                  >
-                    {header}
-                  </SpanBox>
-                </Th>
-              ))}
-            </Tr>
+          <Thead className={newThead}>
+              <Tr>
+                {props.headers.map((header: string, index: number) => (
+                  <Th key={index}>
+                    <SpanBox
+                      css={{
+                        textTransform: 'uppercase',
+                        display: 'flex',
+                        fontWeight: 600,
+                        padding: '20px 10px 20px 40px',
+                        color: '$grayTextContrast',
+                        fontSize: '$2',
+                      }}
+                    >
+                      {header}
+                    </SpanBox>
+                  </Th>
+                ))}
+              </Tr>
           </Thead>
+
           <Tbody>
             {Array.from(props.rows.keys()).map((key, index) => (
               <Tr key={index}>
@@ -142,7 +148,11 @@ export function TableR(props: TableProps): JSX.Element {
                   <Td>
                     <IconButton
                       style="ctaWhite"
-                      css={{ mr: '$1', background: '$labelButtonsBg', margin: '20px 10px 20px 40px', }}
+                      css={{
+                        mr: '$1',
+                        background: '$labelButtonsBg',
+                        margin: '20px 10px 20px 40px',
+                      }}
                       onClick={() => {
                         props.onDelete && props.onDelete(key)
                       }}
@@ -155,7 +165,11 @@ export function TableR(props: TableProps): JSX.Element {
                   <Td>
                     <IconButton
                       style="ctaWhite"
-                      css={{ mr: '$1', background: '$labelButtonsBg', margin: '20px 10px 20px 40px', }}
+                      css={{
+                        mr: '$1',
+                        background: '$labelButtonsBg',
+                        margin: '20px 10px 20px 40px',
+                      }}
                       onClick={() => {
                         props.onEdit &&
                           props.onEdit({ ...props.rows.get(key), id: key })
diff --git a/packages/web/pages/settings/api.tsx b/packages/web/pages/settings/api.tsx
index 1a9787e4d..4bd9d550a 100644
--- a/packages/web/pages/settings/api.tsx
+++ b/packages/web/pages/settings/api.tsx
@@ -9,7 +9,7 @@ import { generateApiKeyMutation } from '../../lib/networking/mutations/generateA
 import { revokeApiKeyMutation } from '../../lib/networking/mutations/revokeApiKeyMutation'
 
 import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
-import { TableR } from '../../components/elements/Table'
+import { TableNew } from '../../components/elements/Table'
 
 import { FormInputProps } from '../../components/elements/FormElements'
 import { FormModal } from '../../components/patterns/FormModal'
@@ -183,7 +183,7 @@ export default function Api(): JSX.Element {
         />
       )}
 
-      <TableR
+      <TableNew
         heading={'API Keys'}
         headers={headers}
         rows={rows}
@@ -195,22 +195,6 @@ export default function Api(): JSX.Element {
           setAddModalOpen(true)
         }}
       />
-
-      {/* TESTING NEW TABLE */}
-
-      
-      {/* <TableR
-        headers={headers}
-        heading={'API Keys'}
-        rows={rows}
-        onDelete={setOnDeleteId}
-        onAdd={() => {
-          onAdd()
-          setName('')
-          setExpiresAt(new Date(defaultExpiresAt))
-          setAddModalOpen(true)
-        }} */}
-   
     </PrimaryLayout>
   )
 }

From fdd140485ea36f28a5f070b6e0774bda316ddba8 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 20 Jul 2022 15:58:19 -0700
Subject: [PATCH 05/12] Rename table to imports dont fail

---
 packages/web/components/elements/Table.tsx | 8 ++++----
 packages/web/pages/settings/api.tsx        | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx
index e8f9b582c..639498755 100644
--- a/packages/web/components/elements/Table.tsx
+++ b/packages/web/components/elements/Table.tsx
@@ -1,5 +1,5 @@
 import { isDarkTheme } from '../../lib/themeUpdater'
-import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
+import { Table as ResponsiveTable, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
 import { PencilSimple, Plus, Trash } from 'phosphor-react'
 import { Box, SpanBox, VStack } from './LayoutPrimitives'
 import { styled } from '../tokens/stitches.config'
@@ -30,7 +30,7 @@ const newThead = {
   background: '#156'
 }
 
-export function TableNew(props: TableProps): JSX.Element {
+export function Table(props: TableProps): JSX.Element {
   const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
 
   return (
@@ -102,7 +102,7 @@ export function TableNew(props: TableProps): JSX.Element {
           },
         }}
       >
-        <Table>
+        <ResponsiveTable>
           <Thead className={newThead}>
               <Tr>
                 {props.headers.map((header: string, index: number) => (
@@ -182,7 +182,7 @@ export function TableNew(props: TableProps): JSX.Element {
               </Tr>
             ))}
           </Tbody>
-        </Table>
+        </ResponsiveTable>
       </Box>
     </VStack>
   )
diff --git a/packages/web/pages/settings/api.tsx b/packages/web/pages/settings/api.tsx
index 4bd9d550a..a78b2b285 100644
--- a/packages/web/pages/settings/api.tsx
+++ b/packages/web/pages/settings/api.tsx
@@ -9,7 +9,7 @@ import { generateApiKeyMutation } from '../../lib/networking/mutations/generateA
 import { revokeApiKeyMutation } from '../../lib/networking/mutations/revokeApiKeyMutation'
 
 import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
-import { TableNew } from '../../components/elements/Table'
+import { Table } from '../../components/elements/Table'
 
 import { FormInputProps } from '../../components/elements/FormElements'
 import { FormModal } from '../../components/patterns/FormModal'
@@ -183,7 +183,7 @@ export default function Api(): JSX.Element {
         />
       )}
 
-      <TableNew
+      <Table
         heading={'API Keys'}
         headers={headers}
         rows={rows}

From 1c1db006268a9fffa61333f44d23b2a389f1a57b Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 20 Jul 2022 16:08:57 -0700
Subject: [PATCH 06/12] Example of how to style table components

---
 packages/web/components/elements/Table.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx
index 639498755..c44bab7af 100644
--- a/packages/web/components/elements/Table.tsx
+++ b/packages/web/components/elements/Table.tsx
@@ -30,6 +30,10 @@ const newThead = {
   background: '#156'
 }
 
+const StyledTable = styled(ResponsiveTable, {
+  // Add css here
+})
+
 export function Table(props: TableProps): JSX.Element {
   const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
 
@@ -102,7 +106,7 @@ export function Table(props: TableProps): JSX.Element {
           },
         }}
       >
-        <ResponsiveTable>
+        <StyledTable>
           <Thead className={newThead}>
               <Tr>
                 {props.headers.map((header: string, index: number) => (
@@ -182,7 +186,7 @@ export function Table(props: TableProps): JSX.Element {
               </Tr>
             ))}
           </Tbody>
-        </ResponsiveTable>
+        </StyledTable>
       </Box>
     </VStack>
   )

From 5c69fb50fb07092c16d4d9c39b8b3b1ba433c7d8 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 20 Jul 2022 16:12:25 -0700
Subject: [PATCH 07/12] Show the css attribute

---
 packages/web/components/elements/Table.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx
index c44bab7af..0232911f3 100644
--- a/packages/web/components/elements/Table.tsx
+++ b/packages/web/components/elements/Table.tsx
@@ -106,7 +106,7 @@ export function Table(props: TableProps): JSX.Element {
           },
         }}
       >
-        <StyledTable>
+        <StyledTable css={{ /* can also style here now */ }}>
           <Thead className={newThead}>
               <Tr>
                 {props.headers.map((header: string, index: number) => (

From 8874513e591389278db0d932496490f1ce48a13c Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Thu, 21 Jul 2022 13:03:44 +0200
Subject: [PATCH 08/12] Some clean up around css

---
 packages/web/components/elements/Table.tsx | 77 +++++++++++-----------
 1 file changed, 38 insertions(+), 39 deletions(-)

diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx
index 0232911f3..ee7db6010 100644
--- a/packages/web/components/elements/Table.tsx
+++ b/packages/web/components/elements/Table.tsx
@@ -1,5 +1,12 @@
 import { isDarkTheme } from '../../lib/themeUpdater'
-import { Table as ResponsiveTable, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
+import {
+  Table as ResponsiveTable,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+} from 'react-super-responsive-table'
 import { PencilSimple, Plus, Trash } from 'phosphor-react'
 import { Box, SpanBox, VStack } from './LayoutPrimitives'
 import { styled } from '../tokens/stitches.config'
@@ -26,12 +33,17 @@ const HeaderWrapper = styled(Box, {
   },
 })
 
-const newThead = {
-  background: '#156'
-}
-
 const StyledTable = styled(ResponsiveTable, {
-  // Add css here
+  margin: ' 0 auto',
+  border: '0.5px solid $grayBgActive',
+  backgroundColor: '$graySolid',
+  borderCollapse: 'collapse',
+  borderRadius:'5px',
+  width: '100%',
+  mt: '$3',
+  '&:hover': {
+    border: '0.5px solid #FFD234',
+  },
 })
 
 export function Table(props: TableProps): JSX.Element {
@@ -94,38 +106,26 @@ export function Table(props: TableProps): JSX.Element {
           )}
         </Box>
       </HeaderWrapper>
-      <Box
-        css={{
-          backgroundColor: '$grayBg',
-          margin: ' 0 auto',
-          border: '0.5px solid $grayBgActive',
-          width: '100%',
-          mt: '$3',
-          '&:hover': {
-            border: '0.5px solid #FFD234',
-          },
-        }}
-      >
-        <StyledTable css={{ /* can also style here now */ }}>
-          <Thead className={newThead}>
-              <Tr>
-                {props.headers.map((header: string, index: number) => (
-                  <Th key={index}>
-                    <SpanBox
-                      css={{
-                        textTransform: 'uppercase',
-                        display: 'flex',
-                        fontWeight: 600,
-                        padding: '20px 10px 20px 40px',
-                        color: '$grayTextContrast',
-                        fontSize: '$2',
-                      }}
-                    >
-                      {header}
-                    </SpanBox>
-                  </Th>
-                ))}
-              </Tr>
+        <StyledTable>
+          <Thead>
+            <Tr>
+              {props.headers.map((header: string, index: number) => (
+                <Th key={index}>
+                  <SpanBox
+                    css={{
+                      textTransform: 'uppercase',
+                      display: 'flex',
+                      fontWeight: 600,
+                      padding: '20px 10px 20px 40px',
+                      color: '$grayTextContrast',
+                      fontSize: '$2',
+                    }}
+                  >
+                    {header}
+                  </SpanBox>
+                </Th>
+              ))}
+            </Tr>
           </Thead>
 
           <Tbody>
@@ -187,7 +187,6 @@ export function Table(props: TableProps): JSX.Element {
             ))}
           </Tbody>
         </StyledTable>
-      </Box>
     </VStack>
   )
 }

From 735169bf41ff2f199832afd51b06b4f2e99d74f5 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Thu, 21 Jul 2022 22:31:19 +0200
Subject: [PATCH 09/12] Updated CSS to match how it was before

---
 packages/web/components/elements/Table.tsx | 154 ++++++++++-----------
 1 file changed, 76 insertions(+), 78 deletions(-)

diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx
index ee7db6010..c6723b64d 100644
--- a/packages/web/components/elements/Table.tsx
+++ b/packages/web/components/elements/Table.tsx
@@ -1,11 +1,6 @@
 import { isDarkTheme } from '../../lib/themeUpdater'
 import {
-  Table as ResponsiveTable,
-  Thead,
-  Tbody,
-  Tr,
-  Th,
-  Td,
+  Table as ResponsiveTable, Thead, Tbody, Tr, Th, Td,
 } from 'react-super-responsive-table'
 import { PencilSimple, Plus, Trash } from 'phosphor-react'
 import { Box, SpanBox, VStack } from './LayoutPrimitives'
@@ -38,13 +33,16 @@ const StyledTable = styled(ResponsiveTable, {
   border: '0.5px solid $grayBgActive',
   backgroundColor: '$graySolid',
   borderCollapse: 'collapse',
-  borderRadius:'5px',
+  borderRadius: '5px',
   width: '100%',
   mt: '$3',
   '&:hover': {
     border: '0.5px solid #FFD234',
   },
 })
+const TableBody = styled(Tbody, {
+  backgroundColor: '$grayBg',
+})
 
 export function Table(props: TableProps): JSX.Element {
   const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
@@ -106,87 +104,87 @@ export function Table(props: TableProps): JSX.Element {
           )}
         </Box>
       </HeaderWrapper>
-        <StyledTable>
-          <Thead>
-            <Tr>
-              {props.headers.map((header: string, index: number) => (
-                <Th key={index}>
+      <StyledTable>
+        <Thead>
+          <Tr>
+            {props.headers.map((header: string, index: number) => (
+              <Th key={index}>
+                <SpanBox
+                  css={{
+                    textTransform: 'uppercase',
+                    display: 'flex',
+                    fontWeight: 600,
+                    padding: '20px 10px 20px 40px',
+                    color: '$grayTextContrast',
+                    fontSize: '$2',
+                  }}
+                >
+                  {header}
+                </SpanBox>
+              </Th>
+            ))}
+          </Tr>
+        </Thead>
+
+        <TableBody>
+          {Array.from(props.rows.keys()).map((key, index) => (
+            <Tr key={index}>
+              {Object.values(props.rows.get(key) || {}).map((cell, index) => (
+                <Td key={index}>
                   <SpanBox
+                    key={index}
                     css={{
-                      textTransform: 'uppercase',
                       display: 'flex',
-                      fontWeight: 600,
+                      justifyContent: 'left',
                       padding: '20px 10px 20px 40px',
                       color: '$grayTextContrast',
-                      fontSize: '$2',
+                      fontSize: '$1',
                     }}
                   >
-                    {header}
+                    {cell}
                   </SpanBox>
-                </Th>
+                </Td>
               ))}
+
+              {props.onDelete && (
+                <Td>
+                  <IconButton
+                    style="ctaWhite"
+                    css={{
+                      mr: '$1',
+                      background: '$labelButtonsBg',
+                      margin: '20px 10px 20px 40px',
+                    }}
+                    onClick={() => {
+                      props.onDelete && props.onDelete(key)
+                    }}
+                  >
+                    <Trash size={16} color={iconColor} />
+                  </IconButton>
+                </Td>
+              )}
+              {props.onEdit && (
+                <Td>
+                  <IconButton
+                    style="ctaWhite"
+                    css={{
+                      mr: '$1',
+                      background: '$labelButtonsBg',
+                      margin: '20px 10px 20px 40px',
+                    }}
+                    onClick={() => {
+                      props.onEdit &&
+                        props.onEdit({ ...props.rows.get(key), id: key })
+                    }}
+                  >
+                    <PencilSimple size={24} color={iconColor} />
+                  </IconButton>
+                </Td>
+              )}
             </Tr>
-          </Thead>
-
-          <Tbody>
-            {Array.from(props.rows.keys()).map((key, index) => (
-              <Tr key={index}>
-                {Object.values(props.rows.get(key) || {}).map((cell, index) => (
-                  <Td key={index}>
-                    <SpanBox
-                      key={index}
-                      css={{
-                        display: 'flex',
-                        justifyContent: 'left',
-                        padding: '20px 10px 20px 40px',
-                        color: '$grayTextContrast',
-                        fontSize: '$1',
-                      }}
-                    >
-                      {cell}
-                    </SpanBox>
-                  </Td>
-                ))}
-
-                {props.onDelete && (
-                  <Td>
-                    <IconButton
-                      style="ctaWhite"
-                      css={{
-                        mr: '$1',
-                        background: '$labelButtonsBg',
-                        margin: '20px 10px 20px 40px',
-                      }}
-                      onClick={() => {
-                        props.onDelete && props.onDelete(key)
-                      }}
-                    >
-                      <Trash size={16} color={iconColor} />
-                    </IconButton>
-                  </Td>
-                )}
-                {props.onEdit && (
-                  <Td>
-                    <IconButton
-                      style="ctaWhite"
-                      css={{
-                        mr: '$1',
-                        background: '$labelButtonsBg',
-                        margin: '20px 10px 20px 40px',
-                      }}
-                      onClick={() => {
-                        props.onEdit &&
-                          props.onEdit({ ...props.rows.get(key), id: key })
-                      }}
-                    >
-                      <PencilSimple size={24} color={iconColor} />
-                    </IconButton>
-                  </Td>
-                )}
-              </Tr>
-            ))}
-          </Tbody>
-        </StyledTable>
+          ))}
+        </TableBody>
+      </StyledTable>
     </VStack>
   )
 }

From 291bb5924889310763bc667d1a90429da24e7f7a Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 21 Jul 2022 17:29:55 -0700
Subject: [PATCH 10/12] Add name attribiutes to email login form elements

---
 packages/web/components/templates/EmailLogin.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/web/components/templates/EmailLogin.tsx b/packages/web/components/templates/EmailLogin.tsx
index e8a8962bd..f644974dd 100644
--- a/packages/web/components/templates/EmailLogin.tsx
+++ b/packages/web/components/templates/EmailLogin.tsx
@@ -52,6 +52,7 @@ export function EmailLogin(): JSX.Element {
             <BorderedFormInput
               key="email"
               type="text"
+              name="email"
               value={email}
               placeholder="Email"
               onChange={(e) => { e.preventDefault(); setEmail(e.target.value); }}
@@ -63,6 +64,7 @@ export function EmailLogin(): JSX.Element {
             <BorderedFormInput
               key="password"
               type="password"
+              name="password"
               value={password}
               placeholder="Password"
               onChange={(e) => setPassword(e.target.value)}

From c113c94567b9779ea416ea95ec886f58c7201b46 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 21 Jul 2022 17:43:15 -0700
Subject: [PATCH 11/12] Add param validation so we dont get undefined values
 passed to GQL

---
 packages/api/src/routers/auth/auth_router.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/api/src/routers/auth/auth_router.ts b/packages/api/src/routers/auth/auth_router.ts
index b3d8853b6..d9289111e 100644
--- a/packages/api/src/routers/auth/auth_router.ts
+++ b/packages/api/src/routers/auth/auth_router.ts
@@ -356,6 +356,11 @@ export function authRouter() {
     cors<express.Request>(corsConfig),
     async (req: express.Request, res: express.Response) => {
       const { email, password } = req.body
+      if (!email || !password) {
+        res.redirect(`${env.client.url}/email-login?errorCodes=AUTH_FAILED`)
+        return
+      }
+
       const query = `
       mutation login{
         login(input: {
@@ -418,6 +423,11 @@ export function authRouter() {
     cors<express.Request>(corsConfig),
     async (req: express.Request, res: express.Response) => {
       const { email, password, name, username, bio } = req.body
+      if (!email || !password || !name || !username) {
+        res.redirect(`${env.client.url}/email-signup?errorCodes=BAD_DATA`)
+        return
+      }
+
       const query = `
       mutation signup {
         signup(input: {
@@ -425,7 +435,7 @@ export function authRouter() {
           password: "${password}",
           name: "${name}",
           username: "${username}",
-          bio: "${bio}"
+          bio: "${bio ?? ''}"
         }) {
           __typename
           ... on SignupSuccess {

From 3d2035a01474d6e438d3754bd70f6f980cd37e70 Mon Sep 17 00:00:00 2001
From: Rupin Khandelwal <rupin@omnivore.app>
Date: Fri, 22 Jul 2022 16:26:31 +0200
Subject: [PATCH 12/12] removing the border from the table on small screens

---
 packages/web/components/elements/Table.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/elements/Table.tsx b/packages/web/components/elements/Table.tsx
index c6723b64d..ce81966bf 100644
--- a/packages/web/components/elements/Table.tsx
+++ b/packages/web/components/elements/Table.tsx
@@ -1,14 +1,19 @@
 import { isDarkTheme } from '../../lib/themeUpdater'
 import {
-  Table as ResponsiveTable, Thead, Tbody, Tr, Th, Td,
+  Table as ResponsiveTable,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
 } from 'react-super-responsive-table'
+import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
 import { PencilSimple, Plus, Trash } from 'phosphor-react'
 import { Box, SpanBox, VStack } from './LayoutPrimitives'
 import { styled } from '../tokens/stitches.config'
 import { StyledText } from './StyledText'
 import { InfoLink } from './InfoLink'
 import { Button } from './Button'
-import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
 import { IconButton } from './Button'
 
 interface TableProps {
@@ -44,6 +49,11 @@ const TableBody = styled(Tbody, {
   backgroundColor: '$grayBg',
 })
 
+const TableRow = styled(Tr, {
+  border: '0 !important',
+  borderTop: '0.5px solid $grayBgActive !important',
+})
+
 export function Table(props: TableProps): JSX.Element {
   const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
 
@@ -128,7 +138,7 @@ export function Table(props: TableProps): JSX.Element {
 
         <TableBody>
           {Array.from(props.rows.keys()).map((key, index) => (
-            <Tr key={index}>
+            <TableRow key={index}>
               {Object.values(props.rows.get(key) || {}).map((cell, index) => (
                 <Td key={index}>
                   <SpanBox
@@ -181,7 +191,7 @@ export function Table(props: TableProps): JSX.Element {
                   </IconButton>
                 </Td>
               )}
-            </Tr>
+            </TableRow>
           ))}
         </TableBody>
       </StyledTable>