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 index 4640ad48b..1f01147bb 100644 --- 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 index aa6792e43..4420572f9 100644 --- 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 index a3a7a5426..d7b7a5a97 100644 --- 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 index 08fc8c193..99ed8f863 100644 --- a/feature/faq/src/main/res/values/strings.xml +++ b/feature/faq/src/main/res/values/strings.xml @@ -17,5 +17,5 @@ Navigate to Payments section. You will find your payment history under the History tab. 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. Navigate to Finance section. Click on Add Card under the Cards tab. - Frequently Asked Question + FAQ\'s \ No newline at end of file