Skip to content

fix: polish wallet ui #1270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
pwltr wants to merge 22 commits into
base: master
Choose a base branch
from
Draft

fix: polish wallet ui #1270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
70ab243
fix(ui): add missing money symbols
pwltr Sep 3, 2026
955a24c
fix(ui): adjust scanner icon backgrounds
pwltr Sep 3, 2026
23591bd
fix: update tab indicator default
pwltr Sep 3, 2026
be40e40
fix: polish receive amount ui
pwltr Sep 4, 2026
24a0674
fix: polish transaction speed settings ui
pwltr Sep 4, 2026
a1f4d96
fix: polish small activity buttons
pwltr Sep 15, 2026
c829a63
fix: polish invoice tag inputs
pwltr Sep 15, 2026
a84e6c2
fix: polish boost sheet
pwltr Sep 15, 2026
992d707
fix: align amount keypad spacing
pwltr Sep 15, 2026
f1d1d45
fix: polish transfer flow layout
pwltr Sep 15, 2026
0a0bb3e
fix: align home activity spacing
pwltr Sep 15, 2026
1d2f5ba
fix: align button text styles
pwltr Sep 15, 2026
55c5a7e
fix: tighten onboarding copy spacing
pwltr Sep 15, 2026
6dd3f39
fix: adjust restore mnemonic text weight
pwltr Sep 15, 2026
5bb7add
fix: polish settings intro layout
pwltr Sep 15, 2026
812e92f
fix: update onboarding copy translations
pwltr Sep 15, 2026
ea5c89b
fix: add wallet polish changelog
pwltr Sep 15, 2026
c7fc106
fix: address wallet polish review
pwltr Sep 15, 2026
afa30ae
fix: remove unrelated changelog fragment
pwltr Sep 15, 2026
fb5d996
fix: polish wallet loading animation
pwltr Sep 15, 2026
d8591c8
fix: replace material arrow icons
pwltr Sep 15, 2026
f543b30
fix: move boost toast fix out
pwltr Sep 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions app/src/main/java/to/bitkit/models/FeeRate.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,48 +11,55 @@ import to.bitkit.ui.theme.Colors
enum class FeeRate(
@StringRes val title: Int,
@StringRes val description: Int,
@StringRes val duration: Int,
@StringRes val shortDescription: Int,
@DrawableRes val icon: Int,
val color: Color,
) {
INSTANT(
title = R.string.fee__instant__title,
description = R.string.fee__instant__description,
duration = R.string.fee__instant__duration,
shortDescription = R.string.fee__instant__shortDescription,
color = Colors.Purple,
icon = R.drawable.ic_speed_fast,
),
FAST(
title = R.string.fee__fast__title,
description = R.string.fee__fast__description,
duration = R.string.fee__fast__duration,
shortDescription = R.string.fee__fast__shortDescription,
color = Colors.Brand,
icon = R.drawable.ic_speed_fast,
),
NORMAL(
title = R.string.fee__normal__title,
description = R.string.fee__normal__description,
duration = R.string.fee__normal__duration,
shortDescription = R.string.fee__normal__shortDescription,
color = Colors.Brand,
icon = R.drawable.ic_speed_normal,
),
SLOW(
title = R.string.fee__slow__title,
description = R.string.fee__slow__description,
duration = R.string.fee__slow__duration,
shortDescription = R.string.fee__slow__shortDescription,
color = Colors.Brand,
icon = R.drawable.ic_speed_slow,
),
MINIMUM(
title = R.string.fee__minimum__title,
description = R.string.fee__minimum__description,
duration = R.string.fee__minimum__duration,
shortDescription = R.string.fee__minimum__shortDescription,
color = Colors.Brand,
icon = R.drawable.ic_speed_slow,
),
CUSTOM(
title = R.string.fee__custom__title,
description = R.string.fee__custom__description,
duration = R.string.fee__custom__duration,
shortDescription = R.string.fee__custom__shortDescription,
color = Colors.White64,
icon = R.drawable.ic_settings,
Expand Down
180 changes: 98 additions & 82 deletions app/src/main/java/to/bitkit/ui/components/Button.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,12 @@ import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material3.Button
import androidx.compose.material3.Icon
import androidx.compose.material3.LocalMinimumInteractiveComponentSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
Expand All @@ -30,6 +32,7 @@ import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
Expand All @@ -46,6 +49,7 @@ import to.bitkit.ui.shared.modifiers.clickableAlpha
import to.bitkit.ui.shared.modifiers.rememberDebouncedClick
import to.bitkit.ui.shared.util.primaryButtonStyle
import to.bitkit.ui.theme.AppButtonDefaults
import to.bitkit.ui.theme.AppTextStyles
import to.bitkit.ui.theme.AppThemeSurface
import to.bitkit.ui.theme.Colors

Expand Down Expand Up @@ -89,6 +93,12 @@ enum class ButtonSize {
}
}

@Composable
private fun ButtonSize.textStyle(): TextStyle = when (this) {
ButtonSize.Small -> AppTextStyles.CaptionB
ButtonSize.Large -> MaterialTheme.typography.labelLarge
}

@Composable
fun PrimaryButton(
text: String?,
Expand All @@ -106,57 +116,60 @@ fun PrimaryButton(
val contentPadding = PaddingValues(horizontal = size.primaryHorizontalPadding.takeIf { text != null } ?: 0.dp)
val buttonShape = MaterialTheme.shapes.extraLarge

Button(
onClick = rememberDebouncedClick(onClick = onClick),
enabled = enabled && !isLoading,
colors = AppButtonDefaults.primaryColors.copy(
containerColor = Color.Transparent,
disabledContainerColor = Color.Transparent,
contentColor = contentColor,
),
contentPadding = contentPadding,
shape = buttonShape,
modifier = modifier
.then(if (fullWidth) Modifier.fillMaxWidth() else Modifier)
.requiredHeight(size.height)
.primaryButtonStyle(
isEnabled = enabled && !isLoading,
shape = buttonShape,
primaryColor = color,
enableGradient = enableGradient,
shadowElevation = size.primaryShadowElevation,
)
.alphaFeedback(enabled = enabled && !isLoading)
) {
if (isLoading) {
GradientCircularProgressIndicator(
strokeWidth = 2.dp,
modifier = Modifier.size(size.height / 2)
)
} else {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(size.primaryGap),
) {
if (icon != null) {
Box(
modifier = if (enabled) {
Modifier
} else {
Modifier.graphicsLayer {
colorFilter = ColorFilter.tint(Colors.White32)
CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides 0.dp) {

@pwltr pwltr Sep 15, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This fixed small button text and disabled styles

Button(
onClick = rememberDebouncedClick(onClick = onClick),
enabled = enabled && !isLoading,
colors = AppButtonDefaults.primaryColors.copy(
containerColor = Color.Transparent,
disabledContainerColor = Color.Transparent,
contentColor = contentColor,
),
contentPadding = contentPadding,
shape = buttonShape,
modifier = modifier
.then(if (fullWidth) Modifier.fillMaxWidth() else Modifier)
.requiredHeight(size.height)
.primaryButtonStyle(
isEnabled = enabled && !isLoading,
shape = buttonShape,
primaryColor = color,
enableGradient = enableGradient,
shadowElevation = size.primaryShadowElevation,
)
.alphaFeedback(enabled = enabled && !isLoading)
) {
if (isLoading) {
GradientCircularProgressIndicator(
strokeWidth = 2.dp,
modifier = Modifier.size(size.height / 2)
)
} else {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(size.primaryGap),
) {
if (icon != null) {
Box(
modifier = if (enabled) {
Modifier
} else {
Modifier.graphicsLayer {
colorFilter = ColorFilter.tint(Colors.White32)
}
}
) {
icon()
}
) {
icon()
}
}
text?.let {
Text(
text = text,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
text?.let {
Text(
text = text,
style = size.textStyle(),
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
}
}
}
}
Expand Down Expand Up @@ -205,42 +218,45 @@ fun SecondaryButton(
}
)
) {
OutlinedButton(
onClick = rememberDebouncedClick(onClick = onClick),
enabled = enabled && !isLoading,
colors = AppButtonDefaults.secondaryColors.copy(contentColor = contentColor),
contentPadding = contentPadding,
border = border,
) {
if (isLoading) {
GradientCircularProgressIndicator(
strokeWidth = 2.dp,
modifier = Modifier.size(size.height / 2)
)
} else {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(size.secondaryGap),
) {
if (icon != null) {
Box(
modifier = if (enabled) {
Modifier
} else {
Modifier.graphicsLayer {
colorFilter = ColorFilter.tint(Colors.White32)
CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides 0.dp) {
OutlinedButton(
onClick = rememberDebouncedClick(onClick = onClick),
enabled = enabled && !isLoading,
colors = AppButtonDefaults.secondaryColors.copy(contentColor = contentColor),
contentPadding = contentPadding,
border = border,
) {
if (isLoading) {
GradientCircularProgressIndicator(
strokeWidth = 2.dp,
modifier = Modifier.size(size.height / 2)
)
} else {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(size.secondaryGap),
) {
if (icon != null) {
Box(
modifier = if (enabled) {
Modifier
} else {
Modifier.graphicsLayer {
colorFilter = ColorFilter.tint(Colors.White32)
}
}
) {
icon()
}
) {
icon()
}
}
text?.let {
Text(
text = text,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
text?.let {
Text(
text = text,
style = size.textStyle(),
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
}
}
}
}
Expand Down Expand Up @@ -293,7 +309,7 @@ fun TertiaryButton(
text?.let {
Text(
text = text,
style = MaterialTheme.typography.labelLarge,
style = size.textStyle(),
color = contentColor,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
Expand Down
4 changes: 1 addition & 3 deletions app/src/main/java/to/bitkit/ui/components/EmptyWalletView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Close
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.runtime.Composable
Expand Down Expand Up @@ -79,7 +77,7 @@ fun EmptyStateView(
.testTag("WalletOnboardingClose")
) {
Icon(
imageVector = Icons.Default.Close,
painter = painterResource(R.drawable.ic_x),
contentDescription = null,
tint = Colors.White64,
modifier = Modifier.size(16.dp)
Expand Down
2 changes: 1 addition & 1 deletion app/src/main/java/to/bitkit/ui/components/FeeInfo.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ fun RowScope.FeeInfo(
color = Colors.White64,
)
Spacer(modifier = Modifier.height(8.dp))
MoneySSB(sats = amount)
MoneySSB(sats = amount, showSymbol = true)
Spacer(modifier = Modifier.weight(1f))
HorizontalDivider(modifier = Modifier.padding(top = 16.dp))
}
Expand Down
8 changes: 3 additions & 5 deletions app/src/main/java/to/bitkit/ui/components/LightningChannel.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,13 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDownward
import androidx.compose.material.icons.filled.ArrowUpward
import androidx.compose.material3.Icon
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Alignment.Companion.CenterVertically
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
Expand Down Expand Up @@ -70,7 +68,7 @@ fun LightningChannel(
) {
Row(verticalAlignment = CenterVertically) {
Icon(
imageVector = Icons.Default.ArrowUpward,
painter = painterResource(R.drawable.ic_sent),
contentDescription = null,
tint = spendingAvailableColor,
modifier = Modifier.size(14.dp)
Expand All @@ -82,7 +80,7 @@ fun LightningChannel(
}
Row(verticalAlignment = CenterVertically) {
Icon(
imageVector = Icons.Default.ArrowDownward,
painter = painterResource(R.drawable.ic_received),
contentDescription = null,
tint = receivingAvailableColor,
modifier = Modifier.size(14.dp)
Expand Down
Loading