Timeline: update bubble style

features/messages/src/main/java/io/element/android/x/features/messages/MessagesScreen.kt

@@ -40,6 +40,7 @@ import com.airbnb.mvrx.compose.collectAsState
 import com.airbnb.mvrx.compose.mavericksViewModel
 import io.element.android.x.core.compose.LogCompositions
 import io.element.android.x.core.data.StableCharSequence
+import io.element.android.x.designsystem.*
 import io.element.android.x.designsystem.components.avatar.AvatarData
 import io.element.android.x.features.messages.components.*
 import io.element.android.x.features.messages.model.MessagesItemGroupPosition
@@ -477,13 +478,18 @@ fun MessageEventBubble(
         }
     }
 
-    val (backgroundBubbleColor, border) = if (isMine) {
-        Pair(MaterialTheme.colorScheme.surfaceVariant, null)
+    val backgroundBubbleColor = if (isMine) {
+        if(LocalIsDarkTheme.current){
+            SystemGrey5Dark
+        }else {
+            SystemGrey5Light
+        }
     } else {
-        Pair(
-            Color.Transparent,
-            BorderStroke(1.dp, MaterialTheme.colorScheme.surfaceVariant)
-        )
+        if(LocalIsDarkTheme.current){
+            SystemGrey6Dark
+        }else {
+            SystemGrey6Light
+        }
     }
     val bubbleShape = bubbleShape()
     Surface(
@@ -499,7 +505,6 @@ fun MessageEventBubble(
             ),
         color = backgroundBubbleColor,
         shape = bubbleShape,
-        border = border,
         content = content
     )
 }

libraries/designsystem/src/main/java/io/element/android/x/designsystem/Color.kt

@@ -17,7 +17,7 @@ val SystemGrey3Dark = Color(0xFF48484A)
 val SystemGrey4Light = Color(0xFFD1D1D6)
 val SystemGrey4Dark = Color(0xFF3A3A3C)
 val SystemGrey5Light = Color(0xFFE5E5EA)
-val SystemGrey5Dark = Color(0xFF1C1C1E)
+val SystemGrey5Dark = Color(0xFF2C2C2E)
 val SystemGrey6Light = Color(0xFFF2F2F7)
 val SystemGrey6Dark = Color(0xFF1C1C1E)
 

libraries/designsystem/src/main/java/io/element/android/x/designsystem/Theme.kt

@@ -4,7 +4,9 @@ import android.os.Build
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.SideEffect
+import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
@@ -42,7 +44,7 @@ private val LightColorScheme = lightColorScheme(
     onSurface = Color(0xFF1C1B1F),
     */
 )
-
+val LocalIsDarkTheme = compositionLocalOf<Boolean> { error("Not defined") }
 
 @Composable
 fun ElementXTheme(
@@ -72,9 +74,14 @@ fun ElementXTheme(
         )
     }
 
-    MaterialTheme(
-        colorScheme = colorScheme,
-        typography = Typography,
-        content = content
-    )
-}
+    CompositionLocalProvider(LocalIsDarkTheme provides darkTheme) {
+        MaterialTheme(
+            colorScheme = colorScheme,
+            typography = Typography,
+            content = content
+        )
+    }
+    
+}
+
+