From 77407df0eab0f7cda45b8dc5a6c205b116950a32 Mon Sep 17 00:00:00 2001
From: sehyunc <41171808+sehyunc@users.noreply.github.com>
Date: Wed, 25 Sep 2024 16:50:09 -0700
Subject: [PATCH] s

---
 .../order-details/order-details-sheet.tsx     | 50 +++++++++----------
 .../mobile/new-order-stepper.tsx              | 24 ++++-----
 .../order-stepper/mobile/steps/confirm.tsx    |  6 +--
 .../order-stepper/mobile/steps/default.tsx    |  4 +-
 .../mobile/steps/success-without-savings.tsx  |  6 +--
 components/dialogs/sign-in-dialog.tsx         | 48 +++++++++---------
 components/dialogs/token-select-dialog.tsx    |  6 +--
 .../dialogs/transfer/transfer-dialog.tsx      |  5 +-
 8 files changed, 72 insertions(+), 77 deletions(-)

diff --git a/app/trade/[base]/components/order-details/order-details-sheet.tsx b/app/trade/[base]/components/order-details/order-details-sheet.tsx
index 8487ceff..fa122584 100644
--- a/app/trade/[base]/components/order-details/order-details-sheet.tsx
+++ b/app/trade/[base]/components/order-details/order-details-sheet.tsx
@@ -64,33 +64,31 @@ export function OrderDetailsSheet({
   return (
     <Dialog>
       <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="h-dvh p-0">
-        <div className="">
-          <ScrollArea className="h-[calc(100dvh-64px)]">
-            <VisuallyHidden>
-              <DialogHeader>
-                <DialogTitle>Order Details</DialogTitle>
-                <DialogDescription>View order details</DialogDescription>
-              </DialogHeader>
-            </VisuallyHidden>
-            {order.fills.length ? (
-              <DetailsContent order={order} />
-            ) : (
-              <EmptyContent order={order} />
-            )}
-          </ScrollArea>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button
-                className="border-x-0 font-extended text-lg"
-                size="xl"
-                variant="outline"
-              >
-                Close
-              </Button>
-            </DialogClose>
-          </DialogFooter>
+      <DialogContent className="h-dvh gap-0 p-0">
+        <VisuallyHidden>
+          <DialogHeader>
+            <DialogTitle>Order Details</DialogTitle>
+            <DialogDescription>View order details</DialogDescription>
+          </DialogHeader>
+        </VisuallyHidden>
+        <div className="overflow-y-auto">
+          {order.fills.length ? (
+            <DetailsContent order={order} />
+          ) : (
+            <EmptyContent order={order} />
+          )}
         </div>
+        <DialogFooter className="p-6 pt-0">
+          <DialogClose asChild>
+            <Button
+              className="font-extended text-lg"
+              size="xl"
+              variant="outline"
+            >
+              Close
+            </Button>
+          </DialogClose>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   )
diff --git a/components/dialogs/order-stepper/mobile/new-order-stepper.tsx b/components/dialogs/order-stepper/mobile/new-order-stepper.tsx
index 399af164..8557ba81 100644
--- a/components/dialogs/order-stepper/mobile/new-order-stepper.tsx
+++ b/components/dialogs/order-stepper/mobile/new-order-stepper.tsx
@@ -30,19 +30,17 @@ export function NewOrderStepperInner({
       }}
     >
       <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="h-dvh p-0">
-        <div className="flex h-dvh flex-col">
-          {step === Step.DEFAULT && (
-            <DefaultStep
-              {...props}
-              onSubmit={handleSubmit}
-            />
-          )}
-          {step === Step.CONFIRM && lockedFormValues && (
-            <ConfirmStep {...lockedFormValues} />
-          )}
-          {step === Step.SUCCESS && <SuccessStepWithoutSavings />}
-        </div>
+      <DialogContent className="flex h-dvh flex-col gap-0 p-0">
+        {step === Step.DEFAULT && (
+          <DefaultStep
+            {...props}
+            onSubmit={handleSubmit}
+          />
+        )}
+        {step === Step.CONFIRM && lockedFormValues && (
+          <ConfirmStep {...lockedFormValues} />
+        )}
+        {step === Step.SUCCESS && <SuccessStepWithoutSavings />}
       </DialogContent>
     </Dialog>
   )
diff --git a/components/dialogs/order-stepper/mobile/steps/confirm.tsx b/components/dialogs/order-stepper/mobile/steps/confirm.tsx
index 3b21a093..9ddb890c 100644
--- a/components/dialogs/order-stepper/mobile/steps/confirm.tsx
+++ b/components/dialogs/order-stepper/mobile/steps/confirm.tsx
@@ -60,13 +60,13 @@ export function ConfirmStep(props: NewOrderConfirmationProps) {
       <DialogHeader className="p-6 text-left">
         <DialogTitle className="font-extended">Review Order</DialogTitle>
       </DialogHeader>
-      <div className="space-y-6 overflow-y-auto p-6">
+      <div className="space-y-6 overflow-y-auto px-6">
         <ConfirmOrderDisplay {...props} />
       </div>
-      <DialogFooter className="mt-auto flex-row">
+      <DialogFooter className="mt-auto flex-row p-6 pt-0">
         <DialogClose asChild>
           <Button
-            className="flex-1 border-x-0 font-extended text-lg"
+            className="flex-1 font-extended text-lg"
             size="xl"
             variant="outline"
           >
diff --git a/components/dialogs/order-stepper/mobile/steps/default.tsx b/components/dialogs/order-stepper/mobile/steps/default.tsx
index e5fceff2..a2cb6395 100644
--- a/components/dialogs/order-stepper/mobile/steps/default.tsx
+++ b/components/dialogs/order-stepper/mobile/steps/default.tsx
@@ -37,10 +37,10 @@ export function DefaultStep(props: {
       <div className="overflow-y-auto py-6">
         <NewOrderForm {...props} />
       </div>
-      <DialogFooter className="mt-auto">
+      <DialogFooter className="mt-auto p-6 pt-0">
         <DialogClose asChild>
           <Button
-            className="border-x-0 font-extended text-lg"
+            className="font-extended text-lg"
             size="xl"
             variant="outline"
           >
diff --git a/components/dialogs/order-stepper/mobile/steps/success-without-savings.tsx b/components/dialogs/order-stepper/mobile/steps/success-without-savings.tsx
index bdd4177b..bf85ca1b 100644
--- a/components/dialogs/order-stepper/mobile/steps/success-without-savings.tsx
+++ b/components/dialogs/order-stepper/mobile/steps/success-without-savings.tsx
@@ -67,17 +67,17 @@ export function SuccessStepWithoutSavings() {
           <DialogDescription>Your order has been placed.</DialogDescription>
         </VisuallyHidden>
       </DialogHeader>
-      <div className="space-y-6 overflow-y-auto p-6 pb-0">
+      <div className="space-y-6 overflow-y-auto px-6">
         <OrderStatusDisplay
           currentStatus={orderStatus}
           states={states}
         />
         <DidYouKnowContent />
       </div>
-      <DialogFooter className="mt-auto">
+      <DialogFooter className="mt-auto p-6 pt-0">
         <DialogClose asChild>
           <Button
-            className="border-x-0 font-extended text-lg"
+            className="font-extended text-lg"
             size="xl"
             variant="outline"
           >
diff --git a/components/dialogs/sign-in-dialog.tsx b/components/dialogs/sign-in-dialog.tsx
index 65f45985..836bffaf 100644
--- a/components/dialogs/sign-in-dialog.tsx
+++ b/components/dialogs/sign-in-dialog.tsx
@@ -182,29 +182,29 @@ export function SignInDialog({
       open={open}
       onOpenChange={onOpenChange}
     >
-      <DialogContent className="h-dvh p-0">
-        <div className="flex flex-col">
-          <DialogHeader className="p-6 text-left">
-            <DialogTitle>Unlock your Wallet</DialogTitle>
-            <DialogDescription>
-              To trade on Renegade, we require a one-time signature to create or
-              find your wallet on-chain.
-            </DialogDescription>
-          </DialogHeader>
-          <SignInContent />
-          <DialogFooter className="mt-auto">
-            <Button
-              className="font-extended text-lg"
-              disabled={isConnecting || signStatus === "pending"}
-              size="xl"
-              onClick={handleClick}
-            >
-              {signStatus === "pending" || isConnecting
-                ? "Confirm in wallet"
-                : "Sign in to Renegade"}
-            </Button>
-          </DialogFooter>
-        </div>
+      <DialogContent className="h-dvh gap-0">
+        <DialogHeader className="text-left">
+          <DialogTitle>Unlock your Wallet</DialogTitle>
+          <DialogDescription>
+            To trade on Renegade, we require a one-time signature to create or
+            find your wallet on-chain.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            className="font-extended text-lg"
+            disabled={isConnecting || signStatus === "pending"}
+            size="xl"
+            onClick={handleClick}
+          >
+            {signStatus === "pending" || isConnecting
+              ? "Confirm in wallet"
+              : "Sign in to Renegade"}
+          </Button>
+          <div className="mb-6">
+            <SignInContent />
+          </div>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   )
@@ -220,7 +220,7 @@ function SignInContent() {
   )
   return (
     <>
-      <div className="flex items-center space-x-2 px-6 pb-6">
+      <div className="flex items-center space-x-2">
         <Checkbox
           checked={rememberMe}
           id="remember-me"
diff --git a/components/dialogs/token-select-dialog.tsx b/components/dialogs/token-select-dialog.tsx
index e8c28585..61b566f1 100644
--- a/components/dialogs/token-select-dialog.tsx
+++ b/components/dialogs/token-select-dialog.tsx
@@ -77,7 +77,7 @@ export function TokenSelectDialog({
     >
       <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent
-        className="h-dvh p-0"
+        className="h-dvh gap-0 p-0"
         onOpenAutoFocus={(e) => {
           e.preventDefault()
         }}
@@ -101,10 +101,10 @@ export function TokenSelectDialog({
             onClose={() => setOpen(false)}
           />
         </ScrollArea>
-        <DialogFooter>
+        <DialogFooter className="p-6 pt-0">
           <DialogClose asChild>
             <Button
-              className="border-x-0 font-extended text-lg"
+              className="font-extended text-lg"
               size="xl"
               variant="outline"
             >
diff --git a/components/dialogs/transfer/transfer-dialog.tsx b/components/dialogs/transfer/transfer-dialog.tsx
index b6e5a426..26955d4b 100644
--- a/components/dialogs/transfer/transfer-dialog.tsx
+++ b/components/dialogs/transfer/transfer-dialog.tsx
@@ -593,7 +593,7 @@ function TransferForm({
             </ResponsiveTooltip>
           </DialogFooter>
         ) : (
-          <DialogFooter className="mt-auto flex-row">
+          <DialogFooter className="mt-auto flex-row p-6">
             <DialogClose asChild>
               <Button
                 className="flex-1 font-extended text-lg"
@@ -606,7 +606,7 @@ function TransferForm({
             <ResponsiveTooltip>
               <ResponsiveTooltipTrigger className="flex-1">
                 <Button
-                  className="w-full border-l-0 font-extended text-lg"
+                  className="w-full !border-l-0 font-extended text-lg"
                   disabled={
                     !form.formState.isValid ||
                     (direction === ExternalTransferDirection.Deposit &&
@@ -617,7 +617,6 @@ function TransferForm({
                       maintenanceMode.severity === "critical")
                   }
                   size="xl"
-                  variant="outline"
                 >
                   {buttonText}
                 </Button>