Fixed the design of the HelpScreen to match the previous one.

* Fixed the arrow icon size.
* Fixed the description size and color. Also, made it support web links as it did in the XML-based design.
* Removed unused code from the project.

app/src/main/res/navigation/kiwix_nav_graph.xml

@@ -129,8 +129,7 @@
   <fragment
     android:id="@+id/helpFragment"
     android:name="org.kiwix.kiwixmobile.help.KiwixHelpFragment"
-    android:label="HelpFragment"
+    android:label="HelpFragment" />
-    tools:layout="@layout/fragment_help" />
   <fragment
     android:id="@+id/kiwixSettingsFragment"
     android:name="org.kiwix.kiwixmobile.settings.KiwixSettingsFragment"

core/build.gradle.kts

@@ -13,7 +13,6 @@ buildscript {
 }
 plugins {
   `android-library`
-  id("org.jetbrains.kotlin.android")
 }
 plugins.apply(KiwixConfigurationPlugin::class)
 apply(plugin = "io.objectbox")

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

@@ -19,7 +19,6 @@
 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
@@ -42,12 +41,11 @@ 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 androidx.compose.ui.text.font.FontWeight
 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
@@ -60,8 +58,7 @@ fun HelpScreen(
   data: List<HelpScreenItemDataClass>,
   navigationIcon: @Composable () -> Unit
 ) {
-  val dividerColor =
+  val dividerColor = if (isSystemInDarkTheme()) {
-    if (isSystemInDarkTheme()) {
     MineShaftGray600
   } else {
     MineShaftGray350
@@ -102,7 +99,7 @@ fun SendReportRow() {
     Text(
       text = stringResource(R.string.send_report),
       color = if (isDarkTheme) Color.LightGray else Color.DarkGray,
-      style = MaterialTheme.typography.titleMedium,
+      style = MaterialTheme.typography.titleMedium.copy(fontWeight = FontWeight.Normal),
       modifier = Modifier.minimumInteractiveComponentSize()
     )
   }
@@ -110,46 +107,10 @@ fun SendReportRow() {
 
 @Composable
 fun HelpItemList(data: List<HelpScreenItemDataClass>, dividerColor: Color) {
-  LazyColumn(
+  LazyColumn(modifier = Modifier.fillMaxWidth()) {
-    modifier = Modifier
-      .fillMaxWidth()
-  ) {
     itemsIndexed(data, key = { _, item -> item.title }) { _, item ->
       HelpScreenItem(data = item)
       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

@@ -18,6 +18,11 @@
 
 package org.kiwix.kiwixmobile.core.help
 
+import android.content.Context
+import android.text.method.LinkMovementMethod
+import android.text.util.Linkify
+import android.view.Gravity
+import android.widget.TextView
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
@@ -30,11 +35,13 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.defaultMinSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.KeyboardArrowDown
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.minimumInteractiveComponentSize
 import androidx.compose.runtime.Composable
@@ -47,21 +54,20 @@ 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.graphics.toArgb
-import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.viewinterop.AndroidView
-import androidx.compose.ui.unit.Dp
+import androidx.core.text.util.LinkifyCompat
-import androidx.compose.ui.unit.sp
 import org.kiwix.kiwixmobile.core.R
+import org.kiwix.kiwixmobile.core.ui.theme.MineShaftGray900
 import org.kiwix.kiwixmobile.core.utils.ComposeDimens.EIGHT_DP
+import org.kiwix.kiwixmobile.core.utils.ComposeDimens.HELP_SCREEN_ARROW_ICON_SIZE
 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
+import org.kiwix.kiwixmobile.core.utils.ComposeDimens.SIXTEEN_DP
 
-// Define constants for spacing, font sizes, etc.
-
-private val HelpItemDescriptionFontSize = 17.sp
 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
@@ -73,20 +79,18 @@ fun HelpScreenItem(
   initiallyOpened: Boolean = false
 ) {
   var isOpen by remember { mutableStateOf(initiallyOpened) }
-  val itemColor = if (isSystemInDarkTheme()) Color.White else Color.Black
-  val horizontalPadding: Dp = dimensionResource(id = R.dimen.activity_horizontal_margin)
 
   Column(
     modifier = modifier
       .fillMaxWidth()
-      .padding(vertical = EIGHT_DP),
+      .padding(vertical = EIGHT_DP, horizontal = SIXTEEN_DP),
     verticalArrangement = Arrangement.Center,
     horizontalAlignment = Alignment.CenterHorizontally
   ) {
-    HelpItemHeader(data.title, isOpen, itemColor, horizontalPadding) { isOpen = !isOpen }
+    HelpItemHeader(data.title, isOpen) { isOpen = !isOpen }
     AnimatedVisibility(visible = isOpen) {
       Spacer(modifier = Modifier.height(EIGHT_DP))
-      HelpItemDescription(data.description, itemColor, horizontalPadding)
+      HelpItemDescription(LocalContext.current, data.description)
     }
   }
 }
@@ -95,8 +99,6 @@ fun HelpScreenItem(
 fun HelpItemHeader(
   title: String,
   isOpen: Boolean,
-  itemColor: Color,
-  horizontalPadding: Dp,
   onToggle: () -> Unit
 ) {
   val arrowRotation by animateFloatAsState(
@@ -112,13 +114,11 @@ fun HelpItemHeader(
     modifier = Modifier
       .fillMaxWidth()
       .clickable(interactionSource = interactionSource, indication = null, onClick = onToggle)
-      .padding(horizontal = horizontalPadding, vertical = EIGHT_DP)
   ) {
     Text(
       text = title,
       fontSize = HELP_SCREEN_ITEM_TITLE_TEXT_SIZE,
-      color = itemColor,
+      style = MaterialTheme.typography.headlineMedium.copy(fontWeight = FontWeight.Medium),
-      fontWeight = FontWeight.Medium,
       letterSpacing = HELP_SCREEN_ITEM_TITLE_LETTER_SPACING,
       modifier = Modifier.minimumInteractiveComponentSize()
     )
@@ -129,28 +129,44 @@ fun HelpItemHeader(
         .graphicsLayer {
           rotationZ = arrowRotation
         }
+        .defaultMinSize(
+          minWidth = HELP_SCREEN_ARROW_ICON_SIZE,
+          minHeight = HELP_SCREEN_ARROW_ICON_SIZE
+        )
         .minimumInteractiveComponentSize(),
-      contentScale = ContentScale.Inside,
+      colorFilter = ColorFilter.tint(color = MaterialTheme.colorScheme.onSurface)
-      colorFilter = ColorFilter.tint(color = itemColor)
     )
   }
 }
 
 @Composable
-fun HelpItemDescription(description: String, itemColor: Color, horizontalPadding: Dp) {
+fun HelpItemDescription(context: Context, description: String) {
+  val textColor = if (isSystemInDarkTheme()) {
+    Color.LightGray
+  } else {
+    MineShaftGray900
+  }
+  val helpItemDescription = remember { TextView(context) }
   Box(
     contentAlignment = Alignment.Center,
     modifier = Modifier
       .fillMaxWidth()
-      .padding(start = horizontalPadding, end = horizontalPadding)
+      .padding(top = SIXTEEN_DP)
   ) {
-    Text(
+    AndroidView(
-      text = description,
+      factory = { helpItemDescription },
-      fontSize = HelpItemDescriptionFontSize,
+      modifier = Modifier.padding(bottom = SIXTEEN_DP)
-      textAlign = TextAlign.Left,
+    ) { textView ->
-      color = itemColor,
+      textView.apply {
-      modifier = Modifier.padding(bottom = horizontalPadding),
+        text = description
-      fontWeight = FontWeight.Normal
+        setTextAppearance(R.style.TextAppearance_KiwixTheme_Subtitle2)
-    )
+        setTextColor(textColor.toArgb())
+        minHeight =
+          context.resources.getDimensionPixelSize(R.dimen.material_minimum_height_and_width)
+        gravity = Gravity.CENTER or Gravity.START
+        LinkifyCompat.addLinks(this, Linkify.WEB_URLS)
+        movementMethod = LinkMovementMethod.getInstance()
+      }
+    }
   }
 }

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

@@ -103,5 +103,5 @@ object ComposeDimens {
   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
+  val HELP_SCREEN_ARROW_ICON_SIZE = 35.dp
 }

core/src/main/res/layout/fragment_help.xml

@@ -1,54 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
-  xmlns:app="http://schemas.android.com/apk/res-auto"
-  xmlns:tools="http://schemas.android.com/tools"
-  android:layout_width="match_parent"
-  android:layout_height="match_parent"
-  tools:context=".help.HelpFragment">
-
-  <include layout="@layout/layout_standard_app_bar" />
-
-  <ImageView
-    android:id="@+id/activity_help_diagnostic_image_view"
-    android:layout_width="wrap_content"
-    android:layout_height="wrap_content"
-    android:contentDescription="@string/send_report"
-    android:padding="@dimen/activity_horizontal_margin"
-    android:src="@drawable/ic_feedback_orange_24dp"
-    app:layout_constraintStart_toStartOf="parent"
-    app:layout_constraintTop_toBottomOf="@+id/app_bar" />
-
-  <TextView
-    android:id="@+id/activity_help_diagnostic_text_view"
-    android:layout_width="0dp"
-    android:layout_height="wrap_content"
-    android:drawablePadding="@dimen/activity_horizontal_margin"
-    android:gravity="start|center"
-    android:minHeight="@dimen/material_minimum_height_and_width"
-    android:text="@string/send_report"
-    android:textAppearance="?android:attr/textAppearanceMedium"
-    app:layout_constraintBottom_toBottomOf="@id/activity_help_diagnostic_image_view"
-    app:layout_constraintEnd_toEndOf="parent"
-    app:layout_constraintStart_toEndOf="@id/activity_help_diagnostic_image_view"
-    app:layout_constraintTop_toTopOf="@id/activity_help_diagnostic_image_view" />
-
-  <View
-    android:id="@+id/activity_help_diagnostic_divider"
-    android:layout_width="match_parent"
-    android:layout_height="1dp"
-    android:background="?android:attr/listDivider"
-    app:layout_constraintTop_toBottomOf="@id/activity_help_diagnostic_image_view" />
-
-
-  <androidx.recyclerview.widget.RecyclerView
-    android:id="@+id/activity_help_recycler_view"
-    android:layout_width="match_parent"
-    android:layout_height="0dp"
-    android:clipToPadding="false"
-    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
-    app:layout_constraintBottom_toBottomOf="parent"
-    app:layout_constraintEnd_toEndOf="parent"
-    app:layout_constraintStart_toStartOf="parent"
-    app:layout_constraintTop_toBottomOf="@id/activity_help_diagnostic_divider"
-    tools:listitem="@layout/item_help" />
-</androidx.constraintlayout.widget.ConstraintLayout>

core/src/main/res/layout/fragment_page.xml

@@ -9,8 +9,7 @@
     android:id="@+id/app_bar"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    app:layout_constraintTop_toTopOf="parent"
+    app:layout_constraintTop_toTopOf="parent">
-    tools:showIn="@layout/fragment_help">
 
     <androidx.appcompat.widget.Toolbar
       android:id="@+id/toolbar"

core/src/main/res/layout/item_help.xml

@@ -1,50 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
-  xmlns:app="http://schemas.android.com/apk/res-auto"
-  xmlns:tools="http://schemas.android.com/tools"
-  android:layout_width="match_parent"
-  android:layout_height="wrap_content"
-  android:paddingStart="@dimen/activity_horizontal_margin"
-  android:paddingTop="@dimen/dimen_medium_padding"
-  android:paddingEnd="@dimen/activity_horizontal_margin"
-  android:paddingBottom="@dimen/dimen_medium_padding">
-
-  <TextView
-    android:id="@+id/item_help_title"
-    android:layout_width="0dp"
-    android:layout_height="wrap_content"
-    android:gravity="start|center"
-    android:minHeight="@dimen/material_minimum_height_and_width"
-    android:textAppearance="?textAppearanceHeadline6"
-    app:layout_constraintEnd_toStartOf="@id/item_help_toggle_expand"
-    app:layout_constraintStart_toStartOf="parent"
-    app:layout_constraintTop_toTopOf="parent"
-    tools:text="@string/help_2" />
-
-  <ImageView
-    android:id="@+id/item_help_toggle_expand"
-    android:layout_width="wrap_content"
-    android:layout_height="wrap_content"
-    android:contentDescription="@string/expand"
-    android:minWidth="@dimen/material_minimum_height_and_width"
-    android:minHeight="@dimen/material_minimum_height_and_width"
-    android:scaleType="centerInside"
-    android:src="@drawable/action_find_next"
-    app:layout_constraintBottom_toBottomOf="@id/item_help_title"
-    app:layout_constraintEnd_toEndOf="parent"
-    app:layout_constraintTop_toTopOf="@id/item_help_title"
-    app:tint="?colorOnSurface" />
-
-  <TextView
-    android:id="@+id/item_help_description"
-    style="@style/list_item_body"
-    android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    android:autoLink="web"
-    android:paddingTop="@dimen/activity_vertical_margin"
-    android:textColor="?textSecondary"
-    android:visibility="gone"
-    app:layout_constraintTop_toBottomOf="@id/item_help_title"
-    tools:text="@string/help_3"
-    tools:visibility="visible" />
-</androidx.constraintlayout.widget.ConstraintLayout>

core/src/main/res/layout/layout_standard_app_bar.xml

@@ -6,8 +6,7 @@
   android:id="@+id/app_bar"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
-  app:layout_constraintTop_toTopOf="parent"
+  app:layout_constraintTop_toTopOf="parent">
-  tools:showIn="@layout/fragment_help">
 
   <include layout="@layout/layout_toolbar" />
 </com.google.android.material.appbar.AppBarLayout>