chore(StatusTab[Bar,Button]): UI updates

- fixup margins and padding according to latest Figma designs
- make a difference between a disabled and inactive tab by using opacity
- provide smooth color transitions
- add a dedicated StoryBook page

storybook/pages/StatusTabBarPage.qml

@@ -0,0 +1,43 @@
+import QtQuick 2.15
+
+import StatusQ.Controls 0.1
+
+Item {
+    id: root
+
+    Rectangle {
+        width: tabbar.childrenRect.width
+        height: tabbar.childrenRect.height
+        anchors.centerIn: parent
+        color: "transparent"
+        border.width: 1
+        border.color: "pink"
+
+        StatusTabBar {
+            id: tabbar
+            anchors.centerIn: parent
+
+            StatusTabButton {
+                width: implicitWidth
+                text: "Contacts"
+            }
+            StatusTabButton {
+                width: implicitWidth
+                text: "Pending contacts"
+                badge.value: 2
+            }
+            StatusTabButton {
+                width: implicitWidth
+                enabled: false
+                text: qsTr("Blocked & disabled")
+            }
+            StatusTabButton {
+                width: implicitWidth
+                text: "Misc"
+            }
+        }
+    }
+}
+
+// category: Controls
+// status: good

ui/StatusQ/src/StatusQ/Controls/StatusTabBar.qml

@@ -1,18 +1,20 @@
-import QtQuick 2.0
+import QtQuick 2.15
-import QtQuick.Controls 2.13
+import QtQuick.Controls 2.15
+
+import StatusQ.Core.Theme 0.1
 
 /*!
-   \qmltype StatusTabButton
+   \qmltype StatusTabBar
-   \inherits TabButton
+   \inherits TabBar
    \inqmlmodule StatusQ.Controls
    \since StatusQ.Controls 0.1
    \brief StatusTabBar provides a tab-based navigation model
 
-   It's customized from Qt's \l{https://doc.qt.io/qt-6/qml-qtquick-controls2-tabbar.html}{TabBar},
+   It's customized from Qt's \l{https://doc.qt.io/qt-5/qml-qtquick-controls2-tabbar.html}{TabBar},
    adding a transparent background.
 */
 
-
 TabBar {
-    background: Item { }
+    spacing: Theme.bigPadding
+    background: null
 }

ui/StatusQ/src/StatusQ/Controls/StatusTabButton.qml

@@ -1,6 +1,6 @@
 import QtQuick 2.15
-import QtQuick.Controls 2.13
+import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.13
+import QtQuick.Layouts 1.15
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -13,7 +13,7 @@ import StatusQ.Components 0.1
    \since StatusQ.Controls 0.1
    \brief StatusTabButton is used in conjunction with a StatusTabBar
 
-   It's customized from Qt's \l{https://doc.qt.io/qt-6/qml-qtquick-controls2-tabbutton.html}{TabButton}, adding:
+   It's customized from Qt's \l{https://doc.qt.io/qt-5/qml-qtquick-controls2-tabbutton.html}{TabButton}, adding:
     - transparent background
     - theme-styled text
     - styled underscore for active state
@@ -27,59 +27,52 @@ TabButton {
 
     readonly property alias badge: statusBadge
 
-    leftPadding: 12
+    horizontalPadding: 0
-    rightPadding: 12
 
-    background: Item {
+    background: null
-        HoverHandler {
-            target: parent
-            cursorShape: Qt.PointingHandCursor
-            acceptedButtons: Qt.NoButton
-            enabled: root.enabled
-        }
-    }
 
-    contentItem: Item {
+    font.family: Theme.baseFont.name
-        implicitWidth: contentItemGrid.implicitWidth
+    font.weight: Font.Medium
-        implicitHeight: contentItemGrid.implicitHeight + 15
+    font.pixelSize: Theme.primaryTextFontSize
 
-        enabled: root.enabled
+    opacity: enabled ? 1 : Theme.disabledOpacity
 
+    spacing: Theme.smallPadding
+
+    contentItem: ColumnLayout {
+        spacing: root.spacing
         RowLayout {
-            id: contentItemGrid
+            Layout.fillWidth: true
-
+            spacing: root.spacing
-            anchors {
-                top: parent.top
-                left: parent.left
-                right: parent.right
-            }
-
-            spacing: 0
 
             StatusBaseText {
                 Layout.fillWidth: true
                 elide: Qt.ElideRight
-                font.weight: Font.Medium
+                font: root.font
-                font.pixelSize: 15
+                color: !enabled ? Theme.palette.baseColor1 : root.checked || root.hovered ? Theme.palette.directColor1 : Theme.palette.baseColor1
-                color: root.checked || root.hovered ? Theme.palette.directColor1 : Theme.palette.baseColor1
+                Behavior on color {ColorAnimation {duration: Theme.AnimationDuration.Fast}}
                 text: root.text
             }
 
             StatusBadge {
                 id: statusBadge
-                Layout.leftMargin: 10
                 visible: value > 0
             }
         }
-
         Rectangle {
-            anchors.bottom: parent.bottom
+            Layout.alignment: Qt.AlignHCenter
-            anchors.horizontalCenter: parent.horizontalCenter
+            Layout.topMargin: 4
-            visible: root.enabled && (root.checked || root.hovered)
+            Layout.preferredWidth: 24
-            implicitWidth: 24
+            Layout.preferredHeight: 2
-            implicitHeight: 2
+            opacity: root.checked || root.hovered ? 1 : 0
+            Behavior on opacity {OpacityAnimator {duration: Theme.AnimationDuration.Fast}}
             radius: 4
             color: root.checked ? Theme.palette.primaryColor1 : Theme.palette.primaryColor2
+            Behavior on color {ColorAnimation {duration: Theme.AnimationDuration.Fast}}
         }
     }
+
+    HoverHandler {
+        cursorShape: root.enabled ? Qt.PointingHandCursor : undefined
+    }
 }

ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml

@@ -149,6 +149,8 @@ QtObject {
     property int smallPadding: 10
     property int radius: 8
 
+    readonly property real disabledOpacity: 0.3
+
     function updateFontSize(fontSize:int) {
         switch (fontSize) {
             case Theme.FontSizeXS:
@@ -207,6 +209,12 @@ QtObject {
         }
     }
 
+    enum AnimationDuration {
+        Fast = 100,
+        Default = 250, // https://doc.qt.io/qt-5/qml-qtquick-propertyanimation.html#duration-prop
+        Slow = 400
+    }
+
     // Style compat
     function png(name) {
         return assetPath + "png/" + name + ".png"

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

@@ -62,7 +62,7 @@ ListModel {
         name: qsTr("Ethereum")
         symbol: "Ξ"
         category: qsTr("Tokens")
-        imageSource: "../../../../imports/assets/png/tokens/ETH.png"
+        imageSource: "../../assets/png/tokens/ETH.png"
         selected: false
         isToken: true
     }
@@ -73,7 +73,7 @@ ListModel {
         name: qsTr("Bitcoin")
         symbol: "฿"
         category: qsTr("Tokens")
-        imageSource: "../../../../imports/assets/png/tokens/WBTC.png"
+        imageSource: "../../assets/png/tokens/WBTC.png"
         selected: false
         isToken: true
     }
@@ -84,7 +84,7 @@ ListModel {
         name: qsTr("Status Network Token")
         symbol: ""
         category: qsTr("Tokens")
-        imageSource: "../../../../imports/assets/png/tokens/SNT.png"
+        imageSource: "../../assets/png/tokens/SNT.png"
         selected: false
         isToken: true
     }
@@ -95,7 +95,7 @@ ListModel {
         name: qsTr("Dai")
         symbol: "◈"
         category: qsTr("Tokens")
-        imageSource: "../../../../imports/assets/png/tokens/DAI.png"
+        imageSource: "../../assets/png/tokens/DAI.png"
         selected: false
         isToken: true
     }

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

@@ -85,7 +85,6 @@ SettingsContentBase {
         StatusTabButton {
             objectName: "identityTabButton"
             width: implicitWidth
-            leftPadding: 0
             text: qsTr("Identity")
         }
 

ui/app/AppLayouts/Profile/views/wallet/EditNetworkView.qml

@@ -27,7 +27,6 @@ ColumnLayout {
         id: editPreviwTabBar
         objectName: "editPreviwTabBar"
         StatusTabButton {
-            leftPadding: 0
             text: qsTr("Live Network")
             objectName: "editNetworkLiveButton"
             width: implicitWidth

ui/app/AppLayouts/Profile/views/wallet/ManageTokensView.qml

@@ -73,7 +73,6 @@ Item {
             Layout.topMargin: 5
 
             StatusTabButton {
-                leftPadding: 0
                 width: implicitWidth
                 objectName: "assetsButton"
                 text: qsTr("Assets")

ui/app/AppLayouts/Wallet/views/AssetsDetailView.qml

@@ -439,7 +439,6 @@ Item {
                 StatusTabBar {
                     width: parent.width
                     StatusTabButton {
-                        leftPadding: 0
                         width: implicitWidth
                         text: qsTr("Overview")
                     }

ui/app/AppLayouts/Wallet/views/RightTabView.qml

@@ -146,7 +146,6 @@ RightTabBaseView {
 
                     StatusTabButton {
                         objectName: "assetsTabButton"
-                        leftPadding: 0
                         width: implicitWidth
                         text: qsTr("Assets")
                     }

ui/imports/shared/views/ProfileDialogView.qml

@@ -485,7 +485,6 @@ Pane {
                     Layout.rightMargin: column.anchors.rightMargin
                     bottomPadding: -4
                     StatusTabButton {
-                        leftPadding: 0
                         width: implicitWidth
                         text: qsTr("Communities")
                     }