refactor: Faq UI (#1778)

* faq screen redesign * fix spotless
openMF · Oct 3, 2024 · ed13072 · ed13072
1 parent 845b4fd
commit ed13072
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 53 deletions.
diff --git a/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/icon/MifosIcons.kt b/core/designsystem/src/main/kotlin/org/mifospay/core/designsystem/icon/MifosIcons.kt
@@ -12,7 +12,6 @@ package org.mifospay.core.designsystem.icon
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.automirrored.outlined.ArrowBack
-import androidx.compose.material.icons.filled.ArrowDropDown
 import androidx.compose.material.icons.filled.ArrowOutward
 import androidx.compose.material.icons.filled.AttachMoney
 import androidx.compose.material.icons.filled.Camera
@@ -26,6 +25,7 @@ import androidx.compose.material.icons.filled.Edit
 import androidx.compose.material.icons.filled.FlashOff
 import androidx.compose.material.icons.filled.FlashOn
 import androidx.compose.material.icons.filled.Info
+import androidx.compose.material.icons.filled.KeyboardArrowDown
 import androidx.compose.material.icons.filled.Photo
 import androidx.compose.material.icons.filled.PhotoLibrary
 import androidx.compose.material.icons.filled.QrCode
@@ -58,15 +58,13 @@ import androidx.compose.ui.graphics.vector.ImageVector
  */
 object MifosIcons {
     val ChevronRight: ImageVector = Icons.Filled.ChevronRight
-
-//    val Edit : ImageVector = Icons.Outlined.Edit
     val QrCode: ImageVector = Icons.Filled.QrCode
     val Close: ImageVector = Icons.Filled.Close
     val AttachMoney: ImageVector = Icons.Filled.AttachMoney
     val VisibilityOff: ImageVector = Icons.Filled.VisibilityOff
     val Visibility: ImageVector = Icons.Filled.Visibility
     val Check: ImageVector = Icons.Default.Check
-    val ArrowDropDown: ImageVector = Icons.Default.ArrowDropDown
+    val KeyboardArrowDown: ImageVector = Icons.Default.KeyboardArrowDown
     val Home = Icons.Outlined.Home
     val HomeBoarder = Icons.Rounded.Home
     val Payment = Icons.Rounded.SwapHoriz

diff --git a/core/ui/src/main/kotlin/org/mifospay/core/ui/FaqItemScreen.kt b/core/ui/src/main/kotlin/org/mifospay/core/ui/FaqItemScreen.kt
@@ -10,15 +10,20 @@
 package org.mifospay.core.ui
 
 import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.core.Spring
-import androidx.compose.animation.core.spring
 import androidx.compose.animation.expandVertically
 import androidx.compose.animation.fadeIn
-import androidx.compose.foundation.clickable
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -31,9 +36,12 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.scale
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import org.mifospay.core.designsystem.icon.MifosIcons
+import org.mifospay.core.designsystem.theme.NewUi
 
 @Composable
 fun FaqItemScreen(
@@ -42,56 +50,73 @@ fun FaqItemScreen(
     answer: String? = null,
 ) {
     var isSelected by remember { mutableStateOf(false) }
+    val density = LocalDensity.current
 
-    Column(
-        modifier = modifier
-            .fillMaxWidth()
-            .padding(horizontal = 16.dp),
+    Card(
+        modifier = modifier.fillMaxWidth(),
+        onClick = { isSelected = !isSelected },
+        colors = CardDefaults.cardColors(
+            containerColor = Color.Transparent,
+        ),
+        shape = RoundedCornerShape(0.dp),
     ) {
-        Row(
-            modifier = Modifier
-                .clickable {
-                    isSelected = !isSelected
-                }
-                .padding(vertical = 8.dp),
-            verticalAlignment = Alignment.CenterVertically,
+        Column(
+            modifier = Modifier.padding(
+                horizontal = 20.dp,
+                vertical = 25.dp,
+            ),
         ) {
-            Text(
-                text = question.orEmpty(),
-                style = MaterialTheme.typography.bodyMedium.copy(fontWeight = FontWeight.Bold),
-                color = MaterialTheme.colorScheme.onSurface,
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .weight(1f),
-            )
+            Row {
+                Text(
+                    text = question.orEmpty(),
+                    color = MaterialTheme.colorScheme.onSurface,
+                    fontWeight = FontWeight(500),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .weight(1f),
+                )
 
-            Icon(
-                imageVector = MifosIcons.ArrowDropDown,
-                contentDescription = "drop down",
-                tint = MaterialTheme.colorScheme.onSurface,
-                modifier = Modifier
-                    .scale(1f, if (isSelected) -1f else 1f),
-            )
-        }
+                Icon(
+                    imageVector = MifosIcons.KeyboardArrowDown,
+                    contentDescription = "drop down",
+                    tint = MaterialTheme.colorScheme.onSurface,
+                    modifier = Modifier.scale(1f, if (isSelected) -1f else 1f),
+                )
+            }
+            Row {
+                AnimatedVisibility(
+                    modifier = Modifier.weight(1f),
+                    visible = isSelected,
+                    enter = slideInVertically {
+                        with(density) { -40.dp.roundToPx() }
+                    } + expandVertically(
+                        expandFrom = Alignment.Top,
+                    ) + fadeIn(
+                        initialAlpha = 0.3f,
+                    ),
+                    exit = slideOutVertically() + shrinkVertically() + fadeOut(),
+                ) {
+                    Text(
+                        text = answer.orEmpty(),
+                        style = MaterialTheme.typography.bodySmall,
+                        color = MaterialTheme.colorScheme.onSurface,
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(top = 4.dp)
+                            .weight(1f),
+                    )
+                }
 
-        AnimatedVisibility(
-            visible = isSelected,
-            enter = fadeIn() + expandVertically(
-                animationSpec = spring(
-                    stiffness = Spring.StiffnessMedium,
-                ),
-            ),
-        ) {
-            Text(
-                text = answer.orEmpty(),
-                style = MaterialTheme.typography.bodyMedium,
-                color = MaterialTheme.colorScheme.onSurface,
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(bottom = 8.dp),
-            )
+                Spacer(modifier = Modifier.weight(.1f))
+            }
         }
 
-        HorizontalDivider()
+        HorizontalDivider(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 20.dp),
+            thickness = 1.dp,
+            color = NewUi.onSurface.copy(alpha = 0.05f),
+        )
     }
 }
diff --git a/feature/faq/src/main/kotlin/org/mifospay/feature/faq/FaqScreen.kt b/feature/faq/src/main/kotlin/org/mifospay/feature/faq/FaqScreen.kt
@@ -46,7 +46,7 @@ private fun FaqScreen(
             .fillMaxSize(),
     ) {
         MifosTopBar(
-            topBarTitle = R.string.feature_faq_frequently_asked_questions,
+            topBarTitle = R.string.feature_faq,
             backPress = { navigateBack.invoke() },
         )
         LazyColumn(

diff --git a/feature/faq/src/main/res/values/strings.xml b/feature/faq/src/main/res/values/strings.xml
@@ -17,5 +17,5 @@
     <string name="feature_faq_answer2">Navigate to Payments section. You will find your payment history under the History tab.</string>
     <string name="feature_faq_answer3">To make a transfer, navigate to Payments section.Under the Send tab, from there you can choose the type of transfer, add the amount and submit.</string>
     <string name="feature_faq_answer4">Navigate to Finance section. Click on Add Card under the Cards tab.</string>
-    <string name="feature_faq_frequently_asked_questions">Frequently Asked Question</string>
+    <string name="feature_faq">FAQ\'s</string>
 </resources>