fix(chat): Button to go to the latest message is barely visible on dark theme (#16071)

- unify bg color, use white as fg color, add drop shadow according to
Figma
- fixup the hover color intensity

Fixes #13771

ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.13
+import QtQuick 2.15
 
 QtObject {
     id: theme
@@ -100,8 +100,8 @@ QtObject {
         }
     }
 
-    property color black: getColor('black')
+    property color black: Qt.rgba(0, 0, 0)
-    property color white: getColor('white')
+    property color white: Qt.rgba(1, 1, 1)
     property color transparent: "#00000000"
 
     property color green: getColor('green')
@@ -114,7 +114,7 @@ QtObject {
     property color backdropColor: getColor('black', 0.4)
 
     function hoverColor(normalColor) {
-        return theme.name === "light" ? Qt.darker(normalColor, 1.1) : Qt.lighter(normalColor, 1.1)
+        return theme.name === "light" ? Qt.darker(normalColor, 1.2) : Qt.lighter(normalColor, 1.2)
     }
 
     property color baseColor1

ui/app/AppLayouts/Chat/panels/ChatAnchorButtonsPanel.qml

@@ -1,9 +1,11 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15
 import QtQuick.Controls 2.15
+import QtGraphicalEffects 1.15
 
 import StatusQ.Core 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
 
 import utils 1.0
 import shared 1.0
@@ -33,13 +35,20 @@ Item {
     component AnchorButton: StatusButton {
         Layout.preferredHeight: 38
         radius: 100
-        spacing: 4
+        spacing: 2
 
         icon.width: Style.current.primaryTextFontSize + 5
         icon.height: Style.current.primaryTextFontSize + 5
         verticalPadding: Style.current.halfPadding
         horizontalPadding: Style.current.smallPadding
         font.pixelSize: Style.current.primaryTextFontSize
+
+        layer.enabled: true
+        layer.effect: DropShadow {
+            samples: 16
+            cached: true
+            color: Theme.palette.alphaColor(Theme.palette.directColor1, 0.16)
+        }
     }
 
     RowLayout {
@@ -50,9 +59,10 @@ Item {
         spacing: Style.current.smallPadding
 
         AnchorButton {
-            visible: mentionsCount > 0
+            visible: root.mentionsCount > 0
-            text: d.limitNumberTo99(mentionsCount)
+            text: d.limitNumberTo99(root.mentionsCount)
             type: StatusBaseButton.Type.Primary
+            textColor: Theme.palette.white
             icon.name: "username"
 
             onClicked: root.mentionsButtonClicked()
@@ -61,9 +71,10 @@ Item {
         AnchorButton {
             id: recentMessagesButton
 
-            text: recentMessagesCount <= 0 ? "" : d.limitNumberTo99(recentMessagesCount)
+            text: root.recentMessagesCount <= 0 ? "" : d.limitNumberTo99(root.recentMessagesCount)
-            normalColor: Style.current.buttonSecondaryColor
+            normalColor: Theme.palette.baseColor1
-            type: StatusRoundButton.Type.Tertiary
+            hoverColor: Theme.palette.hoverColor(normalColor)
+            textColor: Theme.palette.white
             textPosition: StatusBaseButton.TextPosition.Left
             icon.name: "arrow-down"