Show primary buttons first on mobile

api3dao · Nov 21, 2024 · 655a6dd · 655a6dd
1 parent 25214fc
commit 655a6dd
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/src/pages/dashboard/forms/confirm-unstake-form.tsx b/src/pages/dashboard/forms/confirm-unstake-form.tsx
@@ -3,6 +3,7 @@ import { ModalFooter, ModalHeader } from '../../../components/modal';
 import Button from '../../../components/button';
 import styles from './forms.module.scss';
 import UnstakeHelperText from './unstake-helper-text';
+import classNames from 'classnames';
 
 interface Props {
   title: string;
@@ -23,7 +24,7 @@ const ConfirmUnstakeForm = (props: Props) => {
       <ModalHeader>{props.title}</ModalHeader>
 
       <ModalFooter noMargin>
-        <div className={styles.tokenAmountFormActions}>
+        <div className={classNames(styles.tokenAmountFormActions, styles.columnReverse)}>
           <Button type="text-blue" size="sm" sm={{ size: 'lg' }} onClick={onClose} className={styles.cancelButton}>
             Cancel
           </Button>

diff --git a/src/pages/dashboard/forms/forms.module.scss b/src/pages/dashboard/forms/forms.module.scss
@@ -46,6 +46,10 @@
   width: 100%;
   box-sizing: border-box;
 
+  &.columnReverse {
+    flex-direction: column-reverse;
+  }
+
   > * {
     width: 100%;
   }
@@ -55,6 +59,10 @@
     gap: 32px;
     justify-content: center;
 
+    &.columnReverse {
+      flex-direction: row;
+    }
+
     > * {
       width: auto;
     }

diff --git a/src/pages/dashboard/forms/token-deposit-form.tsx b/src/pages/dashboard/forms/token-deposit-form.tsx
@@ -10,6 +10,7 @@ import { isUserRejection, formatApi3, parseApi3, messages, UNKNOWN_NUMBER } from
 import styles from './forms.module.scss';
 import UnstakeHelperText from './unstake-helper-text';
 import { go, goSync } from '@api3/promise-utils';
+import classNames from 'classnames';
 
 interface Props {
   allowance: BigNumber;
@@ -109,7 +110,7 @@ const TokenDepositForm = (props: Props) => {
       </div>
 
       <ModalFooter>
-        <div className={styles.tokenAmountFormActions}>
+        <div className={classNames(styles.tokenAmountFormActions, !approvalRequired && styles.columnReverse)}>
           {approvalRequired ? (
             <Button type="primary" size="sm" sm={{ size: 'lg' }} onClick={handleApprove}>
               Approve