#895 - Improve table used on the /settings/api page

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,
+      },
+    },
+  },
+})

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, {

packages/web/components/elements/Table.tsx

@@ -1,10 +1,13 @@
-import { Box, HStack, SpanBox, VStack } from './LayoutPrimitives'
+import { isDarkTheme } from '../../lib/themeUpdater'
+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'
 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 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
+import { IconButton } from './Button'
 
 interface TableProps {
   heading: string
@@ -23,62 +26,9 @@ 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,
-      },
-    },
-  },
-})
+const newThead = {
+  background: '#156'
+}
 
 export function Table(props: TableProps): JSX.Element {
   const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
@@ -140,108 +90,100 @@ export function Table(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>
+      <Box
+        css={{
+          backgroundColor: '$grayBg',
+          margin: ' 0 auto',
+          border: '0.5px solid $grayBgActive',
+          width: '100%',
+          mt: '$3',
+          '&:hover': {
+            border: '0.5px solid #FFD234',
+          },
+        }}
+      >
+        <ResponsiveTable>
+          <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}>
+                {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>
             ))}
-            {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>
-      ))}
+          </Tbody>
+        </ResponsiveTable>
+      </Box>
     </VStack>
   )
 }

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

packages/web/pages/settings/api.tsx

@@ -10,6 +10,7 @@ import { revokeApiKeyMutation } from '../../lib/networking/mutations/revokeApiKe
 
 import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
 import { Table } from '../../components/elements/Table'
+
 import { FormInputProps } from '../../components/elements/FormElements'
 import { FormModal } from '../../components/patterns/FormModal'
 import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
@@ -57,9 +58,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 +119,7 @@ export default function Api(): JSX.Element {
               additionalDays = 365
               break
             case 'Never':
-              break;
+              break
           }
           const newExpires = additionalDays ? new Date() : neverExpiresDate
           if (additionalDays) {
@@ -126,7 +128,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,
       },
     ])