Push buttons to bottom in Send and Receive Screens (#1672)

* fix: remove extra margins on container

* fix: push buttons to bottom in send and receive screens

Also fixes green background issue #1650

* fix: add discernible text for button

Co-authored-by: Adithya Vardhan <[email protected]>

Author: im-adithya

src/app/components/Container.tsx

@@ -29,7 +29,7 @@ function Container({
 
   return (
     <div
-      className={`container mx-auto px-4 mb-4 ${getMaxWidthClass(maxWidth)} ${
+      className={`container mx-auto px-4 ${getMaxWidthClass(maxWidth)} ${
         justifyBetween
           ? "h-full flex flex-col justify-between overflow-y-auto no-scrollbar"
           : ""

src/app/screens/Receive/index.tsx

@@ -122,7 +122,7 @@ function Receive() {
   function renderInvoice() {
     if (!invoice) return null;
     return (
-      <div>
+      <div className="py-4">
         <div className="relative p-8 bg-white rounded-lg shadow-sm ring-1 ring-black ring-opacity-5 flex justify-center items-center overflow-hidden">
           <QRCode value={invoice.paymentRequest.toUpperCase()} level="M" />
           {paid && (
@@ -191,7 +191,7 @@ function Receive() {
   }
 
   return (
-    <div>
+    <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
       <Header
         title={t("title")}
         headerLeft={
@@ -201,56 +201,52 @@ function Receive() {
           />
         }
       />
-      <div className="py-4">
-        <Container maxWidth="sm">
-          <div className={`${paid ? "bg-green-bitcoin" : ""}`}>
-            {invoice ? (
-              renderInvoice()
-            ) : (
-              <form
-                onSubmit={(e: FormEvent) => {
-                  e.preventDefault();
-                  createInvoice();
-                }}
-              >
-                <div className="mb-4">
-                  <DualCurrencyField
-                    id="amount"
-                    min={0}
-                    label={t("amount.label")}
-                    placeholder={t("amount.placeholder")}
-                    fiatValue={fiatAmount}
-                    onChange={handleChange}
-                    autoFocus
-                  />
-                </div>
-
-                <div className="mb-4">
-                  <TextField
-                    id="description"
-                    label={t("description.label")}
-                    placeholder={t("description.placeholder")}
-                    onChange={handleChange}
-                  />
-                </div>
+      {invoice ? (
+        <Container maxWidth="sm">{renderInvoice()}</Container>
+      ) : (
+        <form
+          onSubmit={(e: FormEvent) => {
+            e.preventDefault();
+            createInvoice();
+          }}
+          className="h-full"
+        >
+          <Container justifyBetween maxWidth="sm">
+            <div className="py-4">
+              <div className="mb-4">
+                <DualCurrencyField
+                  id="amount"
+                  min={0}
+                  label={t("amount.label")}
+                  placeholder={t("amount.placeholder")}
+                  fiatValue={fiatAmount}
+                  onChange={handleChange}
+                  autoFocus
+                />
+              </div>
 
-                <div className="text-center mb-4">
-                  <div className="mb-4">
-                    <Button
-                      type="submit"
-                      label={t("actions.create_invoice")}
-                      fullWidth
-                      primary
-                      loading={loading}
-                      disabled={loading}
-                    />
-                  </div>
-                </div>
-              </form>
-            )}
-          </div>
-        </Container>
-      </div>
+              <div className="mb-4">
+                <TextField
+                  id="description"
+                  label={t("description.label")}
+                  placeholder={t("description.placeholder")}
+                  onChange={handleChange}
+                />
+              </div>
+            </div>
+            <div className="mb-4">
+              <Button
+                type="submit"
+                label={t("actions.create_invoice")}
+                fullWidth
+                primary
+                loading={loading}
+                disabled={loading}
+              />
+            </div>
+          </Container>
+        </form>
+      )}
     </div>
   );
 }

src/app/screens/Send/index.tsx

@@ -154,7 +154,7 @@ function Send() {
   }
 
   return (
-    <div>
+    <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
       <Header
         title={t("title")}
         headerLeft={
@@ -164,9 +164,9 @@ function Send() {
           />
         }
       />
-      <div className="py-4">
-        <Container maxWidth="sm">
-          <form onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmit} className="h-full">
+        <Container justifyBetween maxWidth="sm">
+          <div className="pt-4">
             <TextField
               id="invoice"
               label={t("input.label")}
@@ -181,6 +181,7 @@ function Send() {
               }
               endAdornment={
                 <button
+                  aria-label="Scan QR"
                   type="button"
                   className="flex justify-center items-center w-10 h-8"
                   onClick={() => setQrIsOpen(true)}
@@ -189,19 +190,19 @@ function Send() {
                 </button>
               }
             />
-            <div className="mt-4">
-              <Button
-                type="submit"
-                label={tCommon("actions.continue")}
-                primary
-                fullWidth
-                loading={loading}
-                disabled={invoice === "" || loading}
-              />
-            </div>
-          </form>
+          </div>
+          <div className="my-4">
+            <Button
+              type="submit"
+              label={tCommon("actions.continue")}
+              primary
+              fullWidth
+              loading={loading}
+              disabled={invoice === "" || loading}
+            />
+          </div>
         </Container>
-      </div>
+      </form>
     </div>
   );
 }