Iterate on the send button colors. Fixes #6312

This commit is contained in:
Benoit Marty
2026-03-10 17:10:15 +01:00
parent bc957f2a50
commit b6321209ed

View File

@@ -8,6 +8,7 @@
package io.element.android.libraries.textcomposer.components
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
@@ -17,14 +18,10 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.LinearGradientShader
import androidx.compose.ui.graphics.ShaderBrush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import io.element.android.compound.theme.ElementTheme
import io.element.android.compound.tokens.generated.CompoundIcons
import io.element.android.libraries.designsystem.colors.gradientActionColors
import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.Icon
@@ -33,7 +30,6 @@ import io.element.android.libraries.designsystem.theme.components.IconButton
/**
* Send button for the message composer.
* Figma: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=1956-37575&node-type=frame&m=dev
* Temporary Figma : https://www.figma.com/design/Ni6Ii8YKtmXCKYNE90cC67/Timeline-(new)?node-id=2274-39944&m=dev
*/
@Composable
internal fun SendButtonIcon(
@@ -49,11 +45,16 @@ internal fun SendButtonIcon(
isEditing -> 0.dp
else -> 2.dp
}
val backgroundColor = if (canSendMessage) {
ElementTheme.colors.bgAccentRest
} else {
Color.Transparent
}
Box(
modifier = modifier
.clip(CircleShape)
.size(36.dp)
.buttonBackgroundModifier(canSendMessage)
.background(backgroundColor)
) {
Icon(
modifier = Modifier
@@ -63,11 +64,7 @@ internal fun SendButtonIcon(
// Note: accessibility is managed in TextComposer.
contentDescription = null,
tint = if (canSendMessage) {
if (ElementTheme.colors.isLight) {
ElementTheme.colors.iconOnSolidPrimary
} else {
ElementTheme.colors.iconPrimary
}
ElementTheme.colors.iconOnSolidPrimary
} else {
ElementTheme.colors.iconQuaternary
}
@@ -75,31 +72,6 @@ internal fun SendButtonIcon(
}
}
@Composable
private fun Modifier.buttonBackgroundModifier(
canSendMessage: Boolean,
) = then(
if (canSendMessage) {
val colors = gradientActionColors()
Modifier.drawWithCache {
val verticalGradientBrush = ShaderBrush(
LinearGradientShader(
from = Offset(0f, 0f),
to = Offset(0f, size.height),
colors = colors,
)
)
onDrawBehind {
drawRect(
brush = verticalGradientBrush,
)
}
}
} else {
Modifier
}
)
@PreviewsDayNight
@Composable
internal fun SendButtonIconPreview() = ElementPreview {