added page transition effects

- added functionality for buttons on PageSettingsServerData page

client/ui/qml/Controls2/VerticalRadioButton.qml

@@ -3,6 +3,8 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
 
+import "TextTypes"
+
 RadioButton {
     id: root
 
@@ -13,7 +15,8 @@ RadioButton {
     property string disabledColor: Qt.rgba(1, 1, 1, 0)
     property string selectedColor: Qt.rgba(1, 1, 1, 0)
 
-    property string textColor: "#0E0E11"
+    property string textColor: "#D7D8DB"
+    property string selectedTextColor: "#FBB26A"
 
     property string pressedBorderColor: Qt.rgba(251/255, 178/255, 106/255, 0.3)
     property string selectedBorderColor: "#FBB26A"
@@ -26,11 +29,16 @@ RadioButton {
 
     property string defaultInnerCircleColor: "#FBB26A"
 
+    property string imageSource
+    property bool showImage
+
     hoverEnabled: true
 
     indicator: Rectangle {
         id: background
 
+        anchors.verticalCenter: parent.verticalCenter
+
         implicitWidth: 56
         implicitHeight: 56
         radius: 16
@@ -52,6 +60,16 @@ RadioButton {
             PropertyAnimation { duration: 200 }
         }
 
+        Image {
+            source: imageSource
+            visible: showImage
+
+            anchors.centerIn: parent
+
+            width: 24
+            height: 24
+        }
+
         Rectangle {
             id: outerCircle
 
@@ -59,6 +77,8 @@ RadioButton {
             height: 24
             radius: 16
 
+            visible: !showImage
+
             anchors.centerIn: parent
 
             color: "transparent"
@@ -120,34 +140,41 @@ RadioButton {
 
     contentItem: ColumnLayout {
         id: content
-        anchors.fill: parent
+        anchors.left: parent.left
+        anchors.right: parent.right
         anchors.leftMargin: 8 + background.width
 
-        Text {
-            text: root.text
-            wrapMode: Text.WordWrap
-            color: "#D7D8DB"
-            font.pixelSize: 16
-            font.weight: 400
-            font.family: "PT Root UI VF"
+        spacing: 4
+
+        ListItemTitleType {
+            text: root.text
+
+            color: {
+                if (root.checked) {
+                    return selectedTextColor
+                }
+                return textColor
+            }
 
-            height: 24
             Layout.fillWidth: true
+            Layout.topMargin: 16
+            Layout.bottomMargin: description.visible ? 0 : 16
+
+            Behavior on color {
+                PropertyAnimation { duration: 200 }
+            }
         }
 
-        Text {
-            font.family: "PT Root UI VF"
-            font.styleName: "normal"
-            font.pixelSize: 13
-            font.letterSpacing: 0.02
+        CaptionTextType {
+            id: description
+
             color: "#878B91"
             text: root.descriptionText
-            wrapMode: Text.WordWrap
 
             visible: root.descriptionText !== ""
 
             Layout.fillWidth: true
-            height: 16
+            Layout.bottomMargin: 16
         }
     }