Merge pull request #12966 from woocommerce/issue/fix-dark-mode-issues

Fix dark mode issues

Author: atorresveiga

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/ShippingRatesSection.kt

@@ -1,6 +1,7 @@
 package com.woocommerce.android.ui.orders.wooshippinglabels
 
 import android.content.Context
+import android.content.res.Configuration
 import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
 import androidx.compose.animation.animateColorAsState
@@ -17,6 +18,7 @@ import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.pager.HorizontalPager
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Colors
 import androidx.compose.material.DropdownMenu
 import androidx.compose.material.DropdownMenuItem
 import androidx.compose.material.Icon
@@ -49,6 +51,7 @@ import androidx.compose.ui.text.capitalize
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.intl.Locale
 import androidx.compose.ui.text.withStyle
+import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.woocommerce.android.R
@@ -58,6 +61,9 @@ import com.woocommerce.android.util.StringUtils
 import kotlinx.coroutines.launch
 import kotlin.random.Random
 
+@Suppress("MagicNumber")
+val Colors.selectedRateBackgroundColor: Color get() = if (isLight) Color(0xFFF2EDFF) else Color(0x22F2EDFF)
+
 @Composable
 internal fun ShippingRatesCard(
     selected: ShippingRate?,
@@ -86,7 +92,8 @@ internal fun ShippingRatesCard(
     }
 }
 
-@Preview
+@Preview(name = "dark", uiMode = Configuration.UI_MODE_NIGHT_YES, device = Devices.PIXEL)
+@Preview(name = "light", uiMode = Configuration.UI_MODE_NIGHT_NO, device = Devices.PIXEL)
 @Composable
 private fun ShippingRatesCardPreview() {
     val rates = generateShippingRates()
@@ -300,7 +307,7 @@ private fun ShippingRateItem(
     }
 
     val backgroundColor = if (isSelected) {
-        animateColorAsState(targetValue = Color(0xFFF2EDFF), label = "colorAnimation")
+        animateColorAsState(targetValue = MaterialTheme.colors.selectedRateBackgroundColor, label = "colorAnimation")
     } else {
         animateColorAsState(targetValue = MaterialTheme.colors.surface, label = "colorAnimation")
     }

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/orders/wooshippinglabels/WooShippingLabelCreationScreen.kt

@@ -3,6 +3,7 @@ package com.woocommerce.android.ui.orders.wooshippinglabels
 import android.content.res.Configuration
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -66,7 +67,14 @@ fun WooShippingLabelCreationScreen(
             onSelectPackageClick = onSelectPackageClick,
             scaffoldState = scaffoldState
         )
-        val elevation = if (scaffoldState.bottomSheetState.isCollapsed) { 0.dp } else { 4.dp }
+        val isDarkTheme = isSystemInDarkTheme()
+        val isCollapsed = scaffoldState.bottomSheetState.isCollapsed
+        val elevation = when {
+            isDarkTheme && isCollapsed -> { 7.dp }
+            !isDarkTheme && isCollapsed -> { 0.dp }
+            isDarkTheme && !isCollapsed -> { 16.dp }
+            else -> { 8.dp }
+        }
         Box(
             modifier = Modifier
                 .fillMaxWidth()