External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
plebeius
2025-12-09 17:32:14 +01:00
parent 112abe1795
commit dbf67f55b6
2 changed files with 48 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.module.css
+38
View File
@@ -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 {
@@ -61,4 +90,13 @@
.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
+10 -8
View File
@@ -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;