qml ui fixes

client/resources.qrc

@@ -3,7 +3,6 @@
         <file>translations/amneziavpn_ru.qm</file>
         <file>images/close.png</file>
         <file>images/settings.png</file>
-        <file>images/min.png</file>
         <file>images/favorites_disabled.png</file>
         <file>images/favorites_enabled.png</file>
         <file>images/favorites_hover.png</file>
@@ -30,11 +29,9 @@
         <file>fonts/Lato-Thin.ttf</file>
         <file>fonts/Lato-ThinItalic.ttf</file>
         <file>images/AmneziaVPN.png</file>
-        <file>images/line.png</file>
         <file>images/server_settings.png</file>
         <file>images/share.png</file>
         <file>server_scripts/remove_container.sh</file>
-        <file>images/background_connected.png</file>
         <file>server_scripts/setup_host_firewall.sh</file>
         <file>images/reload.png</file>
         <file>server_scripts/openvpn_cloak/Dockerfile</file>
@@ -68,40 +65,43 @@
         <file>server_scripts/wireguard/start.sh</file>
         <file>server_scripts/wireguard/template.conf</file>
         <file>ui/qml/main.qml</file>
-        <file>ui/qml/GlobalConfig.qml</file>
-        <file>ui/qml/qmldir</file>
         <file>ui/qml/TitleBar.qml</file>
-        <file>ui/qml/PageStart.qml</file>
+        <file>ui/qml/Pages/PageAppSetting.qml</file>
-        <file>ui/qml/TextFieldType.qml</file>
+        <file>ui/qml/Pages/PageGeneralSettings.qml</file>
-        <file>ui/qml/LabelType.qml</file>
+        <file>ui/qml/Pages/PageNetworkSetting.qml</file>
-        <file>ui/qml/BasicButtonType.qml</file>
+        <file>ui/qml/Pages/PageNewServer.qml</file>
-        <file>ui/qml/ImageButtonType.qml</file>
+        <file>ui/qml/Pages/PageNewServerConfiguring.qml</file>
-        <file>ui/qml/PageNewServer.qml</file>
+        <file>ui/qml/Pages/PageNewServerProtocol.qml</file>
-        <file>ui/qml/BlueButtonType.qml</file>
+        <file>ui/qml/Pages/PageProtoCloak.qml</file>
-        <file>ui/qml/PageSetupWizard.qml</file>
+        <file>ui/qml/Pages/PageProtoOpenVPN.qml</file>
-        <file>ui/qml/RadioButtonType.qml</file>
+        <file>ui/qml/Pages/PageProtoShadowSock.qml</file>
-        <file>ui/qml/PageSetupWizardHighLevel.qml</file>
+        <file>ui/qml/Pages/PageServer.qml</file>
-        <file>ui/qml/PageSetupWizardVPNMode.qml</file>
+        <file>ui/qml/Pages/PageServerProtocols.qml</file>
-        <file>ui/qml/CheckBoxType.qml</file>
+        <file>ui/qml/Pages/PageServerSetting.qml</file>
-        <file>ui/qml/PageSetupWizardMediumLevel.qml</file>
+        <file>ui/qml/Pages/PageSetupWizard.qml</file>
-        <file>ui/qml/PageSetupWizardLowLevel.qml</file>
+        <file>ui/qml/Pages/PageSetupWizardHighLevel.qml</file>
-        <file>ui/qml/PageNewServerConfiguring.qml</file>
+        <file>ui/qml/Pages/PageSetupWizardLowLevel.qml</file>
-        <file>ui/qml/PageNewServerProtocol.qml</file>
+        <file>ui/qml/Pages/PageSetupWizardMediumLevel.qml</file>
-        <file>ui/qml/ComboBoxType.qml</file>
+        <file>ui/qml/Pages/PageSetupWizardVPNMode.qml</file>
-        <file>ui/qml/PageVPN.qml</file>
+        <file>ui/qml/Pages/PageShareConnection.qml</file>
-        <file>ui/qml/PageSites.qml</file>
+        <file>ui/qml/Pages/PageSites.qml</file>
-        <file>ui/qml/PageGeneralSettings.qml</file>
+        <file>ui/qml/Pages/PageStart.qml</file>
-        <file>ui/qml/SettingButtonType.qml</file>
+        <file>ui/qml/Pages/PageVPN.qml</file>
-        <file>ui/qml/PageServer.qml</file>
+        <file>ui/qml/Controls/BasicButtonType.qml</file>
-        <file>ui/qml/PageAppSetting.qml</file>
+        <file>ui/qml/Controls/BlueButtonType.qml</file>
-        <file>ui/qml/PageNetworkSetting.qml</file>
+        <file>ui/qml/Controls/CheckBoxType.qml</file>
-        <file>ui/qml/PageServerSetting.qml</file>
+        <file>ui/qml/Controls/ComboBoxType.qml</file>
-        <file>ui/qml/PageServerProtocols.qml</file>
+        <file>ui/qml/Controls/ImageButtonType.qml</file>
-        <file>ui/qml/PageShareConnection.qml</file>
+        <file>ui/qml/Controls/LabelType.qml</file>
-        <file>ui/qml/PageProtoOpenVPN.qml</file>
+        <file>ui/qml/Controls/RadioButtonType.qml</file>
-        <file>ui/qml/PageProtoShadowSock.qml</file>
+        <file>ui/qml/Controls/SettingButtonType.qml</file>
-        <file>ui/qml/PageProtoCloak.qml</file>
+        <file>ui/qml/Controls/ShareConnectionButtonType.qml</file>
-        <file>ui/qml/ShareConnectionContent.qml</file>
+        <file>ui/qml/Controls/ShareConnectionContent.qml</file>
-        <file>ui/qml/ShareConnectionButtonType.qml</file>
+        <file>ui/qml/Controls/TextFieldType.qml</file>
+        <file>ui/qml/Pages/PageBase.qml</file>
+        <file>ui/qml/Config/GlobalConfig.qml</file>
+        <file>ui/qml/Config/qmldir</file>
+        <file>images/background_connected.png</file>
+        <file>images/background_connected@2x.png</file>
     </qresource>
 </RCC>

client/ui/qml/Controls/RadioButtonType.qml

@@ -0,0 +1,36 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+
+RadioButton {
+    id: root
+
+    indicator: Rectangle {
+        implicitWidth: 13
+        implicitHeight: 13
+        x: root.leftPadding
+        y: parent.height / 2 - height / 2
+        radius: 13
+        border.color: root.down ? "#777777" : "#777777"
+
+        Rectangle {
+            width: 7
+            height: 7
+            x: 3
+            y: 3
+            radius: 4
+            color: root.down ? "#15CDCB" : "#15CDCB"
+            visible: root.checked
+        }
+    }
+
+    contentItem: Text {
+        text: root.text
+        font.family: "Lato"
+        font.styleName: "normal"
+        font.pixelSize: 16
+        color: "#181922"
+        verticalAlignment: Text.AlignVCenter
+        leftPadding: root.indicator.width + root.spacing
+    }
+    height: 10
+}

client/ui/qml/Pages/PageAppSetting.qml

@@ -1,11 +1,11 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import "./"
+import "../Controls"
+import "../Config"
 
-Item {
+PageBase {
     id: root
-    width: GC.screenWidth
-    height: GC.screenHeight
     ImageButtonType {
         id: back
         x: 10

client/ui/qml/Pages/PageBase.qml

@@ -0,0 +1,13 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import "./"
+import "../Controls"
+import "../Config"
+
+Item {
+    id: root
+//    width: GC.screenWidth
+//    height: GC.screenHeight
+
+    anchors.fill: parent
+}

client/ui/qml/Pages/PageGeneralSettings.qml

@@ -2,11 +2,11 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12
 import PageEnum 1.0
 import "./"
+import "../Controls"
+import "../Config"
 
 Item {
     id: root
-    width: GC.screenWidth
-    height: GC.screenHeight
     ImageButtonType {
         id: back
         x: 10
@@ -18,69 +18,56 @@ Item {
             UiLogic.closePage()
         }
     }
-    Image {
+    Rectangle {
-        x: 10
-        y: 160
-        width: 360
-        height: 1
-        source: "qrc:/images/line.png"
-    }
-    Image {
-        x: 10
-        y: 220
-        width: 360
-        height: 1
-        source: "qrc:/images/line.png"
-    }
-    Image {
-        x: 10
-        y: 620
-        width: 360
-        height: 1
-        source: "qrc:/images/line.png"
-    }
-    Image {
-        x: 10
-        y: 560
-        width: 360
-        height: 1
-        source: "qrc:/images/line.png"
-    }
-    Image {
-        x: 10
-        y: 280
-        width: 360
-        height: 1
-        source: "qrc:/images/line.png"
-    }
-    Image {
-        x: 10
-        y: 100
-        width: 360
-        height: 1
-        source: "qrc:/images/line.png"
-    }
-    Image {
-        x: 10
-        y: 340
-        width: 360
-        height: 1
-        source: "qrc:/images/line.png"
-    }
-    Image {
-        x: 10
-        y: 400
-        width: 360
-        height: 1
-        source: "qrc:/images/line.png"
-    }
-    Image {
-        x: 10
         y: 40
-        width: 360
+        x: 20
+        width: parent.width - 40
         height: 1
-        source: "qrc:/images/line.png"
+        color: "#DDDDDD"
     }
+    Rectangle {
+        y: 100
+        x: 20
+        width: parent.width - 40
+        height: 1
+        color: "#DDDDDD"
+    }
+    Rectangle {
+        y: 160
+        x: 20
+        width: parent.width - 40
+        height: 1
+        color: "#DDDDDD"
+    }
+    Rectangle {
+        y: 220
+        x: 20
+        width: parent.width - 40
+        height: 1
+        color: "#DDDDDD"
+    }
+    Rectangle {
+        y: 280
+        x: 20
+        width: parent.width - 40
+        height: 1
+        color: "#DDDDDD"
+    }
+    Rectangle {
+        y: 340
+        x: 20
+        width: parent.width - 40
+        height: 1
+        color: "#DDDDDD"
+    }
+    Rectangle {
+        y: 400
+        x: 20
+        width: parent.width - 40
+        height: 1
+        color: "#DDDDDD"
+    }
+
     SettingButtonType {
         x: 30
         y: 355
@@ -103,17 +90,6 @@ Item {
             UiLogic.goToPage(PageEnum.AppSettings)
         }
     }
-    SettingButtonType {
-        x: 30
-        y: 575
-        width: 330
-        height: 30
-        icon.source: "qrc:/images/settings.png"
-        text: qsTr("Exit")
-        onClicked: {
-            Qt.quit()
-        }
-    }
     SettingButtonType {
         x: 30
         y: 115
@@ -159,4 +135,16 @@ Item {
             UiLogic.onPushButtonGeneralSettingsShareConnectionClicked()
         }
     }
+    SettingButtonType {
+        x: 30
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 20
+        width: 330
+        height: 30
+        icon.source: "qrc:/images/settings.png"
+        text: qsTr("Exit")
+        onClicked: {
+            Qt.quit()
+        }
+    }
 }

client/ui/qml/Pages/PageNetworkSetting.qml

@@ -1,11 +1,11 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import "./"
+import "../Controls"
+import "../Config"
 
 Item {
     id: root
-    width: GC.screenWidth
-    height: GC.screenHeight
     ImageButtonType {
         id: back
         x: 10

client/ui/qml/Pages/PageNewServer.qml

@@ -2,11 +2,11 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12
 import PageEnum 1.0
 import "./"
+import "../Controls"
+import "../Config"
 
 Item {
     id: root
-    width: GC.screenWidth
-    height: GC.screenHeight
     Text {
         font.family: "Lato"
         font.styleName: "normal"

client/ui/qml/Pages/PageNewServerConfiguring.qml

@@ -1,11 +1,11 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import "./"
+import "../Controls"
+import "../Config"
 
 Item {
     id: root
-    width: GC.screenWidth
-    height: GC.screenHeight
     enabled: UiLogic.pageNewServerConfiguringEnabled
     Text {
         font.family: "Lato"

client/ui/qml/Pages/PageNewServerProtocol.qml

@@ -1,11 +1,11 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import "./"
+import "../Controls"
+import "../Config"
 
 Item {
     id: root
-    width: GC.screenWidth
-    height: GC.screenHeight
     ImageButtonType {
         id: back
         x: 10

client/ui/qml/Pages/PageProtoCloak.qml

@@ -1,11 +1,11 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import "./"
+import "../Controls"
+import "../Config"
 
 Item {
     id: root
-    width: GC.screenWidth
-    height: GC.screenHeight
     enabled: UiLogic.pageProtoCloakEnabled
     ImageButtonType {
         id: back

client/ui/qml/Pages/PageProtoOpenVPN.qml

@@ -1,11 +1,11 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import "./"
+import "../Controls"
+import "../Config"
 
 Item {
     id: root
-    width: GC.screenWidth
-    height: GC.screenHeight
     enabled: UiLogic.pageProtoOpenvpnEnabled
     ImageButtonType {
         id: back

client/ui/qml/Pages/PageProtoShadowSock.qml

@@ -1,11 +1,11 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import "./"
+import "../Controls"
+import "../Config"
 
 Item {
     id: root
-    width: GC.screenWidth
-    height: GC.screenHeight
     enabled: UiLogic.pageProtoShadowsocksEnabled
     ImageButtonType {
         id: back

client/ui/qml/Pages/PageServer.qml

@@ -1,13 +1,13 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
-import "./"
 import QtGraphicalEffects 1.12
 import PageEnum 1.0
+import "../Controls"
+import "./"
+import "../Config"
 
 Item {
     id: root
-    width: GC.screenWidth
-    height: GC.screenHeight
     ImageButtonType {
         id: back
         x: 10

client/ui/qml/Pages/PageServerProtocols.qml

@@ -1,11 +1,11 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import "./"
+import "../Controls"
+import "../Config"
 
 Item {
     id: root
-    width: GC.screenWidth
-    height: GC.screenHeight
     enabled: UiLogic.pageServerProtocolsEnabled
     ImageButtonType {
         id: back

client/ui/qml/Pages/PageServerSetting.qml

@@ -1,12 +1,12 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
-import "./"
 import PageEnum 1.0
+import "./"
+import "../Controls"
+import "../Config"
 
 Item {
     id: root
-    width: GC.screenWidth
-    height: GC.screenHeight
     enabled: UiLogic.pageServerSettingsEnabled
 
     ImageButtonType {
@@ -28,7 +28,7 @@ Item {
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         text: qsTr("Server settings")
-        x: 10
+        anchors.horizontalCenter: parent.horizontalCenter
         y: 35
         width: 361
         height: 31
@@ -50,7 +50,7 @@ Item {
         text: UiLogic.labelServerSettingsCurrentVpnProtocolText
     }
     LabelType {
-        x: 20
+        anchors.horizontalCenter: parent.horizontalCenter
         y: 120
         width: 341
         height: 31
@@ -59,7 +59,7 @@ Item {
         text: UiLogic.labelServerSettingsServerText
     }
     LabelType {
-        x: 40
+        anchors.horizontalCenter: parent.horizontalCenter
         y: 530
         width: 301
         height: 41
@@ -67,7 +67,6 @@ Item {
         visible: UiLogic.labelServerSettingsWaitInfoVisible
     }
     TextFieldType {
-//        x: 70
         anchors.horizontalCenter: parent.horizontalCenter
         y: 80
         width: 251

client/ui/qml/Pages/PageSetupWizard.qml

@@ -2,11 +2,11 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12
 import PageEnum 1.0
 import "./"
+import "../Controls"
+import "../Config"
 
 Item {
     id: root
-    width: GC.screenWidth
-    height: GC.screenHeight
     ImageButtonType {
         id: back_from_setup_wizard
         x: 10

client/ui/qml/Pages/PageSetupWizardHighLevel.qml

@@ -2,11 +2,11 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12
 import PageEnum 1.0
 import "./"
+import "../Controls"
+import "../Config"
 
 Item {
     id: root
-    width: GC.screenWidth
-    height: GC.screenHeight
     ImageButtonType {
         id: back_from_setup_wizard
         x: 10

client/ui/qml/Pages/PageSetupWizardLowLevel.qml

@@ -1,11 +1,11 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import "./"
+import "../Controls"
+import "../Config"
 
 Item {
     id: root
-    width: GC.screenWidth
-    height: GC.screenHeight
     ImageButtonType {
         id: back_from_setup_wizard
         x: 10

client/ui/qml/Pages/PageSetupWizardMediumLevel.qml

@@ -2,11 +2,11 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12
 import PageEnum 1.0
 import "./"
+import "../Controls"
+import "../Config"
 
 Item {
     id: root
-    width: GC.screenWidth
-    height: GC.screenHeight
     ImageButtonType {
         id: back_from_setup_wizard
         x: 10

client/ui/qml/Pages/PageSetupWizardVPNMode.qml

@@ -1,11 +1,11 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import "./"
+import "../Controls"
+import "../Config"
 
 Item {
     id: root
-    width: GC.screenWidth
-    height: GC.screenHeight
     ImageButtonType {
         id: back_from_setup_wizard
         x: 10

client/ui/qml/Pages/PageShareConnection.qml

@@ -1,11 +1,11 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import "./"
+import "../Controls"
+import "../Config"
 
 Item {
     id: root
-    width: GC.screenWidth
-    height: GC.screenHeight
     ImageButtonType {
         id: back
         x: 10

client/ui/qml/Pages/PageSites.qml

@@ -1,13 +1,13 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
-import "./"
 import Qt.labs.platform 1.0
 import QtQuick.Dialogs 1.0
+import "./"
+import "../Controls"
+import "../Config"
 
 Item {
     id: root
-    width: GC.screenWidth
-    height: GC.screenHeight
     Text {
         font.family: "Lato"
         font.styleName: "normal"

client/ui/qml/Pages/PageStart.qml

@@ -1,12 +1,11 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import "./"
+import "../Controls"
+import "../Config"
 
 Item {
     id: root
-    width: GC.screenWidth
-    height: GC.screenHeight
-
     Image {
         anchors.horizontalCenter: root.horizontalCenter
         width: GC.trW(150)

client/ui/qml/Pages/PageVPN.qml

@@ -2,32 +2,33 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12
 import PageEnum 1.0
 import "./"
+import "../Controls"
+import "../Config"
 
 Item {
     id: root
-    width: GC.screenWidth
+
-    height: GC.screenHeight
     Image {
-        x: 20
+        anchors.horizontalCenter: parent.horizontalCenter
-        y: 424
+        y: 0
-        width: 325
+        width: parent.width
-        height: 1
+
-        source: "qrc:/images/line.png"
+//        width: 380
+//        height: 325
+        source: "qrc:/images/background_connected.png"
     }
-    Text {
+
-        x: 20
+    ImageButtonType {
-        y: 440
+        x: parent.width - 40
-        width: 281
+        y: 10
-        height: 21
+        width: 31
-        font.family: "Lato"
+        height: 31
-        font.styleName: "normal"
+        icon.source: "qrc:/images/settings_grey.png"
-        font.pixelSize: 15
+        onClicked: {
-        color: "#181922"
+            UiLogic.goToPage(PageEnum.GeneralSettings)
-        horizontalAlignment: Text.AlignLeft
-        verticalAlignment: Text.AlignVCenter
-        wrapMode: Text.Wrap
-        text: qsTr("How to use VPN")
         }
+    }
+
     LabelType {
         id: error_text
         x: 0
@@ -40,7 +41,7 @@ Item {
         text: UiLogic.labelErrorText
     }
     Text {
-        x: 0
+        anchors.horizontalCenter: parent.horizontalCenter
         y: 250
         width: 380
         height: 31
@@ -53,16 +54,10 @@ Item {
         wrapMode: Text.Wrap
         text: UiLogic.labelStateText
     }
-    Image {
+
-        x: 0
-        y: 0
-        width: 380
-        height: 325
-        source: "qrc:/images/background_connected.png"
-    }
     BasicButtonType {
         id: button_connect
-        x: 150
+        anchors.horizontalCenter: parent.horizontalCenter
         y: 200
         width: 80
         height: 40
@@ -82,76 +77,31 @@ Item {
         enabled: UiLogic.pushButtonConnectEnabled
     }
 
-    ImageButtonType {
-        x: 340
-        y: 10
-        width: 31
-        height: 31
-        icon.source: "qrc:/images/settings_grey.png"
-        onClicked: {
-            UiLogic.goToPage(PageEnum.GeneralSettings)
-        }
-    }
-    BasicButtonType {
-        id: button_add_site
-        x: 20
-        y: 560
-        width: 341
-        height: 40
-        text: qsTr("+ Add site")
-        enabled: UiLogic.pushButtonVpnAddSiteEnabled
-        background: Rectangle {
-            anchors.fill: parent
-            radius: 4
-            color: {
-                if (!button_add_site.enabled) {
-                    return "#484952"
-                }
-                if (button_add_site.containsMouse) {
-                    return "#282932"
-                }
-                return "#181922"
-            }
-        }
-
-        contentItem: Text {
-            anchors.fill: parent
-            font.family: "Lato"
-            font.styleName: "normal"
-            font.pixelSize: 16
-            color: "#D4D4D4"
-            text: button_add_site.text
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-        }
-        antialiasing: true
-        onClicked: {
-            UiLogic.goToPage(PageEnum.Sites)
-        }
-    }
     Item {
         x: 0
-        y: 360
+        anchors.bottom: line.top
-        width: 380
+        anchors.bottomMargin: 10
+        width: parent.width
         height: 51
         Image {
-            x: 311
+            anchors.horizontalCenter: upload_label.horizontalCenter
             y: 10
             width: 15
             height: 15
             source: "qrc:/images/upload.png"
         }
         Image {
-            x: 53
+            anchors.horizontalCenter: download_label.horizontalCenter
             y: 10
             width: 15
             height: 15
             source: "qrc:/images/download.png"
         }
         Text {
+            id: download_label
             x: 0
             y: 20
-            width: 127
+            width: 130
             height: 30
             font.family: "Lato"
             font.styleName: "normal"
@@ -163,9 +113,10 @@ Item {
             text: UiLogic.labelSpeedReceivedText
         }
         Text {
-            x: 260
+            id: upload_label
+            x: parent.width - width
             y: 20
-            width: 118
+            width: 130
             height: 30
             font.family: "Lato"
             font.styleName: "normal"
@@ -177,9 +128,38 @@ Item {
             text: UiLogic.labelSpeedSentText
         }
     }
-    Item {
+
+    Rectangle {
+        id: line
         x: 20
-        y: 470
+        width: parent.width - 40
+        height: 1
+        anchors.bottom: conn_type_label.top
+        anchors.bottomMargin: 10
+        color: "#DDDDDD"
+    }
+
+    Text {
+        id: conn_type_label
+        x: 20
+        anchors.bottom: conn_type_group.top
+        anchors.bottomMargin: 10
+        width: 281
+        height: 21
+        font.family: "Lato"
+        font.styleName: "normal"
+        font.pixelSize: 15
+        color: "#181922"
+        horizontalAlignment: Text.AlignLeft
+        verticalAlignment: Text.AlignVCenter
+        wrapMode: Text.Wrap
+        text: qsTr("How to use VPN")
+    }
+
+    Item {
+        id: conn_type_group
+        x: 20
+        anchors.bottom: button_add_site.top
         width: 351
         height: 91
         enabled: UiLogic.widgetVpnModeEnabled
@@ -221,4 +201,43 @@ Item {
             }
         }
     }
+
+    BasicButtonType {
+        id: button_add_site
+        anchors.horizontalCenter: parent.horizontalCenter
+        y: parent.height - 60
+        //anchors.bottom: parent.bottom
+        width: parent.width - 40
+        height: 40
+        text: qsTr("+ Add site")
+        enabled: UiLogic.pushButtonVpnAddSiteEnabled
+        background: Rectangle {
+            anchors.fill: parent
+            radius: 4
+            color: {
+                if (!button_add_site.enabled) {
+                    return "#484952"
+                }
+                if (button_add_site.containsMouse) {
+                    return "#282932"
+                }
+                return "#181922"
+            }
+        }
+
+        contentItem: Text {
+            anchors.fill: parent
+            font.family: "Lato"
+            font.styleName: "normal"
+            font.pixelSize: 16
+            color: "#D4D4D4"
+            text: button_add_site.text
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+        }
+        antialiasing: true
+        onClicked: {
+            UiLogic.goToPage(PageEnum.Sites)
+        }
+    }
 }

client/ui/qml/RadioButtonType.qml

@@ -1,15 +0,0 @@
-import QtQuick 2.12
-import QtQuick.Controls 2.12
-
-RadioButton {
-    id: root
-    contentItem: Text {
-        text: root.text
-        font.family: "Lato"
-        font.styleName: "normal"
-        font.pixelSize: 16
-        color: "#181922"
-        verticalAlignment: Text.AlignVCenter
-        leftPadding: root.indicator.width + root.spacing
-    }
-}

client/ui/qml/TitleBar.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import "./"
+import "Config"
 
 Rectangle {
     id: root

client/ui/qml/main.qml

@@ -1,12 +1,18 @@
 import QtQuick 2.14
 import QtQuick.Window 2.14
 import QtQuick.Controls 2.12
+import QtQuick.Controls.Material 2.12
 import PageEnum 1.0
 import Qt.labs.platform 1.1
 import QtQuick.Dialogs 1.1
 import "./"
+import "Pages"
+import "Config"
 
 Window {
+    Material.theme: Material.Dark
+    Material.accent: Material.Purple
+
     id: root
     visible: true
     width: GC.screenWidth
@@ -15,7 +21,7 @@ Window {
         UiLogic.onCloseWindow()
     }
 
-    flags: Qt.FramelessWindowHint
+    //flags: Qt.FramelessWindowHint
     title: "AmneziaVPN"
     function getPageComponent(page) {
         switch (page) {
@@ -232,16 +238,19 @@ Window {
 
     Rectangle {
         y: GC.isDesktop() ? titleBar.height : 0
-        width: GC.screenWidth
+//        width: GC.screenWidth
-        height: GC.screenHeight
+//        height: GC.screenHeight
+        anchors.fill: parent
         color: "white"
     }
 
     StackView {
         id: pageLoader
         y: GC.isDesktop() ? titleBar.height : 0
-        width: GC.screenWidth
+//        width: GC.screenWidth
-        height: GC.screenHeight
+//        height: GC.screenHeight
+        anchors.fill: parent
+
 //        initialItem: page_servers
         onCurrentItemChanged: {
             let pageEnum = root.getPageEnum(currentItem)