style(assistant): Make chat bubbles dark/light aware and like Nextcloud Talk chat bubbles

* background color like incoming chat messages
* timestamp end-aligned
* Make toolbar look like other toolbar usages (headline size, drawer icon)

Resolves #16351

Signed-off-by: Andy Scherzinger <info@andy-scherzinger.de>

Author: AndyScherzinger

app/src/main/java/com/nextcloud/client/assistant/chat/ChatContent.kt

@@ -42,7 +42,6 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.scale
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
@@ -123,7 +122,7 @@ private fun AssistantTypingIndicator() {
                             bottomEnd = CHAT_BUBBLE_CORNER_RADIUS
                         )
                     )
-                    .background(color = colorResource(R.color.white))
+                    .background(color = colorResource(R.color.bg_message_bubble))
             ) {
                 TypingAnimation()
             }
@@ -148,7 +147,9 @@ private fun AnimatedAssistantIcon() {
         modifier = Modifier
             .size(ASSISTANT_ICON_SIZE)
             .clip(CircleShape)
-            .background(Color.White),
+            .background(
+                color = colorResource(R.color.bg_message_bubble)
+            ),
         contentAlignment = Alignment.Center
     ) {
         Image(
@@ -205,7 +206,9 @@ private fun AssistantMessageItem(message: ChatMessage) {
                 modifier = Modifier
                     .size(ASSISTANT_ICON_SIZE)
                     .clip(CircleShape)
-                    .background(Color.White),
+                    .background(
+                        color = colorResource(R.color.bg_message_bubble)
+                    ),
                 contentAlignment = Alignment.Center
             ) {
                 Image(
@@ -228,7 +231,7 @@ private fun AssistantMessageItem(message: ChatMessage) {
                         )
                     )
                     .background(
-                        color = colorResource(R.color.white)
+                        color = colorResource(R.color.bg_message_bubble)
                     )
             ) {
                 MessageTextItem(message)
@@ -259,7 +262,7 @@ private fun UserMessageItem(message: ChatMessage) {
                             bottomStart = CHAT_BUBBLE_CORNER_RADIUS
                         )
                     )
-                    .background(color = colorResource(R.color.white))
+                    .background(color = colorResource(R.color.bg_message_bubble))
             ) {
                 MessageTextItem(message)
             }
@@ -280,13 +283,14 @@ private fun MessageTextItem(message: ChatMessage) {
                 fontSize = 16.sp
             )
         )
-        Spacer(modifier = Modifier.height(8.dp))
+        Spacer(modifier = Modifier.height(4.dp))
         Text(
             text = message.time(),
             style = TextStyle(
-                color = colorResource(R.color.text_color),
+                color = colorResource(R.color.secondary_text_color),
                 fontSize = 12.sp
-            )
+            ),
+            modifier = Modifier.align(Alignment.End)
         )
     }
 }

app/src/main/res/layout/toolbar_standard.xml

@@ -118,9 +118,7 @@
             android:id="@+id/toolbar_linear_layout"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/standard_half_margin"
             android:layout_marginTop="@dimen/standard_half_margin"
-            android:layout_marginEnd="@dimen/standard_margin"
             android:layout_marginBottom="@dimen/standard_quarter_margin"
             android:orientation="horizontal"
             android:visibility="gone"
@@ -134,18 +132,24 @@
                 style="@style/Widget.AppTheme.Button.IconButton"
                 android:layout_width="@dimen/minimum_size_for_touchable_area"
                 android:layout_height="@dimen/minimum_size_for_touchable_area"
+                android:layout_marginStart="@dimen/standard_quarter_margin"
+                android:layout_marginTop="-4dp"
+                android:layout_marginEnd="@dimen/standard_half_margin"
+                android:contentDescription="@string/drawer_open"
                 app:cornerRadius="@dimen/button_corner_radius"
                 app:icon="@drawable/ic_menu"
-                app:iconTint="@color/black" />
+                app:iconSize="@dimen/search_bar_icon_size"
+                app:iconTint="@color/fontAppbar" />
 
             <com.google.android.material.textview.MaterialTextView
                 android:id="@+id/toolbar_title"
+                android:layout_width="wrap_content"
+                android:layout_height="@dimen/minimum_size_for_touchable_area"
                 android:gravity="center"
-                android:textColor="@color/black"
                 android:lines="1"
-                android:textSize="16sp"
-                android:layout_width="wrap_content"
-                android:layout_height="@dimen/minimum_size_for_touchable_area"/>
+                android:textColor="@color/black"
+                android:textSize="24sp"
+                tools:text="Headline" />
 
         </LinearLayout>
 

app/src/main/res/values-night/colors.xml

@@ -39,4 +39,6 @@
     <color name="fontAppbar">@android:color/white</color>
 
     <color name="actionbar_color">#101418</color>
+
+    <color name="bg_message_bubble">#2A2A2A</color>
 </resources>

app/src/main/res/values/colors.xml

@@ -89,4 +89,6 @@
     <color name="fontSecondaryAppbar">#A5A5A5</color>
 
     <color name="actionbar_color">#F7F9FF</color>
+
+    <color name="bg_message_bubble">#EFEFEF</color>
 </resources>