Merge pull request #21435 from wordpress-mobile/issue/blaze-m3

Material 3: Blaze
wordpress-mobile · Nov 11, 2024 · 17f9039 · 17f9039
2 parents 546b46b + f89055e
commit 17f9039
Show file tree

Hide file tree

Showing 6 changed files with 250 additions and 193 deletions.
diff --git a/...va/org/wordpress/android/ui/blaze/blazecampaigns/campaigndetail/CampaignDetailFragment.kt b/...va/org/wordpress/android/ui/blaze/blazecampaigns/campaigndetail/CampaignDetailFragment.kt
@@ -12,12 +12,30 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.material.Scaffold
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material3.Button
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
@@ -26,27 +44,13 @@ import dagger.hilt.android.AndroidEntryPoint
 import kotlinx.coroutines.flow.launchIn
 import kotlinx.coroutines.flow.onEach
 import org.wordpress.android.R
-import androidx.compose.ui.Alignment
 import org.wordpress.android.ui.ActivityLauncher
 import org.wordpress.android.ui.WPWebViewActivity
 import org.wordpress.android.ui.blaze.BlazeActionEvent
-import org.wordpress.android.ui.compose.components.MainTopAppBar
-import org.wordpress.android.ui.compose.components.NavigationIcons
-import org.wordpress.android.ui.compose.theme.AppThemeM2
-import org.wordpress.android.util.extensions.getSerializableCompat
-import androidx.compose.foundation.layout.padding
-import androidx.compose.ui.Modifier
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.unit.dp
+import org.wordpress.android.ui.compose.theme.AppThemeM3
 import org.wordpress.android.ui.compose.utils.uiStringText
 import org.wordpress.android.ui.main.jetpack.migration.compose.state.LoadingState
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.material.Button
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Text
+import org.wordpress.android.util.extensions.getSerializableCompat
 
 private const val CAMPAIGN_DETAIL_PAGE_SOURCE = "campaign_detail_page_source"
 private const val CAMPAIGN_DETAIL_CAMPAIGN_ID = "campaign_detail_campaign_id"
@@ -69,7 +73,7 @@ class CampaignDetailFragment : Fragment(), CampaignDetailWebViewClient.CampaignD
         savedInstanceState: Bundle?
     ): View = ComposeView(requireContext()).apply {
         setContent {
-            AppThemeM2 {
+            AppThemeM3 {
                 CampaignDetailPage(
                     navigationUp = requireActivity().onBackPressedDispatcher::onBackPressed
                 )
@@ -118,23 +122,38 @@ class CampaignDetailFragment : Fragment(), CampaignDetailWebViewClient.CampaignD
 
     override fun onWebViewReceivedError() = viewModel.onWebViewError()
 
+    @OptIn(ExperimentalMaterial3Api::class)
     @Composable
-    @SuppressLint("UnusedMaterialScaffoldPaddingParameter")
     fun CampaignDetailPage(
         navigationUp: () -> Unit = { },
         viewModel: CampaignDetailViewModel = androidx.lifecycle.viewmodel.compose.viewModel(),
     ) {
         val uiState by viewModel.uiState.collectAsState()
         Scaffold(
             topBar = {
-                MainTopAppBar(
-                    title = stringResource(R.string.blaze_campaign_details_page_title),
-                    navigationIcon = NavigationIcons.BackIcon,
-                    onNavigationIconClick = navigationUp
+                TopAppBar(
+                    title = {
+                        Text(text = stringResource(R.string.blaze_campaign_details_page_title))
+                    },
+                    navigationIcon = {
+                        IconButton(onClick = { navigationUp() }) {
+                            Icon(
+                                Icons.AutoMirrored.Filled.ArrowBack,
+                                stringResource(R.string.back)
+                            )
+                        }
+                    },
                 )
             },
-            content = { CampaignDetailContent(uiState) }
-        )
+        ) { contentPadding ->
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(contentPadding)
+            ) {
+                CampaignDetailContent(uiState)
+            }
+        }
     }
 
     @SuppressLint("SetJavaScriptEnabled")
@@ -159,12 +178,12 @@ class CampaignDetailFragment : Fragment(), CampaignDetailWebViewClient.CampaignD
         ) {
             Text(
                 text = uiStringText(uiString = error.title),
-                style = MaterialTheme.typography.h5,
+                style = MaterialTheme.typography.headlineSmall,
                 textAlign = TextAlign.Center
             )
             Text(
                 text = uiStringText(uiString = error.description),
-                style = MaterialTheme.typography.body1,
+                style = MaterialTheme.typography.bodyLarge,
                 textAlign = TextAlign.Center,
                 modifier = Modifier.padding(top = 8.dp)
             )
@@ -179,7 +198,6 @@ class CampaignDetailFragment : Fragment(), CampaignDetailWebViewClient.CampaignD
         }
     }
 
-
     @SuppressLint("SetJavaScriptEnabled")
     @Composable
     private fun CampaignDetailWebView(uiState: CampaignDetailUiState) {

diff --git a/...ain/java/org/wordpress/android/ui/blaze/blazecampaigns/campaignlisting/CampaignListRow.kt b/...ain/java/org/wordpress/android/ui/blaze/blazecampaigns/campaignlisting/CampaignListRow.kt
@@ -9,11 +9,9 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ContentAlpha
-import androidx.compose.material.Divider
-import androidx.compose.material.MaterialTheme.colors
-import androidx.compose.material.Text
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -64,7 +62,7 @@ fun CampaignListRow(campaignModel: CampaignModel, modifier: Modifier = Modifier)
                     text = uiStringText(uiString = campaignModel.title),
                     style = MaterialTheme.typography.titleMedium.copy(
                         fontWeight = FontWeight.Normal,
-                        color = colors.onSurface.copy(alpha = ContentAlpha.high)
+                        color = MaterialTheme.colorScheme.onSurface
                     ),
                     maxLines = 2,
                     overflow = TextOverflow.Ellipsis,
@@ -93,10 +91,10 @@ fun CampaignListRow(campaignModel: CampaignModel, modifier: Modifier = Modifier)
                 )
             }
         }
-        Divider(
-            thickness = 0.5.dp,
+        HorizontalDivider(
             modifier = Modifier
-                .padding()
+                .padding(),
+            thickness = 0.5.dp
         )
     }
 }
@@ -143,7 +141,7 @@ private fun CampaignStat(title: String, value: UiString, modifier: Modifier = Mo
         Text(
             text = uiStringText(uiString = value),
             style = MaterialTheme.typography.headlineSmall.copy(
-                color = colors.onSurface.copy(alpha = ContentAlpha.high),
+                color = MaterialTheme.colorScheme.onSurface,
                 fontSize = 16.sp,
             ),
             textAlign = TextAlign.Start
@@ -153,7 +151,7 @@ private fun CampaignStat(title: String, value: UiString, modifier: Modifier = Mo
             style = MaterialTheme.typography.bodyLarge.copy(
                 fontWeight = FontWeight.Normal,
                 fontSize = 12.sp,
-                color = colors.onSurface.copy(alpha = ContentAlpha.medium)
+                color = MaterialTheme.colorScheme.onSurface
             ),
             textAlign = TextAlign.Start
         )