Add HTabButton component

src/qml/Base/HTabButton.qml

@@ -0,0 +1,55 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+
+TabButton {
+    id: button
+    spacing: theme.spacing
+    topPadding: spacing / 1.5
+    bottomPadding: topPadding
+    leftPadding: spacing
+    rightPadding: leftPadding
+
+    iconItem.svgName: loading ? "hourglass" : icon.name
+    icon.color: theme.icons.colorize
+    enabled: ! loading
+
+    // Must be explicitely set to display correctly on KDE
+    implicitWidth: Math.max(
+        implicitBackgroundWidth + leftInset + rightInset,
+        // FIXME: why is *2 needed to not get ellided text in AddAccount page?
+        implicitContentWidth + leftPadding * 2 + rightPadding * 2,
+    )
+    implicitHeight: Math.max(
+        implicitBackgroundHeight + topInset + bottomInset,
+        implicitContentHeight + topPadding + bottomPadding,
+    )
+
+    // Prevent button from gaining focus and being highlighted on click
+    focusPolicy: Qt.TabFocus
+
+
+    readonly property alias iconItem: contentItem.icon
+    readonly property alias label: contentItem.label
+
+    property color backgroundColor: theme.controls.tab.background
+    property bool loading: false
+
+    property HToolTip toolTip: HToolTip {
+        id: toolTip
+        visible: text && hovered
+    }
+
+
+    background: HButtonBackground {
+        button: button
+        buttonTheme: theme.controls.tab
+        color: backgroundColor
+    }
+
+    contentItem: HButtonContent {
+        id: contentItem
+        button: button
+        buttonTheme: theme.controls.tab
+    }
+}

src/qml/Pages/AddChat/AddChat.qml

@@ -6,12 +6,11 @@ import "../../Base"
 HPage {
     onFocusChanged: createRoom.forceActiveFocus()
 
-    HBox {
-        id: rootBox
-        multiplyWidth: 1.11
-        multiplyHorizontalSpacing: 0
-        multiplyVerticalSpacing: 0
+    HColumnLayout {
         Layout.alignment: Qt.AlignCenter
+        Layout.minimumWidth: Layout.maximumWidth
+        Layout.maximumWidth:
+            Math.max(tabBar.implicitWidth, swipeView.contentWidth)
 
         TabBar {
             id: tabBar
@@ -27,7 +26,7 @@ HPage {
                     qsTr("Join room"),
                 ]
 
-                TabButton {
+                HTabButton {
                     text: modelData
                 }
             }
@@ -35,6 +34,7 @@ HPage {
 
 
         SwipeView {
+            id: swipeView
             clip: true
             currentIndex: tabBar.currentIndex
 
@@ -44,7 +44,6 @@ HPage {
 
             CreateRoom {
                 id: createRoom
-                color: "transparent"
             }
 
             Item {}

src/qml/Pages/AddChat/CreateRoom.qml

@@ -18,7 +18,7 @@ HBox {
 
     HTextField {
         id: nameField
-        placeholderText: qsTr("Name (optional)")
+        placeholderText: qsTr("Name")
 
         Layout.fillWidth: true
     }
@@ -33,7 +33,7 @@ HBox {
     HCheckBox {
         id: publicCheckBox
         text: qsTr("Make this room public")
-        subtitle.text: qsTr("Anyone can join without being invited")
+        subtitle.text: qsTr("Anyone will be able to join without invitation.")
         spacing: addChatBox.horizontalSpacing
 
         Layout.maximumWidth: parent.width
@@ -43,7 +43,8 @@ HBox {
         id: encryptCheckBox
         text: qsTr("Encrypt messages")
         subtitle.text:
-            qsTr("Only you and users you trust will be able to read them") +
+            qsTr("Protect the room against eavesdropper. Only you " +
+                 "and those you trust can read the conversation.") +
             "<br><font color='" + theme.colors.middleBackground + "'>" +
             qsTr("Cannot be disabled later!") +
             "</font>"