krypto/kaizen-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: taller capsule input matching Gemini proportions

Browse source 
56dp min height, 30dp corner radius, generous inner padding.
Icons 40dp touch targets, 22dp icon size. Text 16sp centered.
High opacity (0.92/0.97) for solid feel. 16dp horizontal margin.
This commit is contained in:
Bruno Deanoz 2026-06-23 14:18:23 +02:00
parent fb8f21dfd8
commit e683419d96
1 changed files with 24 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
app/src/main/java/dev/kaizen/app/chat/ChatComponents.kt
View file

@ -752,11 +752,11 @@ fun ChatInput(
GlassSurface(
modifier = modifier
.fillMaxWidth()
.padding(horizontal = 10.dp),
.padding(horizontal = 16.dp),
shape = KaizenShapes.pill,
tintAlpha = if (isDark) 0.90f else 0.96f,
tintAlpha = if (isDark) 0.92f else 0.97f,
shadowStack = KaizenShadows.level4,
cornerRadius = 28.dp,
cornerRadius = 30.dp,
) {
Column {
if (isRecording) {
@ -766,7 +766,7 @@ fun ChatInput(
Row(verticalAlignment = Alignment.CenterVertically) {
Spacer(Modifier.weight(1f))
Box(
Modifier.size(36.dp).clip(KaizenShapes.circle)
Modifier.size(40.dp).clip(KaizenShapes.circle)
.background(KaizenSemanticColors.error)
.clickable(onClick = onMicClick),
contentAlignment = Alignment.Center,
@ -807,51 +807,54 @@ fun ChatInput(
// Single-row capsule: Plus | TextField | Tune | Mic | Send/Call
Row(
Modifier.fillMaxWidth().padding(start = 6.dp, end = 6.dp, top = 6.dp, bottom = 6.dp),
Modifier
.fillMaxWidth()
.heightIn(min = 56.dp)
.padding(start = 10.dp, end = 8.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Box(
Modifier.size(36.dp).clip(KaizenShapes.circle).clickable(onClick = onAddClick),
Modifier.size(40.dp).clip(KaizenShapes.circle).clickable(onClick = onAddClick),
contentAlignment = Alignment.Center,
) {
Icon(KaizenIcons.Plus, stringResource(R.string.chat_attachment), tint = cs.onSurfaceVariant, modifier = Modifier.size(20.dp))
Icon(KaizenIcons.Plus, stringResource(R.string.chat_attachment), tint = cs.onSurfaceVariant, modifier = Modifier.size(22.dp))
}
Box(
Modifier.weight(1f).heightIn(min = 36.dp).padding(horizontal = 2.dp),
Modifier.weight(1f).padding(horizontal = 4.dp),
contentAlignment = Alignment.CenterStart,
) {
if (value.isEmpty()) Text(
stringResource(R.string.chat_input_placeholder),
color = cs.onSurfaceVariant.copy(alpha = 0.40f),
fontSize = 15.sp,
color = cs.onSurfaceVariant.copy(alpha = 0.38f),
fontSize = 16.sp,
fontWeight = FontWeight.W300,
)
BasicTextField(
value = value, onValueChange = onValueChange,
textStyle = TextStyle(color = cs.onBackground, fontSize = 15.sp, lineHeight = 22.sp, fontWeight = FontWeight.W300),
textStyle = TextStyle(color = cs.onBackground, fontSize = 16.sp, lineHeight = 24.sp, fontWeight = FontWeight.W300),
cursorBrush = SolidColor(accent.primary), maxLines = 4, modifier = Modifier.fillMaxWidth(),
)
}
if (pillsContent != null) {
Box(
Modifier.size(36.dp).clip(KaizenShapes.circle).clickable { showPills = !showPills },
Modifier.size(40.dp).clip(KaizenShapes.circle).clickable { showPills = !showPills },
contentAlignment = Alignment.Center,
) {
Icon(
KaizenIcons.SlidersHorizontal, null,
tint = if (showPills) accent.primary else cs.onSurfaceVariant.copy(alpha = 0.50f),
modifier = Modifier.size(18.dp),
tint = if (showPills) accent.primary else cs.onSurfaceVariant.copy(alpha = 0.45f),
modifier = Modifier.size(20.dp),
)
}
}
Box(
Modifier.size(36.dp).clip(KaizenShapes.circle).clickable(onClick = onMicClick),
Modifier.size(40.dp).clip(KaizenShapes.circle).clickable(onClick = onMicClick),
contentAlignment = Alignment.Center,
) {
Icon(KaizenIcons.Mic, stringResource(R.string.chat_mic_permission), tint = cs.onSurfaceVariant, modifier = Modifier.size(20.dp))
Icon(KaizenIcons.Mic, stringResource(R.string.chat_mic_permission), tint = cs.onSurfaceVariant, modifier = Modifier.size(22.dp))
}
if (isStreaming) {
@ -932,7 +935,7 @@ private fun SendButton(enabled: Boolean, onClick: () -> Unit) {
}
Box(
Modifier.size(36.dp).scale(pressScale).clip(KaizenShapes.circle).then(fill)
Modifier.size(40.dp).scale(pressScale).clip(KaizenShapes.circle).then(fill)
.clickable(interactionSource = interaction, indication = null, enabled = enabled, onClick = onClick),
contentAlignment = Alignment.Center,
) {
@ -951,7 +954,7 @@ private fun CallButton(onClick: () -> Unit) {
Box(
Modifier
.size(36.dp)
.size(40.dp)
.scale(pressScale)
.clip(KaizenShapes.circle)
.background(
@ -965,7 +968,7 @@ private fun CallButton(onClick: () -> Unit) {
.clickable(interactionSource = interaction, indication = null, onClick = onClick),
contentAlignment = Alignment.Center,
) {
Icon(KaizenIcons.AudioLines, null, tint = accent.primary, modifier = Modifier.size(20.dp))
Icon(KaizenIcons.AudioLines, null, tint = accent.primary, modifier = Modifier.size(22.dp))
}
}
@ -978,14 +981,14 @@ private fun StopButton(onClick: () -> Unit) {
Box(
Modifier
.size(36.dp)
.size(40.dp)
.scale(pressScale)
.clip(KaizenShapes.circle)
.background(KaizenSemanticColors.error.copy(alpha = if (isDark) 0.85f else 0.80f))
.clickable(interactionSource = interaction, indication = null, onClick = onClick),
contentAlignment = Alignment.Center,
) {
Icon(KaizenIcons.Square, stringResource(R.string.chat_stop), tint = Color.White, modifier = Modifier.size(15.dp))
Icon(KaizenIcons.Square, stringResource(R.string.chat_stop), tint = Color.White, modifier = Modifier.size(16.dp))
}
}