Fixed: The donation layout was not respecting the dark theme.

* Fixed: The alignment of donation layout.
* Improved the `DonationLayout` code for better readability and maintainability.

core/src/main/java/org/kiwix/kiwixmobile/core/main/reader/DonationLayout.kt

@@ -18,6 +18,7 @@
 
 package org.kiwix.kiwixmobile.core.main.reader
 
+import android.content.res.Configuration
 import androidx.annotation.StringRes
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
@@ -37,14 +38,17 @@ import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.LocalWindowInfo
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
 import org.kiwix.kiwixmobile.core.R
 import org.kiwix.kiwixmobile.core.ui.theme.DenimBlue800
-import org.kiwix.kiwixmobile.core.ui.theme.White
-import org.kiwix.kiwixmobile.core.ui.theme.dimHighlightedTextLight
 import org.kiwix.kiwixmobile.core.utils.ComposeDimens
+import org.kiwix.kiwixmobile.core.utils.ComposeDimens.DONATION_LAYOUT_MAXIMUM_WIDTH
+import org.kiwix.kiwixmobile.core.utils.ComposeDimens.SIXTEEN_DP
 
 @Composable
 fun DonationLayout(
@@ -52,11 +56,21 @@ fun DonationLayout(
   onDonateButtonClick: () -> Unit,
   onLaterButtonClick: () -> Unit
 ) {
+  val donationLayoutWidth = getDonationLayoutWidth()
   Column(
     verticalArrangement = Arrangement.Bottom,
-    horizontalAlignment = Alignment.CenterHorizontally
+    horizontalAlignment = Alignment.CenterHorizontally,
+    modifier = Modifier
+      .then(
+        if (donationLayoutWidth != Dp.Unspecified) {
+          Modifier.width(donationLayoutWidth)
+        } else {
+          Modifier.fillMaxWidth()
+        }
+      )
+      .padding(horizontal = SIXTEEN_DP),
   ) {
-    DonationDialogComposable(
+    DonationDialogCard(
       appName,
       onDonateButtonClick,
       onLaterButtonClick
@@ -65,7 +79,7 @@ fun DonationLayout(
 }
 
 @Composable
-fun DonationDialogComposable(
+fun DonationDialogCard(
   appName: String,
   onDonateButtonClick: () -> Unit,
   onLaterButtonClick: () -> Unit
@@ -74,57 +88,65 @@ fun DonationDialogComposable(
     modifier = Modifier
       .fillMaxWidth()
       .wrapContentHeight()
-      .padding(all = ComposeDimens.SIXTEEN_DP),
+      .padding(ComposeDimens.SIXTEEN_DP),
     shape = MaterialTheme.shapes.medium,
     elevation = CardDefaults.cardElevation(defaultElevation = ComposeDimens.SIX_DP),
-    colors = CardDefaults.cardColors(
+    colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainer)
-      containerColor = White
-    )
   ) {
     Column(
       modifier = Modifier
-        .padding(
+        .padding(horizontal = ComposeDimens.SIXTEEN_DP)
-          start = ComposeDimens.SIXTEEN_DP,
+        .padding(top = ComposeDimens.SIXTEEN_DP)
-          end = ComposeDimens.SIXTEEN_DP,
-          top = ComposeDimens.SIXTEEN_DP
-        )
     ) {
-      Row(
+      DonationDialogContent(appName)
-        modifier = Modifier.fillMaxWidth(),
+      DonationDialogButtons(onDonateButtonClick, onLaterButtonClick)
-        verticalAlignment = Alignment.Top
-      ) {
-        Image(
-          painter = painterResource(id = R.drawable.ic_donation_icon),
-          contentDescription = stringResource(id = R.string.donation_dialog_title),
-          modifier = Modifier
-            .size(ComposeDimens.FIFTY_DP)
-        )
-        Spacer(modifier = Modifier.width(ComposeDimens.TWELVE_DP))
-        Column {
-          DonationDialogHeadingText()
-          DonationDialogSubHeadingText(appName = appName)
-        }
-      }
-      Row(
-        modifier = Modifier
-          .fillMaxWidth(),
-        verticalAlignment = Alignment.CenterVertically
-      ) {
-        Spacer(modifier = Modifier.weight(1f))
-
-        DonationDialogButton(
-          onButtonClick = onLaterButtonClick,
-          buttonText = R.string.rate_dialog_neutral
-        )
-        DonationDialogButton(
-          onButtonClick = onDonateButtonClick,
-          buttonText = R.string.make_donation
-        )
-      }
     }
   }
 }
 
+@Composable
+private fun DonationDialogContent(appName: String) {
+  Row(
+    modifier = Modifier.fillMaxWidth(),
+    verticalAlignment = Alignment.Top
+  ) {
+    Image(
+      painter = painterResource(id = R.drawable.ic_donation_icon),
+      contentDescription = stringResource(id = R.string.donation_dialog_title),
+      modifier = Modifier
+        .size(ComposeDimens.FIFTY_DP)
+    )
+    Spacer(modifier = Modifier.width(ComposeDimens.TWELVE_DP))
+    Column {
+      DonationDialogHeadingText()
+      DonationDialogSubHeadingText(appName = appName)
+    }
+  }
+}
+
+@Composable
+private fun DonationDialogButtons(
+  onDonateButtonClick: () -> Unit,
+  onLaterButtonClick: () -> Unit
+) {
+  Row(
+    modifier = Modifier
+      .fillMaxWidth(),
+    verticalAlignment = Alignment.CenterVertically
+  ) {
+    Spacer(modifier = Modifier.weight(1f))
+
+    DonationDialogButton(
+      onButtonClick = onLaterButtonClick,
+      buttonText = R.string.rate_dialog_neutral
+    )
+    DonationDialogButton(
+      onButtonClick = onDonateButtonClick,
+      buttonText = R.string.make_donation
+    )
+  }
+}
+
 @Composable
 fun DonationDialogButton(
   onButtonClick: () -> Unit,
@@ -157,17 +179,20 @@ fun DonationDialogSubHeadingText(appName: String) {
       appName
     ),
     fontSize = ComposeDimens.FOURTEEN_SP,
-    color = dimHighlightedTextLight,
+    color = MaterialTheme.colorScheme.onTertiary,
     modifier = Modifier.padding(top = ComposeDimens.FOUR_DP)
   )
 }
 
-@Preview()
 @Composable
-fun DonationDialogComposablePreview() {
+private fun getDonationLayoutWidth(): Dp {
-  DonationLayout(
+  val configuration = LocalWindowInfo.current
-    appName = "kiwix",
+  val screenWidth = configuration.containerSize.width.dp
-    onDonateButtonClick = {},
+  val isLandscape = LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE
-    onLaterButtonClick = {}
+
-  )
+  return if (screenWidth > DONATION_LAYOUT_MAXIMUM_WIDTH || isLandscape) {
+    DONATION_LAYOUT_MAXIMUM_WIDTH
+  } else {
+    Dp.Unspecified
+  }
 }

core/src/main/java/org/kiwix/kiwixmobile/core/main/reader/ReaderScreen.kt

@@ -18,7 +18,6 @@
 
 package org.kiwix.kiwixmobile.core.main.reader
 
-import android.content.res.Configuration
 import android.view.View
 import android.view.ViewGroup
 import android.view.ViewGroup.LayoutParams.MATCH_PARENT
@@ -90,7 +89,6 @@ import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalWindowInfo
@@ -132,7 +130,6 @@ import org.kiwix.kiwixmobile.core.utils.ComposeDimens.BACK_TO_TOP_BUTTON_BOTTOM_
 import org.kiwix.kiwixmobile.core.utils.ComposeDimens.CLOSE_ALL_TAB_BUTTON_BOTTOM_PADDING
 import org.kiwix.kiwixmobile.core.utils.ComposeDimens.CLOSE_TAB_ICON_ANIMATION_TIMEOUT
 import org.kiwix.kiwixmobile.core.utils.ComposeDimens.CLOSE_TAB_ICON_SIZE
-import org.kiwix.kiwixmobile.core.utils.ComposeDimens.DONATION_LAYOUT_MAXIMUM_WIDTH
 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.FOUR_DP
@@ -591,18 +588,7 @@ private fun BottomAppBarButtonIcon(
 @Composable
 private fun ShowDonationLayout(state: ReaderScreenState) {
   if (state.shouldShowDonationPopup) {
-    val popupWidth = getDonationPopupWidth()
+    Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxWidth()) {
-    Box(
-      modifier = Modifier
-        .then(
-          if (popupWidth != Dp.Unspecified) {
-            Modifier.width(popupWidth)
-          } else {
-            Modifier.fillMaxWidth()
-          }
-        )
-        .padding(horizontal = SIXTEEN_DP)
-    ) {
       DonationLayout(
         state.appName,
         state.donateButtonClick,
@@ -612,19 +598,6 @@ private fun ShowDonationLayout(state: ReaderScreenState) {
   }
 }
 
-@Composable
-private fun getDonationPopupWidth(): Dp {
-  val configuration = LocalWindowInfo.current
-  val screenWidth = configuration.containerSize.width.dp
-  val isLandscape = LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE
-
-  return if (screenWidth > DONATION_LAYOUT_MAXIMUM_WIDTH || isLandscape) {
-    DONATION_LAYOUT_MAXIMUM_WIDTH
-  } else {
-    Dp.Unspecified
-  }
-}
-
 @Composable
 fun TabSwitcherView(
   webViews: List<KiwixWebView>,