Sulkta-Coop/element-x-ada
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Iterate on the send button colors. Fixes #6312

Browse source
This commit is contained in:
Benoit Marty 2026-03-10 17:10:15 +01:00
parent 58351c6558
commit d419508b3f
1 changed files with 9 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

46
libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/SendButtonIcon.kt
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 {