Merge pull request #136 from getmaxun/gsheet-modal

feat: improve gsheet integration ui

src/components/molecules/IntegrationSettings.tsx

@@ -113,9 +113,9 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: I
     }, [recordingId]);
 
     return (
-        <GenericModal isOpen={isOpen} onClose={handleClose}>
+        <GenericModal isOpen={isOpen} onClose={handleClose} modalStyle={modalStyle}>
             <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', marginLeft: '65px' }}>
-                <Typography variant="h6" sx={{ margin: '15px 0px' }}>Integrate with Google Sheet <Chip label="beta" color="primary" variant="outlined" /></Typography>
+                <Typography variant="h6" >Integrate with Google Sheet <Chip label="beta" color="primary" variant="outlined" /></Typography>
 
                 {recording && recording.google_sheet_id ? (
                     <>
@@ -143,7 +143,6 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: I
                                     variant="contained"
                                     color="primary"
                                     onClick={authenticateWithGoogle}
-                                    style={{ marginBottom: '15px' }}
                                 >
                                     Authenticate with Google
                                 </Button>
@@ -225,3 +224,15 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: I
         </GenericModal>
     );
 };
+
+export const modalStyle = {
+    top: '40%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '50%',
+    backgroundColor: 'background.paper',
+    p: 4,
+    height: 'fit-content',
+    display: 'block',
+    padding: '20px',
+};