feat(crypto-wallets-setting): add CSS-based step numbering and reorganize delete button

src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.module.css

@@ -21,6 +21,35 @@
 .walletField {
   margin-top: 5px;
   margin-left: 5px;
+  position: relative;
+}
+
+.timestampfield {
+  margin-left: 10px;
+}
+
+.walletField[class*='step']::before {
+  margin-left: -5px;
+}
+
+.walletField.step1::before {
+  content: '1. ';
+}
+
+.walletField.step2::before {
+  content: '2. ';
+}
+
+.walletField.step3::before {
+  content: '3. ';
+}
+
+.walletField.step4::before {
+  content: '4. ';
+}
+
+.save.step5::before {
+  content: '5. ';
 }
 
 .walletField input {
@@ -62,3 +91,12 @@
 .toggleWallet {
   margin-right: 7px;
 }
+
+.deleteWalletContainer {
+  margin-top: 20px;
+  margin-left: 5px;
+}
+
+.removeWallet {
+  color: red;
+}

src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.tsx

@@ -101,7 +101,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
   const walletsInputs =
     walletsArray.length > 0 ? (
       <div key={selectedWallet} className={styles.walletBox}>
-        <div className={styles.walletField}>
+        <div className={`${styles.walletField} ${styles.step1}`}>
           <span className={styles.walletFieldTitle}>{_.capitalize(t('chain_ticker'))}: </span>
           <input
             type='text'
@@ -110,7 +110,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
             placeholder='eth/sol/avax'
           />
         </div>
-        <div className={styles.walletField}>
+        <div className={`${styles.walletField} ${styles.step2}`}>
           <span className={styles.walletFieldTitle}>{_.capitalize(t('wallet_address'))}: </span>
           <input
             type='text'
@@ -119,7 +119,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
             placeholder='0x...'
           />
         </div>
-        <div className={styles.walletField}>
+        <div className={`${styles.walletField} ${styles.step3}`}>
           <span className={styles.walletFieldTitle}>
             <Trans
               i18nKey='copy_message_etherscan'
@@ -133,7 +133,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
           </span>
         </div>
         <div className={styles.walletField}>
-          <span className={styles.walletFieldTitle}>{_.capitalize(t('timestamp'))}: </span>
+          <span className={`${styles.walletFieldTitle} ${styles.timestampfield}`}>{_.capitalize(t('timestamp'))}: </span>
           <input
             type='text'
             onChange={(e) => setWalletsArrayProperty(selectedWallet, 'timestamp', Number(e.target.value))}
@@ -141,7 +141,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
             placeholder='Timestamp'
           />
         </div>
-        <div className={styles.walletField}>
+        <div className={`${styles.walletField} ${styles.step4}`}>
           <span className={styles.walletFieldTitle}>{_.capitalize(t('paste_signature'))}: </span>
           <input
             type='text'
@@ -153,11 +153,13 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
             <button className={styles.save} onClick={save}>
               {t('save_changes')}
             </button>
-            <button className={styles.removeWallet} onClick={() => _removeWallet(selectedWallet)}>
-              {t('delete_wallet')}
-            </button>
           </div>
         </div>
+        <div className={styles.deleteWalletContainer}>
+          <button className={styles.removeWallet} onClick={() => _removeWallet(selectedWallet)}>
+            {t('delete_wallet')}
+          </button>
+        </div>
       </div>
     ) : null;