From 3b73cb17d3c60e49f71588aed89c02af4061eb32 Mon Sep 17 00:00:00 2001
From: Eesha <eeshaulh@gmail.com>
Date: Sat, 17 Aug 2024 22:48:08 -0400
Subject: [PATCH] more mobile responsiveness

---
 packages/app/src/components/Button.tsx        |  96 ++------------
 .../app/src/components/LabeledTextArea.tsx    | 119 +++---------------
 packages/app/src/pages/AboutPage.tsx          |  26 ++--
 packages/app/src/pages/MainPage.tsx           | 104 ++++++++-------
 packages/app/src/proofWorker.tsx              |  41 +++---
 packages/app/src/theme.tsx                    |  87 ++++++++++---
 packages/app/vite.config.ts                   |  84 ++++++++++++-
 7 files changed, 272 insertions(+), 285 deletions(-)

diff --git a/packages/app/src/components/Button.tsx b/packages/app/src/components/Button.tsx
index a2922e8..90f1deb 100644
--- a/packages/app/src/components/Button.tsx
+++ b/packages/app/src/components/Button.tsx
@@ -1,81 +1,3 @@
-// import styled from "styled-components";
-
-// export const Button = styled.button`
-//   padding: 0 14px;
-//   border-radius: 4px;
-//   background: #8272e4;
-//   border: none;
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   font-weight: 600;
-//   font-size: 0.9rem;
-//   letter-spacing: -0.02em;
-//   color: #fff;
-//   cursor: pointer;
-//   height: 48px;
-//   width: 100%;
-//   min-width: 32px;
-//   transition: all 0.2s ease-in-out;
-//   &:hover {
-//     background: #9b8df2;
-//   }
-//   &:disabled {
-//     opacity: 0.5;
-//     cursor: not-allowed;
-//   }
-// `;
-
-// export const OutlinedButton = styled.button`
-//   padding: 0 14px;
-//   border-radius: 4px;
-//   border: none;
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   font-weight: 500;
-//   font-size: 0.9rem;
-//   letter-spacing: -0.02em;
-//   color: #8272e4;
-//   cursor: pointer;
-//   height: 48px;
-//   width: 100%;
-//   min-width: 32px;
-//   transition: all 0.2s ease-in-out;
-//   background: transparent;
-//   border: 1px solid #8272e4;
-//   &:hover {
-//     background: #9b8df2;
-//     color: white;
-//   }
-//   &:disabled {
-//     opacity: 0.5;
-//     cursor: not-allowed;
-//   }
-// `;
-
-
-// export const TextButton = styled.button`
-// width: fit-content;
-// background: transparent;
-// border: none;
-// color: white;
-// font-weight: 500;
-// padding: 4px 16px;
-// border-radius: 4px;
-//   &:hover {
-//     background: #00000020;
-//     color: white;
-//   }
-//   &:disabled {
-//     opacity: 0.5;
-//     cursor: not-allowed;
-//   }
-// `;
-
-
-
-
 import React from 'react';
 import styled from "styled-components";
 import { useTheme, Button as MuiButton } from "@mui/material";
@@ -91,7 +13,6 @@ interface ButtonProps {
 }
 
 const StyledButton = styled(MuiButton)<{ highlighted: boolean }>`
-  padding: 0 14px;
   text-transform: none;
   border-radius: 9px;
   display: flex;
@@ -126,13 +47,13 @@ const StyledButton = styled(MuiButton)<{ highlighted: boolean }>`
 
   @media (max-width: 400px) {
     font-size: 0.6rem;
-    padding: 0 5px;
-    height: 42px;
+    padding: 0 4px;
+    height: 40px;
   }
 `;
 
 const StyledOutlinedButton = styled(MuiButton)<{ highlighted: boolean }>`
-  padding: 0 14px;
+  padding: 0 5px;
   border-radius: 9px;
   display: flex;
   align-items: center;
@@ -144,7 +65,7 @@ const StyledOutlinedButton = styled(MuiButton)<{ highlighted: boolean }>`
   cursor: pointer;
   height: 48px;
   width: 100%;
-  min-width: 32px;
+  min-width: 30px;
   transition: all 0.2s ease-in-out;
   background: '#ffffff';
   border: 1px solid ${({ highlighted, theme }) => (highlighted ? theme.palette.accent.main : '#1C1C1C')};
@@ -167,8 +88,8 @@ const StyledOutlinedButton = styled(MuiButton)<{ highlighted: boolean }>`
 
   @media (max-width: 400px) {
     font-size: 0.6rem;
-    padding: 0 5px;
-    height: 42px;
+    padding: 0 2px;
+    height: 40px;
   }
 `;
 
@@ -178,7 +99,6 @@ const StyledTextButton = styled(MuiButton)<{ highlighted: boolean }>`
   border: none;
   color: ${({ highlighted, theme }) => (highlighted ? theme.palette.accent.main : theme.palette.secondary.main)};
   font-weight: 500;
-  padding: 4px 16px;
   border-radius: 9px;
 
   &:hover {
@@ -197,8 +117,8 @@ const StyledTextButton = styled(MuiButton)<{ highlighted: boolean }>`
 
   @media (max-width: 400px) {
     font-size: 0.6rem;
-    padding: 2px 10px;
-    height: 42px;
+    padding: 0 2px;
+    height: 40px;
   }
 `;
 
diff --git a/packages/app/src/components/LabeledTextArea.tsx b/packages/app/src/components/LabeledTextArea.tsx
index 2c72e2b..adf5ca7 100644
--- a/packages/app/src/components/LabeledTextArea.tsx
+++ b/packages/app/src/components/LabeledTextArea.tsx
@@ -1,105 +1,3 @@
-// import _ from "lodash";
-// import React, { CSSProperties } from "react";
-// import styled from "styled-components";
-// import { Col } from "./Layout";
-
-// export const LabeledTextArea: React.FC<{
-//   style?: CSSProperties;
-//   className?: string;
-//   label: string;
-//   value: string;
-//   warning?: string;
-//   warningColor?: string;
-//   disabled?: boolean;
-//   disabledReason?: string;
-//   secret?: boolean;
-//   onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
-// }> = ({
-//   style,
-//   warning,
-//   warningColor,
-//   disabled,
-//   disabledReason,
-//   label,
-//   value,
-//   onChange,
-//   className,
-//   secret,
-// }) => {
-//   return (
-//     <LabeledTextAreaContainer
-//       className={_.compact(["labeledTextAreaContainer", className]).join(" ")}
-//     >
-//       <Label>{label}</Label>
-//       {warning && (
-//         <span className="warning" style={{ color: warningColor }}>
-//           {warning}
-//         </span>
-//       )}
-//       <TextArea
-//         style={style}
-//         aria-label={label} 
-//         title={disabled ? disabledReason : ""}
-//         disabled={disabled}
-//         value={value}
-//         onChange={onChange}
-//       />
-
-//       {secret && (
-//         <div className="secret">Hover to reveal public info sent to chain</div>
-//       )}
-//     </LabeledTextAreaContainer>
-//   );
-// };
-
-// const Label = styled.label`
-//   color: rgba(255, 255, 255, 0.8);
-// `;
-
-// const LabeledTextAreaContainer = styled(Col)`
-//   height: 15vh;
-//   border-radius: 4px;
-//   position: relative;
-//   gap: 8px;
-//   & .warning {
-//     color: #bd3333;
-//     font-size: 80%;
-//   }
-//   .secret {
-//     position: absolute;
-//     width: 100%;
-//     height: 100%;
-//     background: #171717;
-//     border: 1px dashed rgba(255, 255, 255, 0.5);
-//     color: rgba(255, 255, 255, 0.8);
-//     user-select: none;
-//     pointer-events: none;
-//     opacity: 0.95;
-//     justify-content: center;
-//     display: flex;
-//     align-items: center;
-//     transition: opacity 0.3s ease-in-out;
-//   }
-//   &:hover .secret,
-//   & :focus + .secret {
-//     opacity: 0;
-//   }
-// `;
-
-// const TextArea = styled.textarea`
-//   border: 1px solid rgba(255, 255, 255, 0.3);
-//   background: rgba(0, 0, 0, 0.3);
-//   border-radius: 4px;
-//   height: 480px;
-// 	padding: 16px;
-// 	transition: all 0.2s ease-in-out;
-// 	resize: none;
-//   &:hover {
-// 		border: 1px solid rgba(255, 255, 255, 0.8);
-// `;
-
-
-
 import _ from "lodash";
 import React, { CSSProperties } from "react";
 import styled, { ThemeProvider, css } from "styled-components";
@@ -206,6 +104,23 @@ const TextArea = styled.textarea<{ highlighted: boolean }>`
   resize: none;
   outline: none;
 
+  /* Apply different font sizes based on breakpoints */
+  ${({ theme }) => css`
+    font-size: 0.5rem; /* Default font size */
+
+    ${theme.breakpoints.up('sm')} {
+      font-size: 0.8rem; /* Font size for small screens and up */
+    }
+
+    ${theme.breakpoints.up('md')} {
+      font-size: 0.9rem; /* Font size for medium screens and up */
+    }
+
+    ${theme.breakpoints.up('lg')} {
+      font-size: 1rem; /* Font size for large screens and up */
+    }
+  `}
+
   ${({ highlighted, theme }) =>
     highlighted
       ? css`
diff --git a/packages/app/src/pages/AboutPage.tsx b/packages/app/src/pages/AboutPage.tsx
index 919b8d9..eb2acda 100644
--- a/packages/app/src/pages/AboutPage.tsx
+++ b/packages/app/src/pages/AboutPage.tsx
@@ -90,14 +90,14 @@ const AboutPage: React.FC = () => {
             <Box component="span" sx={{ display: { xs: 'none', sm: 'inline', md: 'inline' } }}>
               <br />
             </Box>
-            you received some email and mask out any private data,
+            &nbsp; you received some email and mask out any private data,
             <Box component="span" sx={{ display: { xs: 'none', sm: 'inline', md: 'inline' } }}>
               <br />
             </Box>
             without trusting our server to keep your privacy.
           </Typography>
 
-          <Box sx={{ display: 'flex', gap: { xs: '3px', sm: '10px' }, width: { xs: '240px', sm: '300px' }, marginX: 'auto' }}>
+          <Box sx={{ display: 'flex', gap: { xs: '5px', sm: '10px' }, width: { xs: '230px', sm: '300px' }, marginX: 'auto' }}>
             <Button endIcon={<ArrowOutwardIcon />} href='/'  highlighted={true}>
               Try it out
             </Button>
@@ -113,24 +113,24 @@ const AboutPage: React.FC = () => {
         {/* STEPS ROW */}
         <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%', height:'fit-content', gap: {xs:'12px', sm:'15px', md:'50px', }, marginX: 'auto', marginY: '80px', alignItems:'center'}}>
           <Box sx={{textAlign:'center'}}>
-            <MailOutlineIcon sx={{fontSize:{xs:'12px', md:'40px',}}}/>
-            <Typography sx={{fontSize:{xs:'10px', md:'15px' }}}>SEND RESET EMAIL</Typography>    
+            <MailOutlineIcon sx={{fontSize:{xs:'12px', sm:'25px', md:'40px',}}}/>
+            <Typography sx={{fontSize:{xs:'9px',sm:'10px', md:'15px' }}}>SEND RESET EMAIL</Typography>    
           </Box>
           <Box sx={{textAlign:'center'}}>
-            <ContentPasteIcon sx={{fontSize:{xs:'12px', md:'40px' }}}/>
-            <Typography sx={{fontSize:{xs:'10px', md:'15px' }}}>COPY/PASTE DKIM SIG</Typography> 
+            <ContentPasteIcon sx={{fontSize:{xs:'12px',  sm:'25px', md:'40px' }}}/>
+            <Typography sx={{fontSize:{xs:'9px',sm:'10px', md:'15px' }}}>COPY/PASTE DKIM SIG</Typography> 
           </Box>
           <Box sx={{textAlign:'center'}}>
-            <FingerprintIcon sx={{fontSize:{xs:'12px', md:'40px' }}}/>
-            <Typography sx={{fontSize:{xs:'10px', md:'15px' }}}>ADD ADDRESS</Typography>
+            <FingerprintIcon sx={{fontSize:{xs:'12px',  sm:'25px', md:'40px' }}}/>
+            <Typography sx={{fontSize:{xs:'9px',sm:'10px', md:'15px' }}}>ADD ADDRESS</Typography>
           </Box>
           <Box sx={{textAlign:'center'}}>
-            <RefreshIcon sx={{fontSize:{xs:'12px', md:'40px' }}}/>
-            <Typography sx={{fontSize:{xs:'10px', md:'15px' }}}>GENERATE PROOF</Typography>
+            <RefreshIcon sx={{fontSize:{xs:'12px',  sm:'25px', md:'40px' }}}/>
+            <Typography sx={{fontSize:{xs:'9px',sm:'10px', md:'15px' }}}>GENERATE PROOF</Typography>
           </Box>
           <Box sx={{textAlign:'center'}}>
-            <CheckCircleOutlineIcon sx={{fontSize:{xs:'12px', md:'40px' }}}/>
-            <Typography sx={{fontSize:{xs:'10px', md:'15px' }}}>VERIFY & MINT</Typography>
+            <CheckCircleOutlineIcon sx={{fontSize:{xs:'12px', sm:'25px', md:'40px' }}}/>
+            <Typography sx={{fontSize:{xs:'9px',sm:'10px', md:'15px' }}}>VERIFY & MINT</Typography>
           </Box>
         </Box>
         
@@ -164,7 +164,7 @@ const AboutPage: React.FC = () => {
                 <Typography variant='h5' paddingTop="10px" sx={{ fontSize: { xs: '12px', md: '15px' } }}>
                   Have a Question that isn’t answered?
                 </Typography>
-                <Stack spacing={2} direction="row" sx={{ paddingTop: "16px", width: '150px' }}>
+                <Stack spacing={2} direction="row" sx={{ paddingTop: "16px", width: {xs:'120px',sm:'150px'} }}>
                   <Button href='https://t.me/zkemail' target='_blank'> Drop Us a Line</Button>
                 </Stack>
               </Grid>
diff --git a/packages/app/src/pages/MainPage.tsx b/packages/app/src/pages/MainPage.tsx
index 15e798c..e5372db 100644
--- a/packages/app/src/pages/MainPage.tsx
+++ b/packages/app/src/pages/MainPage.tsx
@@ -408,49 +408,49 @@ export const MainPage: React.FC<{}> = (props) => {
 
 
 
-  // 
-  const [message, setMessage] = useState<string>("just a test: testing web worker");
 
-  useEffect(() => {
-    const worker = new Worker(new URL('../testWorker.js', import.meta.url));
+  // const [message, setMessage] = useState<string>("just a test: testing web worker");
 
-    worker.onmessage = (e) => {
-      setMessage(e.data);
-      worker.terminate();
-    };
+  // useEffect(() => {
+  //   const worker = new Worker(new URL('../testWorker.js', import.meta.url));
 
-    worker.postMessage({});
-  }, []);
+  //   worker.onmessage = (e) => {
+  //     setMessage(e.data);
+  //     worker.terminate();
+  //   };
 
+  //   worker.postMessage({});
+  // }, []);
 
 
 
 
-  const generateProofWithWorker = (input: any, circuitArtifactsUrl: string, circuitName: string): Promise<{ proof: any, publicSignals: any, error?: string }> => {
-    return new Promise((resolve, reject) => {
-      // const proofWorker = new Worker(new URL('../proofWorker.tsx', import.meta.url));
-      const proofWorker = new Worker(new URL('../proofWorker.tsx', import.meta.url), { type: 'module' });
 
+  // const generateProofWithWorker = (input: any, circuitArtifactsUrl: string, circuitName: string): Promise<{ proof: any, publicSignals: any, error?: string }> => {
+  //   return new Promise((resolve, reject) => {
+  //     // const proofWorker = new Worker(new URL('../proofWorker.tsx', import.meta.url));
+  //     const proofWorker = new Worker(new URL('../proofWorker.tsx', import.meta.url), { type: 'module' });
 
-      proofWorker.onmessage = (e) => {
-        resolve(e.data);
-        proofWorker.terminate();
-      };
 
-      proofWorker.onerror = (e) => {
-        reject(new Error(`Worker error: ${e.message}`));
-        proofWorker.terminate();
-      };
+  //     proofWorker.onmessage = (e) => {
+  //       resolve(e.data);
+  //       proofWorker.terminate();
+  //     };
 
-      proofWorker.postMessage({ input, circuitArtifactsUrl, circuitName });
-    });
-  };
+  //     proofWorker.onerror = (e) => {
+  //       reject(new Error(`Worker error: ${e.message}`));
+  //       proofWorker.terminate();
+  //     };
+
+  //     proofWorker.postMessage({ input, circuitArtifactsUrl, circuitName });
+  //   });
+  // };
 
 
 
   return (
     <Grid container >
-      {isOverlayVisible && <Overlay>Generating Proof... Reload page if Unresponsive after 6 Minutes </Overlay>}
+      {isOverlayVisible && <Overlay> </Overlay>}
       {showBrowserWarning && (
         <TopBanner
           message={"ZK Email only works on Chrome or Chromium-based browsers."}
@@ -460,7 +460,7 @@ export const MainPage: React.FC<{}> = (props) => {
 
       <Grid item xs={12} md={6} sx={{   height: '100vh', overflowY: 'auto', backgroundColor:'#ffbfbf', background:'radial-gradient(70.71% 70.71% at 50% 50%, #FFF 19%, rgba(255, 255, 255, 0.00) 61%), linear-gradient(38deg, rgba(255, 255, 255, 0.00) 60%, rgba(255, 255, 255, 0.69) 100%), linear-gradient(45deg, #FFF 10%, rgba(255, 255, 255, 0.00) 23.5%), linear-gradient(36deg, #FFF 12.52%, rgba(255, 255, 255, 0.00) 76.72%), linear-gradient(214deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 220, 234, 0.40) 37.53%, rgba(255, 255, 255, 0.00) 71%), linear-gradient(212deg, rgba(255, 255, 255, 0.00) 15%, #E4F1FE 72.5%, rgba(255, 255, 255, 0.00) 91.5%)'}}>
       <Nav splitscreen={true}/>
-      <Box sx={{backgroundColor:'#FFFFFF', padding:'20px', color:'#000000', minHeight:'650px', paddingX:'60px'}} >
+      <Box sx={{backgroundColor:'#FFFFFF', padding:'20px', color:'#000000', minHeight:'650px', paddingX:{sm: '40px', md:'60px'}}} >
       <Stepper
         steps={steps}
         activeStep={activeStep}
@@ -472,8 +472,7 @@ export const MainPage: React.FC<{}> = (props) => {
           <Box sx={{marginTop:'100px', marginBottom: '40px'}}>
             <Typography variant='h1' sx={{marginBottom:'20px'}}>SEND TWITTER PASSWORD RESET EMAIL</Typography>
             <Typography>Send yourself a password reset email from Twitter. <br></br>(Reminder: Twitter name with emoji might fail to pass DKIM verification)</Typography>
-            {/* test web worker */}
-            <Typography sx={{marginTop:'20px', fontWeight:'bold', color:'red'}}>{message}</Typography>
+            {/* <Typography sx={{marginTop:'20px', fontWeight:'bold', color:'red'}}>{message}</Typography>  */}
           </Box>
         )}
         {/* --------- END OF: SEND TWITTER PASSWORD RESET EMAIL SECTION - STEP 0 --------- */}
@@ -529,30 +528,50 @@ export const MainPage: React.FC<{}> = (props) => {
                   ) : (
                     <>
                     <Typography variant="h6" sx={{ marginBottom: '1rem' }}>
-                    Select the 'Password reset request' email from twitter, then proceed
+                    Select the "Password Reset Request" Email from Twitter!
                     </Typography>
                     {fetchedEmails.map((email, index) => (
-                      <div
-                        style={{
+                      <Box
+                        sx={{
                           borderBottom: "1px solid lightgrey",
                           width: "100%",
                           padding: "0 1rem",
                           display: "flex",
                           justifyContent: "space-between",
                           cursor: 'pointer',
-                          color:
-                            email.decodedContents === emailFull
-                              ? theme.palette.accent.main
-                              : theme.palette.secondary.main,
                           borderTop: index === 0 ? "1px solid white" : "none", // Conditional border top
                         }}
                         onClick={() => {
                           setEmailFull(email.decodedContents);
                         }}
                       >
-                      <p style={{   overflow: 'hidden',}}>{email.subject}</p>
-                      <p style={{ flex:'end', marginRight:'0px', width:'100px', textAlign:'right'}}>{formatDateTime(email.internalDate)}</p>
-                      </div>
+                        <Typography 
+                          sx={{   
+                            overflow: 'hidden', 
+                            padding: "0.7rem 0rem",                          
+                            color:
+                                email.decodedContents === emailFull
+                                  ? theme.palette.accent.main
+                                  : theme.palette.secondary.main
+                        }}>
+                          {email.subject}
+                        </Typography>
+                        <Typography 
+                          sx={{
+                            flex:'end', 
+                            marginRight:'0px', 
+                            width:'100px', 
+                            textAlign:'right',
+                            overflow: 'hidden', 
+                            padding: "0.7rem 0rem",                          
+                            color:
+                                email.decodedContents === emailFull
+                                  ? theme.palette.accent.main
+                                  : theme.palette.secondary.main
+                        }}>
+                          {formatDateTime(email.internalDate)}
+                        </Typography>
+                      </Box>
                     ))}
                     </>
                   )}
@@ -728,14 +747,13 @@ export const MainPage: React.FC<{}> = (props) => {
                   console.time("zk-gen");
                   recordTimeForActivity("startedProving");
                   setDisplayMessage(
-                    "Starting proof generation... (this will take 6-10 minutes and ~5GB RAM)"
+                    "Starting proof generation (this will take 6-10 minutes & ~5GB RAM)"
                   );
                   setStatus("generating-proof");
                   console.log("Starting proof generation");
                   // alert("Generating proof, will fail due to input");
 
 
-                  // //TEST CHANGES W/ WORKER BELOW COMMENTED OUT
                   const { proof, publicSignals } = await generateProof(
                     input,
                     // @ts-ignore
@@ -749,7 +767,7 @@ export const MainPage: React.FC<{}> = (props) => {
                   //   CIRCUIT_NAME
                   // );
 
-                  // TEST CHANGES  W/ WORKER ABOVE COMMENTED OUT
+
 
 
                   //const proof = JSON.parse('{"pi_a": ["19201501460375869359786976350200749752225831881815567077814357716475109214225", "11505143118120261821370828666956392917988845645366364291926723724764197308214", "1"], "pi_b": [["17114997753466635923095897108905313066875545082621248342234075865495571603410", "7192405994185710518536526038522451195158265656066550519902313122056350381280"], ["13696222194662648890012762427265603087145644894565446235939768763001479304886", "2757027655603295785352548686090997179551660115030413843642436323047552012712"], ["1", "0"]], "pi_c": ["6168386124525054064559735110298802977718009746891233616490776755671099515304", "11077116868070103472532367637450067545191977757024528865783681032080180232316", "1"], "protocol": "groth16", "curve": "bn128"}');
@@ -822,7 +840,7 @@ export const MainPage: React.FC<{}> = (props) => {
               <div data-testid={"status-" + status}></div>
             )}
             <TimerDisplay timers={stopwatch} />
-            {status === 'generating-proof' && <CounterDisplay>Elapsed Time: {counter}s</CounterDisplay>}
+            {/* {status === 'generating-proof' && <CounterDisplay>Elapsed Time: {counter}s</CounterDisplay>} */}
           </ProcessStatus>
           </Column>
           </Box>   
diff --git a/packages/app/src/proofWorker.tsx b/packages/app/src/proofWorker.tsx
index 1d8adba..eaabd95 100644
--- a/packages/app/src/proofWorker.tsx
+++ b/packages/app/src/proofWorker.tsx
@@ -1,26 +1,29 @@
-// src/proofWorker.js
+// // Polyfill for global
+// self.global = self;
 
-// import { generateProof } from "@zk-email/helpers/dist/zkp";
+// import { generateProof } from "@zk-email/helpers/dist/chunked-zkey";
 
-import { generateProof } from "@zk-email/helpers/dist/chunked-zkey";
 
+// self.onmessage = async (e) => {
+//   const { input, circuitArtifactsUrl, circuitName } = e.data;
 
-self.onmessage = async (e) => {
-  const { input, circuitArtifactsUrl, circuitName } = e.data;
+//   console.log('input', input)
+//   console.log('circuitArtifactsUrl', circuitArtifactsUrl)
+//   console.log('circuitName', circuitName)
 
-  console.log('input', input)
-  console.log('circuitArtifactsUrl', circuitArtifactsUrl)
-  console.log('circuitName', circuitName)
 
-  try {
-    const { proof, publicSignals } = await generateProof(
-      input,
-      circuitArtifactsUrl,
-      circuitName
-    );
+//   var global = self;
 
-    self.postMessage({ proof, publicSignals });
-  } catch (error) {
-    self.postMessage({ error: error.message });
-  }
-};
+//   try {
+//     const { proof, publicSignals } = await generateProof(
+//       input,
+//       circuitArtifactsUrl,
+//       circuitName
+//     );
+
+//     self.postMessage({ proof, publicSignals });
+//   } catch (error) {
+//     self.postMessage({ error: error.message });
+//   }
+  
+// };
diff --git a/packages/app/src/theme.tsx b/packages/app/src/theme.tsx
index fb295cc..52a3c6b 100644
--- a/packages/app/src/theme.tsx
+++ b/packages/app/src/theme.tsx
@@ -98,7 +98,6 @@
 
 // export default theme;
 
-
 import { createTheme } from '@mui/material/styles';
 import { Palette, PaletteOptions } from '@mui/material/styles/createPalette';
 
@@ -135,32 +134,32 @@ const theme = createTheme({
   typography: {
     fontFamily: "Space Grotesk",
     h1: {
-      fontSize: '1.4rem', // Default font size for the smallest screens (xs)
+      fontSize: '1.4rem',
       letterSpacing: -1,
       fontWeight: '500',
       '@media (min-width:600px)': {
-        fontSize: '1.5rem', // font size for small screens
+        fontSize: '1.5rem',
       },
       '@media (min-width:960px)': {
-        fontSize: '1.7rem', // font size for medium screens
+        fontSize: '1.7rem',
       },
       '@media (min-width:1280px)': {
-        fontSize: '2rem', // font size for large screens
+        fontSize: '2rem',
       },
     },
     h2: {
-      fontSize: '1.75rem', // Default font size for the smallest screens (xs)
+      fontSize: '1.75rem',
       fontWeight: '700', 
       color: '#333741',
       letterSpacing: -1,
       '@media (min-width:600px)': {
-        fontSize: '2.5rem', // font size for small screens
+        fontSize: '2.5rem',
       },
       '@media (min-width:960px)': {
-        fontSize: '3.0rem', // font size for medium screens
+        fontSize: '3.0rem',
       },
       '@media (min-width:1280px)': {
-        fontSize: '3.5rem', // font size for large screens
+        fontSize: '3.5rem',
       },
     },
     h4: {
@@ -171,43 +170,93 @@ const theme = createTheme({
     },
     h6: {
       color: '#8E8E8E',
-      fontSize: '20px', // Default font size for the smallest screens (xs)
+      fontSize: '.7rem',
       fontWeight: '500',
       lineHeight: '140%',
+      '@media (min-width:600px)': {
+        fontSize: '0.85rem',
+      },
+      '@media (min-width:960px)': {
+        fontSize: '1rem',
+      },
+      '@media (min-width:1280px)': {
+        fontSize: '1.2rem',
+      },
     },
     body1: {
-      fontSize: '0.875rem', // Default font size for the smallest screens (xs)
+      fontSize: '0.6rem',
       fontWeight: '400',
       lineHeight: '1.5',
-      color: '#333741', // Ensure good contrast and readability
+      color: '#333741',
       '@media (min-width:600px)': {
-        fontSize: '0.85rem', // font size for small screens
+        fontSize: '0.8rem',
       },
       '@media (min-width:960px)': {
-        fontSize: '0.9rem', // font size for medium screens
+        fontSize: '0.9rem',
       },
       '@media (min-width:1280px)': {
-        fontSize: '1.0rem', // font size for large screens
+        fontSize: '1.0rem',
       },
     },
     body2: {
-      fontSize: '0.5rem', // Default font size for the smallest screens (xs)
+      fontSize: '0.5rem',
       fontWeight: '400',
       lineHeight: '1.5',
       color: '#333741',
       '@media (min-width:600px)': {
-        fontSize: '0.85rem', // font size for small screens
+        fontSize: '0.85rem',
       },
       '@media (min-width:960px)': {
-        fontSize: '0.9rem', // font size for medium screens
+        fontSize: '0.9rem',
       },
       '@media (min-width:1280px)': {
-        fontSize: '1.0rem', // font size for large screens
+        fontSize: '1.0rem',
       },
     }
   },
 
   components: {
+    MuiInputBase: {
+      styleOverrides: {
+        root: {
+          fontFamily: 'Space Grotesk', // Use the same font family as your theme
+          fontSize: '0.6rem', // Customize the font size for text areas
+          lineHeight: '1.5',
+          color: '#333741',
+          '@media (min-width:600px)': {
+            fontSize: '0.85rem',
+          },
+          '@media (min-width:960px)': {
+            fontSize: '0.9rem',
+          },
+          '@media (min-width:1280px)': {
+            fontSize: '1.0rem',
+          },
+        },
+      },
+    },
+
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          '& textarea': {
+            fontFamily: 'Space Grotesk',
+            fontSize: '0.2rem', // Customize the font size inside the textarea
+            lineHeight: '1.5',
+            color: '#333741',
+            '@media (min-width:600px)': {
+              fontSize: '0.85rem',
+            },
+            '@media (min-width:960px)': {
+              fontSize: '0.9rem',
+            },
+            '@media (min-width:1280px)': {
+              fontSize: '1.0rem',
+            },
+          },
+        },
+      },
+    },
   },
 });
 
diff --git a/packages/app/vite.config.ts b/packages/app/vite.config.ts
index dbec791..d2da862 100644
--- a/packages/app/vite.config.ts
+++ b/packages/app/vite.config.ts
@@ -1,7 +1,70 @@
+// import react from "@vitejs/plugin-react";
+// import tsconfig from "vite-tsconfig-paths";
+// import "rollup-plugin-node-polyfills";
+// import commonjs from 'vite-plugin-commonjs'
+
+// export default {
+//   server: {
+//     port: 3000,
+//   },
+//   preview: {
+//     port: 3000,
+//   },
+//   publicDir: "public",
+//   plugins: [commonjs(), react(), tsconfig()],
+//   resolve: {
+//     alias: {
+//       "node:buffer": "buffer",
+//       "node:stream": "stream-browserify",
+//       buffer: "buffer",
+//       process: "rollup-plugin-node-polyfills/polyfills/process-es6",
+//       util: "rollup-plugin-node-polyfills/polyfills/util",
+//       sys: "util",
+//       events: "rollup-plugin-node-polyfills/polyfills/events",
+//       stream: "stream-browserify",
+//       path: "rollup-plugin-node-polyfills/polyfills/path",
+//       querystring: "rollup-plugin-node-polyfills/polyfills/qs",
+//       // punycode: "rollup-plugin-node-polyfills/polyfills/punycode",
+//       url: "rollup-plugin-node-polyfills/polyfills/url",
+//       crypto: "crypto-browserify",
+//       // string_decoder: "rollup-plugin-node-polyfills/polyfills/string-decoder",
+//       http: "rollup-plugin-node-polyfills/polyfills/http",
+//       https: "rollup-plugin-node-polyfills/polyfills/http",
+//       os: "rollup-plugin-node-polyfills/polyfills/os",
+//       // crypto: "rollup-plugin-node-polyfills/polyfills/crypto",
+//       // crypto: "crypto-browserify",
+//       assert: "rollup-plugin-node-polyfills/polyfills/assert",
+//       constants: "rollup-plugin-node-polyfills/polyfills/constants",
+//       _stream_duplex:
+//         "rollup-plugin-node-polyfills/polyfills/readable-stream/duplex",
+//       _stream_passthrough:
+//         "rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough",
+//       _stream_readable:
+//         "rollup-plugin-node-polyfills/polyfills/readable-stream/readable",
+//       _stream_writable:
+//         "rollup-plugin-node-polyfills/polyfills/readable-stream/writable",
+//       _stream_transform:
+//         "rollup-plugin-node-polyfills/polyfills/readable-stream/transform",
+//       timers: "rollup-plugin-node-polyfills/polyfills/timers",
+//       console: "rollup-plugin-node-polyfills/polyfills/console",
+//       vm: "rollup-plugin-node-polyfills/polyfills/vm",
+//       zlib: "rollup-plugin-node-polyfills/polyfills/zlib",
+//       tty: "rollup-plugin-node-polyfills/polyfills/tty",
+//       domain: "rollup-plugin-node-polyfills/polyfills/domain",
+//     },
+//   },
+// };
+
+
+
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
 import react from "@vitejs/plugin-react";
 import tsconfig from "vite-tsconfig-paths";
 import "rollup-plugin-node-polyfills";
 import commonjs from 'vite-plugin-commonjs'
+import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
+import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
 
 export default {
   server: {
@@ -12,6 +75,25 @@ export default {
   },
   publicDir: "public",
   plugins: [commonjs(), react(), tsconfig()],
+
+  optimizeDeps: {
+    esbuildOptions: {
+      // Node.js global to browser globalThis
+      define: {
+        global: 'globalThis',
+      }
+,      
+      // Enable esbuild polyfill plugins
+      // plugins: [
+      //   NodeGlobalsPolyfillPlugin({
+      //     process: true,
+      //     buffer: true
+      //   }),
+      //   NodeModulesPolyfillPlugin()
+      // ]
+    }
+  },
+
   resolve: {
     alias: {
       "node:buffer": "buffer",
@@ -53,4 +135,4 @@ export default {
       domain: "rollup-plugin-node-polyfills/polyfills/domain",
     },
   },
-};
+};
\ No newline at end of file