ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use flexbox for wallet card header and make logos more consistent (#1654) 

* use flexbox for wallet card header

* make wallet logo consistent

* remove extra div

* Update styles/wallet.module.css

Co-authored-by: ekzyis <ek@stacker.news>

* Update styles/wallet.module.css

Co-authored-by: ekzyis <ek@stacker.news>

* resize wallet banner

* remove unused justify-content

* remove cardMeta

---------

Co-authored-by: ekzyis <ek@stacker.news>
Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>
Co-authored-by: k00b <k00b@stacker.news>
This commit is contained in:
Riccardo Balbo 2024-11-27 19:14:00 +01:00 committed by GitHub
parent a032da57b9
commit 6630899e79
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/wallet-card.js
View File

@ -25,12 +25,10 @@ export default function WalletCard ({ wallet, draggable, onDragStart, onDragEnte
onDragEnter={onDragEnter} onDragEnter={onDragEnter}
onDragEnd={onDragEnd} onDragEnd={onDragEnd}
> >
<div className={styles.cardMeta}> <div className={styles.indicators}>
<div className={styles.indicators}> {status.any !== Status.Disabled && <DraggableIcon className={styles.drag} width={16} height={16} />}
{status.any !== Status.Disabled && <DraggableIcon className={styles.drag} width={16} height={16} />} {support.recv && <RecvIcon className={`${styles.indicator} ${statusToClass(status.recv)}`} />}
{support.recv && <RecvIcon className={`${styles.indicator} ${statusToClass(status.recv)}`} />} {support.send && <SendIcon className={`${styles.indicator} ${statusToClass(status.send)}`} />}
{support.send && <SendIcon className={`${styles.indicator} ${statusToClass(status.send)}`} />}
</div>
</div> </div>
<Card.Body <Card.Body
// we attach touch listener only to card body to not interfere with wallet link // we attach touch listener only to card body to not interfere with wallet link
@ -42,8 +40,8 @@ export default function WalletCard ({ wallet, draggable, onDragStart, onDragEnte
> >
<div className='d-flex text-center align-items-center h-100'> <div className='d-flex text-center align-items-center h-100'>
{image {image
? <img width='100%' {...image} /> ? <img className={styles.walletLogo} {...image} />
: <Card.Title className='w-100 justify-content-center align-items-center'>{wallet.def.card.title}</Card.Title>} : <Card.Title className={styles.walletLogo}>{wallet.def.card.title}</Card.Title>}
</div> </div>
</Card.Body> </Card.Body>
<Link href={`/settings/wallets/${wallet.def.name}`}> <Link href={`/settings/wallets/${wallet.def.name}`}>

3
pages/settings/wallets/[wallet].js
View File

@ -19,6 +19,7 @@ import validateWallet from '@/wallets/validate'
import { ValidationError } from 'yup' import { ValidationError } from 'yup'
import { useFormikContext } from 'formik' import { useFormikContext } from 'formik'
import { useWalletImage } from '@/components/wallet-image' import { useWalletImage } from '@/components/wallet-image'
import styles from '@/styles/wallet.module.css'
export const getServerSideProps = getGetServerSideProps({ authRequired: true }) export const getServerSideProps = getGetServerSideProps({ authRequired: true })
@ -72,7 +73,7 @@ export default function WalletSettings () {
return ( return (
<CenterLayout> <CenterLayout>
{image {image
? <img {...image} className='pb-3 px-2 mw-100' /> ? <img {...image} className={styles.walletBanner} />
: <h2 className='pb-2'>{wallet.def.card.title}</h2>} : <h2 className='pb-2'>{wallet.def.card.title}</h2>}
<h6 className='text-muted text-center pb-3'><Text>{wallet.def.card.subtitle}</Text></h6> <h6 className='text-muted text-center pb-3'><Text>{wallet.def.card.subtitle}</Text></h6>
<Form <Form

29
styles/wallet.module.css
View File

@ -46,14 +46,29 @@
} }
.indicators { .indicators {
position: absolute; display: flex;
width: 100%;
display: grid;
align-items: center; align-items: center;
justify-content: end; column-gap: 0.2rem;
padding: 10px 10px 0 10px; margin-left: auto;
grid-gap: 0.2rem; padding: 10px;
grid-auto-flow: column; position: absolute;
top: 0;
right: 0;
}
.walletLogo {
max-width: 100%;
max-height: 40%;
margin: auto;
text-align: center;
font-size: 1.5rem;
line-height: 1;
}
.walletBanner {
max-width: min(256px, 100vw);
max-height: 100px;
padding: 0 15px 1rem 15px;
} }
.badge { .badge {