feat: add TabButton and TabBar for the Wallet

ui/app/AppLayouts/Wallet/WalletLayout.qml

@@ -43,18 +43,37 @@ SplitView {
             anchors.rightMargin: 0
             anchors.top: walletHeader.bottom
             anchors.topMargin: 23
+
+            Item {
+                id: element
                 Layout.fillHeight: true
                 Layout.fillWidth: true
 
-            Text {
+                TabBar {
-                id: assetsTitle
+                    id: walletTabBar
-                color: Theme.darkGrey
+                    anchors.right: parent.right
-                text: qsTr("Assets")
+                    anchors.rightMargin: Theme.bigPadding
                     anchors.left: parent.left
-                anchors.leftMargin: 24
+                    anchors.leftMargin: Theme.bigPadding
                     anchors.top: parent.top
-                anchors.topMargin: Theme.smallPadding
+                    anchors.topMargin: Theme.padding
-                font.pixelSize: 14
+
+                    StatusTabButton {
+                        id: assetBtn
+                        btnText: "Assets"
+                    }
+                    StatusTabButton {
+                        id: collectiblesBtn
+                        anchors.left: assetBtn.right
+                        anchors.leftMargin: 32
+                        btnText: "Collectibles"
+                    }
+                    StatusTabButton {
+                        id: historyBtn
+                        anchors.left: collectiblesBtn.right
+                        anchors.leftMargin: 32
+                        btnText: "History"
+                    }
                 }
 
                 Component {
@@ -118,10 +137,10 @@ SplitView {
             }
         }
     }
+}
 /*##^##
 Designer {
-    D{i:0;autoSize:true;formeditorColor:"#ffffff";formeditorZoom:0.8999999761581421;height:770;width:1152}
+    D{i:0;autoSize:true;formeditorColor:"#ffffff";height:770;width:1152}
-D{i:16;anchors_x:0;anchors_y:0}
 }
 ##^##*/
 

ui/imports/Theme.qml

@@ -15,6 +15,7 @@ QtObject {
     readonly property color darkBlue: "#3c55c9"
     readonly property color darkBlueBtn: "#5a70dd"
 
+    readonly property int bigPadding: 24
     readonly property int padding: 16
     readonly property int smallPadding: 10
     readonly property int radius: 8

ui/nim-status-client.pro

@@ -112,6 +112,7 @@ DISTFILES += \
     onboarding/qmldir \
     shared/PopupMenu.qml \
     shared/Separator.qml \
+    shared/StatusTabButton.qml \
     shared/StyledButton.qml \
     shared/RoundedIcon.qml \
     shared/qmldir

ui/shared/StatusTabButton.qml

@@ -0,0 +1,43 @@
+import QtQuick 2.3
+import QtQuick.Controls 2.3
+import "../imports"
+
+TabButton {
+    property string btnText: "Default Button"
+
+    id: tabButton
+    width: tabBtnText.width
+    height: tabBtnText.height + 11
+    text: ""
+    padding: 0
+    background: Rectangle {
+        color: Theme.transparent
+        border.color: Theme.transparent
+    }
+
+    Text {
+        id: tabBtnText
+        text: btnText
+        font.weight: Font.Medium
+        font.pixelSize: 15
+        color: parent.checked ? Theme.black : Theme.darkGrey
+    }
+
+    Rectangle {
+        color: Theme.blue
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 0
+        anchors.right: parent.right
+        anchors.rightMargin: 4
+        anchors.left: parent.left
+        anchors.leftMargin: 4
+        height: 3
+        radius: 4
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;formeditorColor:"#ffffff";formeditorZoom:1.75}
+}
+##^##*/

ui/shared/qmldir

@@ -2,3 +2,4 @@ StyledButton 1.0 StyledButton.qml
 RoundedIcon 1.0 RoundedIcon.qml
 PopupMenu 1.0 PopupMenu.qml
 Separator 1.0 Separator.qml
+StatusTabButton 1.0 StatusTabButton.qml