fix(nfts): snaefell-ui terms acceptance button visible in mobile (#17645

)
taikoxyz · Jun 22, 2024 · 31175b8 · 31175b8
1 parent 2c90a7f
commit 31175b8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/packages/snaefell-ui/src/components/modals/MintDisclaimer.modal/MintDisclaimer.modal.svelte b/packages/snaefell-ui/src/components/modals/MintDisclaimer.modal/MintDisclaimer.modal.svelte
@@ -4,7 +4,7 @@
   import { browser } from '$app/environment';
   import { Button } from '$components/core/Button';
   import { account } from '$stores/account';
-  import { Modal, ModalBody, ModalFooter, ModalTitle } from '$ui/Modal';
+  import { Modal, ModalBody, ModalTitle } from '$ui/Modal';
 
   import {
     bodyWrapperClasses,
@@ -44,13 +44,12 @@
         <input type="checkbox" bind:checked={isTermsChecked} class="checkbox border bg-overlay-background" />
         <span class="label-text text-content-secondary">I agree to the terms and conditions mentioned above.</span>
       </label>
-    </ModalBody>
-    <ModalFooter>
+
       <div class={footerWrapperClasses}>
         <Button on:click={acceptTerms} disabled={!isTermsChecked} type="primary" wide block>
           {$t('buttons.confirm')}
         </Button>
       </div>
-    </ModalFooter>
+    </ModalBody>
   </div>
 </Modal>
diff --git a/packages/snaefell-ui/src/components/modals/MintDisclaimer.modal/classes.ts b/packages/snaefell-ui/src/components/modals/MintDisclaimer.modal/classes.ts
@@ -9,7 +9,16 @@ export const modalTitleClasses = classNames(
   'border-border-divider-default',
 );
 export const bodyWrapperClasses = classNames('text-content-primary', 'py-4');
-export const footerWrapperClasses = classNames('w-full', 'flex', 'flex-row', 'items-center', 'justify-center', 'gap-4');
+export const footerWrapperClasses = classNames(
+  'w-full',
+  'flex',
+  'flex-row',
+  'items-center',
+  'justify-center',
+  'gap-4',
+  'my-6',
+  'md:mb-6',
+);
 export const spinnerSmWrapper = classNames(
   'bg-interactive-tertiary',
   'rounded-md',