From 6630899e793ad1bc6f7560221261b4539b428463 Mon Sep 17 00:00:00 2001
From: Riccardo Balbo <riccardo0blb@gmail.com>
Date: Wed, 27 Nov 2024 19:14:00 +0100
Subject: [PATCH] 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>
---
 components/wallet-card.js          | 14 ++++++--------
 pages/settings/wallets/[wallet].js |  3 ++-
 styles/wallet.module.css           | 29 ++++++++++++++++++++++-------
 3 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/components/wallet-card.js b/components/wallet-card.js
index df5ad5e2..1c5d1d0c 100644
--- a/components/wallet-card.js
+++ b/components/wallet-card.js
@@ -25,12 +25,10 @@ export default function WalletCard ({ wallet, draggable, onDragStart, onDragEnte
       onDragEnter={onDragEnter}
       onDragEnd={onDragEnd}
     >
-      <div className={styles.cardMeta}>
-        <div className={styles.indicators}>
-          {status.any !== Status.Disabled && <DraggableIcon className={styles.drag} width={16} height={16} />}
-          {support.recv && <RecvIcon className={`${styles.indicator} ${statusToClass(status.recv)}`} />}
-          {support.send && <SendIcon className={`${styles.indicator} ${statusToClass(status.send)}`} />}
-        </div>
+      <div className={styles.indicators}>
+        {status.any !== Status.Disabled && <DraggableIcon className={styles.drag} width={16} height={16} />}
+        {support.recv && <RecvIcon className={`${styles.indicator} ${statusToClass(status.recv)}`} />}
+        {support.send && <SendIcon className={`${styles.indicator} ${statusToClass(status.send)}`} />}
       </div>
       <Card.Body
         // 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'>
           {image
-            ? <img width='100%' {...image} />
-            : <Card.Title className='w-100 justify-content-center align-items-center'>{wallet.def.card.title}</Card.Title>}
+            ? <img className={styles.walletLogo} {...image} />
+            : <Card.Title className={styles.walletLogo}>{wallet.def.card.title}</Card.Title>}
         </div>
       </Card.Body>
       <Link href={`/settings/wallets/${wallet.def.name}`}>
diff --git a/pages/settings/wallets/[wallet].js b/pages/settings/wallets/[wallet].js
index b3bcca62..98cc2bf5 100644
--- a/pages/settings/wallets/[wallet].js
+++ b/pages/settings/wallets/[wallet].js
@@ -19,6 +19,7 @@ import validateWallet from '@/wallets/validate'
 import { ValidationError } from 'yup'
 import { useFormikContext } from 'formik'
 import { useWalletImage } from '@/components/wallet-image'
+import styles from '@/styles/wallet.module.css'
 
 export const getServerSideProps = getGetServerSideProps({ authRequired: true })
 
@@ -72,7 +73,7 @@ export default function WalletSettings () {
   return (
     <CenterLayout>
       {image
-        ? <img {...image} className='pb-3 px-2 mw-100' />
+        ? <img {...image} className={styles.walletBanner} />
         : <h2 className='pb-2'>{wallet.def.card.title}</h2>}
       <h6 className='text-muted text-center pb-3'><Text>{wallet.def.card.subtitle}</Text></h6>
       <Form
diff --git a/styles/wallet.module.css b/styles/wallet.module.css
index a4c28752..42c18909 100644
--- a/styles/wallet.module.css
+++ b/styles/wallet.module.css
@@ -46,14 +46,29 @@
 }
 
 .indicators {
-  position: absolute;
-  width: 100%;
-  display: grid;
+  display: flex;
   align-items: center;
-  justify-content: end;
-  padding: 10px 10px 0 10px;
-  grid-gap: 0.2rem;
-  grid-auto-flow: column;
+  column-gap: 0.2rem;
+  margin-left: auto;
+  padding: 10px;
+  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 {