diff --git a/components/wallet-card.js b/components/wallet-card.js index 61cc1323..aedd792c 100644 --- a/components/wallet-card.js +++ b/components/wallet-card.js @@ -4,8 +4,9 @@ import Plug from '@/svgs/plug.svg' import Gear from '@/svgs/settings-5-fill.svg' import Link from 'next/link' import { Status } from 'wallets' +import DraggableIcon from '@/svgs/draggable.svg' -export default function WalletCard ({ wallet }) { +export default function WalletCard ({ wallet, draggable, onDragStart, onDragEnter, onDragEnd, onTouchStart, sourceIndex, targetIndex, index }) { const { card: { title, badges } } = wallet let indicator = styles.disabled @@ -27,9 +28,26 @@ export default function WalletCard ({ wallet }) { } return ( - -
- + +
+ {wallet.status === Status.Enabled && } +
+
+ {title} {badges?.map( diff --git a/pages/settings/wallets/index.js b/pages/settings/wallets/index.js index 568018dc..05924690 100644 --- a/pages/settings/wallets/index.js +++ b/pages/settings/wallets/index.js @@ -93,11 +93,6 @@ export default function Wallet ({ ssrData }) { return (
- +
) } diff --git a/styles/wallet.module.css b/styles/wallet.module.css index b4efe607..e4e8744a 100644 --- a/styles/wallet.module.css +++ b/styles/wallet.module.css @@ -20,6 +20,17 @@ height: 180px; } +.cardMeta { + position: absolute; + width: 100%; + display: grid; + align-items: center; + justify-content: end; + padding: 10px 10px 0 10px; + grid-gap: 0.2rem; + grid-auto-flow: column; +} + .badge { color: var(--theme-grey) !important; background: var(--theme-clickToContextColor) !important; @@ -42,11 +53,7 @@ .indicator { width: 10px; height: 10px; - right: 10px; - top: 10px; border-radius: 50%; - display: inline-block; - position: absolute; } .indicator.success { diff --git a/svgs/draggable.svg b/svgs/draggable.svg new file mode 100644 index 00000000..89f6046c --- /dev/null +++ b/svgs/draggable.svg @@ -0,0 +1 @@ + \ No newline at end of file