Merge pull request #6314 from element-hq/feature/bma/sendButtonColors

Iterate on send button colors

Author: bmarty

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/SendButtonIcon.kt

@@ -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,43 +64,14 @@ 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
             }
         )
     }
 }
 
-@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 {