UI improvements (#192)

* bitchat logo

* improve ui
This commit is contained in:
callebtc
2025-07-25 20:02:59 +02:00
committed by GitHub
parent c9aba00478
commit 4b1d6f8c04
9 changed files with 63 additions and 52 deletions
@@ -90,7 +90,7 @@ private fun BatteryOptimizationEnabledContent(
horizontalAlignment = Alignment.CenterHorizontally horizontalAlignment = Alignment.CenterHorizontally
) { ) {
Text( Text(
text = "bitchat*", text = "bitchat",
style = MaterialTheme.typography.headlineLarge.copy( style = MaterialTheme.typography.headlineLarge.copy(
fontFamily = FontFamily.Monospace, fontFamily = FontFamily.Monospace,
fontWeight = FontWeight.Bold, fontWeight = FontWeight.Bold,
@@ -214,7 +214,7 @@ private fun BatteryOptimizationCheckingContent(
horizontalAlignment = Alignment.CenterHorizontally horizontalAlignment = Alignment.CenterHorizontally
) { ) {
Text( Text(
text = "bitchat*", text = "bitchat",
style = MaterialTheme.typography.headlineLarge.copy( style = MaterialTheme.typography.headlineLarge.copy(
fontFamily = FontFamily.Monospace, fontFamily = FontFamily.Monospace,
fontWeight = FontWeight.Bold, fontWeight = FontWeight.Bold,
@@ -271,7 +271,7 @@ private fun BatteryOptimizationNotSupportedContent(
horizontalAlignment = Alignment.CenterHorizontally horizontalAlignment = Alignment.CenterHorizontally
) { ) {
Text( Text(
text = "bitchat*", text = "bitchat",
style = MaterialTheme.typography.headlineLarge.copy( style = MaterialTheme.typography.headlineLarge.copy(
fontFamily = FontFamily.Monospace, fontFamily = FontFamily.Monospace,
fontWeight = FontWeight.Bold, fontWeight = FontWeight.Bold,
@@ -222,7 +222,7 @@ private fun BluetoothCheckingContent(
horizontalAlignment = Alignment.CenterHorizontally horizontalAlignment = Alignment.CenterHorizontally
) { ) {
Text( Text(
text = "bitchat*", text = "bitchat",
style = MaterialTheme.typography.headlineLarge.copy( style = MaterialTheme.typography.headlineLarge.copy(
fontFamily = FontFamily.Monospace, fontFamily = FontFamily.Monospace,
fontWeight = FontWeight.Bold, fontWeight = FontWeight.Bold,
@@ -61,7 +61,7 @@ fun InitializingScreen() {
) { ) {
// App title // App title
Text( Text(
text = "bitchat*", text = "bitchat",
style = MaterialTheme.typography.headlineLarge.copy( style = MaterialTheme.typography.headlineLarge.copy(
fontFamily = FontFamily.Monospace, fontFamily = FontFamily.Monospace,
fontWeight = FontWeight.Bold, fontWeight = FontWeight.Bold,
@@ -247,7 +247,7 @@ private fun LocationCheckingContent(
horizontalAlignment = Alignment.CenterHorizontally horizontalAlignment = Alignment.CenterHorizontally
) { ) {
Text( Text(
text = "bitchat*", text = "bitchat",
style = MaterialTheme.typography.headlineLarge.copy( style = MaterialTheme.typography.headlineLarge.copy(
fontFamily = FontFamily.Monospace, fontFamily = FontFamily.Monospace,
fontWeight = FontWeight.Bold, fontWeight = FontWeight.Bold,
@@ -45,7 +45,7 @@ fun PermissionExplanationScreen(
horizontalAlignment = Alignment.CenterHorizontally horizontalAlignment = Alignment.CenterHorizontally
) { ) {
Text( Text(
text = "Welcome to bitchat*", text = "Welcome to bitchat",
style = MaterialTheme.typography.headlineMedium.copy( style = MaterialTheme.typography.headlineMedium.copy(
fontFamily = FontFamily.Monospace, fontFamily = FontFamily.Monospace,
fontWeight = FontWeight.Bold, fontWeight = FontWeight.Bold,
@@ -166,7 +166,7 @@ fun PeerCounter(
} }
Icon( Icon(
imageVector = Icons.Default.Person, imageVector = Icons.Default.Group,
contentDescription = "Connected peers", contentDescription = "Connected peers",
modifier = Modifier.size(16.dp), modifier = Modifier.size(16.dp),
tint = if (isConnected) Color(0xFF00C851) else Color.Red tint = if (isConnected) Color(0xFF00C851) else Color.Red
@@ -425,7 +425,7 @@ private fun MainHeader(
verticalAlignment = Alignment.CenterVertically verticalAlignment = Alignment.CenterVertically
) { ) {
Text( Text(
text = "bitchat*", text = "bitchat/",
style = MaterialTheme.typography.headlineSmall, style = MaterialTheme.typography.headlineSmall,
color = colorScheme.primary, color = colorScheme.primary,
modifier = Modifier.singleOrTripleClickable( modifier = Modifier.singleOrTripleClickable(
@@ -434,7 +434,7 @@ private fun MainHeader(
) )
) )
Spacer(modifier = Modifier.width(8.dp)) Spacer(modifier = Modifier.width(2.dp))
NicknameEditor( NicknameEditor(
value = nickname, value = nickname,
@@ -124,11 +124,11 @@ class ChatViewModel(
// Show welcome message if no peers after delay // Show welcome message if no peers after delay
viewModelScope.launch { viewModelScope.launch {
delay(3000) delay(10000)
if (state.getConnectedPeersValue().isEmpty() && state.getMessagesValue().isEmpty()) { if (state.getConnectedPeersValue().isEmpty() && state.getMessagesValue().isEmpty()) {
val welcomeMessage = BitchatMessage( val welcomeMessage = BitchatMessage(
sender = "system", sender = "system",
content = "get people around you to download bitchatand chat with them here!", content = "get people around you to download bitchat and chat with them here!",
timestamp = Date(), timestamp = Date(),
isRelay = false isRelay = false
) )
@@ -93,7 +93,7 @@ fun AppInfoDialog(
onDismissRequest = onDismiss, onDismissRequest = onDismiss,
title = { title = {
Text( Text(
text = "About bitchat*", text = "About bitchat",
style = MaterialTheme.typography.titleMedium, style = MaterialTheme.typography.titleMedium,
color = colorScheme.onSurface color = colorScheme.onSurface
) )
@@ -96,58 +96,66 @@ fun MessageInput(
) { ) {
val colorScheme = MaterialTheme.colorScheme val colorScheme = MaterialTheme.colorScheme
val isFocused = remember { mutableStateOf(false) } val isFocused = remember { mutableStateOf(false) }
val hasText = value.text.isNotBlank() // Check if there's text for send button state
Row( Row(
modifier = modifier.padding(horizontal = 12.dp, vertical = 8.dp), // Reduced padding modifier = modifier.padding(horizontal = 12.dp, vertical = 8.dp), // Reduced padding
verticalAlignment = Alignment.CenterVertically verticalAlignment = Alignment.CenterVertically
) { ) {
// Remove arrow from both private and channel inputs to match DM style // Text input with placeholder
Text( Box(
text = "<@$nickname>", // No arrow for both private and channel modifier = Modifier.weight(1f)
style = MaterialTheme.typography.bodySmall.copy(fontWeight = FontWeight.Medium), ) {
color = when { BasicTextField(
selectedPrivatePeer != null -> Color(0xFFFF9500) // Orange for private value = value,
currentChannel != null -> Color(0xFFFF9500) // Orange for channels too onValueChange = onValueChange,
else -> colorScheme.primary textStyle = MaterialTheme.typography.bodyMedium.copy(
}, color = colorScheme.primary,
fontFamily = FontFamily.Monospace, fontFamily = FontFamily.Monospace
fontSize = 14.sp ),
) cursorBrush = SolidColor(colorScheme.primary),
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Send),
Spacer(modifier = Modifier.width(8.dp)) keyboardActions = KeyboardActions(onSend = {
if (hasText) onSend() // Only send if there's text
// Text input }),
BasicTextField( visualTransformation = SlashCommandVisualTransformation(),
value = value, modifier = Modifier
onValueChange = onValueChange, .fillMaxWidth()
textStyle = MaterialTheme.typography.bodyMedium.copy( .onFocusChanged { focusState ->
color = colorScheme.primary, isFocused.value = focusState.isFocused
fontFamily = FontFamily.Monospace }
), )
cursorBrush = SolidColor(colorScheme.primary),
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Send), // Show placeholder when there's no text
keyboardActions = KeyboardActions(onSend = { onSend() }), if (value.text.isEmpty()) {
visualTransformation = SlashCommandVisualTransformation(), Text(
modifier = Modifier text = "type a message...",
.weight(1f) style = MaterialTheme.typography.bodyMedium.copy(
.onFocusChanged { focusState -> fontFamily = FontFamily.Monospace
isFocused.value = focusState.isFocused ),
} color = colorScheme.onSurface.copy(alpha = 0.5f), // Muted grey
) modifier = Modifier.fillMaxWidth()
)
}
}
Spacer(modifier = Modifier.width(8.dp)) // Reduced spacing Spacer(modifier = Modifier.width(8.dp)) // Reduced spacing
// Update send button to match input field colors // Send button with enabled/disabled state
IconButton( IconButton(
onClick = onSend, onClick = { if (hasText) onSend() }, // Only execute if there's text
enabled = hasText, // Enable only when there's text
modifier = Modifier.size(32.dp) modifier = Modifier.size(32.dp)
) { ) {
Box( Box(
modifier = Modifier modifier = Modifier
.size(30.dp) .size(30.dp)
.background( .background(
color = if (selectedPrivatePeer != null || currentChannel != null) { color = if (!hasText) {
// Orange for both private messages and channels to match nickname color // Disabled state - muted grey
colorScheme.onSurface.copy(alpha = 0.3f)
} else if (selectedPrivatePeer != null || currentChannel != null) {
// Orange for both private messages and channels when enabled
Color(0xFFFF9500).copy(alpha = 0.75f) Color(0xFFFF9500).copy(alpha = 0.75f)
} else if (colorScheme.background == Color.Black) { } else if (colorScheme.background == Color.Black) {
Color(0xFF00FF00).copy(alpha = 0.75f) // Bright green for dark theme Color(0xFF00FF00).copy(alpha = 0.75f) // Bright green for dark theme
@@ -159,10 +167,13 @@ fun MessageInput(
contentAlignment = Alignment.Center contentAlignment = Alignment.Center
) { ) {
Icon( Icon(
imageVector = Icons.Filled.KeyboardArrowRight, imageVector = Icons.Filled.ArrowUpward,
contentDescription = "Send message", contentDescription = "Send message",
modifier = Modifier.size(20.dp), modifier = Modifier.size(20.dp),
tint = if (selectedPrivatePeer != null || currentChannel != null) { tint = if (!hasText) {
// Disabled state - muted grey icon
colorScheme.onSurface.copy(alpha = 0.5f)
} else if (selectedPrivatePeer != null || currentChannel != null) {
// Black arrow on orange for both private and channel modes // Black arrow on orange for both private and channel modes
Color.Black Color.Black
} else if (colorScheme.background == Color.Black) { } else if (colorScheme.background == Color.Black) {