Merge pull request #3901 from element-hq/feature/bma/sendButtonIteration

Send button iteration

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,21 +69,69 @@ 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
                     .padding(start = iconStartPadding)
                     .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 {