Added autofill button

src/Popup/Components/Table.tsx

@@ -18,7 +18,7 @@ const Table = ({ title, children }: TableProps) => {
       <Box
         sx={{
           border: '1px solid',
-          mb: '8px',
+          mb: '12px',
           borderRadius: '4px',
           borderColor: 'grey',
         }}

src/Popup/Pages/AutofillPage/index.tsx

@@ -5,6 +5,7 @@ import CheckBox from '../../Components/CheckBox'
 import { ipData } from '../../../types'
 import Table from '../../Components/Table'
 import TableRow from '../../Components/TableRow'
+import { Button } from 'theme-ui'
 
 interface AutofillPageProps {
   tab: string
@@ -108,6 +109,13 @@ const AutofillPage = ({ tab, ipData }: AutofillPageProps) => {
         <TableRow title="Address" value={address} />
         <TableRow title="Phone" value={phone} noBorder />
       </Table>
+      <Button
+        variant="primary"
+        sx={{ width: '100%' }}
+        onClick={() => console.log('click')}
+      >
+        Autofill Current Page
+      </Button>
     </Page>
   )
 }

src/Popup/Popup.tsx

@@ -55,7 +55,7 @@ const Popup = () => {
       <Flex
         sx={{
           width: '350px',
-          height: '410px',
+          height: '428px',
         }}
       >
         <Flex

src/theme.ts

@@ -49,12 +49,13 @@ export const theme: Theme = {
   },
   buttons: {
     primary: {
-      borderRadius: 0,
+      borderRadius: '4px',
       color: 'background',
       bg: 'primary',
       py: '3px',
       px: '8px',
       cursor: 'pointer',
+      width: '100%',
       '&:hover': {
         bg: 'primaryDark',
       },