From 790d34d8751c5483a68dacdeb87b5f7fbd594c5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= <lukast@status.im>
Date: Fri, 9 Aug 2024 13:28:51 +0200
Subject: [PATCH] fix(chat): Button to go to the latest message is barely
 visible on dark theme

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

Fixes #13771
---
 .../src/StatusQ/Core/Theme/ThemePalette.qml   |  8 +++----
 .../Chat/panels/ChatAnchorButtonsPanel.qml    | 23 ++++++++++++++-----
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
index dbabbc493a..18b95d729c 100644
--- a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
+++ b/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 white: getColor('white')
+    property color black: Qt.rgba(0, 0, 0)
+    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
diff --git a/ui/app/AppLayouts/Chat/panels/ChatAnchorButtonsPanel.qml b/ui/app/AppLayouts/Chat/panels/ChatAnchorButtonsPanel.qml
index 9ded9e5bd2..6c370a18a4 100644
--- a/ui/app/AppLayouts/Chat/panels/ChatAnchorButtonsPanel.qml
+++ b/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
-            text: d.limitNumberTo99(mentionsCount)
+            visible: root.mentionsCount > 0
+            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)
-            normalColor: Style.current.buttonSecondaryColor
-            type: StatusRoundButton.Type.Tertiary
+            text: root.recentMessagesCount <= 0 ? "" : d.limitNumberTo99(root.recentMessagesCount)
+            normalColor: Theme.palette.baseColor1
+            hoverColor: Theme.palette.hoverColor(normalColor)
+            textColor: Theme.palette.white
             textPosition: StatusBaseButton.TextPosition.Left
             icon.name: "arrow-down"