Improved the divider height on HelpScreen to match the previous design.

core/src/main/java/org/kiwix/kiwixmobile/core/help/HelpScreen.kt

@@ -19,6 +19,7 @@
 package org.kiwix.kiwixmobile.core.help
 
 import android.app.Activity
+import android.content.res.Configuration
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.isSystemInDarkTheme
@@ -33,6 +34,7 @@ import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.minimumInteractiveComponentSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -40,13 +42,16 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
 import org.kiwix.kiwixmobile.core.R
 import org.kiwix.kiwixmobile.core.error.DiagnosticReportActivity
 import org.kiwix.kiwixmobile.core.extensions.ActivityExtensions.start
 import org.kiwix.kiwixmobile.core.ui.components.KiwixAppBar
+import org.kiwix.kiwixmobile.core.ui.components.NavigationIcon
 import org.kiwix.kiwixmobile.core.ui.theme.KiwixTheme
 import org.kiwix.kiwixmobile.core.ui.theme.MineShaftGray350
 import org.kiwix.kiwixmobile.core.ui.theme.MineShaftGray600
+import org.kiwix.kiwixmobile.core.utils.ComposeDimens.HELP_SCREEN_DIVIDER_HEIGHT
 import org.kiwix.kiwixmobile.core.utils.ComposeDimens.SIXTEEN_DP
 
 @Suppress("ComposableLambdaParameterNaming")
@@ -69,7 +74,7 @@ fun HelpScreen(
     ) { innerPadding ->
       Column(modifier = Modifier.padding(innerPadding)) {
         SendReportRow()
-        HorizontalDivider(color = dividerColor)
+        HorizontalDivider(color = dividerColor, thickness = HELP_SCREEN_DIVIDER_HEIGHT)
         HelpItemList(data, dividerColor)
       }
     }
@@ -79,7 +84,7 @@ fun HelpScreen(
 @Composable
 fun SendReportRow() {
   val context = LocalContext.current
-  // val isDarkTheme = isSystemInDarkTheme()
+  val isDarkTheme = isSystemInDarkTheme()
 
   Row(
     modifier = Modifier
@@ -91,14 +96,14 @@ fun SendReportRow() {
     Image(
       painter = painterResource(R.drawable.ic_feedback_orange_24dp),
       contentDescription = stringResource(R.string.send_report),
-      modifier = Modifier
-        .padding(SIXTEEN_DP)
+      modifier = Modifier.padding(SIXTEEN_DP)
     )
 
     Text(
       text = stringResource(R.string.send_report),
-      // color = if (isDarkTheme) Color.LightGray else Color.DarkGray,
-      style = MaterialTheme.typography.titleMedium
+      color = if (isDarkTheme) Color.LightGray else Color.DarkGray,
+      style = MaterialTheme.typography.titleMedium,
+      modifier = Modifier.minimumInteractiveComponentSize()
     )
   }
 }
@@ -111,7 +116,40 @@ fun HelpItemList(data: List<HelpScreenItemDataClass>, dividerColor: Color) {
   ) {
     itemsIndexed(data, key = { _, item -> item.title }) { _, item ->
       HelpScreenItem(data = item)
-      HorizontalDivider(color = dividerColor)
+      HorizontalDivider(color = dividerColor, thickness = HELP_SCREEN_DIVIDER_HEIGHT)
     }
   }
 }
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+// @Preview()
+@Composable
+fun PreviewScreen() {
+  HelpScreen(
+    data = transformToHelpScreenData(LocalContext.current, rawTitleDescriptionMap())
+  ) { NavigationIcon(onClick = { }) }
+}
+
+fun rawTitleDescriptionMap(): List<Pair<Int, Any>> =
+  listOf(
+    R.string.help_2 to R.array.description_help_2,
+    R.string.help_5 to R.array.description_help_5,
+    R.string.how_to_update_content to R.array.update_content_description
+  )
+
+// fun transformToHelpScreenData(
+//   context: Context,
+//   rawTitleDescriptionMap: List<Pair<Int, Any>>
+// ): List<HelpScreenItemDataClass> {
+//   return rawTitleDescriptionMap.map { (titleResId, description) ->
+//     val title = context.getString(titleResId)
+//     val descriptionValue = when (description) {
+//       is String -> description
+//       is Int -> context.resources.getStringArray(description).joinToString(separator = "\n")
+//       else -> {
+//         throw IllegalArgumentException("Invalid description resource type for title: $titleResId")
+//       }
+//     }
+//     HelpScreenItemDataClass(title, descriptionValue)
+//   }
+// }

core/src/main/java/org/kiwix/kiwixmobile/core/help/HelpScreenItem.kt

@@ -21,6 +21,7 @@ package org.kiwix.kiwixmobile.core.help
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.isSystemInDarkTheme
@@ -32,11 +33,10 @@ 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.layout.size
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.KeyboardArrowDown
-import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
+import androidx.compose.material3.minimumInteractiveComponentSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -45,21 +45,23 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import org.kiwix.kiwixmobile.core.R
+import org.kiwix.kiwixmobile.core.utils.ComposeDimens.EIGHT_DP
+import org.kiwix.kiwixmobile.core.utils.ComposeDimens.HELP_SCREEN_ITEM_TITLE_LETTER_SPACING
+import org.kiwix.kiwixmobile.core.utils.ComposeDimens.HELP_SCREEN_ITEM_TITLE_TEXT_SIZE
 
 // Define constants for spacing, font sizes, etc.
 
-private val HelpItemTitleFontSize = 22.sp
 private val HelpItemDescriptionFontSize = 17.sp
-private val IconSize = 36.dp
 private const val HELP_ITEM_ANIMATION_DURATION = 300
 private const val HELP_ITEM_ARROW_ROTATION_OPEN = 180f
 private const val HELP_ITEM_ARROW_ROTATION_CLOSE = 0f
@@ -72,19 +74,18 @@ fun HelpScreenItem(
 ) {
   var isOpen by remember { mutableStateOf(initiallyOpened) }
   val itemColor = if (isSystemInDarkTheme()) Color.White else Color.Black
-
-  val topPadding: Dp = dimensionResource(id = R.dimen.dimen_medium_padding)
   val horizontalPadding: Dp = dimensionResource(id = R.dimen.activity_horizontal_margin)
 
   Column(
     modifier = modifier
-      .fillMaxWidth(),
+      .fillMaxWidth()
+      .padding(vertical = EIGHT_DP),
     verticalArrangement = Arrangement.Center,
     horizontalAlignment = Alignment.CenterHorizontally
   ) {
     HelpItemHeader(data.title, isOpen, itemColor, horizontalPadding) { isOpen = !isOpen }
     AnimatedVisibility(visible = isOpen) {
-      Spacer(modifier = Modifier.height(topPadding))
+      Spacer(modifier = Modifier.height(EIGHT_DP))
       HelpItemDescription(data.description, itemColor, horizontalPadding)
     }
   }
@@ -111,23 +112,26 @@ fun HelpItemHeader(
     modifier = Modifier
       .fillMaxWidth()
       .clickable(interactionSource = interactionSource, indication = null, onClick = onToggle)
-      .padding(horizontal = horizontalPadding, vertical = horizontalPadding)
+      .padding(horizontal = horizontalPadding, vertical = EIGHT_DP)
   ) {
     Text(
       text = title,
-      fontSize = HelpItemTitleFontSize,
+      fontSize = HELP_SCREEN_ITEM_TITLE_TEXT_SIZE,
       color = itemColor,
-      fontWeight = FontWeight.Normal
+      fontWeight = FontWeight.Medium,
+      letterSpacing = HELP_SCREEN_ITEM_TITLE_LETTER_SPACING,
+      modifier = Modifier.minimumInteractiveComponentSize()
     )
-    Icon(
+    Image(
       imageVector = Icons.Default.KeyboardArrowDown,
       contentDescription = stringResource(R.string.expand),
       modifier = Modifier
         .graphicsLayer {
           rotationZ = arrowRotation
         }
-        .size(IconSize),
-      tint = itemColor
+        .minimumInteractiveComponentSize(),
+      contentScale = ContentScale.Inside,
+      colorFilter = ColorFilter.tint(color = itemColor)
     )
   }
 }

core/src/main/java/org/kiwix/kiwixmobile/core/utils/ComposeDimens.kt

@@ -98,4 +98,10 @@ object ComposeDimens {
 
   // LocalLibraryFragment dimens
   val FAB_ICON_BOTTOM_MARGIN = 50.dp
+
+  // HelpFragment dimens
+  val HELP_SCREEN_DIVIDER_HEIGHT = 0.7.dp
+  val HELP_SCREEN_ITEM_TITLE_TEXT_SIZE = 20.sp
+  val HELP_SCREEN_ITEM_TITLE_LETTER_SPACING = 0.0125.em
+  val HELP_SCREEN_ARROW_ICON_MINIMUM_SIZE = 48.dp
 }