@@ -3,6 +3,7 @@ package org.wordpress.android.ui.bloganuary.learnmore
3
3
import android.content.res.Configuration.UI_MODE_NIGHT_YES
4
4
import androidx.compose.foundation.Image
5
5
import androidx.compose.foundation.background
6
+ import androidx.compose.foundation.isSystemInDarkTheme
6
7
import androidx.compose.foundation.layout.Arrangement
7
8
import androidx.compose.foundation.layout.Box
8
9
import androidx.compose.foundation.layout.Column
@@ -20,17 +21,16 @@ import androidx.compose.foundation.layout.widthIn
20
21
import androidx.compose.foundation.rememberScrollState
21
22
import androidx.compose.foundation.shape.CircleShape
22
23
import androidx.compose.foundation.verticalScroll
23
- import androidx.compose.material.Button
24
- import androidx.compose.material.ButtonDefaults
25
- import androidx.compose.material.ContentAlpha
26
- import androidx.compose.material.Divider
27
- import androidx.compose.material.Icon
28
- import androidx.compose.material.IconButton
29
- import androidx.compose.material.LocalContentColor
30
- import androidx.compose.material.Text
31
24
import androidx.compose.material.icons.Icons
32
25
import androidx.compose.material.icons.rounded.Close
26
+ import androidx.compose.material3.Button
27
+ import androidx.compose.material3.ButtonDefaults
28
+ import androidx.compose.material3.HorizontalDivider
29
+ import androidx.compose.material3.Icon
30
+ import androidx.compose.material3.IconButton
31
+ import androidx.compose.material3.LocalContentColor
33
32
import androidx.compose.material3.MaterialTheme
33
+ import androidx.compose.material3.Text
34
34
import androidx.compose.runtime.Composable
35
35
import androidx.compose.ui.Alignment
36
36
import androidx.compose.ui.Modifier
@@ -44,30 +44,32 @@ import androidx.compose.ui.text.style.TextAlign
44
44
import androidx.compose.ui.tooling.preview.Preview
45
45
import androidx.compose.ui.unit.dp
46
46
import org.wordpress.android.R
47
- import org.wordpress.android.ui.compose.components.ContentAlphaProvider
48
47
import org.wordpress.android.ui.compose.theme.AppColor
49
- import org.wordpress.android.ui.compose.theme.AppThemeM2
48
+ import org.wordpress.android.ui.compose.theme.AppThemeM3
50
49
import org.wordpress.android.ui.compose.unit.Margin
51
50
import org.wordpress.android.ui.compose.utils.uiStringText
52
51
import org.wordpress.android.ui.utils.UiString.UiStringRes
53
- import androidx.compose.material.MaterialTheme as Material2Theme
54
52
55
53
private val contentIconForegroundColor: Color
56
54
get() = AppColor .White
57
55
58
- private val contentIconBackgroundColor: Color
59
- @Composable get() = if (Material2Theme .colors.isLight) {
60
- AppColor .Black
61
- } else {
56
+ @Composable
57
+ private fun contentIconBackgroundColor (isDarkTheme : Boolean = isSystemInDarkTheme()): Color {
58
+ return if (isDarkTheme) {
62
59
AppColor .White .copy(alpha = 0.18f )
60
+ } else {
61
+ AppColor .Black
63
62
}
63
+ }
64
64
65
- private val contentTextEmphasis: Float
66
- @Composable get() = if (Material2Theme .colors.isLight) {
67
- 1f
65
+ @Composable
66
+ private fun contentTextEmphasis (isDarkTheme : Boolean = isSystemInDarkTheme()): Float {
67
+ return if (isDarkTheme) {
68
+ 0.6f
68
69
} else {
69
- ContentAlpha .medium
70
+ 1f
70
71
}
72
+ }
71
73
72
74
@Composable
73
75
fun BloganuaryNudgeLearnMoreOverlay (
@@ -111,7 +113,7 @@ fun BloganuaryNudgeLearnMoreOverlay(
111
113
) {
112
114
Image (
113
115
painter = painterResource(R .drawable.logo_bloganuary),
114
- colorFilter = ColorFilter .tint(Material2Theme .colors .onSurface),
116
+ colorFilter = ColorFilter .tint(MaterialTheme .colorScheme .onSurface),
115
117
modifier = Modifier .width(180 .dp),
116
118
contentScale = ContentScale .Inside ,
117
119
contentDescription = stringResource(
@@ -148,12 +150,12 @@ fun BloganuaryNudgeLearnMoreOverlay(
148
150
modifier = Modifier .align(Alignment .CenterHorizontally ),
149
151
textAlign = TextAlign .Center ,
150
152
style = MaterialTheme .typography.bodySmall,
151
- color = LocalContentColor .current.copy(alpha = ContentAlpha .medium ),
153
+ color = LocalContentColor .current.copy(alpha = contentTextEmphasis() ),
152
154
)
153
155
}
154
156
}
155
157
156
- Divider ()
158
+ HorizontalDivider ()
157
159
158
160
Button (
159
161
onClick = { onActionClick(model.action) },
@@ -163,8 +165,8 @@ fun BloganuaryNudgeLearnMoreOverlay(
163
165
elevation = null ,
164
166
contentPadding = PaddingValues (vertical = Margin .Large .value),
165
167
colors = ButtonDefaults .buttonColors(
166
- backgroundColor = Material2Theme .colors .onSurface,
167
- contentColor = Material2Theme .colors .surface,
168
+ containerColor = MaterialTheme .colorScheme .onSurface,
169
+ contentColor = MaterialTheme .colorScheme .surface,
168
170
),
169
171
) {
170
172
Text (stringResource(model.action.textRes))
@@ -211,7 +213,7 @@ private fun OverlayContentItem(
211
213
modifier = Modifier
212
214
.size(48 .dp)
213
215
.background(
214
- color = contentIconBackgroundColor,
216
+ color = contentIconBackgroundColor() ,
215
217
shape = CircleShape ,
216
218
),
217
219
) {
@@ -227,12 +229,11 @@ private fun OverlayContentItem(
227
229
228
230
Spacer (Modifier .width(Margin .ExtraLarge .value))
229
231
230
- ContentAlphaProvider (contentTextEmphasis) {
231
- Text (
232
- stringResource(textRes),
233
- style = MaterialTheme .typography.titleMedium,
234
- )
235
- }
232
+ Text (
233
+ text = stringResource(textRes),
234
+ style = MaterialTheme .typography.titleMedium,
235
+ color = LocalContentColor .current.copy(alpha = contentTextEmphasis()),
236
+ )
236
237
}
237
238
}
238
239
@@ -241,7 +242,7 @@ private fun OverlayContentItem(
241
242
@Preview(name = " Dark Mode" , uiMode = UI_MODE_NIGHT_YES )
242
243
@Composable
243
244
private fun BloganuaryNudgeLearnMoreOverlayPreview () {
244
- AppThemeM2 {
245
+ AppThemeM3 {
245
246
BloganuaryNudgeLearnMoreOverlay (
246
247
model = BloganuaryNudgeLearnMoreOverlayUiState (
247
248
noteText = UiStringRes (
0 commit comments