Merge pull request #1903 from getAlby/fix/1902_align-buttons-bottom

Fix/1902 align buttons bottom
getAlby · Dec 22, 2022 · 7f93819 · 7f93819
2 parents f724439 + 0f82b68
commit 7f93819
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 41 deletions.
diff --git a/src/app/screens/ConfirmKeysend/index.tsx b/src/app/screens/ConfirmKeysend/index.tsx
@@ -4,7 +4,7 @@ import Container from "@components/Container";
 import PaymentSummary from "@components/PaymentSummary";
 import PublisherCard from "@components/PublisherCard";
 import SuccessMessage from "@components/SuccessMessage";
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
@@ -131,8 +131,8 @@ function ConfirmKeysend() {
     <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
       <ScreenHeader title={t("title")} />
       {!successMessage ? (
-        <Container justifyBetween maxWidth="sm">
-          <form onSubmit={handleSubmit}>
+        <form onSubmit={handleSubmit} className="h-full">
+          <Container justifyBetween maxWidth="sm">
             <div>
               <PublisherCard
                 title={origin.name}
@@ -166,8 +166,8 @@ function ConfirmKeysend() {
               loading={loading}
               onCancel={reject}
             />
-          </form>
-        </Container>
+          </Container>
+        </form>
       ) : (
         <Container maxWidth="sm">
           <PublisherCard

diff --git a/src/app/screens/ConfirmPayment/index.tsx b/src/app/screens/ConfirmPayment/index.tsx
@@ -141,8 +141,8 @@ function ConfirmPayment() {
     <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
       <ScreenHeader title={!successMessage ? t("title") : tCommon("success")} />
       {!successMessage ? (
-        <Container justifyBetween maxWidth="sm">
-          <form onSubmit={handleSubmit}>
+        <form onSubmit={handleSubmit} className="h-full">
+          <Container justifyBetween maxWidth="sm">
             <div>
               {navState.origin && (
                 <PublisherCard
@@ -183,8 +183,8 @@ function ConfirmPayment() {
                 <em>{tComponents("only_trusted")}</em>
               </p>
             </div>
-          </form>
-        </Container>
+          </Container>
+        </form>
       ) : (
         <Container justifyBetween maxWidth="sm">
           <ResultCard

diff --git a/src/app/screens/ConfirmRequestPermission/index.tsx b/src/app/screens/ConfirmRequestPermission/index.tsx
@@ -44,8 +44,8 @@ const ConfirmRequestPermission: FC = () => {
   return (
     <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
       <ScreenHeader title={t("title")} />
-      <Container justifyBetween maxWidth="sm">
-        <form onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmit} className="h-full">
+        <Container justifyBetween maxWidth="sm">
           <div>
             <PublisherCard
               title={origin.name}
@@ -88,8 +88,8 @@ const ConfirmRequestPermission: FC = () => {
               onCancel={reject}
             />
           </div>
-        </form>
-      </Container>
+        </Container>
+      </form>
     </div>
   );
 };

diff --git a/src/app/screens/Keysend/index.tsx b/src/app/screens/Keysend/index.tsx
@@ -107,8 +107,8 @@ function Keysend() {
       />
       {!successMessage ? (
         <>
-          <Container justifyBetween maxWidth="sm">
-            <form onSubmit={handleSubmit}>
+          <form onSubmit={handleSubmit} className="h-full">
+            <Container justifyBetween maxWidth="sm">
               <div>
                 {destination && <PublisherCard title={destination} />}
                 <ContentMessage
@@ -134,8 +134,8 @@ function Keysend() {
                 loading={loading}
                 disabled={loading || !amountSat}
               />
-            </form>
-          </Container>
+            </Container>
+          </form>
         </>
       ) : (
         <Container justifyBetween maxWidth="sm">

diff --git a/src/app/screens/MakeInvoice/index.tsx b/src/app/screens/MakeInvoice/index.tsx
@@ -4,7 +4,7 @@ import PublisherCard from "@components/PublisherCard";
 import SatButtons from "@components/SatButtons";
 import DualCurrencyField from "@components/form/DualCurrencyField";
 import TextField from "@components/form/TextField";
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import ScreenHeader from "~/app/components/ScreenHeader";
 import { useSettings } from "~/app/context/SettingsContext";
@@ -105,9 +105,8 @@ function MakeInvoice() {
   return (
     <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
       <ScreenHeader title={t("title")} />
-
-      <Container justifyBetween maxWidth="sm">
-        <form onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmit} className="h-full">
+        <Container justifyBetween maxWidth="sm">
           <div>
             <PublisherCard
               title={origin.name}
@@ -170,8 +169,8 @@ function MakeInvoice() {
               <em>{tComponents("confirm_or_cancel.only_trusted")}</em>
             </p>
           </div>
-        </form>
-      </Container>
+        </Container>
+      </form>
     </div>
   );
 }

diff --git a/src/app/screens/Nostr/Confirm.tsx b/src/app/screens/Nostr/Confirm.tsx
@@ -55,8 +55,8 @@ function NostrConfirm() {
   return (
     <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
       <ScreenHeader title={t("title")} />
-      <Container justifyBetween maxWidth="sm">
-        <form onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmit} className="h-full">
+        <Container justifyBetween maxWidth="sm">
           <div>
             <PublisherCard
               title={origin.name}
@@ -110,8 +110,8 @@ function NostrConfirm() {
               {t("block_and_ignore", { host: origin.host })}
             </a>
           </div>
-        </form>
-      </Container>
+        </Container>
+      </form>
     </div>
   );
 }

diff --git a/src/app/screens/Nostr/ConfirmSignMessage.tsx b/src/app/screens/Nostr/ConfirmSignMessage.tsx
@@ -69,8 +69,8 @@ function ConfirmSignMessage() {
     <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
       <ScreenHeader title={t("title")} />
       {!successMessage ? (
-        <Container justifyBetween maxWidth="sm">
-          <form onSubmit={handleSubmit}>
+        <form onSubmit={handleSubmit} className="h-full">
+          <Container justifyBetween maxWidth="sm">
             <div>
               <PublisherCard
                 title={origin.name}
@@ -103,8 +103,8 @@ function ConfirmSignMessage() {
               loading={loading}
               onCancel={reject}
             />
-          </form>
-        </Container>
+          </Container>
+        </form>
       ) : (
         <Container maxWidth="sm">
           <PublisherCard

diff --git a/src/app/screens/Receive/index.tsx b/src/app/screens/Receive/index.tsx
@@ -10,8 +10,7 @@ import IconButton from "@components/IconButton";
 import Loading from "@components/Loading";
 import DualCurrencyField from "@components/form/DualCurrencyField";
 import TextField from "@components/form/TextField";
-import { useState, useEffect, useRef } from "react";
-import type { FormEvent } from "react";
+import { useEffect, useRef, useState } from "react";
 import Confetti from "react-confetti";
 import { useTranslation } from "react-i18next";
 import QRCode from "react-qr-code";
@@ -119,6 +118,11 @@ function Receive() {
     }
   }
 
+  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    createInvoice();
+  }
+
   function renderInvoice() {
     if (!invoice) return null;
     return (
@@ -204,14 +208,8 @@ function Receive() {
       {invoice ? (
         <Container maxWidth="sm">{renderInvoice()}</Container>
       ) : (
-        <form
-          onSubmit={(e: FormEvent) => {
-            e.preventDefault();
-            createInvoice();
-          }}
-          className="h-full"
-        >
-          <fieldset disabled={loading}>
+        <form onSubmit={handleSubmit} className="h-full">
+          <fieldset className="h-full" disabled={loading}>
             <Container justifyBetween maxWidth="sm">
               <div className="py-4">
                 <div className="mb-4">