refactor: remove StatusIconButton from ui/shared/status

fixes #3832

ui/StatusQ

@@ -1 +1 @@
-Subproject commit e945577e3c97d092bae29d8eb8a475545f3a39e3
+Subproject commit 64b2a51c09aca1d66a88b38c449b0579c4222010

ui/app/AppLayouts/Browser/controls/DownloadElement.qml

@@ -1,7 +1,11 @@
 import QtQuick 2.1
 import QtQuick.Controls 2.13
 import QtGraphicalEffects 1.13
+
 import utils 1.0
+
+import StatusQ.Controls 0.1
+
 import "../../../../shared"
 import "../../../../shared/panels"
 import "../../../../shared/status/core"
@@ -101,15 +105,16 @@ Rectangle {
         anchors.bottomMargin: 2
     }
 
-    StatusIconButton {
+    StatusFlatRoundButton {
+        width: 32
+        height: 32
         id: optionsBtn
         anchors.verticalCenter: parent.verticalCenter
         anchors.right: parent.right
         anchors.rightMargin: Style.current.smallPadding
-        icon.name: "dots-icon"
+        icon.name: "more"
-        onClicked: {
+        type: StatusFlatRoundButton.Type.Tertiary
-            optionsButtonClicked(optionsBtn.x)
+        onClicked: optionsButtonClicked(optionsBtn.x)
-        }
     }
 }
 

ui/app/AppLayouts/Browser/controls/styles/BrowserTabStyle.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.13
 import QtQuick.Controls.Styles 1.0
+
 import "../../../../../shared"
 import "../../../../../shared/panels"
 import "../../../../../shared/status"
@@ -7,6 +8,8 @@ import "../"
 
 import utils 1.0
 
+import StatusQ.Controls 0.1
+
 TabViewStyle {
     id: tabViewStyle
 
@@ -63,19 +66,19 @@ TabViewStyle {
             }
 
 
-            StatusIconButton {
+            StatusFlatRoundButton {
                 id: closeTabBtn
-                //% "Start Page"
+                width: 16
-                visible: control.count > 1 || styleData.title !== qsTrId("start-page")
+                height: 16
-                enabled: visible
-                icon.name: "browser/close"
-                iconColor: Style.current.textColor
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.right: parent.right
                 anchors.rightMargin: Style.current.halfPadding
+                icon.name: "close"
+                type: StatusFlatRoundButton.Type.Quaternary
+                //% "Start Page"
+                visible: control.count > 1 || styleData.title !== qsTrId("start-page")
+                enabled: visible
                 onClicked: control.closeButtonClicked(styleData.index)
-                width: 16
-                height: 16
             }
         }
 
@@ -86,13 +89,15 @@ TabViewStyle {
             anchors.right: parent.right
 
             sourceComponent: Component {
-                StatusIconButton {
+                StatusFlatRoundButton {
-                    icon.name: "browser/close"
+                    id: addButton
-                    iconColor: Style.current.textColor
-                    iconRotation: 45
-                    onClicked: control.openNewTabClicked()
                     width: 16
                     height: 16
+                    icon.name: "close"
+                    icon.rotation: 45
+                    color: "transparent"
+                    type: StatusFlatRoundButton.Type.Quaternary
+                    onClicked: control.openNewTabClicked()
                 }
             }
         }

ui/app/AppLayouts/Browser/panels/BrowserHeader.qml

@@ -62,38 +62,42 @@ Rectangle {
             }
         }
 
-        StatusIconButton {
+        StatusQControls.StatusFlatRoundButton {
             id: backButton
-            icon.name: "leave_chat"
+            width: 32
-            disabledColor: Style.current.lightGrey
+            height: 32
+            icon.height: 20
+            icon.width: 20
+            icon.name: "left"
+            icon.disabledColor: Style.current.lightGrey
+            type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
+            enabled: currentWebView && currentWebView.canGoBack
+            Layout.leftMargin: browserHeader.innerMargin
             onClicked: currentWebView.goBack()
             onPressAndHold: {
                 if (currentWebView && (currentWebView.canGoBack || currentWebView.canGoForward)){
                     historyMenu.popup(backButton.x, backButton.y + backButton.height)
                 }
             }
-            enabled: currentWebView && currentWebView.canGoBack
-            width: 24
-            height: 24
-            Layout.leftMargin: browserHeader.innerMargin
-            padding: 6
         }
 
-        StatusIconButton {
+        StatusQControls.StatusFlatRoundButton {
             id: forwardButton
-            icon.name: "leave_chat"
+            width: 32
-            iconRotation: 180
+            height: 32
-            disabledColor: Style.current.lightGrey
+            icon.width: 20
+            icon.height: 20
+            icon.name: "right"
+            icon.disabledColor: Style.current.lightGrey
+            type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
+            enabled: currentWebView && currentWebView.canGoForward
+            Layout.leftMargin: -browserHeader.innerMargin/2
             onClicked: currentWebView.goForward()
             onPressAndHold: {
                 if (currentWebView && (currentWebView.canGoBack || currentWebView.canGoForward)){
                     historyMenu.popup(forwardButton.x, forwardButton.y + forwardButton.height)
                 }
             }
-            enabled: currentWebView && currentWebView.canGoForward
-            width: 24
-            height: 24
-            Layout.leftMargin: -browserHeader.innerMargin/2
         }
 
         StyledTextField {
@@ -160,27 +164,31 @@ Rectangle {
                 }
             }
 
-            StatusIconButton {
+            StatusQControls.StatusFlatRoundButton {
                 id: addFavoriteBtn
-                visible: !!currentWebView && !!currentWebView.url
+                width: 24
-                icon.name: !!browserHeader.currentFavorite ? "browser/favoriteActive" : "browser/favorite"
+                height: 24
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.right: reloadBtn.left
                 anchors.rightMargin: Style.current.halfPadding
+                visible: !!currentWebView && !!currentWebView.url
+                icon.source: !!browserHeader.currentFavorite ? Style.svg("browser/favoriteActive") : Style.svg("browser/favorite")
+                color: "transparent"
+                type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
                 onClicked: addNewFavoritelClicked(addFavoriteBtn.x)
-                width: 24
-                height: 24
             }
 
-            StatusIconButton {
+            StatusQControls.StatusFlatRoundButton {
                 id: reloadBtn
-                icon.name: currentWebView && currentWebView.loading ? "close" : "browser/refresh"
+                width: 24
+                height: 24
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.right: parent.right
                 anchors.rightMargin: Style.current.halfPadding
+                icon.name: currentWebView && currentWebView.loading ? "close-circle" : "refresh"
+                color: "transparent"
+                type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
                 onClicked: currentWebView && currentWebView.loading ? currentWebView.stop() : currentWebView.reload()
-                width: 24
-                height: 24
             }
         }
 
@@ -197,9 +205,14 @@ Rectangle {
 
         Component {
             id: notConnectedBtnCompoent
-            StatusIconButton {
+            StatusQControls.StatusFlatRoundButton {
                 id: accountBtn
-                icon.name: "walletIcon"
+                width: 24
+                height: 24
+                icon.width: 24
+                icon.height: 24
+                icon.name: "filled-account"
+                type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
                 onClicked: {
                     if (browserWalletMenu.opened) {
                         browserWalletMenu.close()
@@ -207,14 +220,9 @@ Rectangle {
                         browserWalletMenu.open()
                     }
                 }
-                width: 24
-                height: 24
-                padding: 6
             }
         }
 
-
-
         Component {
             id: connectedBtnComponent
             StatusQControls.StatusFlatButton {
@@ -241,9 +249,15 @@ Rectangle {
             y: parent.height
         }
 
-        StatusIconButton {
+        StatusQControls.StatusFlatRoundButton {
             id: settingsMenuButton
-            icon.name: "dots-icon"
+            implicitHeight: 32
+            implicitWidth: 32
+            icon.width: 24
+            icon.height: 24
+            icon.name: "more"
+            type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
+            Layout.rightMargin: browserHeader.innerMargin
             onClicked: {
                 if (settingsMenu.opened) {
                     settingsMenu.close()
@@ -251,10 +265,6 @@ Rectangle {
                     settingsMenu.open()
                 }
             }
-            width: 24
-            height: 24
-            Layout.rightMargin: browserHeader.innerMargin
-            padding: 6
         }
     }
 

ui/app/AppLayouts/Browser/panels/DownloadBar.qml

@@ -1,9 +1,13 @@
 import QtQuick 2.1
 import QtGraphicalEffects 1.13
+
 import utils 1.0
 
 import StatusQ.Controls 0.1
 
+import "../../../../shared"
+import "../../../../shared/status"
+
 import "../controls"
 
 Rectangle {
@@ -106,15 +110,13 @@ Rectangle {
 
     StatusFlatRoundButton {
         id: closeBtn
+        width: 32
+        height: 32
         anchors.verticalCenter: parent.verticalCenter
         anchors.right: parent.right
-        anchors.rightMargin: Style.current.padding
+        anchors.rightMargin: Style.current.smallPadding
-
-        type: StatusFlatRoundButton.Type.Secondary
-
         icon.name: "close"
-        onClicked: {
+        type: StatusFlatRoundButton.Type.Quaternary
-            downloadBar.isVisible = false
+        onClicked:  downloadBar.isVisible = false
-        }
     }
 }

ui/app/AppLayouts/Browser/panels/FindBar.qml

@@ -52,13 +52,15 @@ import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtGraphicalEffects 1.13
 import QtQuick.Layouts 1.0
+
 import "../../../../shared"
 import "../../../../shared/panels"
 import "../../../../shared/controls"
-import "../../../../shared/status"
 
 import utils 1.0
 
+import StatusQ.Controls 0.1
+
 Rectangle {
     id: root
 
@@ -149,28 +151,33 @@ Rectangle {
             anchors.bottomMargin: 5
         }
 
-        StatusIconButton {
+        StatusFlatRoundButton {
-            icon.name: "caret"
+            id: prevBtn
+            implicitWidth: 32
+            implicitHeight: 32
+            icon.name: "previous"
             enabled: numberOfMatches > 0
-            iconRotation: 90
+            type: StatusFlatRoundButton.Type.Tertiary
             onClicked: root.findPrevious()
-            icon.width: 14
         }
 
-        StatusIconButton {
+        StatusFlatRoundButton {
-            icon.name: "caret"
+            id: nextBtn
+            implicitWidth: 32
+            implicitHeight: 32
+            icon.name: "next"
             enabled: numberOfMatches > 0
-            iconRotation: -90
+            type: StatusFlatRoundButton.Type.Tertiary
             onClicked: root.findNext()
-            icon.width: 14
         }
 
-        StatusIconButton {
+        StatusFlatRoundButton {
-            icon.name: "close"
+            id: closeBtn
+            implicitWidth: 32
+            implicitHeight: 32
+            icon.name: "close-circle"
+            type: StatusFlatRoundButton.Type.Tertiary
             onClicked:  root.visible = false
-            icon.width: 20
         }
-
-
     }
 }

ui/app/AppLayouts/Browser/popups/BrowserWalletMenu.qml

@@ -2,10 +2,13 @@ import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import QtGraphicalEffects 1.13
+
 import utils 1.0
+
+import StatusQ.Controls 0.1
+
 import "../../../../shared"
 import "../../../../shared/panels"
-import "../../../../shared/status"
 import "../../../../shared/controls"
 import "../../Wallet/views"
 import "../stores"
@@ -147,15 +150,14 @@ Popup {
             textToCopy: accountSelector.selectedAccount.address
         }
 
-        StatusIconButton {
+        StatusFlatRoundButton {
             id: sendBtn
-            icon.name: "send"
+            width: 40
-            width: 20
+            height: 40
-            height: 20
             anchors.right: parent.right
             anchors.top: parent.top
-            anchors.topMargin: Style.current.padding
+            anchors.topMargin: Style.current.halfPadding
-            iconColor: Style.current.primary
+            icon.name: "send"
             onClicked: {
                 sendModal.selectFromAccount.selectedAccount = accountSelector.selectedAccount
                 sendModal.open()

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

@@ -3,6 +3,9 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 
 import utils 1.0
+
+import StatusQ.Controls 0.1
+
 import "../../../../shared"
 import "../../../../shared/popups"
 import "../../../../shared/panels"
@@ -18,30 +21,26 @@ Row {
     height: acceptBtn.height
     spacing: Style.current.halfPadding
 
-    StatusIconButton {
+    StatusFlatRoundButton  {
         id: acceptBtn
-        icon.name: "check-circle"
-        onClicked: root.acceptClicked()
         width: 32
         height: 32
-        padding: 6
-        iconColor: Style.current.success
-        hoveredIconColor: Style.current.success
-        highlightedBackgroundColor: Utils.setColorAlpha(Style.current.success, 0.1)
         anchors.verticalCenter: parent.verticalCenter
+        icon.name: "checkmark-circle"
+        icon.color: Style.current.success
+        backgroundHoverColor: Utils.setColorAlpha(Style.current.success, 0.1)
+        onClicked: root.acceptClicked()
     }
 
-    StatusIconButton {
+    StatusFlatRoundButton {
         id: declineBtn
-        icon.name: "close"
-        onClicked: root.declineClicked()
         width: 32
         height: 32
-        padding: 6
-        iconColor: Style.current.danger
-        hoveredIconColor: Style.current.danger
-        highlightedBackgroundColor: Utils.setColorAlpha(Style.current.danger, 0.1)
         anchors.verticalCenter: parent.verticalCenter
+        icon.name: "close-circle"
+        icon.color: Style.current.danger
+        backgroundHoverColor: Utils.setColorAlpha(Style.current.danger, 0.1)
+        onClicked: root.declineClicked()
     }
 
     StatusContextMenuButton {

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

@@ -1,9 +1,8 @@
 import QtQuick 2.13
 import QtGraphicalEffects 1.13
 
-import "../../../../shared/status"
+import StatusQ.Controls 0.1
 
-import StatusQ.Controls 0.1 as StatusQ
 import utils 1.0
 
 Rectangle {
@@ -64,11 +63,14 @@ Rectangle {
         anchors.verticalCenter: buttonsContainer.verticalCenter
         height: parent.height - 2 * buttonsContainer.containerMargin
 
-        StatusIconButton {
+        StatusFlatRoundButton {
             id: emojiBtn
-            icon.name: "emoji"
             width: 32
             height: 32
+            icon.name: "reaction-b"
+            type: StatusFlatRoundButton.Type.Tertiary
+            //% "Add reaction"
+            tooltip.text: qsTrId("add-reaction")
             onClicked: {
                 setMessageActive(messageId, true)
                 // Set parent, X & Y positions for the messageContextMenu
@@ -77,22 +79,17 @@ Rectangle {
                 buttonsContainer.messageContextMenu.setYPosition = function() { return (-buttonsContainer.messageContextMenu.height - 4)}
                 clickMessage(false, false, false, null, true)
             }
-            onHoveredChanged: {
+            onHoveredChanged: buttonsContainer.hoverChanged(this.hovered)
-                buttonsContainer.hoverChanged(this.hovered)
-            }
-
-            StatusQ.StatusToolTip {
-              visible: emojiBtn.hovered
-              //% "Add reaction"
-              text: qsTrId("add-reaction")
-            }
         }
 
-        StatusIconButton {
+        StatusFlatRoundButton {
             id: replyBtn
-            icon.name: "reply"
             width: 32
             height: 32
+            icon.name: "reply"
+            type: StatusFlatRoundButton.Type.Tertiary
+            //% "Reply"
+            tooltip.text: qsTrId("message-reply")
             onClicked: {
                 SelectedMessage.set(messageId, fromAuthor);
                 showReplyArea()
@@ -100,45 +97,34 @@ Rectangle {
                     messageContextMenu.closeParentPopup()
                 }
             }
-            onHoveredChanged: {
+            onHoveredChanged: buttonsContainer.hoverChanged(this.hovered)
-                buttonsContainer.hoverChanged(this.hovered)
-            }
-
-            StatusQ.StatusToolTip {
-              visible: replyBtn.hovered
-              //% "Reply"
-              text: qsTrId("message-reply")
-            }
         }
 
         Loader {
             id: editBtn
-            sourceComponent: StatusIconButton {
+            active: isText && !isEdit && isCurrentUser && showEdit
+            sourceComponent: StatusFlatRoundButton {
                 id: btn
-                icon.name: "edit-message"
                 width: 32
                 height: 32
-                onClicked: {
+                icon.source: Style.svg("edit-message")
-                    isEdit = true
+                type: StatusFlatRoundButton.Type.Tertiary
-                }
+                //% "Edit"
-                onHoveredChanged: {
+                tooltip.text: qsTrId("edit")
-                    buttonsContainer.hoverChanged(btn.hovered)
+                onClicked: isEdit = true
-                }
+                onHoveredChanged: buttonsContainer.hoverChanged(btn.hovered)
-
-                StatusQ.StatusToolTip {
-                    visible: btn.hovered
-                    //% "Edit"
-                    text: qsTrId("edit")
-                }
             }
         }
 
-        StatusIconButton {
+        StatusFlatRoundButton {
             id: otherBtn
-            visible: showMoreButton
-            icon.name: "dots-icon"
             width: 32
             height: 32
+            visible: showMoreButton
+            icon.name: "more"
+            type: StatusFlatRoundButton.Type.Tertiary
+            //% "More"
+            tooltip.text: qsTrId("more")
             onClicked: {
                 if (typeof isMessageActive !== "undefined") {
                     setMessageActive(messageId, true)
@@ -149,14 +135,7 @@ Rectangle {
                 buttonsContainer.messageContextMenu.setYPosition = function() { return (-buttonsContainer.messageContextMenu.height - 4)}
                 clickMessage(false, isSticker, false, null, false, true);
             }
-            onHoveredChanged: {
+            onHoveredChanged: buttonsContainer.hoverChanged(this.hovered)
-                buttonsContainer.hoverChanged(this.hovered)
-            }
-            StatusQ.StatusToolTip {
-                visible: otherBtn.hovered
-                //% "More"
-                text: qsTrId("more")
-            }
         }
     }
 }

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

@@ -51,19 +51,21 @@ Rectangle {
             height: 50
         }
 
-        StatusIconButton {
+
-            icon.name: "close"
+        StatusQControls.StatusFlatRoundButton {
             id: closeImg
+            implicitWidth: 32
+            implicitHeight: 32
             anchors.top: parent.top
             anchors.topMargin: 10
             anchors.right: parent.right
             anchors.rightMargin: 10
             icon.height: 20
             icon.width: 20
-            iconColor: Style.current.midGrey
+            icon.name: "close-circle"
-            onClicked: {
+            type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
-                appSettings.hideChannelSuggestions = true
+            onClicked: appSettings.hideChannelSuggestions = true
-            }
+
         }
 
         StatusBaseText {

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

@@ -10,6 +10,8 @@ import "../controls"
 //TODO remove this or make view
 import "../views"
 
+import StatusQ.Controls 0.1
+
 MouseArea {
     id: root
 
@@ -131,19 +133,20 @@ MouseArea {
             }
         }
 
-        StatusIconButton {
+        StatusFlatRoundButton  {
             id: emojiBtn
-            visible: root.hovered
+            width: 32
-            highlighted: visible
+            height: 32
             anchors.top: rootRect.top
             anchors.topMargin: -height / 4
             anchors.right: rootRect.right
             anchors.rightMargin: Style.current.halfPadding
-            highlightedIconColor: Style.current.secondaryText
+            visible: root.hovered
-            highlightedBackgroundColor: Style.current.background
+            icon.name: "reaction-b"
-            icon.name: "emoji"
             icon.width: 20
             icon.height: 20
+            type: StatusFlatRoundButton.Type.Tertiary
+            backgroundHoverColor: Style.current.background
             onClicked: {
                 // Set parent, X & Y positions for the messageContextMenu
                 messageContextMenu.parent = emojiBtn

ui/app/AppLayouts/Chat/panels/communities/CommunityWelcomeBannerPanel.qml

@@ -10,7 +10,6 @@ import "../../../../../shared/panels"
 import "../../../../../shared/status"
 
 import utils 1.0
-import "."
 
 Rectangle {
     id: root
@@ -42,16 +41,18 @@ Rectangle {
         height: 50
     }
 
-    StatusIconButton {
+    StatusQControls.StatusFlatRoundButton {
-        icon.name: "close"
         id: closeImg
+        implicitWidth: 32
+        implicitHeight: 32
         anchors.top: parent.top
         anchors.topMargin: 10
         anchors.right: parent.right
         anchors.rightMargin: 10
         icon.height: 20
         icon.width: 20
-        iconColor: Style.current.darkGrey
+        icon.name: "close-circle"
+        type: StatusQControls.StatusFlatRoundButton.Type.Tertiary
         onClicked: {
             let hiddenBannerIds = appSettings.hiddenCommunityWelcomeBanners
             hiddenBannerIds.push(chatsModel.communities.activeCommunity.id)

ui/app/AppLayouts/Chat/views/ActivityCenterMessageComponentView.qml

@@ -6,7 +6,6 @@ import utils 1.0
 import StatusQ.Controls 0.1 as StatusQ
 
 import "../../../../shared"
-import "../../../../shared/status"
 import "../../../../shared/popups"
 
 import "../controls"
@@ -41,25 +40,20 @@ Item {
 
     Component {
         id: markReadBtnComponent
-        StatusIconButton {
+        StatusQ.StatusFlatRoundButton {
             id: markReadBtn
-            icon.name: "double-check"
-            iconColor: Style.current.primary
-            icon.width: 24
-            icon.height: 24
             width: 32
             height: 32
-
+            icon.width: 24
+            icon.height: 24
+            icon.source: Style.svg("double-check")
+            color: "transparent"
+            //% "Mark as Read"
+            tooltip.text: qsTrId("mark-as-read")
+            tooltip.orientation: StatusQ.StatusToolTip.Orientation.Left
+            tooltip.x: -tooltip.width - Style.current.padding
+            tooltip.y: markReadBtn.height / 2 - height / 2 + 4
             onClicked: chatsModel.activityNotificationList.markActivityCenterNotificationRead(model.id, model.message.communityId, model.message.chatId, model.notificationType)
-
-            StatusQ.StatusToolTip {
-                visible: markReadBtn.hovered
-                //% "Mark as Read"
-                text: qsTrId("mark-as-read")
-                orientation: StatusQ.StatusToolTip.Orientation.Left// "left"
-                x: - width - Style.current.padding
-                y: markReadBtn.height / 2 - height / 2 + 4
-            }
         }
     }
 

ui/app/AppLayouts/Chat/views/LinksMessageView.qml

@@ -289,14 +289,14 @@ Column {
             border.color: Style.current.border
             color:Style.current.background
 
-            StatusIconButton {
+            StatusFlatRoundButton {
-                icon.name: "close"
-                icon.width: 20
-                icon.height: 20
                 anchors.top: parent.top
                 anchors.topMargin: Style.current.smallPadding
                 anchors.right: parent.right
                 anchors.rightMargin: Style.current.smallPadding
+                icon.width: 20
+                icon.height: 20
+                icon.name: "close-circle"
                 onClicked: {
                     enableLinkRoot.height = 0
                     enableLinkRoot.visible = false

ui/app/AppLayouts/Profile/views/MyProfileView.qml

@@ -6,13 +6,13 @@ import utils 1.0
 import "../../../../shared"
 import "../../../../shared/panels"
 import "../../../../shared/popups"
-import "../../../../shared/status"
 
 import "../popups"
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
 
 Item {
     id: root
@@ -111,18 +111,15 @@ Item {
             font.pixelSize: 15
         }
 
-        StatusIconButton {
+        StatusFlatRoundButton {
             id: qrCodeButton
-            anchors.right: parent.right
-            height: 32
             width: 32
-            radius: 8
+            height: 32
+            anchors.right: parent.right
             anchors.verticalCenter: profileImgContainer.verticalCenter
-            icon.name: "qr-code-icon"
+            icon.name: "qr"
-            iconColor: Style.current.textColor
+            type: StatusFlatRoundButton.Type.Quaternary
-            onClicked: {
+            onClicked: qrCodePopup.open()
-                qrCodePopup.open()
-            }
         }
 
         Separator {

ui/shared/controls/ContactsListAndSearch.qml

@@ -3,6 +3,9 @@ import QtQuick.Controls 2.13
 import QtGraphicalEffects 1.13
 
 import utils 1.0
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
 import "../"
 import "../views"
 import "../panels"
@@ -116,18 +119,19 @@ Item {
             }
         }
 
-        StatusIconButton {
+        StatusFlatRoundButton {
             id: clearBtn
-            icon.name: "close-icon"
+            width: 20
-            type: "secondary"
+            height: 20
-            visible: chatKey.text !== ""
-            icon.width: 14
-            icon.height: 14
-            width: 14
-            height: 14
             anchors.right: parent.right
             anchors.rightMargin: Style.current.padding
             anchors.verticalCenter: parent.verticalCenter
+            icon.name: "clear"
+            visible: chatKey.text !== ""
+            icon.width: 20
+            icon.height: 20
+            type: StatusFlatRoundButton.Type.Tertiary
+            color: "transparent"
             onClicked: {
                 chatKey.text = "";
                 chatKey.forceActiveFocus(Qt.MouseFocusReason);

ui/shared/status/StatusChatInput.qml

@@ -14,6 +14,7 @@ import "../../app/AppLayouts/Chat/panels"
 import "./emojiList.js" as EmojiJSON
 
 import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1 as StatusQ
 
 Rectangle {
     id: control
@@ -698,13 +699,16 @@ Rectangle {
         }
     }
 
-    StatusIconButton {
+    StatusQ.StatusFlatRoundButton {
         id: chatCommandsBtn
-        icon.name: "chat-commands"
+        width: 32
+        height: 32
         anchors.left: parent.left
         anchors.leftMargin: 4
         anchors.bottom: parent.bottom
         anchors.bottomMargin: 16
+        icon.name: "chat-commands"
+        type: StatusQ.StatusFlatRoundButton.Type.Tertiary
         visible: !isEdit && control.chatType === Constants.chatTypeOneToOne && !control.isStatusUpdateInput
         enabled: !control.isContactBlocked
         onClicked: {
@@ -714,18 +718,18 @@ Rectangle {
         }
     }
 
-    StatusIconButton {
+    StatusQ.StatusFlatRoundButton {
         id: imageBtn
-        icon.name: "images_icon"
+        width: 32
-        icon.height: 18
+        height: 32
-        icon.width: 20
         anchors.left: chatCommandsBtn.visible ? chatCommandsBtn.right : parent.left
         anchors.leftMargin: chatCommandsBtn.visible ? 2 : 4
         anchors.bottom: parent.bottom
         anchors.bottomMargin: 16
+        icon.name: "image"
+        type: StatusQ.StatusFlatRoundButton.Type.Tertiary
         visible: !isEdit && control.chatType !== Constants.chatTypePublic && !control.isStatusUpdateInput
         enabled: !control.isContactBlocked
-
         onClicked: {
             highlighted = true
             imageDialog.open()
@@ -954,28 +958,26 @@ Rectangle {
                     }
                     StatusChatInputTextFormationAction {
                         wrapper: "**"
-                        icon.name: "format-text-bold"
+                        icon.name: "bold"
                         //% "Bold"
                         text: qsTrId("bold")
                     }
                     StatusChatInputTextFormationAction {
                         wrapper: "*"
-                        icon.name: "format-text-italic"
+                        icon.name: "italic"
                         //% "Italic"
                         text: qsTrId("italic")
                         checked: (textFormatMenu.surroundedBy("*") && !textFormatMenu.surroundedBy("**")) || textFormatMenu.surroundedBy("***")
                     }
                     StatusChatInputTextFormationAction {
                         wrapper: "~~"
-                        icon.name: "format-text-strike-through"
+                        icon.name: "strikethrough"
-                        icon.width: 45
                         //% "Strikethrough"
                         text: qsTrId("strikethrough")
                     }
                     StatusChatInputTextFormationAction {
                         wrapper: "`"
-                        icon.name: "format-text-code"
+                        icon.name: "code"
-                        icon.width: 45
                         //% "Code"
                         text: qsTrId("code")
                     }
@@ -1054,14 +1056,15 @@ Rectangle {
             anchors.rightMargin: Style.current.radius
             height: emojiBtn.height
 
-            StatusIconButton {
+            StatusQ.StatusFlatRoundButton {
                 id: imageBtn2
-                icon.name: "images_icon"
+                implicitHeight: 32
-                icon.height: 18
+                implicitWidth: 32
-                icon.width: 20
                 anchors.right: sendBtn.left
                 anchors.rightMargin: 2
                 anchors.bottom: parent.bottom
+                icon.name: "image"
+                type: StatusQ.StatusFlatRoundButton.Type.Tertiary
                 visible: control.isStatusUpdateInput
 
                 onClicked: {
@@ -1094,36 +1097,45 @@ Rectangle {
                 }
             }
 
-            StatusIconButton {
+            StatusQ.StatusFlatRoundButton {
                 id: emojiBtn
-                visible: !imageBtn2.visible
+                implicitHeight: 32
+                implicitWidth: 32
                 anchors.left: parent.left
                 anchors.bottom: parent.bottom
-                icon.name: "emojiBtn"
+                visible: !imageBtn2.visible
-                type: "secondary"
+                icon.name: "emojis"
+                type: StatusQ.StatusFlatRoundButton.Type.Tertiary
+                color: "transparent"
                 onClicked: togglePopup(emojiPopup, emojiBtn)
             }
 
-            StatusIconButton {
+            StatusQ.StatusFlatRoundButton {
                 id: gifBtn
-                visible: !isEdit && appSettings.isGifWidgetEnabled
+                implicitHeight: 32
+                implicitWidth: 32
                 anchors.right: emojiBtn.left
                 anchors.rightMargin: 2
                 anchors.bottom: parent.bottom
-                icon.name: "gif-icon"
+                visible: !isEdit && appSettings.isGifWidgetEnabled
-                type: "secondary"
+                icon.name: "gif"
+                type: StatusQ.StatusFlatRoundButton.Type.Tertiary
+                color: "transparent"
                 onClicked: togglePopup(gifPopup, gifBtn)
             }
 
-            StatusIconButton {
+            StatusQ.StatusFlatRoundButton {
                 id: stickersBtn
+                implicitHeight: 32
+                implicitWidth: 32
+                width: visible ? 32 : 0
                 anchors.left: emojiBtn.right
                 anchors.leftMargin: 2
                 anchors.bottom: parent.bottom
-                icon.name: "stickers_icon"
+                icon.name: "stickers"
+                type: StatusQ.StatusFlatRoundButton.Type.Tertiary
                 visible: !isEdit && networkGuarded && emojiBtn.visible
-                width: visible ? 32 : 0
+                color: "transparent"
-                type: "secondary"
                 onClicked: togglePopup(stickersPopup, stickersBtn)
             }
         }

ui/shared/status/StatusContextMenuButton.qml

@@ -1,13 +1,16 @@
 import QtQuick 2.13
 
 import utils 1.0
-import "../../shared"
 
-StatusIconButton {
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+StatusFlatRoundButton  {
     id: moreActionsBtn
+    implicitHeight: 32
+    implicitWidth: 32
     anchors.verticalCenter: parent.verticalCenter
-    icon.name: "dots-icon"
+    icon.name: "more"
-    iconColor: Style.current.contextMenuButtonForegroundColor
+    type: StatusFlatRoundButton.Type.Secondary
-    hoveredIconColor: Style.current.contextMenuButtonForegroundColor
+    backgroundHoverColor: Style.current.contextMenuButtonBackgroundHoverColor
-    highlightedBackgroundColor: Style.current.contextMenuButtonBackgroundHoverColor
 }

ui/shared/status/StatusGifPopup.qml

@@ -5,6 +5,9 @@ import QtGraphicalEffects 1.0
 import StatusQ.Components 0.1
 
 import utils 1.0
+
+import StatusQ.Controls 0.1
+
 import "../../shared"
 import "../../shared/panels"
 import "../../shared/controls"
@@ -113,18 +116,19 @@ Popup {
                 }
             }
 
-            StatusIconButton {
+            StatusFlatRoundButton {
                 id: clearBtn
-                icon.name: "close-icon"
+                implicitWidth: 14
-                type: "secondary"
+                implicitHeight: 14
-                visible: searchBox.text !== ""
-                icon.width: 14
-                icon.height: 14
-                width: 14
-                height: 14
                 anchors.right: searchBox.right
                 anchors.rightMargin: Style.current.padding
                 anchors.verticalCenter: searchBox.verticalCenter
+                icon.name: "clear"
+                visible: searchBox.text !== ""
+                icon.width: 14
+                icon.height: 14
+                type: StatusFlatRoundButton.Type.Tertiary
+                color: "transparent"
                 onClicked: toggleCategory(previousCategory)
             }
         }

ui/shared/status/StatusIconButton.qml

@@ -1,88 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-import QtGraphicalEffects 1.13
-
-import utils 1.0
-import "../../shared"
-import "../../shared/panels"
-
-RoundButton {
-    id: control
-
-    property string type: "primary"
-    property color iconColor: Style.current.secondaryText
-    property color highlightedIconColor: Style.current.blue
-    property color hoveredIconColor: Style.current.blue
-    property color highlightedBackgroundColor: Style.current.secondaryBackground
-    property real highlightedBackgroundOpacity: 1.0
-    property color disabledColor: iconColor
-    property int iconRotation: 0
-
-    implicitHeight: 32
-    implicitWidth: 32
-
-    icon.height: 20
-    icon.width: 20
-    icon.color: {
-        if (!enabled) {
-            return control.disabledColor
-        }
-
-        if (hovered) {
-            return control.hoveredIconColor
-        }
-
-        if (highlighted) {
-            return control.highlightedIconColor
-        }
-        return control.iconColor
-    }
-    radius: Style.current.radius
-
-    onIconChanged: {
-        icon.source = icon.name ? Style.svg(icon.name) : ""
-    }
-
-    background: Rectangle {
-        anchors.fill: parent
-        opacity: control.highlightedBackgroundOpacity
-        color: {
-            if (type === "secondary") {
-                return "transparent"
-            }
-            return hovered || highlighted ? control.highlightedBackgroundColor : "transparent"
-        }
-        radius: control.radius
-    }
-
-    contentItem: Item {
-        anchors.fill: parent
-
-        SVGImage {
-            id: iconImg
-            visible: false
-            source: control.icon.source
-            height: control.icon.height
-            width: control.icon.width
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-            fillMode: Image.PreserveAspectFit
-            rotation: control.iconRotation
-        }
-        ColorOverlay {
-            visible: control.visible
-            anchors.fill: iconImg
-            source: iconImg
-            color: control.icon.color
-            antialiasing: true
-            smooth: true
-            rotation: control.iconRotation
-        }
-    }
-
-    MouseArea {
-        cursorShape: Qt.PointingHandCursor
-        anchors.fill: parent
-        onPressed: mouse.accepted = false
-    }
-}

ui/shared/status/StatusTextFormatMenu.qml

@@ -4,7 +4,7 @@ import QtGraphicalEffects 1.13
 import QtQuick.Layouts 1.13
 import QtQuick.Dialogs 1.3
 
-import StatusQ.Controls 0.1 as StatusQ
+import StatusQ.Controls 0.1
 import utils 1.0
 
 Menu {
@@ -61,16 +61,16 @@ Menu {
         topPadding: 0
         action: Action {}
         contentItem: Item {
-            StatusIconButton {
+            StatusFlatRoundButton {
+                width: 32
+                height: 32
+                icon.width: 24
+                icon.height: 24
                 icon.name: menuItem.action.icon.name
-                icon.width: menuItem.action.icon.width
-                icon.height: menuItem.action.icon.height
-                onClicked: menuItem.action.actionTriggered()
                 highlighted: menuItem.action.checked
-                StatusQ.StatusToolTip {
+                tooltip.text: menuItem.action.text
-                    visible: parent.hovered
+                type: StatusFlatRoundButton.Type.Tertiary
-                    text: menuItem.action.text
+                onClicked: menuItem.action.actionTriggered()
-                }
             }
         }
         background: Rectangle {

ui/shared/status/StatusWalletColorButton.qml

@@ -2,20 +2,25 @@ import QtQuick 2.13
 import QtQuick.Controls 2.13
 
 import utils 1.0
-import "../../shared"
-import "../../shared/panels"
-import "../../shared/status"
 
-StatusIconButton {
+import StatusQ.Controls 0.1
+
+import "../../shared/panels"
+
+StatusFlatRoundButton {
     id: control
     property bool selected: false
-    icon.name: "walletIcon"
+    icon.source: Style.svg("walletIcon")
     icon.width: 24
     icon.height: 24
-    highlightedBackgroundColor: control.icon.color
+    color: "transparent"
-    highlightedBackgroundOpacity: 0.1
+
-    implicitWidth: 44
+    Rectangle {
-    implicitHeight: 44
+        anchors.fill: parent
+        color: control.hovered ? control.icon.color : "transparent"
+        opacity: 0.1
+        radius: 8
+    }
 
     Rectangle {
         width: 16
@@ -36,5 +41,4 @@ StatusIconButton {
             fillMode: Image.PreserveAspectFit
         }
     }
-
 }

ui/shared/status/qmldir

@@ -7,7 +7,6 @@ StatusEmojiPopup 1.0 StatusEmojiPopup.qml
 StatusEmojiSection 1.0 StatusEmojiSection.qml
 StatusGifPopup 1.0 StatusGifPopup.qml
 StatusGifColumn 1.0 StatusGifColumn.qml
-StatusIconButton 1.0 StatusIconButton.qml
 StatusImageIdenticon 1.0 StatusImageIdenticon.qml
 StatusRadioButton 1.0 StatusRadioButton.qml
 StatusRoundButton 1.0 StatusRoundButton.qml

ui/shared/views/SearchResults.qml

@@ -3,6 +3,9 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 
 import utils 1.0
+
+import StatusQ.Controls 0.1
+
 import "../"
 import "../status"
 import "../panels"
@@ -111,34 +114,23 @@ Item {
             }
         }
 
-        StatusIconButton {
+        StatusFlatRoundButton {
             id: addContactBtn
-            icon.name: "add-contact"
-            highlightedBackgroundColor: Utils.setColorAlpha(Style.current.buttonHoveredBackgroundColor, 0.2)
-            iconColor: Style.current.primary
-            icon.width: 24
-            icon.height: 24
             width: 32
             height: 32
             anchors.right: parent.right
             anchors.rightMargin: Style.current.padding
             anchors.verticalCenter: parent.verticalCenter
+            icon.width: 24
+            icon.height: 24
+            icon.name: "add-contact"
+            backgroundHoverColor: Utils.setColorAlpha(Style.current.buttonHoveredBackgroundColor, 0.2)
             visible: addContactEnabled && !isAddedContact && !checkIcon.visible
-            MouseArea {
+            onClicked: {
-                anchors.fill: parent
+                root.addToContactsButtonClicked(root.pubKey)
-                hoverEnabled: true
+                mouse.accepted = false
-                cursorShape: Qt.PointingHandCursor
-                onEntered: {
-                    foundContact.hovered = true
-                }
-                onExited: {
-                    foundContact.hovered = false
-                }
-                onClicked: {
-                    root.addToContactsButtonClicked(root.pubKey)
-                    mouse.accepted = false
-                }
             }
+            onHoveredChanged: foundContact.hovered = addContactBtn.hovered
         }
 
         SVGImage {