fix(StatusMessageEmojiReactions): update corner shape and bg color

caybro · jrainville · commit bd8ab4aa4f53 · 2025-12-01T11:20:50.000-05:00
- align with latest Figma designs Fixes #19327
diff --git a/storybook/pages/StatusMessagePage.qml b/storybook/pages/StatusMessagePage.qml
@@ -314,3 +314,4 @@ SplitView {
 
 // category: Components
 // status: good
+// https://www.figma.com/design/SGyfSjxs5EbzimHDXTlj8B/Qt-Responsive---v?node-id=3232-99870&t=Is21W638A25DzExb-0
diff --git a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml
@@ -50,16 +50,18 @@ Flow {
             id: reactionDelegate
 
             size: StatusBaseButton.Size.Small
-            implicitHeight: 32
-
             verticalPadding: Theme.halfPadding / 2
             leftPadding: Theme.halfPadding
             rightPadding: Theme.halfPadding / 2
             spacing: Theme.halfPadding / 2
 
             background: Rectangle {
                 implicitWidth: 36
-                radius: Theme.radius
+                implicitHeight: 32
+                topLeftRadius: 0
+                topRightRadius: 12
+                bottomLeftRadius: 12
+                bottomRightRadius: 12
                 color: {
                     if (reactionDelegate.hovered) {
                         return Theme.palette.statusMessage.emojiReactionBackgroundHovered
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
@@ -169,9 +169,9 @@ ThemePalette {
     }
 
     statusMessage: QtObject {
-        property color emojiReactionBackground: "#2d2823"
-        property color emojiReactionBackgroundHovered: "#3d352e"
-        property color emojiReactionBorderHovered: baseColor3
+        property color emojiReactionBackground: baseColor4
+        property color emojiReactionBackgroundHovered: primaryColor3
+        property color emojiReactionBorderHovered: primaryColor2
     }
 
     customisationColors: QtObject {
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
@@ -169,9 +169,9 @@ ThemePalette {
     }
 
     statusMessage: QtObject {
-        property color emojiReactionBackground: "#e2e6e9"
-        property color emojiReactionBackgroundHovered: "#E7EAEE"
-        property color emojiReactionBorderHovered: "#A1ABBD"
+        property color emojiReactionBackground: baseColor4
+        property color emojiReactionBackgroundHovered: primaryColor2
+        property color emojiReactionBorderHovered: primaryColor3
     }
 
     customisationColors: QtObject {

Original file line number	Diff line number	Diff line change
`@@ -314,3 +314,4 @@ SplitView {`
`314`	`314`
`315`	`315`	`// category: Components`
`316`	`316`	`// status: good`
	`317`	`+// https://www.figma.com/design/SGyfSjxs5EbzimHDXTlj8B/Qt-Responsive---v?node-id=3232-99870&t=Is21W638A25DzExb-0`
Original file line number	Diff line number	Diff line change
`@@ -169,9 +169,9 @@ ThemePalette {`
`169`	`169`	`}`
`170`	`170`
`171`	`171`	`statusMessage: QtObject {`
`172`		`- property color emojiReactionBackground: "#2d2823"`
`173`		`- property color emojiReactionBackgroundHovered: "#3d352e"`
`174`		`- property color emojiReactionBorderHovered: baseColor3`
	`172`	`+ property color emojiReactionBackground: baseColor4`
	`173`	`+ property color emojiReactionBackgroundHovered: primaryColor3`
	`174`	`+ property color emojiReactionBorderHovered: primaryColor2`
`175`	`175`	`}`
`176`	`176`
`177`	`177`	`customisationColors: QtObject {`