From 9a2a0814f9026ca552d22f1f575c4909ec80c358 Mon Sep 17 00:00:00 2001
From: z0ccc <z0ccc@proton.me>
Date: Wed, 19 Oct 2022 01:46:38 -0400
Subject: [PATCH] Added autofill button

---
 src/Popup/Components/Table.tsx         | 2 +-
 src/Popup/Pages/AutofillPage/index.tsx | 8 ++++++++
 src/Popup/Popup.tsx                    | 2 +-
 src/theme.ts                           | 3 ++-
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/Popup/Components/Table.tsx b/src/Popup/Components/Table.tsx
index 45ebc96..9885623 100644
--- a/src/Popup/Components/Table.tsx
+++ b/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',
         }}
diff --git a/src/Popup/Pages/AutofillPage/index.tsx b/src/Popup/Pages/AutofillPage/index.tsx
index 6b74b2d..8984175 100644
--- a/src/Popup/Pages/AutofillPage/index.tsx
+++ b/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>
   )
 }
diff --git a/src/Popup/Popup.tsx b/src/Popup/Popup.tsx
index dcf0ee8..305f167 100644
--- a/src/Popup/Popup.tsx
+++ b/src/Popup/Popup.tsx
@@ -55,7 +55,7 @@ const Popup = () => {
       <Flex
         sx={{
           width: '350px',
-          height: '410px',
+          height: '428px',
         }}
       >
         <Flex
diff --git a/src/theme.ts b/src/theme.ts
index 2aa3eea..b5ecec1 100644
--- a/src/theme.ts
+++ b/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',
       },