Merge pull request #96 from code-payments/fix/micropayment-coloring

style: update micropayment confirmation modal coloring

Author: bmc08gt

app/src/main/java/com/getcode/view/components/SlideToConfirm.kt

@@ -87,6 +87,9 @@ object SlideToConfirmDefaults {
             modifier = modifier,
         )
     }
+
+    val BlueTrackColor = Track.BlueColor
+    val BlackTrackColor = Track.BlackColor
 }
 
 private object Thumb {
@@ -101,7 +104,9 @@ private object Track {
     val VelocityThreshold = SwipeableDefaults.VelocityThreshold * 10
     val Shape: Shape
         @Composable get() = CodeTheme.shapes.small
-    val Color = Color(0xFF201D1D)
+
+    val BlueColor = Color(0xFF11142A)
+    val BlackColor = Color(0xFF201D1D)
 }
 
 
@@ -110,6 +115,7 @@ fun SlideToConfirm(
     onConfirm: () -> Unit,
     modifier: Modifier = Modifier,
     trackShape: Shape = Track.Shape,
+    trackColor: Color = Track.BlackColor,
     thumbShape: Shape = Thumb.Shape,
     isLoading: Boolean = false,
     isSuccess: Boolean = false,
@@ -152,6 +158,7 @@ fun SlideToConfirm(
         enabled = !loading,
         modifier = modifier,
         shape = trackShape,
+        color = trackColor,
     ) {
         if (!isSuccess) {
             hint(swipeFraction, PaddingValues(horizontal = Thumb.Size + CodeTheme.dimens.grid.x2))
@@ -212,6 +219,7 @@ private fun Track(
     enabled: Boolean,
     modifier: Modifier = Modifier,
     shape: Shape = Track.Shape,
+    color: Color = Track.BlackColor,
     content: @Composable (BoxScope.() -> Unit),
 ) {
     val density = LocalDensity.current
@@ -251,7 +259,7 @@ private fun Track(
                 velocityThreshold = Track.VelocityThreshold,
             )
             .background(
-                color = Track.Color,
+                color = color,
                 shape = shape,
             )
             .padding(

app/src/main/java/com/getcode/view/main/home/components/PaymentConfirmation.kt

@@ -19,6 +19,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.shape.ZeroCornerSize
 import androidx.compose.material.Text
 import androidx.compose.material.TextButton
 import androidx.compose.material.minimumInteractiveComponentSize
@@ -31,6 +32,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -45,11 +47,13 @@ import com.getcode.model.Kind
 import com.getcode.model.Rate
 import com.getcode.models.PaymentConfirmation
 import com.getcode.models.PaymentState
+import com.getcode.theme.Brand
 import com.getcode.theme.CodeTheme
 import com.getcode.theme.White50
 import com.getcode.view.components.ButtonState
 import com.getcode.view.components.CodeButton
 import com.getcode.view.components.SlideToConfirm
+import com.getcode.view.components.SlideToConfirmDefaults
 import kotlinx.coroutines.delay
 
 @Composable
@@ -77,15 +81,25 @@ internal fun PaymentConfirmation(
         modifier = modifier
             .fillMaxWidth()
             .wrapContentHeight()
-            .background(Color.Black)
+            .clip(
+                CodeTheme.shapes.medium.copy(
+                    bottomStart = ZeroCornerSize,
+                    bottomEnd = ZeroCornerSize
+                )
+            )
+            .background(Brand)
             .padding(horizontal = 20.dp, vertical = 30.dp)
             .windowInsetsPadding(WindowInsets.navigationBars),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.spacedBy(15.dp)
     ) {
         val amount = requestedAmount
         if (state != null && amount != null && balance != null) {
-            if (balance.kin >= amount.kin) {
+            val balanceAmount = remember {
+                balance.kin
+            }
+
+            if (balanceAmount >= amount.kin) {
                 PaymentConfirmationContent(
                     amount = amount,
                     isSending = isSending,
@@ -297,6 +311,7 @@ private fun PaymentConfirmationContent(
     }
     SlideToConfirm(
         isLoading = isSending,
+        trackColor = SlideToConfirmDefaults.BlueTrackColor,
         isSuccess = state is PaymentState.Sent,
         onConfirm = { onApproved() },
     )