3 files changed, 35 insertions, 30 deletions

diff --git a/components/mail/contents/ui/Mail.qml b/components/mail/contents/ui/Mail.qml
index a1ff1cb8..9481a033 100644
--- a/components/mail/contents/ui/Mail.qml
+++ b/components/mail/contents/ui/Mail.qml
@@ -357,6 +357,7 @@ Controls2.ApplicationWindow {
                     left: parent.left
                     right: parent.right
                 }
+                height: Kirigami.Units.gridUnit * 1.5
             }
         }
 
diff --git a/components/package/contents/ui/Button.qml b/components/package/contents/ui/Button.qml
index ceb8d0c3..978f41a6 100644
--- a/components/package/contents/ui/Button.qml
+++ b/components/package/contents/ui/Button.qml
@@ -18,6 +18,7 @@
 
 import QtQuick 2.7
 import org.kube.components.theme 1.0 as KubeTheme
+import org.kde.kirigami 1.0 as Kirigami
 
 Rectangle {
     id: root
@@ -25,13 +26,29 @@ Rectangle {
     signal clicked()
     property alias text: text.text
     property color textColor: KubeTheme.Colors.highlightedTextColor
+    property string iconName: ""
+    property alias implicitHeight: content.implicitHeight
+    property alias implicitWidth: content.implicitWidth
+    width: implicitWidth
+    height: implicitHeight
 
     clip: true
 
-    Text {
-        id: text
+    Row {
+        id: content
         anchors.centerIn: parent
-        color: root.textColor
+        spacing: Kirigami.Units.smallSpacing
+        Text {
+            id: text
+            anchors.verticalCenter: parent.verticalCenter
+            color: root.textColor
+        }
+        Icon {
+            id: icon
+            anchors.verticalCenter: parent.verticalCenter
+            iconName: root.iconName
+            visible: iconName != ""
+        }
     }
 
     MouseArea {
diff --git a/components/package/contents/ui/Outbox.qml b/components/package/contents/ui/Outbox.qml
index e8edb0f4..19646459 100644
--- a/components/package/contents/ui/Outbox.qml
+++ b/components/package/contents/ui/Outbox.qml
@@ -28,36 +28,23 @@ import org.kube.framework.domain 1.0 as KubeFramework
 import org.kube.components 1.0 as KubeComponents
 import org.kube.components.theme 1.0 as KubeTheme
 
-Button {
+KubeComponents.Button {
     id: root
 
-    text: outboxModel.count > 0 ? "outbox (" + outboxModel.count + ")" : "outbox"
-    contentItem: Item {
-        Text {
-            text: parent.text
-            font: parent.font
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-            elide: Text.ElideRight
+    text: outboxModel.count > 0 ? "Outbox (" + outboxModel.count + ")" : "Outbox"
+    color: "transparent"
+    textColor: KubeTheme.Colors.highlightedTextColor
+    iconName: ""
+    states: [
+        State {
+            name: "busy"; when: outboxModel.status == KubeFramework.OutboxModel.InProgressStatus
+            PropertyChanges { target: root; iconName: KubeTheme.Icons.busy }
+        },
+        State {
+            name: "error"; when: outboxModel.status == KubeFramework.OutboxModel.ErrorStatus
+            PropertyChanges { target: root; iconName: KubeTheme.Icons.error }
         }
-        KubeComponents.Icon {
-            id: statusIcon
-            anchors {
-                right: parent.right
-            }
-            visible: false
-            states: [
-                State {
-                    name: "busy"; when: outboxModel.status == KubeFramework.OutboxModel.InProgressStatus 
-                    PropertyChanges { target: statusIcon; iconName: KubeTheme.Icons.busy; visible: true }
-                },
-                State {
-                    name: "error"; when: outboxModel.status == KubeFramework.OutboxModel.ErrorStatus 
-                    PropertyChanges { target: statusIcon; iconName: KubeTheme.Icons.error; visible: true }
-                }
-            ]
-        }
-    }
+    ]
 
     onClicked: {
         dialog.visible = dialog.visible ? false : true