Profile UI redesign (#1767)

* Refactor Profile UI

* Fixed Build Issue

* Profile UI Bug Fix & Improvement

* added placeholder for  when uri is null

cleanup

fix spotless test failure

* Fix - CI Build Issue

---------

Co-authored-by: Sk Niyaj Ali <[email protected]>

core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/Background.kt

@@ -21,7 +21,6 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawWithCache
-import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
@@ -31,7 +30,6 @@ import org.mifospay.core.designsystem.theme.GradientColors
 import org.mifospay.core.designsystem.theme.LocalBackgroundTheme
 import org.mifospay.core.designsystem.theme.LocalGradientColors
 import org.mifospay.core.designsystem.theme.MifosTheme
-import kotlin.math.tan
 
 /**
  * The main background for the app.
@@ -86,44 +84,13 @@ fun MifosGradientBackground(
             Modifier
                 .fillMaxSize()
                 .drawWithCache {
-                    // Compute the start and end coordinates such that the gradients are angled 11.06
-                    // degrees off the vertical axis
-                    val offset = size.height * tan(
-                        Math
-                            .toRadians(11.06)
-                            .toFloat(),
-                    )
-
-                    val start = Offset(size.width / 2 + offset / 2, 0f)
-                    val end = Offset(size.width / 2 - offset / 2, size.height)
-
-                    // Create the top gradient that fades out after the halfway point vertically
-                    val topGradient = Brush.linearGradient(
-                        0f to if (currentTopColor == Color.Unspecified) {
-                            Color.Transparent
-                        } else {
-                            currentTopColor
-                        },
-                        0.724f to Color.Transparent,
-                        start = start,
-                        end = end,
-                    )
-                    // Create the bottom gradient that fades in before the halfway point vertically
-                    val bottomGradient = Brush.linearGradient(
-                        0.2552f to Color.Transparent,
-                        1f to if (currentBottomColor == Color.Unspecified) {
-                            Color.Transparent
-                        } else {
-                            currentBottomColor
-                        },
-                        start = start,
-                        end = end,
+                    val mainGradient = Brush.linearGradient(
+                        colors = listOf(currentTopColor, currentBottomColor),
                     )
 
                     onDrawBehind {
                         // There is overlap here, so order is important
-                        drawRect(topGradient)
-                        drawRect(bottomGradient)
+                        drawRect(mainGradient)
                     }
                 },
         ) {

core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/IconBox.kt

@@ -0,0 +1,59 @@
+/*
+ * Copyright 2024 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * See https://github.com/openMF/mobile-wallet/blob/master/LICENSE.md
+ */
+package org.mifospay.core.designsystem.component
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.OutlinedIconButton
+import androidx.compose.material3.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.mifospay.core.designsystem.icon.MifosIcons
+import org.mifospay.core.designsystem.theme.MifosTheme
+import org.mifospay.core.designsystem.theme.NewUi
+
+@Composable
+fun IconBox(
+    icon: ImageVector,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    OutlinedIconButton(
+        onClick = onClick,
+        modifier = modifier,
+        shape = RoundedCornerShape(12.dp),
+        border = BorderStroke(2.dp, NewUi.onSurface.copy(alpha = 0.1f)),
+    ) {
+        Icon(
+            imageVector = icon,
+            contentDescription = icon.name,
+        )
+    }
+}
+
+@Composable
+@Preview
+private fun IconBoxPreview(
+    modifier: Modifier = Modifier,
+) {
+    MifosTheme {
+        Surface {
+            IconBox(
+                icon = MifosIcons.ArrowBack2,
+                modifier = modifier,
+                onClick = {},
+            )
+        }
+    }
+}

core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/MifosScaffold.kt

@@ -49,6 +49,7 @@ fun MifosScaffold(
         snackbarHost = snackbarHost,
         content = scaffoldContent,
         modifier = modifier,
+        containerColor = Color.Transparent,
     )
 }
 

core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/MifosTopBar.kt

@@ -10,15 +10,14 @@
 package org.mifospay.core.designsystem.component
 
 import androidx.compose.foundation.layout.RowScope
+import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import org.mifospay.core.designsystem.icon.MifosIcons
 
@@ -30,26 +29,21 @@ fun MifosTopBar(
     modifier: Modifier = Modifier,
     actions: @Composable RowScope.() -> Unit = {},
 ) {
-    TopAppBar(
+    CenterAlignedTopAppBar(
         title = {
             Text(
                 text = stringResource(id = topBarTitle),
-                style = MaterialTheme.typography.titleLarge,
-                color = MaterialTheme.colorScheme.onSurface,
+                style = MaterialTheme.typography.titleMedium,
             )
         },
         navigationIcon = {
-            IconButton(onClick = { backPress.invoke() }) {
-                Icon(
-                    imageVector = MifosIcons.ArrowBack,
-                    contentDescription = "Back",
-                    tint = MaterialTheme.colorScheme.onSurface,
-                )
-            }
+            IconBox(
+                icon = MifosIcons.ArrowBack2,
+                onClick = backPress,
+            )
         },
-        colors =
-        TopAppBarDefaults.mediumTopAppBarColors(
-            containerColor = MaterialTheme.colorScheme.surface,
+        colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
+            containerColor = Color.Transparent,
         ),
         actions = actions,
         modifier = modifier,

core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/TextField.kt

@@ -11,34 +11,53 @@ package org.mifospay.core.designsystem.component
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Visibility
 import androidx.compose.material.icons.filled.VisibilityOff
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.OutlinedTextFieldDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import org.mifospay.core.designsystem.theme.MifosTheme
+import org.mifospay.core.designsystem.theme.NewUi
 
 @Composable
 fun MfOutlinedTextField(
@@ -172,6 +191,91 @@ fun MifosOutlinedTextField(
     )
 }
 
+@Composable
+fun MifosTextField(
+    value: String,
+    onValueChange: (String) -> Unit,
+    label: String,
+    modifier: Modifier = Modifier
+        .fillMaxWidth()
+        .padding(horizontal = 20.dp),
+    enabled: Boolean = true,
+    readOnly: Boolean = false,
+    textStyle: TextStyle = LocalTextStyle.current,
+    visualTransformation: VisualTransformation = VisualTransformation.None,
+    keyboardActions: KeyboardActions = KeyboardActions.Default,
+    singleLine: Boolean = true,
+    maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,
+    minLines: Int = 1,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    keyboardOptions: KeyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
+) {
+    var isFocused by rememberSaveable { mutableStateOf(false) }
+
+    BasicTextField(
+        value = value,
+        onValueChange = onValueChange,
+        textStyle = textStyle,
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(top = 10.dp)
+            .onFocusChanged { focusState ->
+                isFocused = focusState.isFocused
+            }
+            .semantics(mergeDescendants = true) {},
+        enabled = enabled,
+        readOnly = readOnly,
+        visualTransformation = visualTransformation,
+        keyboardOptions = keyboardOptions,
+        keyboardActions = keyboardActions,
+        interactionSource = interactionSource,
+        singleLine = singleLine,
+        maxLines = maxLines,
+        minLines = minLines,
+        cursorBrush = SolidColor(NewUi.primaryColor),
+        decorationBox = { innerTextField ->
+            Column {
+                Text(
+                    text = label,
+                    color = NewUi.primaryColor,
+                    style = MaterialTheme.typography.labelLarge,
+                    modifier = Modifier.align(alignment = Alignment.Start),
+                )
+
+                Spacer(modifier = Modifier.height(5.dp))
+
+                innerTextField()
+
+                Spacer(modifier = Modifier.height(5.dp))
+                HorizontalDivider(
+                    thickness = 1.dp,
+                    color = if (isFocused) {
+                        NewUi.secondaryColor
+                    } else {
+                        NewUi.onSurface.copy(alpha = 0.05f)
+                    },
+                )
+            }
+        },
+    )
+}
+
+@Composable
+@Preview
+fun MfTextFieldPreview(modifier: Modifier = Modifier) {
+    MifosTheme {
+        Box(
+            modifier = modifier.background(color = Color.White),
+        ) {
+            MifosTextField(
+                value = "Text Field Value",
+                onValueChange = {},
+                label = "Text Field",
+            )
+        }
+    }
+}
+
 @Preview
 @Composable
 fun MfOutlinedTextFieldPreview() {

core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/component/TopAppBar.kt

@@ -12,12 +12,14 @@
 package org.mifospay.core.designsystem.component
 
 import androidx.annotation.StringRes
+import androidx.compose.foundation.layout.RowScope
 import androidx.compose.material3.CenterAlignedTopAppBar
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarColors
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
@@ -72,6 +74,26 @@ fun MifosTopAppBar(
     )
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun MifosTopAppBar(
+    @StringRes titleRes: Int,
+    modifier: Modifier = Modifier,
+    actions:
+    @Composable()
+    (RowScope.() -> Unit) = {},
+    colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(
+        containerColor = Color.Transparent,
+    ),
+) {
+    TopAppBar(
+        title = { Text(text = stringResource(id = titleRes)) },
+        actions = actions,
+        colors = colors,
+        modifier = modifier.testTag("mifosTopAppBar"),
+    )
+}
+
 @Composable
 fun MifosNavigationTopAppBar(
     @StringRes titleRes: Int,