From 8863eeb29341927c08dcbaf897c07f5e0e322188 Mon Sep 17 00:00:00 2001 From: The Daniel Date: Thu, 11 Jun 2026 19:38:03 -0400 Subject: [PATCH] feat(ui): credit-card style wallet icon in bottom nav and drawer (port wisp #547) --- .../darkwisp/app/ui/component/BottomBar.kt | 23 +++++++++----- .../app/ui/component/WispDrawerContent.kt | 21 ++++--------- app/src/main/res/drawable/ic_wallet.xml | 20 ++++++++++++ .../main/res/drawable/ic_wallet_outlined.xml | 31 +++++++++++++++++++ 4 files changed, 73 insertions(+), 22 deletions(-) create mode 100644 app/src/main/res/drawable/ic_wallet.xml create mode 100644 app/src/main/res/drawable/ic_wallet_outlined.xml diff --git a/app/src/main/kotlin/com/darkwisp/app/ui/component/BottomBar.kt b/app/src/main/kotlin/com/darkwisp/app/ui/component/BottomBar.kt index 8f5daff..bee851a 100644 --- a/app/src/main/kotlin/com/darkwisp/app/ui/component/BottomBar.kt +++ b/app/src/main/kotlin/com/darkwisp/app/ui/component/BottomBar.kt @@ -7,12 +7,10 @@ import androidx.compose.foundation.layout.requiredSize import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.CircleShape import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.AccountBalanceWallet import androidx.compose.material.icons.filled.Forum import androidx.compose.material.icons.filled.Home import androidx.compose.material.icons.filled.Notifications import androidx.compose.material.icons.filled.Search -import androidx.compose.material.icons.outlined.AccountBalanceWallet import androidx.compose.material.icons.outlined.Forum import androidx.compose.material.icons.outlined.Home import androidx.compose.material.icons.outlined.Notifications @@ -40,11 +38,13 @@ import com.darkwisp.app.Routes enum class BottomTab( val route: String, val labelResId: Int, - val selectedIcon: ImageVector, - val unselectedIcon: ImageVector + val selectedIcon: ImageVector?, + val unselectedIcon: ImageVector?, + val selectedIconRes: Int? = null, + val unselectedIconRes: Int? = null ) { HOME(Routes.FEED, R.string.nav_home, Icons.Filled.Home, Icons.Outlined.Home), - WALLET(Routes.WALLET, R.string.nav_wallet, Icons.Filled.AccountBalanceWallet, Icons.Outlined.AccountBalanceWallet), + WALLET(Routes.WALLET, R.string.nav_wallet, null, null, R.drawable.ic_wallet, R.drawable.ic_wallet_outlined), SEARCH(Routes.SEARCH, R.string.nav_search, Icons.Filled.Search, Icons.Outlined.Search), MESSAGES(Routes.DM_LIST, R.string.nav_messages, Icons.Filled.Forum, Icons.Outlined.Forum), NOTIFICATIONS(Routes.NOTIFICATIONS, R.string.nav_notifications, Icons.Filled.Notifications, Icons.Outlined.Notifications) @@ -102,11 +102,20 @@ fun WispBottomBar( contentDescription = stringResource(tab.labelResId), tint = zapTint ) + } else if (tab.selectedIconRes != null && tab.unselectedIconRes != null) { + // Drawable-backed tabs (wallet) — solid when selected, + // outlined when not. + val iconRes = if (selected) tab.selectedIconRes else tab.unselectedIconRes + Icon( + painter = painterResource(iconRes), + contentDescription = stringResource(tab.labelResId), + tint = zapTint + ) } else { val icon = if (tab == BottomTab.NOTIFICATIONS && isZapAnimating) Icons.Outlined.CurrencyBitcoin - else if (selected) tab.selectedIcon - else tab.unselectedIcon + else if (selected) tab.selectedIcon!! + else tab.unselectedIcon!! Icon( imageVector = icon, contentDescription = stringResource(tab.labelResId), diff --git a/app/src/main/kotlin/com/darkwisp/app/ui/component/WispDrawerContent.kt b/app/src/main/kotlin/com/darkwisp/app/ui/component/WispDrawerContent.kt index bb702ee..76e35f5 100644 --- a/app/src/main/kotlin/com/darkwisp/app/ui/component/WispDrawerContent.kt +++ b/app/src/main/kotlin/com/darkwisp/app/ui/component/WispDrawerContent.kt @@ -35,7 +35,6 @@ import androidx.compose.material.icons.outlined.LightMode import androidx.compose.material.icons.outlined.QrCodeScanner import androidx.compose.material.icons.outlined.Search import androidx.compose.material.icons.outlined.KeyboardArrowRight -import androidx.compose.material.icons.outlined.AccountBalanceWallet import androidx.compose.material.icons.outlined.Person import androidx.compose.material.icons.outlined.Key import androidx.compose.material.icons.outlined.FavoriteBorder @@ -404,21 +403,13 @@ fun WispDrawerContent( onClick = onMessages, modifier = Modifier.height(48.dp).padding(horizontal = 12.dp) ) - val useZapBolt = com.darkwisp.app.ui.util.useBoltIcon() - val fiatMode = com.darkwisp.app.ui.util.isFiatMode() NavigationDrawerItem( icon = { - if (fiatMode) { - Icon(Icons.Outlined.AccountBalanceWallet, contentDescription = null) - } else if (useZapBolt) { - Icon( - painter = painterResource(R.drawable.ic_bolt), - contentDescription = null, - modifier = Modifier.size(24.dp) - ) - } else { - Icon(Icons.Outlined.CurrencyBitcoin, contentDescription = null) - } + Icon( + painter = painterResource(R.drawable.ic_wallet_outlined), + contentDescription = null, + modifier = Modifier.size(24.dp) + ) }, label = { Text(stringResource(R.string.nav_wallet)) }, selected = false, @@ -617,7 +608,7 @@ fun WispDrawerContent( Spacer(Modifier.height(14.dp)) Row(verticalAlignment = Alignment.Top) { Icon( - Icons.Outlined.AccountBalanceWallet, + painter = painterResource(R.drawable.ic_wallet_outlined), contentDescription = null, modifier = Modifier.size(20.dp), tint = MaterialTheme.colorScheme.error diff --git a/app/src/main/res/drawable/ic_wallet.xml b/app/src/main/res/drawable/ic_wallet.xml new file mode 100644 index 0000000..4092062 --- /dev/null +++ b/app/src/main/res/drawable/ic_wallet.xml @@ -0,0 +1,20 @@ + + + + diff --git a/app/src/main/res/drawable/ic_wallet_outlined.xml b/app/src/main/res/drawable/ic_wallet_outlined.xml new file mode 100644 index 0000000..1497f4c --- /dev/null +++ b/app/src/main/res/drawable/ic_wallet_outlined.xml @@ -0,0 +1,31 @@ + + + + + +