Added Checkbox changed Primary button and TextField (#957)

* Added Checkbox changed Primary button and TextField

* Did code refactoring

* Moved colors and dimens to ZcashTheme color and dimens files

* Changed color resource for Primary button

* Added buttonShadowColor to ExtendedColors

---------

Co-authored-by: Venkatareddy Seelam <45472390+venkatAmigo@users.noreply.github.com>

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/Button.kt

@@ -1,7 +1,10 @@
 package co.electriccoin.zcash.ui.design.component
 
+import android.graphics.BlurMaskFilter
+import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Button
@@ -11,8 +14,15 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Paint
+import androidx.compose.ui.graphics.PaintingStyle
 import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
+import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 
@@ -26,11 +36,13 @@ private fun ButtonComposablePreview() {
                 SecondaryButton(onClick = { }, text = "Secondary")
                 TertiaryButton(onClick = { }, text = "Tertiary")
                 NavigationButton(onClick = { }, text = "Navigation")
+                DangerousButton(onClick = { }, text = "Dangerous")
             }
         }
     }
 }
 
+@Suppress("LongParameterList")
 @Composable
 fun PrimaryButton(
     onClick: () -> Unit,
@@ -40,24 +52,34 @@ fun PrimaryButton(
         horizontal = ZcashTheme.dimens.spacingDefault,
         vertical = ZcashTheme.dimens.spacingSmall
     ),
-    enabled: Boolean = true
+    enabled: Boolean = true,
+    buttonColor: Color = MaterialTheme.colorScheme.primary,
+    textColor: Color = MaterialTheme.colorScheme.onPrimary,
 ) {
     Button(
         shape = RectangleShape,
-        onClick = onClick,
-        modifier = modifier.then(
-            Modifier
-                .fillMaxWidth()
-                .padding(outerPaddingValues)
-        ),
         enabled = enabled,
-        colors = buttonColors(containerColor = MaterialTheme.colorScheme.primary)
+        modifier = modifier
-    ) {
+            .padding(outerPaddingValues)
-        Text(
+            .shadow(
-            style = MaterialTheme.typography.labelLarge,
+                ZcashTheme.colors.buttonShadowColor,
-            text = text,
+                borderRadius = 0.dp,
-            color = MaterialTheme.colorScheme.onPrimary
+                offsetX = ZcashTheme.dimens.shadowOffsetX,
+                offsetY = ZcashTheme.dimens.shadowOffsetY,
+                spread = ZcashTheme.dimens.shadowSpread,
+                blurRadius = 0.dp,
+                stroke = textColor != MaterialTheme.colorScheme.primary,
             )
+            .defaultMinSize(ZcashTheme.dimens.defaultButtonWidth, ZcashTheme.dimens.defaultButtonHeight)
+            .border(1.dp, Color.Black),
+        colors = buttonColors(
+            buttonColor,
+            disabledContainerColor = ZcashTheme.colors.disabledButtonColor,
+            disabledContentColor = ZcashTheme.colors.disabledButtonTextColor
+        ),
+        onClick = onClick,
+    ) {
+        Text(text = text, color = textColor, style = MaterialTheme.typography.labelLarge)
     }
 }
 
@@ -172,3 +194,48 @@ fun DangerousButton(
         )
     }
 }
+
+@Suppress("LongParameterList")
+fun Modifier.shadow(
+    color: Color = Color.Black,
+    borderRadius: Dp = 0.dp,
+    blurRadius: Dp = 0.dp,
+    offsetY: Dp = 0.dp,
+    offsetX: Dp = 0.dp,
+    spread: Dp = 0f.dp,
+    stroke: Boolean = true,
+    modifier: Modifier = Modifier
+) = this.then(
+    modifier.drawBehind {
+        this.drawIntoCanvas {
+            val paint = Paint()
+            if (stroke) {
+                paint.style = PaintingStyle.Stroke
+                paint.strokeWidth = 2f
+                paint.color = Color.Black
+            }
+            val frameworkPaint = paint.asFrameworkPaint()
+            val spreadPixel = spread.toPx()
+            val leftPixel = (0f - spreadPixel) + offsetX.toPx()
+            val topPixel = (0f - spreadPixel) + offsetY.toPx()
+            val rightPixel = (this.size.width + spreadPixel)
+            val bottomPixel = (this.size.height + spreadPixel)
+
+            if (blurRadius != 0.dp) {
+                frameworkPaint.maskFilter =
+                    (BlurMaskFilter(blurRadius.toPx(), BlurMaskFilter.Blur.NORMAL))
+            }
+
+            frameworkPaint.color = color.toArgb()
+            it.drawRoundRect(
+                left = leftPixel,
+                top = topPixel,
+                right = rightPixel,
+                bottom = bottomPixel,
+                radiusX = borderRadius.toPx(),
+                radiusY = borderRadius.toPx(),
+                paint
+            )
+        }
+    }
+)

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/Checkbox.kt

@@ -0,0 +1,41 @@
+package co.electriccoin.zcash.ui.design.component
+
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Checkbox
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import co.electriccoin.zcash.ui.design.theme.ZcashTheme
+
+@Preview
+@Composable
+private fun ComposablePreview() {
+    val checkBoxState = remember { mutableStateOf(false) }
+    ZcashTheme(darkTheme = false) {
+        CheckBox(text = "test", onCheckedChange = { checkBoxState.value = it }, checked = checkBoxState.value)
+    }
+}
+
+@Composable
+fun CheckBox(
+    onCheckedChange: ((Boolean) -> Unit),
+    text: String,
+    modifier: Modifier = Modifier,
+    checked: Boolean = false
+) {
+    Row(modifier = Modifier.padding(8.dp), verticalAlignment = Alignment.CenterVertically) {
+        Checkbox(
+            checked = checked,
+            onCheckedChange = onCheckedChange,
+            enabled = true,
+            modifier = modifier
+        )
+        Text(text = text)
+    }
+}

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/TextField.kt

@@ -1,7 +1,9 @@
 package co.electriccoin.zcash.ui.design.component
 
+import androidx.compose.foundation.border
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.TextField
 import androidx.compose.material3.TextFieldColors
 import androidx.compose.material3.TextFieldDefaults
@@ -10,6 +12,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.unit.dp
 
 @Suppress("LongParameterList")
 @Composable
@@ -28,7 +31,8 @@ fun FormTextField(
         errorContainerColor = Color.Transparent,
     ),
     keyboardActions: KeyboardActions = KeyboardActions.Default,
-    shape: Shape = TextFieldDefaults.shape
+    shape: Shape = TextFieldDefaults.shape,
+    withBorder: Boolean = true, // To enable border around the TextField
 ) {
     TextField(
         value = value,
@@ -36,7 +40,11 @@ fun FormTextField(
         label = label,
         keyboardOptions = keyboardOptions,
         colors = colors,
-        modifier = modifier,
+        modifier = if (withBorder) {
+            modifier.border(width = 1.dp, color = MaterialTheme.colorScheme.primary)
+        } else {
+            modifier
+        },
         leadingIcon = leadingIcon,
         trailingIcon = trailingIcon,
         keyboardActions = keyboardActions,

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/Dimens.kt

@@ -20,6 +20,11 @@ data class Dimens(
     val spacingHuge: Dp,
 
     // List of custom spacings:
+    val shadowOffsetX: Dp,
+    val shadowOffsetY: Dp,
+    val shadowSpread: Dp,
+    val defaultButtonWidth: Dp,
+    val defaultButtonHeight: Dp,
 )
 
 private val defaultDimens = Dimens(
@@ -31,6 +36,11 @@ private val defaultDimens = Dimens(
     spacingLarge = 24.dp,
     spacingXlarge = 32.dp,
     spacingHuge = 64.dp,
+    shadowOffsetX = 20.dp,
+    shadowOffsetY = 20.dp,
+    shadowSpread = 10.dp,
+    defaultButtonWidth = 230.dp,
+    defaultButtonHeight = 50.dp,
 )
 
 private val normalDimens = defaultDimens

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ExtendedColors.kt

@@ -26,7 +26,10 @@ data class ExtendedColors(
     val addressHighlightTransparent: Color,
     val dangerous: Color,
     val onDangerous: Color,
-    val reference: Color
+    val reference: Color,
+    val disabledButtonColor: Color,
+    val disabledButtonTextColor: Color,
+    val buttonShadowColor: Color,
 ) {
     @Composable
     fun surfaceGradient() = Brush.verticalGradient(

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/internal/Color.kt

@@ -54,6 +54,11 @@ internal object Dark {
     val onDangerous = Color(0xFFFFFFFF)
 
     val reference = Color(0xFF10A5FF)
+
+    val disabledButtonColor = Color(0xFFB7B7B7)
+    val disabledButtonTextColor = Color(0xFFDDDDDD)
+
+    val buttonShadowColor = Color(0xFFFFFFFF)
 }
 
 internal object Light {
@@ -106,6 +111,10 @@ internal object Light {
     val onDangerous = Color(0xFFFFFFFF)
 
     val reference = Color(0xFF10A5FF)
+
+    val disabledButtonColor = Color(0xFFB7B7B7)
+    val disabledButtonTextColor = Color(0xFFDDDDDD)
+    val buttonShadowColor = Color(0xFF000000)
 }
 
 internal val DarkColorPalette = darkColorScheme(
@@ -116,7 +125,7 @@ internal val DarkColorPalette = darkColorScheme(
     surface = Dark.backgroundStart,
     onSurface = Dark.textBodyOnBackground,
     background = Dark.backgroundStart,
-    onBackground = Dark.textBodyOnBackground
+    onBackground = Dark.textBodyOnBackground,
 )
 
 internal val LightColorPalette = lightColorScheme(
@@ -127,7 +136,7 @@ internal val LightColorPalette = lightColorScheme(
     surface = Light.backgroundStart,
     onSurface = Light.textBodyOnBackground,
     background = Light.backgroundStart,
-    onBackground = Light.textBodyOnBackground
+    onBackground = Light.textBodyOnBackground,
 )
 
 internal val DarkExtendedColorPalette = ExtendedColors(
@@ -149,7 +158,11 @@ internal val DarkExtendedColorPalette = ExtendedColors(
     addressHighlightTransparent = Dark.addressHighlightTransparent,
     dangerous = Dark.dangerous,
     onDangerous = Dark.onDangerous,
-    reference = Dark.reference
+    disabledButtonTextColor = Dark.disabledButtonTextColor,
+    disabledButtonColor = Dark.disabledButtonColor,
+    reference = Dark.reference,
+    buttonShadowColor = Dark.buttonShadowColor,
+
 )
 
 internal val LightExtendedColorPalette = ExtendedColors(
@@ -171,7 +184,10 @@ internal val LightExtendedColorPalette = ExtendedColors(
     addressHighlightTransparent = Light.addressHighlightTransparent,
     dangerous = Light.dangerous,
     onDangerous = Light.onDangerous,
-    reference = Light.reference
+    disabledButtonTextColor = Light.disabledButtonTextColor,
+    disabledButtonColor = Light.disabledButtonColor,
+    reference = Light.reference,
+    buttonShadowColor = Light.buttonShadowColor
 )
 
 @Suppress("CompositionLocalAllowlist")
@@ -195,6 +211,9 @@ internal val LocalExtendedColors = staticCompositionLocalOf {
         addressHighlightTransparent = Color.Unspecified,
         dangerous = Color.Unspecified,
         onDangerous = Color.Unspecified,
-        reference = Color.Unspecified
+        disabledButtonTextColor = Color.Unspecified,
+        disabledButtonColor = Color.Unspecified,
+        reference = Color.Unspecified,
+        buttonShadowColor = Color.Unspecified,
     )
 }