From 0e36b2e6c7d2da79222015c803c59547f030aef6 Mon Sep 17 00:00:00 2001
From: Benoit Marty <benoit@matrix.org>
Date: Wed, 20 Nov 2024 10:07:35 +0100
Subject: [PATCH] Iterate on send button design.

---
 .../textcomposer/components/SendButton.kt     | 67 +++++++++++++++++--
 1 file changed, 62 insertions(+), 5 deletions(-)

diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/SendButton.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/SendButton.kt
index 7f1efe55d2..6b5d601333 100644
--- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/SendButton.kt
+++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/SendButton.kt
@@ -7,7 +7,6 @@
 
 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,7 +16,13 @@ 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.BlendMode
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.LinearGradientShader
+import androidx.compose.ui.graphics.RadialGradientShader
+import androidx.compose.ui.graphics.ShaderBrush
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
@@ -31,6 +36,10 @@ import io.element.android.libraries.matrix.api.timeline.item.event.toEventOrTran
 import io.element.android.libraries.textcomposer.model.MessageComposerMode
 import io.element.android.libraries.ui.strings.CommonStrings
 
+/**
+ * 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
+ */
 @Composable
 internal fun SendButton(
     canSendMessage: Boolean,
@@ -46,7 +55,7 @@ internal fun SendButton(
     ) {
         val iconVector = when (composerMode) {
             is MessageComposerMode.Edit -> CompoundIcons.Check()
-            else -> CompoundIcons.Send()
+            else -> CompoundIcons.SendSolid()
         }
         val iconStartPadding = when (composerMode) {
             is MessageComposerMode.Edit -> 0.dp
@@ -60,7 +69,13 @@ internal fun SendButton(
             modifier = Modifier
                 .clip(CircleShape)
                 .size(36.dp)
-                .background(if (canSendMessage) ElementTheme.colors.iconAccentTertiary else Color.Transparent)
+                .then(
+                    if (canSendMessage) {
+                        buttonBackgroundModifier()
+                    } else {
+                        Modifier
+                    }
+                )
         ) {
             Icon(
                 modifier = Modifier
@@ -68,13 +83,55 @@ internal fun SendButton(
                     .align(Alignment.Center),
                 imageVector = iconVector,
                 contentDescription = contentDescription,
-                // Exception here, we use Color.White instead of ElementTheme.colors.iconOnSolidPrimary
-                tint = if (canSendMessage) Color.White else ElementTheme.colors.iconDisabled
+                tint = if (canSendMessage) {
+                    if (ElementTheme.colors.isLight) {
+                        ElementTheme.colors.iconOnSolidPrimary
+                    } else {
+                        ElementTheme.colors.iconPrimary
+                    }
+                } else {
+                    ElementTheme.colors.iconQuaternary
+                }
             )
         }
     }
 }
 
+private fun buttonBackgroundModifier() = Modifier.drawWithCache {
+    // We have a square button, so height == width.
+    val height = size.height
+    val verticalGradientBrush = ShaderBrush(
+        LinearGradientShader(
+            from = Offset(0f, 0f),
+            to = Offset(0f, height),
+            colors = listOf(
+                Color(0xFF0BC491),
+                Color(0xFF0467DD),
+            )
+        )
+    )
+    val radialGradientBrush = ShaderBrush(
+        RadialGradientShader(
+            center = Offset(height / 2f, height / 2f),
+            radius = height / 2f,
+            colors = listOf(
+                Color(0xFF0BC491),
+                Color(0xFF0467DD),
+            )
+        )
+    )
+    onDrawBehind {
+        drawRect(
+            brush = verticalGradientBrush,
+        )
+        drawRect(
+            brush = radialGradientBrush,
+            alpha = 0.4f,
+            blendMode = BlendMode.Overlay,
+        )
+    }
+}
+
 @PreviewsDayNight
 @Composable
 internal fun SendButtonPreview() = ElementPreview {