Timestamp improvements

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt

@@ -87,7 +87,9 @@ import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.ElementColors
 import io.element.android.libraries.designsystem.theme.ElementTheme
+import io.element.android.libraries.designsystem.theme.LocalColors
 import io.element.android.libraries.designsystem.theme.components.FloatingActionButton
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
@@ -363,12 +365,11 @@ fun MessageEventLayout(
                 ContentView()
                 Box(
                     modifier = Modifier
-                        .wrapContentSize()
+                        .padding(horizontal = 4.dp, vertical = 4.dp)
-                        .padding(horizontal = 4.dp, vertical = 2.dp)
+                        .background(LocalColors.current.gray300, RoundedCornerShape(10.0.dp))
-                        .background(Color(0xFFF0F2F5), RoundedCornerShape(10.0.dp)) // TODO: add the color with its dark variant
                         .align(Alignment.BottomEnd)
                 ) {
-                    TimestampView(Modifier.padding(horizontal = 8.dp, vertical = 4.dp))
+                    TimestampView(Modifier.padding(horizontal = 4.dp, vertical = 2.dp))
                 }
             }
         }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/Color.kt

@@ -75,5 +75,7 @@ val LinkColor = Color(0xFF0086E6)
 val TextColorCriticalLight = Color(0xFFD51928)
 val TextColorCriticalDark = Color(0xfffd3e3c)
 
-val Gray_400_Light = Color(0xFFE1E6EC)
+val Compound_Gray_300_Light = Color(0xFFF0F2F5)
-val Gray_400_Dark = Color(0xFF26282D)
+val Compound_Gray_300_Dark = Color(0xFF1D1F24)
+val Compound_Gray_400_Light = Color(0xFFE1E6EC)
+val Compound_Gray_400_Dark = Color(0xFF26282D)

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorsDark.kt

@@ -23,10 +23,11 @@ import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.Azure
 import io.element.android.libraries.designsystem.Black_800
 import io.element.android.libraries.designsystem.Black_950
+import io.element.android.libraries.designsystem.Compound_Gray_300_Dark
 import io.element.android.libraries.designsystem.DarkGrey
 import io.element.android.libraries.designsystem.Gray_300
 import io.element.android.libraries.designsystem.Gray_400
-import io.element.android.libraries.designsystem.Gray_400_Dark
+import io.element.android.libraries.designsystem.Compound_Gray_400_Dark
 import io.element.android.libraries.designsystem.Gray_450
 import io.element.android.libraries.designsystem.SystemGrey5Dark
 import io.element.android.libraries.designsystem.SystemGrey6Dark
@@ -39,7 +40,8 @@ fun elementColorsDark() = ElementColors(
     messageHighlightedBackground = Azure,
     quaternary = Gray_400,
     quinary = Gray_450,
-    gray400 = Gray_400_Dark,
+    gray300 = Compound_Gray_300_Dark,
+    gray400 = Compound_Gray_400_Dark,
     textActionCritical = TextColorCriticalDark,
     isLight = false,
 )

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorsLight.kt

@@ -26,7 +26,8 @@ import io.element.android.libraries.designsystem.Gray_100
 import io.element.android.libraries.designsystem.Gray_150
 import io.element.android.libraries.designsystem.Gray_200
 import io.element.android.libraries.designsystem.Gray_25
-import io.element.android.libraries.designsystem.Gray_400_Light
+import io.element.android.libraries.designsystem.Compound_Gray_300_Light
+import io.element.android.libraries.designsystem.Compound_Gray_400_Light
 import io.element.android.libraries.designsystem.Gray_50
 import io.element.android.libraries.designsystem.SystemGrey5Light
 import io.element.android.libraries.designsystem.SystemGrey6Light
@@ -39,7 +40,8 @@ fun elementColorsLight() = ElementColors(
     messageHighlightedBackground = Azure,
     quaternary = Gray_100,
     quinary = Gray_50,
-    gray400 = Gray_400_Light,
+    gray300 = Compound_Gray_300_Light,
+    gray400 = Compound_Gray_400_Light,
     textActionCritical = TextColorCriticalLight,
     isLight = true,
 )

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ElementColors.kt

@@ -29,6 +29,7 @@ class ElementColors(
     messageHighlightedBackground: Color,
     quaternary: Color,
     quinary: Color,
+    gray300: Color,
     gray400: Color,
     textActionCritical: Color,
     isLight: Boolean
@@ -46,6 +47,9 @@ class ElementColors(
     var quinary by mutableStateOf(quinary)
         private set
 
+    var gray300 by mutableStateOf(gray400)
+        private set
+
     var gray400 by mutableStateOf(gray400)
         private set
 
@@ -61,6 +65,7 @@ class ElementColors(
         messageHighlightedBackground: Color = this.messageHighlightedBackground,
         quaternary: Color = this.quaternary,
         quinary: Color = this.quinary,
+        gray300: Color = this.gray300,
         gray400: Color = this.gray400,
         textActionCritical: Color = this.textActionCritical,
         isLight: Boolean = this.isLight,
@@ -70,6 +75,7 @@ class ElementColors(
         messageHighlightedBackground = messageHighlightedBackground,
         quaternary = quaternary,
         quinary = quinary,
+        gray300 = gray300,
         gray400 = gray400,
         textActionCritical = textActionCritical,
         isLight = isLight,
@@ -81,6 +87,7 @@ class ElementColors(
         messageHighlightedBackground = other.messageHighlightedBackground
         quaternary = other.quaternary
         quinary = other.quinary
+        gray300 = other.gray300
         gray400 = other.gray400
         textActionCritical = other.textActionCritical
         isLight = other.isLight