Merge pull request #498 from synonymdev/feat/tabbar-v59

TabBar v59

Author: jvsena42

app/src/main/java/to/bitkit/ui/ContentView.kt

@@ -457,7 +457,6 @@ fun ContentView(
 
                     if (showTabBar) {
                         TabBar(
-                            hazeState = hazeState,
                             onSendClick = { appViewModel.showSheet(Sheet.Send()) },
                             onReceiveClick = { appViewModel.showSheet(Sheet.Receive) },
                             onScanClick = { navController.navigateToScanner() },

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

@@ -20,29 +20,32 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowDownward
 import androidx.compose.material.icons.filled.ArrowUpward
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 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.drawWithContent
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import dev.chrisbanes.haze.HazeState
-import dev.chrisbanes.haze.hazeEffect
 import dev.chrisbanes.haze.hazeSource
-import dev.chrisbanes.haze.materials.CupertinoMaterials
 import dev.chrisbanes.haze.materials.ExperimentalHazeMaterialsApi
 import dev.chrisbanes.haze.rememberHazeState
 import to.bitkit.R
+import to.bitkit.ui.shared.util.clickableAlpha
+import to.bitkit.ui.shared.util.gradientBackground
+import to.bitkit.ui.shared.util.primaryButtonStyle
 import to.bitkit.ui.theme.AppThemeSurface
 import to.bitkit.ui.theme.Colors
 
-private val buttonBg = Color(40, 40, 40).copy(alpha = 0.95f)
-private val buttonBgOverlay = Brush.verticalGradient(colors = listOf(buttonBg, Color.Transparent))
 
 private val iconToTextGap = 4.dp
 private val iconSize = 20.dp
@@ -54,7 +57,6 @@ private val buttonRightShape = RoundedCornerShape(topEndPercent = 50, bottomEndP
 @Composable
 fun BoxScope.TabBar(
     modifier: Modifier = Modifier,
-    hazeState: HazeState = rememberHazeState(),
     onSendClick: () -> Unit = {},
     onReceiveClick: () -> Unit = {},
     onScanClick: () -> Unit = {},
@@ -64,37 +66,23 @@ fun BoxScope.TabBar(
         modifier = modifier
             .align(Alignment.BottomCenter)
             .fillMaxWidth()
-            .background(
-                Brush.verticalGradient(
-                    colorStops = arrayOf(
-                        0.0f to Color.Transparent,
-                        0.5f to Colors.Black,
-                    ),
-                )
-            )
             .padding(horizontal = 16.dp)
             .padding(bottom = 16.dp)
             .navigationBarsPadding()
     ) {
-        Row {
-            val buttonMaterial = CupertinoMaterials.ultraThin(containerColor = buttonBg)
+        Row(
+            modifier = Modifier.primaryButtonStyle(
+                isEnabled = true,
+                shape = MaterialTheme.shapes.large,
+            )
+        ) {
             // Send Button
             Box(
                 contentAlignment = Alignment.Center,
                 modifier = Modifier
                     .weight(1f)
                     .height(60.dp)
                     .clip(buttonLeftShape)
-                    .background(buttonBg) // fallback if no haze
-                    .hazeEffect(
-                        state = hazeState,
-                        style = buttonMaterial,
-                    )
-                    .background(
-                        Brush.verticalGradient(
-                            colors = listOf(buttonBg, Color.Transparent),
-                        )
-                    )
                     .clickable { onSendClick() }
                     .testTag("Send")
             ) {
@@ -116,12 +104,6 @@ fun BoxScope.TabBar(
                     .weight(1f)
                     .height(60.dp)
                     .clip(buttonRightShape)
-                    .background(buttonBg) // fallback if no haze
-                    .hazeEffect(
-                        state = hazeState,
-                        style = buttonMaterial,
-                    )
-                    .background(buttonBgOverlay)
                     .clickable { onReceiveClick() }
                     .testTag("Receive")
             ) {
@@ -137,45 +119,74 @@ fun BoxScope.TabBar(
             }
         }
 
-        // Scan Button
-        val scanBg = Colors.Gray6.copy(alpha = 0.75f)
-        // Outer Border
+        // Scan button
         Box(
-            content = {},
             contentAlignment = Alignment.Center,
             modifier = Modifier
-                .size(80.dp)
-                .clip(CircleShape)
-                .background(buttonBg) // fallback if no haze
-                .hazeEffect(
-                    state = hazeState,
-                    style = CupertinoMaterials.regular(containerColor = buttonBg),
-                )
-                .background(
-                    Brush.verticalGradient(colors = listOf(Colors.White10, Color.Transparent))
+                .size(64.dp)
+                // Shadow 1: gray2 shadow with radius 0 at y=-1 (top highlight)
+                .drawWithContent {
+                    // Draw a prominent top highlight
+                    drawCircle(
+                        color = Colors.Gray2,
+                        radius = size.width / 2,
+                        center = Offset(size.width / 2, size.height / 2 - 1.5.dp.toPx()),
+                        alpha = 0.6f
+                    )
+                    drawContent()
+                }
+                // Shadow 2: black 25% opacity, radius 25, y offset 20
+                .shadow(
+                    elevation = 25.dp,
+                    shape = CircleShape,
+                    ambientColor = Colors.Black25,
+                    spotColor = Colors.Black25
                 )
-                .clickable { onScanClick() }
-                .padding(2.dp)
-                .testTag("Scan")
-        )
-        // Inner Content
-        Box(
-            contentAlignment = Alignment.Center,
-            modifier = Modifier
-                .size(76.dp)
                 .clip(CircleShape)
-                .background(buttonBg) // fallback if no haze
-                .hazeEffect(
-                    state = hazeState,
-                    style = CupertinoMaterials.regular(containerColor = Color.Transparent),
-                )
-                .background(scanBg)
+                .background(Colors.Gray7)
+                // Overlay: Circle strokeBorder with linear gradient mask (iOS: .mask)
+                .drawWithContent {
+                    drawContent()
+
+                    // The mask gradient goes from black (visible) at top to clear (invisible) at bottom
+                    val borderWidth = 2.dp.toPx()
+
+                    // Create vertical gradient mask (black to clear)
+                    val maskGradient = Brush.verticalGradient(
+                        colors = listOf(
+                            Color.White, // Top: full opacity (shows border)
+                            Color.Transparent // Bottom: transparent (hides border)
+                        ),
+                        startY = 0f,
+                        endY = size.height
+                    )
+
+                    // Draw solid black circular border first, then apply gradient as alpha mask
+                    drawCircle(
+                        color = Color.Black,
+                        radius = (size.width - borderWidth) / 2,
+                        center = Offset(size.width / 2, size.height / 2),
+                        style = Stroke(width = borderWidth),
+                        alpha = 1f
+                    )
+
+                    // Apply gradient mask by drawing gradient as overlay with BlendMode
+                    drawCircle(
+                        brush = maskGradient,
+                        radius = (size.width - borderWidth) / 2,
+                        center = Offset(size.width / 2, size.height / 2),
+                        style = Stroke(width = borderWidth),
+                        blendMode = androidx.compose.ui.graphics.BlendMode.DstIn
+                    )
+                }
+                .clickableAlpha { onScanClick() }
+                .testTag("Scan")
         ) {
             Icon(
                 painter = painterResource(R.drawable.ic_scan),
                 contentDescription = stringResource(R.string.wallet__recipient_scan),
-                tint = Colors.Gray2,
-                modifier = Modifier.size(32.dp)
+                tint = Colors.Gray1,
+                modifier = Modifier.size(22.dp)
             )
         }
     }
@@ -190,7 +201,8 @@ private fun Preview() {
             contentAlignment = Alignment.BottomCenter,
             modifier = Modifier
                 .fillMaxSize()
-                .background(Colors.Brand)
+                .background(Colors.Black)
+                .gradientBackground()
         ) {
             // Content Behind
             Column(
@@ -205,7 +217,6 @@ private fun Preview() {
                 onSendClick = {},
                 onReceiveClick = {},
                 onScanClick = {},
-                hazeState = hazeState,
             )
         }
     }