Merge pull request #93 from deep-ink-ventures/update-spend-limit-rese…

…t-btn Update Spend Limit Modal Layout
deep-ink-ventures · Oct 27, 2023 · 40812bf · 40812bf
2 parents d7d1884 + 8daad74
commit 40812bf
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 16 deletions.
diff --git a/src/components/SpendLimitForm.tsx b/src/components/SpendLimitForm.tsx
@@ -1,5 +1,4 @@
 import { ErrorMessage } from '@hookform/error-message';
-import type { ReactNode } from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { FormProvider, useForm } from 'react-hook-form';
 
@@ -12,7 +11,6 @@ export type ExtendedSpendLimitFormValues<Generic extends string> = {
 interface SpendLimitFormProps {
   formName?: string;
   disabled?: boolean;
-  actionButton?: ReactNode;
   onSubmit?: <T extends string>(
     data: ExtendedSpendLimitFormValues<T>
   ) => Promise<boolean> | boolean;
@@ -24,7 +22,6 @@ interface SpendLimitFormValues {
 const SpendLimitForm = ({
   formName,
   onSubmit,
-  actionButton,
   disabled,
 }: SpendLimitFormProps) => {
   const formMethods = useForm();
@@ -67,7 +64,6 @@ const SpendLimitForm = ({
             />
           </div>
           <div className='mt-8 space-y-2'>
-            {actionButton}
             <button className='btn btn-primary ml-auto w-full truncate'>
               Submit
             </button>

diff --git a/src/components/SpendLimitFormModal.tsx b/src/components/SpendLimitFormModal.tsx
@@ -35,18 +35,16 @@ const SpendLimitFormModal = ({
           }}
         />
         <div className='z-[1050] flex flex-col items-center justify-center gap-5 rounded-lg bg-white p-8 opacity-100'>
-          <div className='w-full min-w-[400px]'>
-            <h1 className='mb-6 text-center text-2xl'>{title}</h1>
-            <SpendLimitForm
-              actionButton={
-                <button
-                  className='btn btn-secondary ml-auto flex w-full gap-2 truncate text-white'
-                  onClick={() => setIsConfirmResetVisible(true)}>
-                  <Switch className='h-full fill-white group-hover:fill-base-content' />{' '}
-                  Reset
-                </button>
-              }
-            />
+          <div className='w-full min-w-[500px]'>
+            <h1 className='relative mb-6 text-center text-2xl'>
+              {title}
+              <button
+                className='btn btn-outline absolute right-0 !h-10 !min-h-[0px] truncate !py-1'
+                onClick={() => setIsConfirmResetVisible(true)}>
+                <Switch className='mr-1 h-4 fill-base-content' /> Reset
+              </button>
+            </h1>
+            <SpendLimitForm />
           </div>
         </div>
       </div>