diff --git a/changelog.d/1332.feature b/changelog.d/1332.feature
new file mode 100644
index 0000000000..2a08ae9d25
--- /dev/null
+++ b/changelog.d/1332.feature
@@ -0,0 +1 @@
+[Rich text editor] Update design
\ No newline at end of file
diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/VectorIcons.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/VectorIcons.kt
index 0194e86518..5f9764d8f9 100644
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/VectorIcons.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/VectorIcons.kt
@@ -42,4 +42,6 @@ object VectorIcons {
val Strikethrough = R.drawable.ic_strikethrough
val Underline = R.drawable.ic_underline
val ThreadDecoration = R.drawable.ic_thread_decoration
+ val Plus = R.drawable.ic_plus
+ val Cancel = R.drawable.ic_cancel
}
diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt
index 77ca4bd010..e7878f9bed 100644
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/ColorAliases.kt
@@ -75,6 +75,16 @@ val SemanticColors.progressIndicatorTrackColor
Color(0x25F4F7FA)
}
+// This color is not present in Semantic color, so put hard-coded value for now
+val SemanticColors.iconSuccessPrimaryBackground
+ get() = if (isLight) {
+ // We want LightDesignTokens.colorGreen300
+ Color(0xffe3f7ed)
+ } else {
+ // We want DarkDesignTokens.colorGreen300
+ Color(0xff002513)
+ }
+
// Temporary color, which is not in the token right now
val SemanticColors.temporaryColorBgSpecial
get() = if (isLight) Color(0xFFE4E8F0) else Color(0xFF3A4048)
@@ -102,6 +112,7 @@ private fun ContentToPreview() {
"messageFromOtherBackground" to ElementTheme.colors.messageFromOtherBackground,
"progressIndicatorTrackColor" to ElementTheme.colors.progressIndicatorTrackColor,
"temporaryColorBgSpecial" to ElementTheme.colors.temporaryColorBgSpecial,
+ "iconSuccessPrimaryBackground" to ElementTheme.colors.iconSuccessPrimaryBackground,
)
)
}
diff --git a/libraries/designsystem/src/main/res/drawable/ic_bold.xml b/libraries/designsystem/src/main/res/drawable/ic_bold.xml
index c361f85d3d..5a08fee2f3 100644
--- a/libraries/designsystem/src/main/res/drawable/ic_bold.xml
+++ b/libraries/designsystem/src/main/res/drawable/ic_bold.xml
@@ -1,9 +1,9 @@
+ android:width="20dp"
+ android:height="20dp"
+ android:viewportWidth="20"
+ android:viewportHeight="20">
diff --git a/libraries/designsystem/src/main/res/drawable/ic_bullet_list.xml b/libraries/designsystem/src/main/res/drawable/ic_bullet_list.xml
index 72d8324622..103d0b380d 100644
--- a/libraries/designsystem/src/main/res/drawable/ic_bullet_list.xml
+++ b/libraries/designsystem/src/main/res/drawable/ic_bullet_list.xml
@@ -1,9 +1,9 @@
+ android:width="20dp"
+ android:height="20dp"
+ android:viewportWidth="20"
+ android:viewportHeight="20">
diff --git a/libraries/designsystem/src/main/res/drawable/ic_cancel.xml b/libraries/designsystem/src/main/res/drawable/ic_cancel.xml
new file mode 100644
index 0000000000..3e4ee21aee
--- /dev/null
+++ b/libraries/designsystem/src/main/res/drawable/ic_cancel.xml
@@ -0,0 +1,26 @@
+
+
+
+
+
diff --git a/libraries/designsystem/src/main/res/drawable/ic_code_block.xml b/libraries/designsystem/src/main/res/drawable/ic_code_block.xml
index 6e622f5b27..18279bd8b5 100644
--- a/libraries/designsystem/src/main/res/drawable/ic_code_block.xml
+++ b/libraries/designsystem/src/main/res/drawable/ic_code_block.xml
@@ -1,9 +1,9 @@
+ android:width="20dp"
+ android:height="20dp"
+ android:viewportWidth="20"
+ android:viewportHeight="20">
diff --git a/libraries/designsystem/src/main/res/drawable/ic_indent_decrease.xml b/libraries/designsystem/src/main/res/drawable/ic_indent_decrease.xml
index 5a0b284223..181f94c012 100644
--- a/libraries/designsystem/src/main/res/drawable/ic_indent_decrease.xml
+++ b/libraries/designsystem/src/main/res/drawable/ic_indent_decrease.xml
@@ -1,9 +1,9 @@
+ android:width="20dp"
+ android:height="20dp"
+ android:viewportWidth="20"
+ android:viewportHeight="20">
diff --git a/libraries/designsystem/src/main/res/drawable/ic_indent_increase.xml b/libraries/designsystem/src/main/res/drawable/ic_indent_increase.xml
index 367686ceac..06a9ede8d5 100644
--- a/libraries/designsystem/src/main/res/drawable/ic_indent_increase.xml
+++ b/libraries/designsystem/src/main/res/drawable/ic_indent_increase.xml
@@ -1,9 +1,9 @@
+ android:width="20dp"
+ android:height="20dp"
+ android:viewportWidth="20"
+ android:viewportHeight="20">
diff --git a/libraries/designsystem/src/main/res/drawable/ic_inline_code.xml b/libraries/designsystem/src/main/res/drawable/ic_inline_code.xml
index c0dc504ed9..c15248f8ea 100644
--- a/libraries/designsystem/src/main/res/drawable/ic_inline_code.xml
+++ b/libraries/designsystem/src/main/res/drawable/ic_inline_code.xml
@@ -1,15 +1,15 @@
+ android:width="20dp"
+ android:height="20dp"
+ android:viewportWidth="20"
+ android:viewportHeight="20">
diff --git a/libraries/designsystem/src/main/res/drawable/ic_italic.xml b/libraries/designsystem/src/main/res/drawable/ic_italic.xml
index f640c109f4..0a389dbf15 100644
--- a/libraries/designsystem/src/main/res/drawable/ic_italic.xml
+++ b/libraries/designsystem/src/main/res/drawable/ic_italic.xml
@@ -1,9 +1,9 @@
+ android:width="20dp"
+ android:height="20dp"
+ android:viewportWidth="20"
+ android:viewportHeight="20">
diff --git a/libraries/designsystem/src/main/res/drawable/ic_link.xml b/libraries/designsystem/src/main/res/drawable/ic_link.xml
index fd69ec4703..c8a37cdda2 100644
--- a/libraries/designsystem/src/main/res/drawable/ic_link.xml
+++ b/libraries/designsystem/src/main/res/drawable/ic_link.xml
@@ -1,9 +1,9 @@
+ android:width="20dp"
+ android:height="20dp"
+ android:viewportWidth="20"
+ android:viewportHeight="20">
diff --git a/libraries/designsystem/src/main/res/drawable/ic_numbered_list.xml b/libraries/designsystem/src/main/res/drawable/ic_numbered_list.xml
index f4f5862656..63e7269508 100644
--- a/libraries/designsystem/src/main/res/drawable/ic_numbered_list.xml
+++ b/libraries/designsystem/src/main/res/drawable/ic_numbered_list.xml
@@ -1,9 +1,9 @@
+ android:width="20dp"
+ android:height="20dp"
+ android:viewportWidth="20"
+ android:viewportHeight="20">
diff --git a/libraries/designsystem/src/main/res/drawable/ic_plus.xml b/libraries/designsystem/src/main/res/drawable/ic_plus.xml
new file mode 100644
index 0000000000..159ed32e1a
--- /dev/null
+++ b/libraries/designsystem/src/main/res/drawable/ic_plus.xml
@@ -0,0 +1,29 @@
+
+
+
+
+
+
diff --git a/libraries/designsystem/src/main/res/drawable/ic_quote.xml b/libraries/designsystem/src/main/res/drawable/ic_quote.xml
index e17565a6cc..8f4768f818 100644
--- a/libraries/designsystem/src/main/res/drawable/ic_quote.xml
+++ b/libraries/designsystem/src/main/res/drawable/ic_quote.xml
@@ -1,18 +1,18 @@
+ android:width="20dp"
+ android:height="20dp"
+ android:viewportWidth="20"
+ android:viewportHeight="20">
diff --git a/libraries/designsystem/src/main/res/drawable/ic_strikethrough.xml b/libraries/designsystem/src/main/res/drawable/ic_strikethrough.xml
index d1994f8045..4469c5572d 100644
--- a/libraries/designsystem/src/main/res/drawable/ic_strikethrough.xml
+++ b/libraries/designsystem/src/main/res/drawable/ic_strikethrough.xml
@@ -1,9 +1,9 @@
+ android:width="20dp"
+ android:height="20dp"
+ android:viewportWidth="20"
+ android:viewportHeight="20">
diff --git a/libraries/designsystem/src/main/res/drawable/ic_underline.xml b/libraries/designsystem/src/main/res/drawable/ic_underline.xml
index 09f92f2104..9da2f2e0b4 100644
--- a/libraries/designsystem/src/main/res/drawable/ic_underline.xml
+++ b/libraries/designsystem/src/main/res/drawable/ic_underline.xml
@@ -1,9 +1,9 @@
+ android:width="20dp"
+ android:height="20dp"
+ android:viewportWidth="20"
+ android:viewportHeight="20">
diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt
index b7c2b8ea40..d8906a49b0 100644
--- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt
+++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt
@@ -114,7 +114,7 @@ fun TextComposer(
start = 3.dp,
end = 6.dp,
top = 8.dp,
- bottom = 5.dp,
+ bottom = 4.dp,
)
.fillMaxWidth(),
) {
@@ -137,7 +137,7 @@ fun TextComposer(
) {
Icon(
modifier = Modifier.size(30.dp.applyScaleUp()),
- resourceId = R.drawable.ic_plus, // TODO Replace with design system icon when available
+ resourceId = VectorIcons.Plus,
contentDescription = stringResource(R.string.rich_text_editor_a11y_add_attachment),
tint = ElementTheme.colors.iconPrimary,
)
@@ -146,7 +146,7 @@ fun TextComposer(
val roundCornerLarge = 28.dp.applyScaleUp()
val roundedCornerSize = remember(state.lineCount, composerMode) {
- if (state.lineCount > 1 || composerMode is MessageComposerMode.Special) {
+ if (composerMode is MessageComposerMode.Special) {
roundCornerSmall
} else {
roundCornerLarge
@@ -156,17 +156,13 @@ fun TextComposer(
targetValue = roundedCornerSize,
animationSpec = tween(
durationMillis = 100,
- )
+ ),
+ label = "roundedCornerSizeAnimation"
)
val roundedCorners = RoundedCornerShape(roundedCornerSizeState.value)
val colors = ElementTheme.colors
val bgColor = colors.bgSubtleSecondary
-
- val borderColor by remember(state.hasFocus, colors) {
- derivedStateOf {
- if (state.hasFocus) colors.borderDisabled else bgColor
- }
- }
+ val borderColor = colors.borderDisabled
Column(
modifier = Modifier
@@ -180,7 +176,7 @@ fun TextComposer(
.fillMaxWidth()
.clip(roundedCorners)
.background(color = bgColor)
- .border(1.dp, borderColor, roundedCorners)
+ .border(0.5.dp, borderColor, roundedCorners)
) {
if (composerMode is MessageComposerMode.Special) {
ComposerModeView(composerMode = composerMode, onResetComposerMode = onResetComposerMode)
@@ -272,7 +268,7 @@ private fun TextInput(
Text(
placeholder,
style = defaultTypography.copy(
- color = ElementTheme.colors.textDisabled,
+ color = ElementTheme.colors.textSecondary,
),
)
}
@@ -280,6 +276,7 @@ private fun TextInput(
RichTextEditor(
state = state,
modifier = Modifier
+ .padding(top = 6.dp, bottom = 6.dp)
.fillMaxWidth(),
style = RichTextEditorDefaults.style(
text = RichTextEditorDefaults.textStyle(
@@ -323,7 +320,7 @@ private fun TextFormatting(
) {
Icon(
modifier = Modifier.size(30.dp.applyScaleUp()),
- resourceId = R.drawable.ic_cancel, // TODO Replace with design system icon when available
+ resourceId = VectorIcons.Cancel,
contentDescription = stringResource(CommonStrings.action_close),
tint = ElementTheme.colors.iconPrimary,
)
@@ -335,8 +332,8 @@ private fun TextFormatting(
.constrainAs(formatting) {
top.linkTo(parent.top)
bottom.linkTo(parent.bottom)
- start.linkTo(close.end, margin = 3.dp)
- end.linkTo(send.start, margin = 20.dp)
+ start.linkTo(close.end, margin = 1.dp)
+ end.linkTo(send.start, margin = 14.dp)
width = fillToConstraints
}
.horizontalScroll(scrollState),
@@ -589,7 +586,7 @@ private fun SendButton(
) {
Icon(
modifier = Modifier
- .height(18.dp.applyScaleUp())
+ .height(24.dp.applyScaleUp())
.align(Alignment.Center),
resourceId = iconId,
contentDescription = contentDescription,
diff --git a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/FormattingOption.kt b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/FormattingOption.kt
index 7eb1d08293..a3635b28c3 100644
--- a/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/FormattingOption.kt
+++ b/libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/FormattingOption.kt
@@ -18,17 +18,26 @@ package io.element.android.libraries.textcomposer.components
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.ripple.rememberRipple
import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.VectorIcons
+import io.element.android.libraries.designsystem.preview.DayNightPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
import io.element.android.libraries.designsystem.text.applyScaleUp
import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.iconSuccessPrimaryBackground
import io.element.android.libraries.theme.ElementTheme
import io.element.android.libraries.theme.compound.generated.SemanticColors
@@ -42,27 +51,65 @@ internal fun FormattingOption(
colors: SemanticColors = ElementTheme.colors,
) {
val backgroundColor = when (state) {
- FormattingOptionState.Selected -> colors.bgActionPrimaryRest
+ FormattingOptionState.Selected -> colors.iconSuccessPrimaryBackground
FormattingOptionState.Default,
FormattingOptionState.Disabled -> Color.Transparent
}
val foregroundColor = when (state) {
- FormattingOptionState.Selected -> colors.iconOnSolidPrimary
- FormattingOptionState.Default -> colors.iconPrimary
+ FormattingOptionState.Selected -> colors.iconSuccessPrimary
+ FormattingOptionState.Default -> colors.iconSecondary
FormattingOptionState.Disabled -> colors.iconDisabled
}
Box(
modifier = modifier
- .clickable { onClick() }
- .size(44.dp.applyScaleUp())
- .background(backgroundColor, shape = RoundedCornerShape(4.dp.applyScaleUp()))
+ .clickable(
+ onClick = onClick,
+ interactionSource = remember { MutableInteractionSource() },
+ indication = rememberRipple(
+ bounded = false,
+ radius = 20.dp,
+ ),
+ )
+ .size(48.dp.applyScaleUp())
) {
- Icon(
- modifier = Modifier.align(Alignment.Center),
- imageVector = imageVector,
- contentDescription = contentDescription,
- tint = foregroundColor,
+ Box(
+ modifier = Modifier
+ .size(36.dp.applyScaleUp())
+ .align(Alignment.Center)
+ .background(backgroundColor, shape = RoundedCornerShape(8.dp.applyScaleUp()))
+ ) {
+ Icon(
+ modifier = Modifier.align(Alignment.Center),
+ imageVector = imageVector,
+ contentDescription = contentDescription,
+ tint = foregroundColor,
+ )
+ }
+ }
+}
+
+@DayNightPreviews
+@Composable
+internal fun FormattingButtonPreview() = ElementPreview {
+ Row {
+ FormattingOption(
+ state = FormattingOptionState.Default,
+ onClick = { },
+ imageVector = ImageVector.vectorResource(VectorIcons.Bold),
+ contentDescription = "",
+ )
+ FormattingOption(
+ state = FormattingOptionState.Selected,
+ onClick = { },
+ imageVector = ImageVector.vectorResource(VectorIcons.Italic),
+ contentDescription = "",
+ )
+ FormattingOption(
+ state = FormattingOptionState.Disabled,
+ onClick = { },
+ imageVector = ImageVector.vectorResource(VectorIcons.Underline),
+ contentDescription = "",
)
}
}
diff --git a/libraries/textcomposer/impl/src/main/res/drawable/ic_cancel.xml b/libraries/textcomposer/impl/src/main/res/drawable/ic_cancel.xml
deleted file mode 100644
index 5c27ba82d9..0000000000
--- a/libraries/textcomposer/impl/src/main/res/drawable/ic_cancel.xml
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
diff --git a/libraries/textcomposer/impl/src/main/res/drawable/ic_plus.xml b/libraries/textcomposer/impl/src/main/res/drawable/ic_plus.xml
deleted file mode 100644
index ead38721dc..0000000000
--- a/libraries/textcomposer/impl/src/main/res/drawable/ic_plus.xml
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
diff --git a/libraries/textcomposer/impl/src/main/res/drawable/ic_send.xml b/libraries/textcomposer/impl/src/main/res/drawable/ic_send.xml
index bf346b3a01..2ed6e6e53e 100644
--- a/libraries/textcomposer/impl/src/main/res/drawable/ic_send.xml
+++ b/libraries/textcomposer/impl/src/main/res/drawable/ic_send.xml
@@ -1,9 +1,25 @@
+
+
+ android:width="24dp"
+ android:height="24dp"
+ android:viewportWidth="24"
+ android:viewportHeight="24">
+ android:pathData="M21.829,13.085 L6.259,20.867c-1.049,0.525 -2.141,-0.601 -1.628,-1.627 0,0 1.93,-3.897 2.461,-4.918 0.531,-1.021 1.138,-1.197 6.781,-1.927 0.209,-0.027 0.38,-0.185 0.38,-0.395 0,-0.21 -0.171,-0.368 -0.38,-0.395C8.23,10.876 7.622,10.699 7.091,9.678c-0.531,-1.02 -2.461,-4.918 -2.461,-4.918 -0.513,-1.026 0.579,-2.152 1.628,-1.627L21.829,10.915c0.894,0.446 0.894,1.723 0,2.17z"
+ android:fillColor="#ffffff"/>
diff --git a/libraries/textcomposer/impl/src/main/res/drawable/ic_tick.xml b/libraries/textcomposer/impl/src/main/res/drawable/ic_tick.xml
index cf1d71a56f..dd7863bab8 100644
--- a/libraries/textcomposer/impl/src/main/res/drawable/ic_tick.xml
+++ b/libraries/textcomposer/impl/src/main/res/drawable/ic_tick.xml
@@ -1,9 +1,9 @@
+ android:width="24dp"
+ android:height="24dp"
+ android:viewportWidth="24"
+ android:viewportHeight="24">
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.messagecomposer_null_MessageComposerViewDark_0_null_0,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.messagecomposer_null_MessageComposerViewDark_0_null_0,NEXUS_5,1.0,en].png
index 67b7525ddc..c5fc8a7df4 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.messagecomposer_null_MessageComposerViewDark_0_null_0,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.messagecomposer_null_MessageComposerViewDark_0_null_0,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:6bf428927e9a3493284d9fa7ba307b51315ed52b317a60ac345e87ba70849d0f
-size 10523
+oid sha256:b237f45b9db8f1a7ac6dde6a2f513d28d697f6251e4a384a4b343daa417d3f15
+size 10441
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.messagecomposer_null_MessageComposerViewLight_0_null_0,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.messagecomposer_null_MessageComposerViewLight_0_null_0,NEXUS_5,1.0,en].png
index 8007500f81..f88e231886 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.messagecomposer_null_MessageComposerViewLight_0_null_0,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.messagecomposer_null_MessageComposerViewLight_0_null_0,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:6eced1d7173c2d0100351f5bb9cd14c649a826b2e355e426b9c6d4add90015d9
-size 10833
+oid sha256:933d3530f5267dd015c1a80536c92428b4b5018a76952f5911782acc2d82b53a
+size 10813
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewDark_0_null_0,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewDark_0_null_0,NEXUS_5,1.0,en].png
index a80b2ce36d..e01bc2261a 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewDark_0_null_0,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewDark_0_null_0,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:2b55dbcb731dfc40a1e100e8caf26802f759b4bcd186dbbc4432644db08f8316
-size 52141
+oid sha256:ed4ba249dab6dc1e906bfb70886b531c4bf76e3acae8b8162496afe3b5a0f572
+size 52085
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewDark_0_null_1,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewDark_0_null_1,NEXUS_5,1.0,en].png
index 03f50fe82f..bf8898fadc 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewDark_0_null_1,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewDark_0_null_1,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:d5953ae4bb021c39157b4118ea628ca9bb2277f9672749cc6313f0b378d31cb8
-size 53312
+oid sha256:9cfd42ac1e4931d4fb01ac8cecffa635adc92d67f1107a4c4051d66eeaab954a
+size 53336
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewDark_0_null_2,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewDark_0_null_2,NEXUS_5,1.0,en].png
index 8d7e2dcf95..78bffbdb73 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewDark_0_null_2,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewDark_0_null_2,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:c329165fa341a2130b43a448b8bba465f1e5f458136efa6da80f2cdeee9d6caa
-size 52369
+oid sha256:7eac088a0d14a2b1b85f541d0df5a1d38bdca3f7612560770bbfcffe0c1b2389
+size 52442
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewDark_0_null_4,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewDark_0_null_4,NEXUS_5,1.0,en].png
index 35d5965ff3..7a830c8020 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewDark_0_null_4,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewDark_0_null_4,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:dc662d180d1766706f249f1585fb100f5933206b65d4644fae65abc6a121a633
-size 51331
+oid sha256:9c65887eeeff0a815136ddfe9dbfae86d60e6abf4f409192d7950aad01c0bb0c
+size 51098
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewDark_0_null_5,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewDark_0_null_5,NEXUS_5,1.0,en].png
index b2e621fc71..04a7cbfe71 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewDark_0_null_5,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewDark_0_null_5,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:db0107e648e2acfc253d83f5e3b2f3e41de1abc9bdc4922dfd923ad4e50b8f5f
-size 49700
+oid sha256:eddb7e59898d7aaf644f958ae0b05578b7e1ef3802e352d7fb78651c2de97cf6
+size 49638
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewLight_0_null_0,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewLight_0_null_0,NEXUS_5,1.0,en].png
index 65cdf717bb..a960aed41d 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewLight_0_null_0,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewLight_0_null_0,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:3eb1479510a8cd04d133265e33ea15115158ac55c93387d1dafa93a3a3a858f0
-size 53620
+oid sha256:53bafb3688148dbeb3859aef1b8a9bf086340fc799f3d825ed246eba0cdda0f6
+size 53463
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewLight_0_null_1,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewLight_0_null_1,NEXUS_5,1.0,en].png
index a5959f6d60..87c5b51154 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewLight_0_null_1,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewLight_0_null_1,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:c0d5272b14b347f18b2d67d5fae6eaf507b8d6f7c9d361317bb6b8a062e63ceb
-size 54899
+oid sha256:22854689cac05b6ff1ec58a2b086c751516938161b844694b9300641de5e6ca9
+size 54871
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewLight_0_null_2,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewLight_0_null_2,NEXUS_5,1.0,en].png
index ec09599aca..6d8c175733 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewLight_0_null_2,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewLight_0_null_2,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:2b4e5e9d920ea2a7733453e030bb365c9e2af7263de8fe216ab56088e0861fa5
-size 53997
+oid sha256:ea6bebc608259c37a2b88c14e6b247696a2f9967152bcf2eb0c2a5d70f540ee4
+size 53944
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewLight_0_null_4,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewLight_0_null_4,NEXUS_5,1.0,en].png
index 8212494315..7071e778c7 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewLight_0_null_4,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewLight_0_null_4,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:dff46ed537c81602be0dea8782e37bb78669ee798ec4d422c23ff29cbbdebc17
-size 55927
+oid sha256:885000bd08b05ca49eddbae17aa672fbf10a3acdcaf64d71fef77888229ae5c5
+size 55813
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewLight_0_null_5,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewLight_0_null_5,NEXUS_5,1.0,en].png
index cbdda6b794..1bac3210f9 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewLight_0_null_5,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl_null_MessagesViewLight_0_null_5,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:7e162503c27609f01e05bb2c634c2d3123abf6e786ecfe763c902d400ead050f
-size 51283
+oid sha256:f1fd5d62a43ccfca8e157371068dcf125a72cd22920df447689b50464d8d42e6
+size 51137
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.theme_null_ColorAliasesDark_0_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.theme_null_ColorAliasesDark_0_null,NEXUS_5,1.0,en].png
index b1c6c996d8..014374fdb1 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.theme_null_ColorAliasesDark_0_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.theme_null_ColorAliasesDark_0_null,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:d57924194a017902912825d4f43fcd290db11430d4d64abd89abe39b9e2ffc27
-size 48726
+oid sha256:e6625c102a88cc1096fea5425d044a96ef6e403317fa944cef8ec1ce5cd63a23
+size 52632
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.theme_null_ColorAliasesLight_0_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.theme_null_ColorAliasesLight_0_null,NEXUS_5,1.0,en].png
index eaf130c209..c23cc8a0e2 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.theme_null_ColorAliasesLight_0_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.theme_null_ColorAliasesLight_0_null,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:0eaa20c7c00c18cf08135aca70407d55ea9fc33a7f262aee3fa6ced272f7ab16
-size 48465
+oid sha256:dc7900cfc6a214acef16f642a2273088abef88f99cbf68b1aa99e43daab837ca
+size 52528
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer.components_null_FormattingButton-D-4_5_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer.components_null_FormattingButton-D-4_5_null,NEXUS_5,1.0,en].png
new file mode 100644
index 0000000000..3c7c46d2da
--- /dev/null
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer.components_null_FormattingButton-D-4_5_null,NEXUS_5,1.0,en].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d4a44b93e0791e4fdf7d9bd11e0d9a0fff44a271530d01ff0e6aa1e8789742ef
+size 6297
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer.components_null_FormattingButton-N-4_6_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer.components_null_FormattingButton-N-4_6_null,NEXUS_5,1.0,en].png
new file mode 100644
index 0000000000..36ec55a50b
--- /dev/null
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer.components_null_FormattingButton-N-4_6_null,NEXUS_5,1.0,en].png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2236ffed5666f85ce3b1093437dc8c0d72ec630f6c707394d99ff4b19d7c3f47
+size 6158
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerEdit-D-2_3_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerEdit-D-2_3_null,NEXUS_5,1.0,en].png
index 9d906ebe35..3fa65b5075 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerEdit-D-2_3_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerEdit-D-2_3_null,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:46683edccf9c7686a07d7098c4387f296556ad2678381aad35efe2787cf6ad0a
-size 14173
+oid sha256:192e86517a6add5eb3d58d9a3d4633afc455666fff4472f112c605dc441f24d1
+size 13843
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerEdit-N-2_4_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerEdit-N-2_4_null,NEXUS_5,1.0,en].png
index 4b9d77d2b1..c11445bc3f 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerEdit-N-2_4_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerEdit-N-2_4_null,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:6485de8235af05a9815a558b1af03b51e8c4b30ad0372aea0aa9fb2303525c9b
-size 13286
+oid sha256:ea17e3d7f26d1b3f233ee9db5875dcb363b22de12ed07d32693a2c0aa727fbb6
+size 13001
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerFormatting-D-1_2_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerFormatting-D-1_2_null,NEXUS_5,1.0,en].png
index f9dc3f8b9a..4569825f69 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerFormatting-D-1_2_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerFormatting-D-1_2_null,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:1f065f63fb37fa9a5441cfaeca04e867e4e8f6f744dd02a83c459fc128ee353d
-size 38384
+oid sha256:31013d59ca9755e316bfcb0f5bccf5206446223b1e4f5ce79060a442bb256292
+size 40936
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerFormatting-N-1_3_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerFormatting-N-1_3_null,NEXUS_5,1.0,en].png
index ca3a85e52c..cc6aa467f3 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerFormatting-N-1_3_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerFormatting-N-1_3_null,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:a5ded1cbc536c544b0cb188ba0a333a541157eaf1772cd0e06c7338307549adc
-size 36483
+oid sha256:569a5c4b667e259ca895b41a1248234c339d16d7776a827ded5e151472fe2c5d
+size 38601
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerReply-D-3_4_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerReply-D-3_4_null,NEXUS_5,1.0,en].png
index 0d9c311dcc..c244d01fb3 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerReply-D-3_4_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerReply-D-3_4_null,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:69e98a3521ae6545700e395bff211b06bb02095b01d9c254b3e0d2d0b8b88d26
-size 80484
+oid sha256:1b8da842d61ebcdede9a5337890279d740288c1a07b1b42505457ab65408cc76
+size 84240
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerReply-N-3_5_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerReply-N-3_5_null,NEXUS_5,1.0,en].png
index ef035d6cd5..a50bba4ac8 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerReply-N-3_5_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerReply-N-3_5_null,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:27dee9eaae6736a128107c9fd93048a677287a40d24c334223243b3c55f1cf69
-size 77686
+oid sha256:feae2409d9887cd752d2cff4be059a566c071094955b824faa72555e69269d91
+size 80648
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerSimple-D-0_1_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerSimple-D-0_1_null,NEXUS_5,1.0,en].png
index 06fbfc6c7f..de4ca7c908 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerSimple-D-0_1_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerSimple-D-0_1_null,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:267f482ceddeadea4c3b580d6783fed1048015fa05a11e385dd547e60f72e1e8
-size 44206
+oid sha256:ed1aa73f94dac6839f91729bcea59b4b3b14b885fa32a90335faf483e9f886f8
+size 45176
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerSimple-N-0_2_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerSimple-N-0_2_null,NEXUS_5,1.0,en].png
index a237bcce80..f5a53317ca 100644
--- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerSimple-N-0_2_null,NEXUS_5,1.0,en].png
+++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerSimple-N-0_2_null,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:9f5e7ab52469b406509964d71f12475df546973f1382944ce7f2e1a437e4f880
-size 41536
+oid sha256:76f54b7c7ab5c54b53a0fa9e410db942a2bce35fc0552569707ba2f3928ebd3b
+size 42306