fix: disable buttons when text areas are empty

src/components/Button.tsx

@@ -20,4 +20,8 @@ export const Button = styled.button`
   &:hover {
     background: #9b8df2;
   }
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 `;

src/components/LabeledTextArea.tsx

@@ -69,14 +69,15 @@ const LabeledTextAreaContainer = styled(Col)`
     width: 100%;
     height: 100%;
     background: #171717;
-    color: #fff;
+    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.5s ease-in-out;
+    transition: opacity 0.3s ease-in-out;
   }
   &:hover .secret,
   & :focus + .secret {

src/pages/MainPage.tsx

@@ -146,7 +146,11 @@ export const MainPage: React.FC<{}> = (props) => {
             }}
           />
           <Button
-            disabled={displayMessage !== "Prove"}
+            disabled={
+              displayMessage !== "Prove" ||
+              emailFull.length === 0 ||
+              ethereumAddress.length === 0
+            }
             onClick={async () => {
               console.log("Generating proof...");
               const mail =
@@ -240,7 +244,7 @@ export const MainPage: React.FC<{}> = (props) => {
             // }
           />
           <Button
-            disabled={emailFull.trim().length == 0}
+            disabled={emailFull.trim().length === 0 || proof.length === 0}
             onClick={async () => {
               try {
                 setLastAction("verify");