CMM-884 support iteration over the whole flow and style

WordPress/src/main/java/org/wordpress/android/support/aibot/ui/AIBotConversationsListScreen.kt

@@ -3,10 +3,8 @@ package org.wordpress.android.support.aibot.ui
 import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import android.content.res.Resources
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -15,9 +13,8 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.filled.Edit
-import androidx.compose.material3.Card
-import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -31,9 +28,12 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalResources
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -120,70 +120,63 @@ private fun ShowConversationsList(
     val resources = LocalResources.current
 
     LazyColumn(
-        modifier = modifier
-            .fillMaxSize()
-            .padding(horizontal = 16.dp),
-        verticalArrangement = Arrangement.spacedBy(12.dp)
+        modifier = modifier.fillMaxSize()
     ) {
-        item {
-            // Add top spacing
-            Spacer(modifier = Modifier.padding(top = 4.dp))
-        }
-
-        items(conversations) { conversation ->
-            ConversationCard(
+        items(
+            items = conversations,
+            key = { it.id }
+        ) { conversation ->
+            ConversationListItem(
                 conversation = conversation,
                 resources = resources,
                 onClick = { onConversationClick(conversation) }
             )
-        }
-
-        item {
-            // Add bottom spacing
-            Spacer(modifier = Modifier.padding(bottom = 4.dp))
+            HorizontalDivider(
+                color = MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.5f)
+            )
         }
     }
 }
 
 @Composable
-private fun ConversationCard(
+private fun ConversationListItem(
     conversation: BotConversation,
     resources: Resources,
     onClick: () -> Unit
 ) {
-    Card(
+    Row(
         modifier = Modifier
             .fillMaxWidth()
-            .clickable(onClick = onClick),
-        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
-        colors = CardDefaults.cardColors(
-            containerColor = MaterialTheme.colorScheme.surface
-        )
+            .clickable(onClick = onClick)
+            .padding(horizontal = 16.dp, vertical = 16.dp),
+        verticalAlignment = Alignment.CenterVertically
     ) {
-        Row(
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(16.dp),
+        Column(
+            modifier = Modifier.weight(1f)
         ) {
-            Column(
-                modifier = Modifier.fillMaxWidth(),
-            ) {
-                Text(
-                    text = conversation.lastMessage,
-                    style = MaterialTheme.typography.titleMedium,
-                    color = MaterialTheme.colorScheme.onSurfaceVariant,
-                    maxLines = 2,
-                    overflow = TextOverflow.Ellipsis
-                )
+            Text(
+                text = conversation.lastMessage,
+                style = MaterialTheme.typography.bodyLarge,
+                fontWeight = FontWeight.Medium,
+                color = MaterialTheme.colorScheme.onSurface,
+                maxLines = 2,
+                overflow = TextOverflow.Ellipsis
+            )
 
-                Text(
-                    modifier = Modifier.padding(top = 8.dp),
-                    text = formatRelativeTime(conversation.mostRecentMessageDate, resources),
-                    style = MaterialTheme.typography.bodySmall,
-                    color = MaterialTheme.colorScheme.onSurfaceVariant
-                )
-            }
+            Text(
+                modifier = Modifier.padding(top = 4.dp),
+                text = formatRelativeTime(conversation.mostRecentMessageDate, resources),
+                style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.onSurfaceVariant
+            )
         }
+
+        Icon(
+            painter = painterResource(R.drawable.ic_chevron_right_white_24dp),
+            contentDescription = null,
+            tint = MaterialTheme.colorScheme.onSurfaceVariant,
+            modifier = Modifier.padding(start = 8.dp)
+        )
     }
 }
 

WordPress/src/main/java/org/wordpress/android/support/common/ui/EmptyConversationsView.kt

@@ -1,5 +1,6 @@
 package org.wordpress.android.support.common.ui
 
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -15,8 +16,10 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import org.wordpress.android.R
+import org.wordpress.android.ui.compose.theme.AppThemeM3
 
 @Composable
 fun EmptyConversationsView(
@@ -60,3 +63,47 @@ fun EmptyConversationsView(
         }
     }
 }
+
+@Preview(showBackground = true, name = "Empty Conversations View")
+@Composable
+private fun EmptyConversationsViewPreview() {
+    AppThemeM3(isDarkTheme = false) {
+        EmptyConversationsView(
+            modifier = Modifier,
+            onCreateNewConversationClick = { }
+        )
+    }
+}
+
+@Preview(showBackground = true, name = "Empty Conversations View - Dark", uiMode = UI_MODE_NIGHT_YES)
+@Composable
+private fun EmptyConversationsViewPreviewDark() {
+    AppThemeM3(isDarkTheme = true) {
+        EmptyConversationsView(
+            modifier = Modifier,
+            onCreateNewConversationClick = { }
+        )
+    }
+}
+
+@Preview(showBackground = true, name = "Empty Conversations View - WordPress")
+@Composable
+private fun EmptyConversationsViewPreviewWordPress() {
+    AppThemeM3(isDarkTheme = false, isJetpackApp = false) {
+        EmptyConversationsView(
+            modifier = Modifier,
+            onCreateNewConversationClick = { }
+        )
+    }
+}
+
+@Preview(showBackground = true, name = "Empty Conversations View - Dark WordPress", uiMode = UI_MODE_NIGHT_YES)
+@Composable
+private fun EmptyConversationsViewPreviewWordPressDark() {
+    AppThemeM3(isDarkTheme = true, isJetpackApp = false) {
+        EmptyConversationsView(
+            modifier = Modifier,
+            onCreateNewConversationClick = { }
+        )
+    }
+}

WordPress/src/main/java/org/wordpress/android/support/he/ui/HEConversationDetailScreen.kt

@@ -236,7 +236,7 @@ private fun ConversationTitleCard(title: String) {
             text = title,
             style = MaterialTheme.typography.titleLarge,
             fontWeight = FontWeight.Bold,
-            color = MaterialTheme.colorScheme.onPrimaryContainer
+            color = MaterialTheme.colorScheme.primary
         )
     }
 }

WordPress/src/main/java/org/wordpress/android/support/he/ui/HEConversationsListScreen.kt

@@ -6,18 +6,15 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Edit
-import androidx.compose.material3.Card
-import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
@@ -119,97 +116,81 @@ private fun ShowConversationsList(
             )
         } else {
             LazyColumn(
-                modifier = Modifier
-                    .fillMaxSize()
-                    .padding(horizontal = 16.dp)
+                modifier = Modifier.fillMaxSize()
             ) {
-                item {
-                    Spacer(modifier = Modifier.height(16.dp))
-                }
-
                 items(
                     items = conversationsList,
                     key = { it.id }
                 ) { conversation ->
-                    ConversationCard(
+                    ConversationListItem(
                         conversation = conversation,
                         resources = resources,
                         onClick = { onConversationClick(conversation) }
                     )
-                    Spacer(modifier = Modifier.height(12.dp))
-                }
-
-                item {
-                    Spacer(modifier = Modifier.height(16.dp))
+                    HorizontalDivider(
+                        color = MaterialTheme.colorScheme.outlineVariant.copy(alpha = 0.5f)
+                    )
                 }
             }
         }
     }
 }
 
 @Composable
-private fun ConversationCard(
+private fun ConversationListItem(
     conversation: SupportConversation,
     resources: Resources,
     onClick: () -> Unit
 ) {
-    Card(
+    Row(
         modifier = Modifier
             .fillMaxWidth()
-            .clickable(onClick = onClick),
-        colors = CardDefaults.cardColors(
-            containerColor = MaterialTheme.colorScheme.surface
-        ),
-        elevation = CardDefaults.cardElevation(defaultElevation = 1.dp)
+            .clickable(onClick = onClick)
+            .padding(horizontal = 16.dp, vertical = 16.dp),
+        verticalAlignment = Alignment.CenterVertically
     ) {
-        Row(
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(16.dp),
-            verticalAlignment = Alignment.CenterVertically
+        Column(
+            modifier = Modifier.weight(1f)
         ) {
-            Column(
-                modifier = Modifier.weight(1f)
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically
             ) {
-                Row(
-                    modifier = Modifier.fillMaxWidth(),
-                    horizontalArrangement = Arrangement.SpaceBetween,
-                    verticalAlignment = Alignment.CenterVertically
-                ) {
-                    Text(
-                        text = conversation.title,
-                        style = MaterialTheme.typography.titleMedium,
-                        fontWeight = FontWeight.Bold,
-                        maxLines = 1,
-                        overflow = TextOverflow.Ellipsis,
-                        modifier = Modifier.weight(1f, fill = false)
-                    )
-
-                    Text(
-                        text = formatRelativeTime(conversation.lastMessageSentAt, resources),
-                        style = MaterialTheme.typography.bodyMedium,
-                        color = MaterialTheme.colorScheme.onSurfaceVariant,
-                        modifier = Modifier.padding(start = 8.dp)
-                    )
-                }
-
-                Spacer(modifier = Modifier.height(4.dp))
+                Text(
+                    text = conversation.title,
+                    style = MaterialTheme.typography.bodyLarge,
+                    fontWeight = FontWeight.Medium,
+                    color = MaterialTheme.colorScheme.onSurface,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                    modifier = Modifier.weight(1f, fill = false)
+                )
 
                 Text(
-                    text = conversation.description,
+                    text = formatRelativeTime(conversation.lastMessageSentAt, resources),
                     style = MaterialTheme.typography.bodyMedium,
                     color = MaterialTheme.colorScheme.onSurfaceVariant,
-                    maxLines = 2,
-                    overflow = TextOverflow.Ellipsis
+                    modifier = Modifier.padding(start = 8.dp)
                 )
             }
 
-            Icon(
-                painter = painterResource(R.drawable.ic_chevron_right_white_24dp),
-                contentDescription = null,
-                tint = MaterialTheme.colorScheme.onSurfaceVariant
+            Text(
+                modifier = Modifier.padding(top = 4.dp),
+                text = conversation.description,
+                style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                maxLines = 2,
+                overflow = TextOverflow.Ellipsis
             )
         }
+
+        Icon(
+            painter = painterResource(R.drawable.ic_chevron_right_white_24dp),
+            contentDescription = null,
+            tint = MaterialTheme.colorScheme.onSurfaceVariant,
+            modifier = Modifier.padding(start = 8.dp)
+        )
     }
 }