fix: hide renew button for free

client/ui/qml/Components/ServersListView.qml

@@ -67,7 +67,12 @@ ListViewType {
                     Layout.fillWidth: true
 
                     text: name
-                    descriptionText: serverDescription
+                    descriptionText: isServerFromGatewayApi && (isSubscriptionExpired || isSubscriptionExpiringSoon)
+                        ? (isSubscriptionExpired ? qsTr("Subscription expired. Please renew.") : qsTr("Subscription expiring soon."))
+                        : serverDescription
+                    descriptionColor: isServerFromGatewayApi && (isSubscriptionExpired || isSubscriptionExpiringSoon)
+                        ? (isSubscriptionExpired ? AmneziaStyle.color.vibrantRed : AmneziaStyle.color.goldenApricot)
+                        : AmneziaStyle.color.mutedGray
 
                     checked: index === root.selectedIndex
                     checkable: !ConnectionController.isConnected
@@ -126,18 +131,6 @@ ListViewType {
                 }
             }
 
-            CaptionTextType {
-                visible: isServerFromGatewayApi && (isSubscriptionExpired || isSubscriptionExpiringSoon)
-
-                Layout.fillWidth: true
-                Layout.leftMargin: 64
-                Layout.bottomMargin: 8
-
-                text: isSubscriptionExpired ? qsTr("Subscription expired. Please renew.") : qsTr("Subscription expiring soon.")
-                color: isSubscriptionExpired ? AmneziaStyle.color.vibrantRed : AmneziaStyle.color.goldenApricot
-                wrapMode: Text.WordWrap
-            }
-
             DividerType {
                 Layout.fillWidth: true
                 Layout.leftMargin: 0

client/ui/qml/Pages2/PageSettingsApiAvailableCountries.qml

@@ -20,9 +20,12 @@ PageType {
     property var processedServer
     property bool subscriptionExpired: false
     property bool subscriptionExpiringSoon: false
+    property bool isSubscriptionRenewalAvailable: false
+
     function updateSubscriptionState() {
         root.subscriptionExpired = ServersModel.getProcessedServerData("isSubscriptionExpired")
         root.subscriptionExpiringSoon = ServersModel.getProcessedServerData("isSubscriptionExpiringSoon")
+        root.isSubscriptionRenewalAvailable = ApiAccountInfoModel.data("isComponentVisible")
     }
 
     Component.onCompleted: {
@@ -38,6 +41,14 @@ PageType {
         }
     }
 
+    Connections {
+        target: ApiAccountInfoModel
+
+        function onModelReset() {
+            root.updateSubscriptionState()
+        }
+    }
+
     SortFilterProxyModel {
         id: proxyServersModel
         objectName: "proxyServersModel"
@@ -87,7 +98,7 @@ PageType {
                 Layout.fillWidth: true
                 Layout.leftMargin: 16
                 Layout.rightMargin: 16
-                Layout.bottomMargin: 4
+                Layout.bottomMargin: root.subscriptionExpired || root.subscriptionExpiringSoon ? 0 : 4
 
                 actionButtonImage: "qrc:/images/controls/settings.svg"
 
@@ -105,26 +116,27 @@ PageType {
                 }
             }
 
-            CaptionTextType {
+            ParagraphTextType {
                 visible: root.subscriptionExpired || root.subscriptionExpiringSoon
 
                 Layout.fillWidth: true
                 Layout.leftMargin: 16
                 Layout.rightMargin: 16
-                Layout.topMargin: 4
+                Layout.topMargin: 12
 
                 text: root.subscriptionExpired ? qsTr("Subscription expired") : qsTr("Subscription expiring soon")
                 color: root.subscriptionExpired ? AmneziaStyle.color.vibrantRed : AmneziaStyle.color.goldenApricot
             }
 
             BasicButtonType {
-                visible: root.subscriptionExpired || root.subscriptionExpiringSoon
+                visible: (root.subscriptionExpired || root.subscriptionExpiringSoon)
+                    && root.isSubscriptionRenewalAvailable
 
                 Layout.fillWidth: true
                 Layout.leftMargin: 16
                 Layout.rightMargin: 16
-                Layout.topMargin: 8
+                Layout.topMargin: 28
-                Layout.bottomMargin: 4
+                Layout.bottomMargin: 0
 
                 defaultColor: AmneziaStyle.color.paleGray
                 hoveredColor: AmneziaStyle.color.lightGray
@@ -138,11 +150,11 @@ PageType {
                 }
             }
 
-            CaptionTextType {
+            ParagraphTextType {
                 Layout.fillWidth: true
                 Layout.leftMargin: 16
                 Layout.rightMargin: 16
-                Layout.topMargin: (root.subscriptionExpired || root.subscriptionExpiringSoon) ? 8 : 4
+                Layout.topMargin: (root.subscriptionExpired || root.subscriptionExpiringSoon) ? 12 : 4
                 Layout.bottomMargin: 8
 
                 text: qsTr("Location for connection")

client/ui/qml/Pages2/PageSettingsApiServerInfo.qml

@@ -2,7 +2,6 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import QtQuick.Dialogs
-import Qt5Compat.GraphicalEffects
 
 import SortFilterProxyModel 0.2
 
@@ -55,10 +54,12 @@ PageType {
 
     property bool isSubscriptionExpired: false
     property bool isSubscriptionExpiringSoon: false
+    property bool isSubscriptionRenewalAvailable: false
 
     function updateSubscriptionState() {
         root.isSubscriptionExpired = ApiAccountInfoModel.data("isSubscriptionExpired")
         root.isSubscriptionExpiringSoon = ApiAccountInfoModel.data("isSubscriptionExpiringSoon")
+        root.isSubscriptionRenewalAvailable = ApiAccountInfoModel.data("isComponentVisible")
     }
 
     Component.onCompleted: {
@@ -124,7 +125,7 @@ PageType {
                 Layout.fillWidth: true
                 Layout.leftMargin: 16
                 Layout.rightMargin: 16
-                Layout.bottomMargin: 10
+                Layout.bottomMargin: root.isSubscriptionExpired || root.isSubscriptionExpiringSoon ? 0 : 10
 
                 actionButtonImage: "qrc:/images/controls/edit-3.svg"
 
@@ -135,13 +136,13 @@ PageType {
                 }
             }
 
-            Text {
+            ParagraphTextType {
                 visible: root.isSubscriptionExpired || root.isSubscriptionExpiringSoon
 
                 Layout.fillWidth: true
                 Layout.leftMargin: 16
                 Layout.rightMargin: 16
-                Layout.topMargin: 4
+                Layout.topMargin: 12
 
                 text: root.isSubscriptionExpired
                     ? qsTr("Subscription expired")
@@ -150,10 +151,6 @@ PageType {
                 color: root.isSubscriptionExpired
                     ? AmneziaStyle.color.vibrantRed
                     : AmneziaStyle.color.goldenApricot
-
-                font.pixelSize: 14
-                font.weight: Font.Medium
-                wrapMode: Text.WordWrap
             }
 
             ParagraphTextType {
@@ -170,7 +167,8 @@ PageType {
             }
 
             BasicButtonType {
-                visible: root.isSubscriptionExpired || root.isSubscriptionExpiringSoon
+                visible: (root.isSubscriptionExpired || root.isSubscriptionExpiringSoon)
+                    && root.isSubscriptionRenewalAvailable
 
                 Layout.fillWidth: true
                 Layout.leftMargin: 16
@@ -226,52 +224,33 @@ PageType {
 
             readonly property bool isVisibleForAmneziaFree: ApiAccountInfoModel.data("isComponentVisible")
 
-            Item {
+            BasicButtonType {
                 visible: !root.isSubscriptionExpired && !root.isSubscriptionExpiringSoon
+                    && root.isSubscriptionRenewalAvailable
 
-                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignHCenter
-                implicitHeight: renewRow.implicitHeight + 32
+                Layout.topMargin: 16
+                Layout.bottomMargin: 16
 
-                MouseArea {
+                implicitHeight: 25
-                    anchors.fill: parent
-                    cursorShape: Qt.PointingHandCursor
-                    onClicked: ApiSettingsController.getRenewalLink()
-                }
 
-                Row {
+                defaultColor: AmneziaStyle.color.transparent
-                    id: renewRow
+                hoveredColor: AmneziaStyle.color.translucentWhite
-                    anchors.centerIn: parent
+                pressedColor: AmneziaStyle.color.sheerWhite
-                    spacing: 12
+                textColor: AmneziaStyle.color.goldenApricot
+                leftImageSource: "qrc:/images/controls/refresh-cw.svg"
+                leftImageColor: AmneziaStyle.color.goldenApricot
 
-                    Item {
+                text: qsTr("Renew subscription")
-                        width: renewIcon.implicitWidth
-                        height: renewIcon.implicitHeight
-                        anchors.verticalCenter: parent.verticalCenter
 
-                        Image {
+                clickedFunc: function() {
-                            id: renewIcon
+                    ApiSettingsController.getRenewalLink()
-                            source: "qrc:/images/controls/refresh-cw.svg"
-                        }
-
-                        ColorOverlay {
-                            anchors.fill: renewIcon
-                            source: renewIcon
-                            color: AmneziaStyle.color.goldenApricot
-                        }
-                    }
-
-                    Text {
-                        text: qsTr("Renew subscription")
-                        color: AmneziaStyle.color.goldenApricot
-                        font.pixelSize: 18
-                        font.weight: Font.Medium
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
                 }
             }
 
             DividerType {
                 visible: !root.isSubscriptionExpired && !root.isSubscriptionExpiringSoon
+                    && root.isSubscriptionRenewalAvailable
             }
 
             SwitcherType {