added PageHome, PageSettings, PageShare, PageStart

- renamed old PageStart to PageSetupWizardStart
- added various text types
- moved servers model to "global" scope

client/ui/qml/Controls2/DropDownType.qml

@@ -12,14 +12,20 @@ Item {
 
     property var onClickedFunc
     property string buttonImage: "qrc:/images/controls/chevron-down.svg"
+    property string buttonImageColor: "#494B50"
+
 
     property string defaultColor: "#1C1D21"
 
+    property string textColor: "#d7d8db"
+
     property string borderColor: "#494B50"
+    property int borderWidth: 1
 
     property alias menuModel: menuContent.model
 
-    height: buttonContent.implicitHeight
+    implicitWidth: buttonContent.implicitWidth
+    implicitHeight: buttonContent.implicitHeight
 
     Rectangle {
         id: buttonBackground
@@ -28,6 +34,7 @@ Item {
         radius: 16
         color: defaultColor
         border.color: borderColor
+        border.width: borderWidth
 
         Behavior on border.width {
             PropertyAnimation { duration: 200 }
@@ -37,72 +44,55 @@ Item {
     RowLayout {
         id: buttonContent
         anchors.fill: parent
-        anchors.rightMargin: 16
-        anchors.leftMargin: 16
+
+        spacing: 0
 
         ColumnLayout {
             Layout.leftMargin: 16
-            Layout.rightMargin: 16
-            Layout.topMargin: 16
-            Layout.bottomMargin: 16
 
-            Text {
+            LabelTextType {
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+
                 visible: root.descriptionText !== ""
 
-                font.family: "PT Root UI"
-                font.styleName: "normal"
-                font.pixelSize: 13
-                font.letterSpacing: 0.02
                 color: "#878B91"
                 text: root.descriptionText
-                wrapMode: Text.WordWrap
-
-                Layout.fillWidth: true
-                height: 16   
-
-                horizontalAlignment: Text.AlignLeft
-                verticalAlignment: Text.AlignVCenter
             }
 
-            Text {
-                font.family: "PT Root UI"
-                font.styleName: "normal"
-                font.pixelSize: 16
-                color: "#d7d8db"
-                text: root.text
-
-                Layout.fillWidth: true
-                height: 24
-
-                horizontalAlignment: Text.AlignLeft
+            ButtonTextType {
+                horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
+
+                color: root.textColor
+                text: root.text
             }
         }
 
         ImageButtonType {
             id: button
 
+            Layout.leftMargin: 4
             Layout.rightMargin: 16
 
             hoverEnabled: false
             image: buttonImage
+            imageColor: buttonImageColor
             onClicked: {
                 if (onClickedFunc && typeof onClickedFunc === "function") {
                     onClickedFunc()
                 }
             }
-
-            Layout.alignment: Qt.AlignRight
         }
     }
 
     MouseArea {
-        anchors.fill: parent
+        anchors.fill: buttonContent
         cursorShape: Qt.PointingHandCursor
         hoverEnabled: true
 
         onEntered: {
-            buttonBackground.border.width = 1
+            buttonBackground.border.width = borderWidth
         }
 
         onExited: {
@@ -119,7 +109,7 @@ Item {
 
         edge: Qt.BottomEdge
         width: parent.width
-        height: parent.height * 0.8
+        height: parent.height * 0.9
 
         clip: true
         modal: true
@@ -129,6 +119,9 @@ Item {
             anchors.bottomMargin: -radius
             radius: 16
             color: "#1C1D21"
+
+            border.color: borderColor
+            border.width: 1
         }
 
         Overlay.modal: Rectangle {

client/ui/qml/Controls2/Header2Type.qml

@@ -0,0 +1,56 @@
+import QtQuick
+import QtQuick.Layouts
+
+import "TextTypes"
+
+Item {
+    id: root
+
+    property string buttonImage
+    property string headerText
+    property string descriptionText
+
+    implicitWidth: content.implicitWidth
+    implicitHeight: content.implicitHeight
+
+    ColumnLayout {
+        id: content
+        anchors.fill: parent
+
+        ImageButtonType {
+            id: backButton
+
+            Layout.leftMargin: -6
+
+            image: root.buttonImage
+            imageColor: "#D7D8DB"
+
+            visible: image ? true : false
+
+            onClicked: {
+                UiLogic.closePage()
+            }
+        }
+
+        Header2TextType {
+            id: header
+
+            Layout.fillWidth: true
+
+            text: root.headerText
+        }
+
+        ParagraphTextType {
+            id: description
+
+            Layout.topMargin: 16
+            Layout.fillWidth: true
+
+            text: root.descriptionText
+
+            color: "#878B91"
+
+            visible: root.descriptionText !== ""
+        }
+    }
+}

client/ui/qml/Controls2/HeaderType.qml

@@ -1,6 +1,8 @@
 import QtQuick
 import QtQuick.Layouts
 
+import "TextTypes"
+
 Item {
     id: root
 
@@ -30,39 +32,23 @@ Item {
             }
         }
 
-        Text {
+        Header1TextType {
             id: header
 
-            text: root.headerText
-
-            color: "#D7D8DB"
-            font.pixelSize: 36
-            font.weight: 700
-            font.family: "PT Root UI VF"
-            font.letterSpacing: -0.03
-
-            wrapMode: Text.WordWrap
-
-            height: 38
             Layout.fillWidth: true
+
+            text: root.headerText
         }
 
-        Text {
+        ParagraphTextType {
             id: description
 
+            Layout.topMargin: 16
+            Layout.fillWidth: true
+
             text: root.descriptionText
 
             color: "#878B91"
-            font.pixelSize: 16
-            font.weight: 400
-            font.family: "PT Root UI VF"
-            font.letterSpacing: -0.03
-
-            wrapMode: Text.WordWrap
-
-            height: 24
-            Layout.topMargin: 16
-            Layout.fillWidth: true
         }
     }
 }

client/ui/qml/Controls2/TabImageButtonType.qml

@@ -0,0 +1,24 @@
+import QtQuick
+import QtQuick.Controls
+
+TabButton {
+    id: root
+
+    property string hoveredColor: "#412102"
+    property string defaultColor: "#D7D8DB"
+    property string selectedColor: "#FBB26A"
+
+    property string image
+
+    property bool isSelected: false
+
+    hoverEnabled: true
+
+    icon.source: image
+    icon.color: isSelected ? selectedColor : defaultColor
+
+    background: Rectangle {
+        anchors.fill: parent
+        color: "transparent"
+    }
+}

client/ui/qml/Controls2/TextTypes/ButtonTextType.qml

@@ -0,0 +1,12 @@
+import QtQuick
+
+Text {
+    height: 24
+
+    color: "#D7D8DB"
+    font.pixelSize: 16
+    font.weight: 500
+    font.family: "PT Root UI VF"
+
+    wrapMode: Text.WordWrap
+}

client/ui/qml/Controls2/TextTypes/Header1TextType.qml

@@ -0,0 +1,14 @@
+import QtQuick
+
+Text {
+    height: 38
+
+    color: "#D7D8DB"
+    font.pixelSize: 36
+    font.weight: 700
+    font.family: "PT Root UI VF"
+    font.letterSpacing: -0.03
+
+    wrapMode: Text.WordWrap
+}
+

client/ui/qml/Controls2/TextTypes/Header2TextType.qml

@@ -1,10 +1,12 @@
 import QtQuick
 
 Text {
+    height: 30
+
     color: "#D7D8DB"
     font.pixelSize: 25
     font.weight: 700
     font.family: "PT Root UI VF"
 
-    height: 30
+    wrapMode: Text.WordWrap
 }

client/ui/qml/Controls2/TextTypes/LabelTextType.qml

@@ -0,0 +1,13 @@
+import QtQuick
+
+Text {
+    height: 16
+
+    color: "#878B91"
+    font.pixelSize: 13
+    font.weight: 400
+    font.family: "PT Root UI VF"
+    font.letterSpacing: 0.02
+
+    wrapMode: Text.WordWrap
+}

client/ui/qml/Controls2/TextTypes/ParagraphTextType.qml

@@ -1,12 +1,12 @@
 import QtQuick
 
 Text {
-    text: root.bodyText
-    wrapMode: Text.WordWrap
+    height: 24
+
     color: "#D7D8DB"
     font.pixelSize: 16
     font.weight: 400
     font.family: "PT Root UI VF"
 
-    height: 24
+    wrapMode: Text.WordWrap
 }