feat: primary button style

Author: jvsena42

app/src/main/java/to/bitkit/ui/components/Button.kt

@@ -1,6 +1,8 @@
 package to.bitkit.ui.components
 
 import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -16,10 +18,13 @@ import androidx.compose.material.icons.filled.Home
 import androidx.compose.material3.Button
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedButton
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
@@ -28,6 +33,7 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import to.bitkit.ui.shared.util.primaryButtonStyle
 import to.bitkit.ui.theme.AppButtonDefaults
 import to.bitkit.ui.theme.AppThemeSurface
 import to.bitkit.ui.theme.Colors
@@ -47,6 +53,7 @@ enum class ButtonSize {
         }
 }
 
+@Suppress("UnusedParameter")
 @Composable
 fun PrimaryButton(
     text: String?,
@@ -57,17 +64,31 @@ fun PrimaryButton(
     size: ButtonSize = ButtonSize.Large,
     enabled: Boolean = true,
     fullWidth: Boolean = true,
-    color: Color = Colors.White16,
+    color: Color = Colors.White16, // Deprecated: Color customization no longer supported
 ) {
     val contentPadding = PaddingValues(horizontal = size.horizontalPadding.takeIf { text != null } ?: 0.dp)
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+    val buttonShape = MaterialTheme.shapes.large
+
     Button(
         onClick = onClick,
         enabled = enabled && !isLoading,
-        colors = AppButtonDefaults.primaryColors.copy(containerColor = color),
+        colors = AppButtonDefaults.primaryColors.copy(
+            containerColor = Color.Transparent,
+            disabledContainerColor = Color.Transparent
+        ),
         contentPadding = contentPadding,
+        interactionSource = interactionSource,
+        shape = buttonShape,
         modifier = Modifier
             .then(if (fullWidth) Modifier.fillMaxWidth() else Modifier)
             .requiredHeight(size.height)
+            .primaryButtonStyle(
+                isPressed = isPressed,
+                isEnabled = enabled && !isLoading,
+                shape = buttonShape
+            )
             .then(modifier)
     ) {
         if (isLoading) {

app/src/main/java/to/bitkit/ui/shared/util/Modifiers.kt

@@ -2,9 +2,11 @@ package to.bitkit.ui.shared.util
 
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.background
+import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.systemBars
@@ -17,10 +19,18 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.unit.dp
+import to.bitkit.ui.theme.ButtonGradients
 import to.bitkit.ui.theme.Colors
 
 /**
@@ -97,3 +107,59 @@ fun Modifier.screen(
     .fillMaxSize()
     .then(if (noBackground) Modifier else Modifier.background(MaterialTheme.colorScheme.background))
     .then(if (insets == null) Modifier else Modifier.windowInsetsPadding(insets))
+
+fun Modifier.primaryButtonStyle(
+    isPressed: Boolean,
+    isEnabled: Boolean,
+    shape: Shape
+): Modifier {
+    return this
+        // Step 1: Add shadow (only when enabled)
+        .then(
+            if (isEnabled) {
+                Modifier.shadow(
+                    elevation = 16.dp,
+                    shape = shape,
+                    clip = false // Don't clip content, just add shadow
+                )
+            } else {
+                Modifier
+            }
+        )
+        // Step 2: Clip to shape first
+        .clip(shape)
+        // Step 3: Apply gradient background with border overlay
+        .then(
+            if (isEnabled) {
+                Modifier.drawWithContent {
+                    // Draw the main gradient background
+                    val mainBrush = if (isPressed) ButtonGradients.Pressed else ButtonGradients.Active
+                    drawRect(brush = mainBrush)
+
+                    // Draw top border highlight (2dp gradient fade)
+                    val borderHeight = 2.dp.toPx()
+                    drawRect(
+                        brush = Brush.verticalGradient(
+                            colors = listOf(
+                                Colors.White16,
+                                Color.Transparent
+                            ),
+                            startY = 0f,
+                            endY = borderHeight
+                        ),
+                        topLeft = Offset(0f, 0f),
+                        size = Size(size.width, borderHeight)
+                    )
+
+                    // Draw the actual button content on top
+                    drawContent()
+                }
+            } else {
+                Modifier.background(
+                    brush = Brush.verticalGradient(
+                        listOf(Colors.White06, Colors.White06)
+                    )
+                )
+            }
+        )
+}

app/src/main/java/to/bitkit/ui/theme/Colors.kt

@@ -1,5 +1,6 @@
 package to.bitkit.ui.theme
 
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 
 object Colors {
@@ -55,3 +56,12 @@ object Colors {
     val Yellow16 = Yellow.copy(alpha = 0.16f)
     val Yellow24 = Yellow.copy(alpha = 0.24f)
 }
+
+object ButtonGradients {
+    val Active = Brush.verticalGradient(
+        colors = listOf(Color(0xFF2A2A2A), Color(0xFF1C1C1C))
+    )
+    val Pressed = Brush.verticalGradient(
+        colors = listOf(Color(0xFF3A3A3A), Color(0xFF2A2A2A))
+    )
+}