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 package io.element.android.libraries.textcomposer.components
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
@ -17,14 +18,10 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawWithCache import androidx.compose.ui.graphics.Color
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.LinearGradientShader
import androidx.compose.ui.graphics.ShaderBrush
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import io.element.android.compound.theme.ElementTheme import io.element.android.compound.theme.ElementTheme
import io.element.android.compound.tokens.generated.CompoundIcons 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.ElementPreview
import io.element.android.libraries.designsystem.preview.PreviewsDayNight import io.element.android.libraries.designsystem.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.Icon 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. * 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 * 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 @Composable
internal fun SendButtonIcon( internal fun SendButtonIcon(
@ -49,11 +45,16 @@ internal fun SendButtonIcon(
isEditing -> 0.dp isEditing -> 0.dp
else -> 2.dp else -> 2.dp
} }
val backgroundColor = if (canSendMessage) {
ElementTheme.colors.bgAccentRest
} else {
Color.Transparent
}
Box( Box(
modifier = modifier modifier = modifier
.clip(CircleShape) .clip(CircleShape)
.size(36.dp) .size(36.dp)
.buttonBackgroundModifier(canSendMessage) .background(backgroundColor)
) { ) {
Icon( Icon(
modifier = Modifier modifier = Modifier
@ -63,11 +64,7 @@ internal fun SendButtonIcon(
// Note: accessibility is managed in TextComposer. // Note: accessibility is managed in TextComposer.
contentDescription = null, contentDescription = null,
tint = if (canSendMessage) { tint = if (canSendMessage) {
if (ElementTheme.colors.isLight) { ElementTheme.colors.iconOnSolidPrimary
ElementTheme.colors.iconOnSolidPrimary
} else {
ElementTheme.colors.iconPrimary
}
} else { } else {
ElementTheme.colors.iconQuaternary 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 @PreviewsDayNight
@Composable @Composable
internal fun SendButtonIconPreview() = ElementPreview { internal fun SendButtonIconPreview() = ElementPreview {