Update Withdraw/Stake/Unstake modals

api3dao · Nov 20, 2024 · a9faa18 · a9faa18
1 parent 7d60c1c
commit a9faa18
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 15 deletions.
diff --git a/src/components/modal/modal.module.scss b/src/components/modal/modal.module.scss
@@ -185,4 +185,12 @@
   justify-content: center;
   margin-top: 48px;
   flex-direction: column;
+  width: 100%;
+  padding: 0 24px;
+  box-sizing: border-box;
+  max-width: 510px;
+
+  @media (min-width: $sm) {
+    padding: 0;
+  }
 }
diff --git a/src/pages/dashboard/forms/forms.module.scss b/src/pages/dashboard/forms/forms.module.scss
@@ -45,7 +45,6 @@
   gap: 24px;
   width: 100%;
   box-sizing: border-box;
-  padding: 0 24px;
 
   > * {
     width: 100%;
@@ -87,6 +86,7 @@
 
   @media (min-width: $sm) {
     @include font-body-9;
+    padding: 0;
   }
 }
 

diff --git a/src/pages/dashboard/forms/token-amount-form.tsx b/src/pages/dashboard/forms/token-amount-form.tsx
@@ -4,7 +4,6 @@ import { ModalFooter, ModalHeader } from '../../../components/modal';
 import Input from '../../../components/input';
 import Button from '../../../components/button';
 import { formatApi3, parseApi3, messages } from '../../../utils';
-import globalStyles from '../../../styles/global-styles.module.scss';
 import styles from './forms.module.scss';
 import UnstakeHelperText from './unstake-helper-text';
 import { goSync } from '@api3/promise-utils';
@@ -51,18 +50,11 @@ const TokenAmountForm = (props: Props) => {
     <>
       <ModalHeader>{props.title}</ModalHeader>
 
-      <div className={globalStyles.textCenter}>
+      <div className={styles.formContent}>
         <div className={styles.inputWrapper}>
-          <Input
-            type="number"
-            autosize
-            value={inputValue}
-            onChange={(e) => onChange(e.target.value)}
-            size="large"
-            autoFocus
-          />
+          <Input type="number" autosize value={inputValue} onChange={(e) => onChange(e.target.value)} autoFocus />
           {maxValue && (
-            <Button className={styles.maxButton} type="text" onClick={handleSetMax}>
+            <Button type="tertiary-color" onClick={handleSetMax} size="xs" sm={{ size: 'sm' }}>
               Max
             </Button>
           )}
@@ -71,17 +63,17 @@ const TokenAmountForm = (props: Props) => {
         {maxValue && (
           <div className={styles.tokenFormBalance}>
             Your balance:{' '}
-            <span className={globalStyles.pointer} onClick={handleSetMax}>
+            <button className={styles.valueButton} onClick={handleSetMax}>
               {/* We don't round because we want to show all decimal digits for the maxValue field */}
               {formatApi3(maxValue)}
-            </span>
+            </button>
           </div>
         )}
       </div>
 
       <ModalFooter>
         <div className={styles.tokenAmountFormActions}>
-          <Button type="secondary" onClick={handleAction} disabled={!goParseApi3.success}>
+          <Button type="primary" size="sm" sm={{ size: 'lg' }} onClick={handleAction} disabled={!goParseApi3.success}>
             {action}
           </Button>
         </div>