feat: add emoji button and style them to have the hover and right color

ui/app/AppLayouts/Chat/ChatColumn/ChatButtons.qml

@@ -1,10 +1,13 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
 import "../../../../imports"
 import "../components"
 
-Rectangle {
+Item {
-    border.width: 0
+    property int iconPadding: 6
+
+    id: chatButtonsContainer
 
     Button {
         id: chatSendBtn
@@ -32,34 +35,100 @@ Rectangle {
         }
     }
 
+    Rectangle {
+        property bool hovered: false
+
+        id: emojiIconContainer
+        visible: txtData.length == 0
+        width: emojiIcon.width + chatButtonsContainer.iconPadding * 2
+        height: emojiIcon.height + chatButtonsContainer.iconPadding * 2
+        anchors.right: stickerIconContainer.left
+        anchors.rightMargin: Style.current.padding - chatButtonsContainer.iconPadding * 2
+        anchors.verticalCenter: parent.verticalCenter
+        radius: Style.current.radius
+        color: hovered ? Style.current.lightBlue : Style.current.transparent
+
         Image {
-        id: stickersIcon
+            id: emojiIcon
             visible: txtData.length == 0
             width: 20
             height: 20
-        anchors.rightMargin: Style.current.padding
-        anchors.right: parent.right
             fillMode: Image.PreserveAspectFit
-        source: "../../../img/stickers_icon" + (stickersPopup.opened ? "_open.svg" : ".svg")
+            source: "../../../img/emojiBtn.svg"
             anchors.verticalCenter: parent.verticalCenter
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+        ColorOverlay {
+            anchors.fill: emojiIcon
+            source: emojiIcon
+            color: emojiIconContainer.hovered || emojiPopup.opened ? Style.current.blue : Style.current.transparent
+        }
 
         MouseArea {
             cursorShape: Qt.PointingHandCursor
             anchors.fill: parent
+            hoverEnabled: true
+            onEntered: {
+              emojiIconContainer.hovered = true
+            }
+            onExited: {
+              emojiIconContainer.hovered = false
+            }
             onClicked: {
-                console.log('CLICK')
                 if (emojiPopup.opened) {
-                console.log('CLOSE')
                     emojiPopup.close()
                 } else {
-                console.log('OPEN')
                     emojiPopup.open()
                 }
-                // if (stickersPopup.opened) {
+            }
-                //     stickersPopup.close()
+        }
-                // } else {
+    }
-                //     stickersPopup.open()
+
-                // }
+    Rectangle {
+        property bool hovered: false
+
+        id: stickerIconContainer
+        visible: txtData.length == 0
+        width: emojiIcon.width + chatButtonsContainer.iconPadding * 2
+        height: emojiIcon.height + chatButtonsContainer.iconPadding * 2
+        anchors.right: parent.right
+        anchors.rightMargin: Style.current.padding - chatButtonsContainer.iconPadding
+        anchors.verticalCenter: parent.verticalCenter
+        radius: Style.current.radius
+        color: hovered ? Style.current.lightBlue : Style.current.transparent
+
+        Image {
+            id: stickersIcon
+            width: 20
+            height: 20
+            fillMode: Image.PreserveAspectFit
+            source: "../../../img/stickers_icon.svg"
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.horizontalCenter: parent.horizontalCenter
+
+        }
+        ColorOverlay {
+            anchors.fill: stickersIcon
+            source: stickersIcon
+            color: stickerIconContainer.hovered || stickersPopup.opened ? Style.current.blue : Style.current.transparent
+        }
+
+        MouseArea {
+            cursorShape: Qt.PointingHandCursor
+            anchors.fill: parent
+            hoverEnabled: true
+            onEntered: {
+              stickerIconContainer.hovered = true
+            }
+            onExited: {
+              stickerIconContainer.hovered = false
+            }
+            onClicked: {
+                 if (stickersPopup.opened) {
+                     stickersPopup.close()
+                 } else {
+                     stickersPopup.open()
+                 }
             }
         }
     }

ui/app/AppLayouts/Chat/components/EmojiPopup.qml

@@ -15,7 +15,7 @@ Popup {
     closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
     background: Rectangle {
         radius: 8
-        border.color: Theme.grey
+        border.color: Style.current.grey
         layer.enabled: true
         layer.effect: DropShadow{
             verticalOffset: 3

ui/app/img/emojiBtn.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18.5C14.6944 18.5 18.5 14.6944 18.5 10C18.5 5.30558 14.6944 1.5 10 1.5C5.30558 1.5 1.5 5.30558 1.5 10C1.5 14.6944 5.30558 18.5 10 18.5ZM10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z" fill="#939BA1"/>
+<path d="M7.56858 13.1746C7.22903 12.9373 6.75712 12.9308 6.46422 13.2237C6.17133 13.5166 6.16876 13.996 6.49708 14.2485C7.46695 14.9946 8.68155 15.4381 9.99976 15.4381C11.318 15.4381 12.5326 14.9946 13.5024 14.2485C13.8308 13.996 13.8282 13.5166 13.5353 13.2237C13.2424 12.9308 12.7705 12.9373 12.4309 13.1746C11.742 13.6558 10.9039 13.9381 9.99976 13.9381C9.09565 13.9381 8.25747 13.6558 7.56858 13.1746Z" fill="#939BA1"/>
+<path d="M15 8.5C15 9.32843 14.3284 10 13.5 10C12.6716 10 12 9.32843 12 8.5C12 7.67157 12.6716 7 13.5 7C14.3284 7 15 7.67157 15 8.5Z" fill="#939BA1"/>
+<path d="M8 8.5C8 9.32843 7.32843 10 6.5 10C5.67157 10 5 9.32843 5 8.5C5 7.67157 5.67157 7 6.5 7C7.32843 7 8 7.67157 8 8.5Z" fill="#939BA1"/>
+</svg>

ui/app/img/stickers_icon_open.svg

@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.56858 13.4863C7.22903 13.2491 6.75712 13.2426 6.46422 13.5354C6.17133 13.8283 6.16876 14.3077 6.49708 14.5603C7.46695 15.3063 8.68155 15.7499 9.99976 15.7499C11.318 15.7499 12.5326 15.3063 13.5024 14.5603C13.8308 14.3077 13.8282 13.8283 13.5353 13.5354C13.2424 13.2426 12.7705 13.2491 12.4309 13.4863C11.742 13.9676 10.9039 14.2499 9.99976 14.2499C9.09565 14.2499 8.25747 13.9676 7.56858 13.4863Z" fill="#4360DF"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.8645 11.6499C19.9401 11.1946 19.8959 10.7435 19.7602 10.3174C19.5838 9.76409 19.253 9.25286 18.8292 8.82907L11.1708 1.17069C10.747 0.746897 10.2358 0.416048 9.68247 0.239716C9.62921 0.222742 9.57555 0.2072 9.52155 0.193144C9.14354 0.0947561 8.7484 0.0692148 8.35001 0.135358C8.28899 0.145488 8.22816 0.156171 8.16753 0.1674C3.51984 1.02813 0 5.10295 0 9.99988C0 15.5227 4.47715 19.9999 10 19.9999C14.8969 19.9999 18.9717 16.48 19.8325 11.8324C19.8437 11.7717 19.8544 11.7109 19.8645 11.6499ZM1.5 9.99988C1.5 6.08625 4.14622 2.78816 7.74701 1.8013C7.87574 1.76602 8 1.8664 8 1.99988C8 7.52272 12.4772 11.9999 18 11.9999C18.1335 11.9999 18.2339 12.1241 18.1986 12.2529C17.2117 15.8537 13.9136 18.4999 10 18.4999C5.30558 18.4999 1.5 14.6943 1.5 9.99988ZM18 10.4999C18.1011 10.4999 18.1641 10.3935 18.1094 10.3085C18.0185 10.1673 17.9054 10.0266 17.7685 9.88973L10.1101 2.23135C9.97328 2.09448 9.83259 1.98135 9.69142 1.89052C9.60642 1.83582 9.5 1.89879 9.5 1.99988C9.5 6.6943 13.3056 10.4999 18 10.4999Z" fill="#4360DF"/>
-</svg>