Refined the TagView to align with our current night/day theme.

* Adjusted the position of ZimFilesLanguageHeader to match the XML-based layout.
Improved the BookItem design by refining the width and height of the ZIM favicon and adjusting its position. Additionally, fixed an issue where icons were being converted to black and white instead of displaying the original favicon.
* Added a new color (surfaceContainer) to our theme, which will be used for all cards in the application. This ensures that card colors automatically adapt to the current night/day theme.

app/src/main/java/org/kiwix/kiwixmobile/ui/BookItem.kt

@@ -37,17 +37,23 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import org.kiwix.kiwixmobile.core.R
 import org.kiwix.kiwixmobile.core.extensions.faviconToPainter
+import org.kiwix.kiwixmobile.core.ui.theme.KiwixTheme
+import org.kiwix.kiwixmobile.core.utils.ComposeDimens.BOOK_DESCRIPTION_LETTER_SPACING
 import org.kiwix.kiwixmobile.core.utils.ComposeDimens.BOOK_ICON_SIZE
 import org.kiwix.kiwixmobile.core.utils.ComposeDimens.EIGHT_DP
 import org.kiwix.kiwixmobile.core.utils.ComposeDimens.FIVE_DP
+import org.kiwix.kiwixmobile.core.utils.ComposeDimens.FOURTEEN_SP
 import org.kiwix.kiwixmobile.core.utils.ComposeDimens.FOUR_DP
 import org.kiwix.kiwixmobile.core.utils.ComposeDimens.SIXTEEN_DP
-import org.kiwix.kiwixmobile.core.utils.ComposeDimens.TEN_DP
+import org.kiwix.kiwixmobile.core.zim_manager.KiloByte
+import org.kiwix.kiwixmobile.core.zim_manager.fileselect_view.ArticleCount
 import org.kiwix.kiwixmobile.core.zim_manager.fileselect_view.SelectionMode
 import org.kiwix.kiwixmobile.core.zim_manager.fileselect_view.adapter.BooksOnDiskListItem.BookOnDisk
 
@@ -61,27 +67,30 @@ fun BookItem(
   selectionMode: SelectionMode = SelectionMode.NORMAL,
   onCheckedChange: (Boolean) -> Unit = {}
 ) {
-  Card(
+  KiwixTheme {
-    modifier = Modifier
+    Card(
-      .fillMaxWidth()
+      modifier = Modifier
-      .padding(FIVE_DP)
+        .fillMaxWidth()
-      .combinedClickable(
+        .padding(FIVE_DP)
-        onClick = {
+        .combinedClickable(
-          when (selectionMode) {
+          onClick = {
-            SelectionMode.MULTI -> onMultiSelect?.invoke(bookOnDisk)
+            when (selectionMode) {
-            SelectionMode.NORMAL -> onClick?.invoke(bookOnDisk)
+              SelectionMode.MULTI -> onMultiSelect?.invoke(bookOnDisk)
+              SelectionMode.NORMAL -> onClick?.invoke(bookOnDisk)
+            }
+          },
+          onLongClick = {
+            if (selectionMode == SelectionMode.NORMAL) {
+              onLongClick?.invoke(bookOnDisk)
+            }
           }
-        },
+        ),
-        onLongClick = {
+      shape = MaterialTheme.shapes.extraSmall,
-          if (selectionMode == SelectionMode.NORMAL) {
+      elevation = CardDefaults.elevatedCardElevation(),
-            onLongClick?.invoke(bookOnDisk)
+      colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainer)
-          }
+    ) {
-        }
+      BookContent(bookOnDisk, selectionMode, onCheckedChange)
-      ),
+    }
-    shape = MaterialTheme.shapes.medium,
-    elevation = CardDefaults.elevatedCardElevation()
-  ) {
-    BookContent(bookOnDisk, selectionMode, onCheckedChange)
   }
 }
 
@@ -92,7 +101,9 @@ private fun BookContent(
   onCheckedChange: (Boolean) -> Unit
 ) {
   Row(
-    modifier = Modifier.padding(SIXTEEN_DP).fillMaxWidth(),
+    modifier = Modifier
+      .padding(SIXTEEN_DP)
+      .fillMaxWidth(),
     verticalAlignment = Alignment.CenterVertically
   ) {
     if (selectionMode == SelectionMode.MULTI) {
@@ -107,8 +118,7 @@ private fun BookContent(
 private fun BookCheckbox(bookOnDisk: BookOnDisk, onCheckedChange: (Boolean) -> Unit) {
   Checkbox(
     checked = bookOnDisk.isSelected,
-    onCheckedChange = onCheckedChange,
+    onCheckedChange = onCheckedChange
-    modifier = Modifier.padding(end = TEN_DP)
   )
 }
 
@@ -118,24 +128,27 @@ fun BookIcon(painter: Painter) {
     painter = painter,
     contentDescription = stringResource(R.string.fav_icon),
     modifier = Modifier
-      .size(BOOK_ICON_SIZE)
+      .size(BOOK_ICON_SIZE),
-      .padding(end = TEN_DP)
+    tint = Color.Unspecified
   )
 }
 
 @Composable
 private fun BookDetails(modifier: Modifier, bookOnDisk: BookOnDisk) {
-  Column(modifier = modifier) {
+  Column(modifier = modifier.padding(start = SIXTEEN_DP)) {
     Text(
       text = bookOnDisk.book.title,
       style = MaterialTheme.typography.titleMedium
     )
     Text(
       text = bookOnDisk.book.description.orEmpty(),
-      style = MaterialTheme.typography.bodyMedium,
+      style = MaterialTheme.typography.bodySmall.copy(
+        fontSize = FOURTEEN_SP,
+        letterSpacing = BOOK_DESCRIPTION_LETTER_SPACING
+      ),
       maxLines = 2,
       overflow = TextOverflow.Ellipsis,
-      color = MaterialTheme.colorScheme.onSurfaceVariant
+      color = MaterialTheme.colorScheme.onSecondary
     )
     Row(
       verticalAlignment = Alignment.CenterVertically,
@@ -144,19 +157,20 @@ private fun BookDetails(modifier: Modifier, bookOnDisk: BookOnDisk) {
       Text(
         text = bookOnDisk.book.date,
         style = MaterialTheme.typography.bodySmall,
-        color = MaterialTheme.colorScheme.onSurfaceVariant
+        color = MaterialTheme.colorScheme.onTertiary
       )
       Spacer(modifier = Modifier.width(EIGHT_DP))
       Text(
-        text = bookOnDisk.book.size,
+        text = KiloByte(bookOnDisk.book.size).humanReadable,
         style = MaterialTheme.typography.bodySmall,
-        color = MaterialTheme.colorScheme.onSurfaceVariant
+        color = MaterialTheme.colorScheme.onTertiary
       )
       Spacer(modifier = Modifier.width(EIGHT_DP))
       Text(
-        text = bookOnDisk.book.articleCount.orEmpty(),
+        text = ArticleCount(bookOnDisk.book.articleCount.orEmpty())
+          .toHumanReadable(LocalContext.current),
         style = MaterialTheme.typography.bodySmall,
-        color = MaterialTheme.colorScheme.onSurfaceVariant
+        color = MaterialTheme.colorScheme.onTertiary
       )
     }
     Spacer(modifier = Modifier.height(FOUR_DP))

app/src/main/java/org/kiwix/kiwixmobile/ui/TagsView.kt

@@ -19,59 +19,61 @@
 package org.kiwix.kiwixmobile.ui
 
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.AssistChip
+import androidx.compose.material3.SuggestionChip
+import androidx.compose.material3.SuggestionChipDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import org.kiwix.kiwixmobile.core.R
 import org.kiwix.kiwixmobile.core.utils.ComposeDimens.EIGHT_DP
-import org.kiwix.kiwixmobile.core.utils.ComposeDimens.FOUR_DP
 import org.kiwix.kiwixmobile.core.zim_manager.KiwixTag
 import org.kiwix.kiwixmobile.core.zim_manager.KiwixTag.Companion.YesNoValueTag
+import org.kiwix.kiwixmobile.core.zim_manager.KiwixTag.Companion.YesNoValueTag.DetailsTag
 import org.kiwix.kiwixmobile.core.zim_manager.KiwixTag.Companion.YesNoValueTag.PicturesTag
 import org.kiwix.kiwixmobile.core.zim_manager.KiwixTag.Companion.YesNoValueTag.VideoTag
-import org.kiwix.kiwixmobile.core.zim_manager.KiwixTag.Companion.YesNoValueTag.DetailsTag
 import org.kiwix.kiwixmobile.core.zim_manager.KiwixTag.TagValue.YES
-import org.kiwix.kiwixmobile.core.R
-import org.kiwix.kiwixmobile.core.ui.theme.KiwixTheme
 
-@OptIn(ExperimentalLayoutApi::class)
 @Composable
 fun TagsView(tags: List<KiwixTag>, modifier: Modifier = Modifier) {
-  KiwixTheme {
+  Row(
-    FlowRow(
+    modifier = modifier,
-      modifier = modifier,
+    horizontalArrangement = Arrangement.spacedBy(EIGHT_DP)
-      horizontalArrangement = Arrangement.spacedBy(EIGHT_DP),
+  ) {
-      verticalArrangement = Arrangement.spacedBy(FOUR_DP)
+    if (tags.isYesOrNotDefined<PicturesTag>()) {
+      TagChip(text = stringResource(R.string.tag_pic))
+    }
+    if (tags.isYesOrNotDefined<VideoTag>()) {
+      TagChip(text = stringResource(R.string.tag_vid))
+    }
+    val shortTextIsSelected = tags.isDefinedAndNo<DetailsTag>()
+    if (tags.isDefinedAndNo<PicturesTag>() &&
+      tags.isDefinedAndNo<VideoTag>() &&
+      !shortTextIsSelected
     ) {
-      if (tags.isYesOrNotDefined<PicturesTag>()) {
+      TagChip(text = stringResource(R.string.tag_text_only))
-        TagChip(text = stringResource(R.string.tag_pic))
+    }
-      }
+    if (shortTextIsSelected) {
-      if (tags.isYesOrNotDefined<VideoTag>()) {
+      TagChip(text = stringResource(R.string.tag_short_text))
-        TagChip(text = stringResource(R.string.tag_vid))
-      }
-      val shortTextIsSelected = tags.isDefinedAndNo<DetailsTag>()
-      if (tags.isDefinedAndNo<PicturesTag>() &&
-        tags.isDefinedAndNo<VideoTag>() &&
-        !shortTextIsSelected
-      ) {
-        TagChip(text = stringResource(R.string.tag_text_only))
-      }
-      if (shortTextIsSelected) {
-        TagChip(text = stringResource(R.string.tag_short_text))
-      }
     }
   }
 }
 
 @Composable
 private fun TagChip(text: String) {
-  AssistChip(
+  val chipColors = SuggestionChipDefaults.suggestionChipColors(
+    disabledContainerColor = MaterialTheme.colorScheme.primary.copy(alpha = 0.24f),
+    disabledLabelColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.87f)
+  )
+  SuggestionChip(
     onClick = {},
     label = { Text(text) },
-    enabled = false
+    enabled = false,
+    shape = MaterialTheme.shapes.extraLarge,
+    colors = chipColors,
+    border = null,
   )
 }
 

app/src/main/java/org/kiwix/kiwixmobile/ui/ZimFilesLanguageHeader.kt

@@ -24,16 +24,17 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import org.kiwix.kiwixmobile.core.utils.ComposeDimens.EIGHT_DP
+import org.kiwix.kiwixmobile.core.utils.ComposeDimens.SIXTEEN_DP
 import org.kiwix.kiwixmobile.core.zim_manager.fileselect_view.adapter.BooksOnDiskListItem.LanguageItem
 
 @Composable
 fun ZimFilesLanguageHeader(languageItem: LanguageItem) {
   Text(
     text = languageItem.text,
-    style = MaterialTheme.typography.titleMedium,
+    style = MaterialTheme.typography.titleSmall,
     modifier = Modifier
       .fillMaxWidth()
-      .padding(vertical = EIGHT_DP)
+      .padding(horizontal = SIXTEEN_DP)
+      .padding(top = SIXTEEN_DP)
   )
 }

app/src/main/java/org/kiwix/kiwixmobile/webserver/ZimHostFragment.kt

@@ -317,7 +317,7 @@ class ZimHostFragment : BaseFragment(), ZimHostCallbacks, ZimHostContract.View {
     }
   }
 
-  private fun select(bookOnDisk: BooksOnDiskListItem.BookOnDisk) {
+  private fun select(bookOnDisk: BookOnDisk) {
     val tempBooksList: List<BooksOnDiskListItem> = booksList.value.onEach {
       if (it == bookOnDisk) {
         it.isSelected = !it.isSelected
@@ -405,7 +405,7 @@ class ZimHostFragment : BaseFragment(), ZimHostCallbacks, ZimHostContract.View {
     val qrImage = ip?.let {
       val qr = generateQr.createQR(it)
       IconItem.ImageBitmap(qr.asImageBitmap())
-    } ?: IconItem.Drawable(org.kiwix.kiwixmobile.R.drawable.ic_storage)
+    } ?: IconItem.Drawable(drawable.ic_storage)
     qrImageItem.value = shouldShow to qrImage
   }
 

app/src/main/java/org/kiwix/kiwixmobile/webserver/ZimHostScreen.kt

@@ -142,7 +142,6 @@ fun QRImage(qrImageItem: Pair<Boolean, IconItem>) {
   }
 }
 
-@Suppress("UnusedParameter")
 @Composable
 fun BookItemList(
   booksList: List<BooksOnDiskListItem>,
@@ -167,7 +166,7 @@ fun BookItemList(
             ZimFilesLanguageHeader(bookItem)
           }
 
-          is BooksOnDiskListItem.BookOnDisk -> {
+          is BookOnDisk -> {
             BookItem(
               bookOnDisk = bookItem,
               selectionMode = selectionMode,

core/src/main/java/org/kiwix/kiwixmobile/core/ui/theme/Theme.kt

@@ -35,7 +35,8 @@ private val DarkColorScheme = darkColorScheme(
   onBackground = White,
   onSurface = White,
   onError = White,
-  onTertiary = MineShaftGray500
+  onTertiary = MineShaftGray500,
+  surfaceContainer = MineShaftGray850,
 )
 
 private val LightColorScheme = lightColorScheme(
@@ -49,7 +50,8 @@ private val LightColorScheme = lightColorScheme(
   onBackground = Black,
   onSurface = Black,
   onError = AlabasterWhite,
-  onTertiary = MineShaftGray600
+  onTertiary = MineShaftGray600,
+  surfaceContainer = AlabasterWhite,
 )
 
 @Composable

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

@@ -93,4 +93,5 @@ object ComposeDimens {
 
   // BookItem dimes
   val BOOK_ICON_SIZE = 40.dp
+  val BOOK_DESCRIPTION_LETTER_SPACING = 0.00714285714.em
 }