Merge pull request #14 from interledger/11-alignment-issues-on-live

Fix height issue and button sizes
interledger · Apr 29, 2024 · 684f376 · 684f376
2 parents 0288f74 + 4ade32f
commit 684f376
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 57 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -52,15 +52,13 @@ export default function App() {
         <Links />
       </head>
 
-      <body className="bg-background text-primary">
-        <div className="flex h-screen items-center justify-center">
-          <div className="bg-foreground py-4 px-6 w-full h-full md:w-3/4 md:h-5/6 shadow-md rounded-sm">
-            <DialogProvider>
-              <DialPadProvider>
-                <Outlet />
-              </DialPadProvider>
-            </DialogProvider>
-          </div>
+      <body className="bg-background h-screen text-primary flex justify-center items-center">
+        <div className="bg-foreground h-fit py-10 px-6 w-full md:w-3/4 shadow-md rounded-sm">
+          <DialogProvider>
+            <DialPadProvider>
+              <Outlet />
+            </DialPadProvider>
+          </DialogProvider>
         </div>
         <ScrollRestoration />
         <Scripts />

diff --git a/app/routes/pay.tsx b/app/routes/pay.tsx
@@ -88,14 +88,15 @@ export default function Pay() {
                 {...conform.input(fields.amount)}
                 value={Number(amountValue)}
               />
-              <Button
-                aria-label="pay"
-                type="submit"
-                size="xl"
-                onClick={() => setOpen(true)}
-              >
-                Pay with Interledger
-              </Button>
+              <div className="flex justify-center">
+                <Button
+                  aria-label="pay"
+                  type="submit"
+                  onClick={() => setOpen(true)}
+                >
+                  Pay with Interledger
+                </Button>
+              </div>
             </div>
           </Form>
         </div>

diff --git a/app/routes/payment.tsx b/app/routes/payment.tsx
@@ -107,14 +107,15 @@ export default function PayRequest() {
               {...conform.input(fields.incomingPaymentUrl)}
               value={data.url || ""}
             />
-            <Button
-              aria-label="pay"
-              type="submit"
-              size="xl"
-              onClick={() => setOpen(true)}
-            >
-              Pay with Interledger
-            </Button>
+            <div className="flex justify-center">
+              <Button
+                aria-label="pay"
+                type="submit"
+                onClick={() => setOpen(true)}
+              >
+                Pay with Interledger
+              </Button>
+            </div>
           </Form>
         </div>
       </div>

diff --git a/app/routes/quote.tsx b/app/routes/quote.tsx
@@ -94,27 +94,26 @@ export default function Quote() {
                         value={data.receiveAmount}
                         variant="info"
                       ></Field>
-                      <Button
-                        aria-label="confirm-pay"
-                        type="submit"
-                        size="xl"
-                        className="mb-5"
-                        value="CONFIRM"
-                        name="action"
-                      >
-                        Confirm payment
-                      </Button>
-                      <Button
-                        aria-label="cancel-pay"
-                        type="submit"
-                        size="xl"
-                        variant="destructive"
-                        value="CANCEL"
-                        name="action"
-                        onClick={() => setOpen(false)}
-                      >
-                        Cancel payment
-                      </Button>
+                      <div className="flex justify-center items-center gap-3">
+                        <Button
+                          aria-label="confirm-pay"
+                          type="submit"
+                          value="CONFIRM"
+                          name="action"
+                        >
+                          Confirm payment
+                        </Button>
+                        <Button
+                          aria-label="cancel-pay"
+                          type="submit"
+                          variant="destructive"
+                          value="CANCEL"
+                          name="action"
+                          onClick={() => setOpen(false)}
+                        >
+                          Cancel payment
+                        </Button>
+                      </div>
                     </Form>
                   </div>
                 </div>

diff --git a/app/routes/request.tsx b/app/routes/request.tsx
@@ -73,14 +73,11 @@ export default function Request() {
                 {...conform.input(fields.amount)}
                 value={amountValue}
               />
-              <Button
-                aria-label="pay"
-                type="submit"
-                variant="outline"
-                size="xl"
-              >
-                Create Request
-              </Button>
+              <div className="flex justify-center">
+                <Button aria-label="pay" type="submit" variant="outline">
+                  Create Request
+                </Button>
+              </div>
             </div>
           </Form>
         </div>

diff --git a/app/routes/shareRequest.tsx b/app/routes/shareRequest.tsx
@@ -106,9 +106,11 @@ export default function ShareRequest() {
             >
               Share payment link
             </Button>
-            <Button type="submit" className="mt-8" size="xl">
-              Close
-            </Button>
+            <div className="flex justify-center">
+              <Button type="submit" className="mt-8">
+                Close
+              </Button>
+            </div>
           </Form>
         </div>
       </div>