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