From 3776b1c0259f1bfbfffbbb005b304fd681830e97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jorge=20Mart=C3=ADn?= Date: Fri, 26 May 2023 14:37:39 +0200 Subject: [PATCH] Timestamp improvements --- .../features/messages/impl/timeline/TimelineView.kt | 9 +++++---- .../io/element/android/libraries/designsystem/Color.kt | 6 ++++-- .../android/libraries/designsystem/theme/ColorsDark.kt | 6 ++++-- .../android/libraries/designsystem/theme/ColorsLight.kt | 6 ++++-- .../libraries/designsystem/theme/ElementColors.kt | 7 +++++++ 5 files changed, 24 insertions(+), 10 deletions(-) diff --git a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt b/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt index 4ba691eba1..c2e60302be 100644 --- a/features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt +++ b/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 = 2.dp) - .background(Color(0xFFF0F2F5), RoundedCornerShape(10.0.dp)) // TODO: add the color with its dark variant + .padding(horizontal = 4.dp, vertical = 4.dp) + .background(LocalColors.current.gray300, RoundedCornerShape(10.0.dp)) .align(Alignment.BottomEnd) ) { - TimestampView(Modifier.padding(horizontal = 8.dp, vertical = 4.dp)) + TimestampView(Modifier.padding(horizontal = 4.dp, vertical = 2.dp)) } } } diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/Color.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/Color.kt index 60f355d054..50585f9dba 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/Color.kt +++ b/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 Gray_400_Dark = Color(0xFF26282D) +val Compound_Gray_300_Light = Color(0xFFF0F2F5) +val Compound_Gray_300_Dark = Color(0xFF1D1F24) +val Compound_Gray_400_Light = Color(0xFFE1E6EC) +val Compound_Gray_400_Dark = Color(0xFF26282D) diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorsDark.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorsDark.kt index e697ed782c..166a2f3f79 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorsDark.kt +++ b/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, ) diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorsLight.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorsLight.kt index 35fdcf29b1..085dd534cd 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorsLight.kt +++ b/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, ) diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ElementColors.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ElementColors.kt index b275d66dd5..2643e678d3 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ElementColors.kt +++ b/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