feat(GODT-2772): misc tweaks.

- Step description box tweaks and text color changes.
- Factored out some constants (margins and dimensions.
- Removed the ProtonStyle.px scaling which was useless as it was not applied everywhere.

internal/frontend/bridge-gui/bridge-gui/qml/AccountDelegate.qml

@@ -22,7 +22,7 @@ Item {
         LargeView
     }
 
-    property var _spacing: 12 * ProtonStyle.px
+    property var _spacing: 12
     property ColorScheme colorScheme
     property color progressColor: {
         if (!root.enabled)
@@ -154,7 +154,7 @@ Item {
                 }
             }
             Item {
-                implicitHeight: root.type === AccountDelegate.LargeView ? 6 * ProtonStyle.px : 0
+                implicitHeight: root.type === AccountDelegate.LargeView ? 6 : 0
             }
             RowLayout {
                 spacing: 0
@@ -222,15 +222,15 @@ Item {
                 }
             }
             Item {
-                implicitHeight: root.type === AccountDelegate.LargeView ? 3 * ProtonStyle.px : 0
+                implicitHeight: root.type === AccountDelegate.LargeView ? 3 : 0
             }
             Rectangle {
                 id: progress_bar
                 color: root.colorScheme.border_weak
-                height: 4 * ProtonStyle.px
+                height: 4
                 radius: ProtonStyle.progress_bar_radius
                 visible: root.user ? root.type === AccountDelegate.LargeView : false
-                width: 140 * ProtonStyle.px
+                width: 140
 
                 Rectangle {
                     id: progress_bar_filled

internal/frontend/bridge-gui/bridge-gui/qml/MainWindow.qml

@@ -22,8 +22,6 @@ import "SetupWizard"
 ApplicationWindow {
     id: root
 
-    property int _defaultHeight: 780
-    property int _defaultWidth: 1080
     property var notifications
 
     function layoutForUserCount(userCount) {
@@ -75,10 +73,11 @@ ApplicationWindow {
     }
 
     colorScheme: ProtonStyle.currentStyle
-    height: _defaultHeight
+    height: ProtonStyle.window_default_height
-    minimumWidth: _defaultWidth
+    minimumHeight:ProtonStyle.window_minimum_height
+    minimumWidth: ProtonStyle.window_minimum_width
     visible: true
-    width: _defaultWidth
+    width: ProtonStyle.window_default_width
 
     Component.onCompleted: {
         layoutForUserCount(Backend.users.count);

internal/frontend/bridge-gui/bridge-gui/qml/Proton/Style.qml

@@ -20,21 +20,21 @@ import "."
 QtObject {
     id: root
 
-    property real account_hover_radius: 12 * root.px // px
+    property int account_hover_radius: 12
-    property real account_row_radius: 12 * root.px // px
+    property int account_row_radius: 12
-    property real avatar_radius: 8 * root.px // px
+    property int avatar_radius: 8
-    property real banner_radius: 12 * root.px // px
+    property int banner_radius: 12
-    property real big_avatar_radius: 12 * root.px // px
+    property int big_avatar_radius: 12
     property int body_font_size: 14
-    property real body_letter_spacing: 0.2 * root.px
+    property real body_letter_spacing: 0.2
     property int body_line_height: 20
-    property real button_radius: 8 * root.px // px
+    property int button_radius: 8
     property int caption_font_size: 12
-    property real caption_letter_spacing: 0.4 * root.px
+    property real caption_letter_spacing: 0.4
     property int caption_line_height: 16
-    property real card_radius: 12 * root.px // px
+    property int card_radius: 12
-    property real checkbox_radius: 4 * root.px // px
+    property int checkbox_radius: 4
-    property real context_item_radius: 8 * root.px // px
+    property int context_item_radius: 8
     property ColorScheme currentStyle: lightStyle
     property ColorScheme darkProminentStyle: ColorScheme {
         id: _darkProminentStyle
@@ -178,7 +178,7 @@ QtObject {
         text_norm: "#FFFFFF"
         text_weak: "#A7A4B5"
     }
-    property real dialog_radius: 12 * root.px // px
+    property int dialog_radius: 12
     property int fontWeight_100: Font.Thin
     property int fontWeight_200: Font.Light
     property int fontWeight_300: Font.ExtraLight
@@ -202,7 +202,7 @@ QtObject {
     }
     property int heading_font_size: 28
     property int heading_line_height: 36
-    property real input_radius: 8 * root.px // px
+    property int input_radius: 8
     property int lead_font_size: 18
     property int lead_line_height: 26
     property ColorScheme lightProminentStyle: ColorScheme {
@@ -354,19 +354,33 @@ QtObject {
         text_norm: "#0C0C14"
         text_weak: "#706D6B"
     }
-    property real progress_bar_radius: 3 * root.px // px
+    property int progress_bar_radius: 3
-    property real px: 1.00 // px
     property int title_font_size: 20
     property int title_line_height: 24
-    property real tooltip_radius: 8 * root.px // px
+    property int tooltip_radius: 8
 
     // WebView overlay styling
-    property real web_view_button_width: 320 * root.px
+    property int web_view_button_width: 320
-    property real web_view_corner_radius: 10 * root.px
+    property int web_view_corner_radius: 10
-    property real web_view_overlay_button_vertical_margin: 10 * root.px
+    property int web_view_overlay_button_vertical_margin: 10
-    property real web_view_overlay_horizontal_margin: 10 * root.px
+    property int web_view_overlay_horizontal_margin: 10
-    property real web_view_overlay_margin: 50 * root.px
+    property int web_view_overlay_margin: 50
     property real web_view_overlay_opacity: 0.6
-    property real web_view_overlay_vertical_margin: web_view_corner_radius
+    property int web_view_overlay_vertical_margin: web_view_corner_radius
-    property real web_view_overley_border_width: 1 * root.px
+    property int web_view_overley_border_width: 1
+
+    property int window_default_height: 780
+    property int window_default_width: 1080
+    property int window_minimum_height: 650
+    property int window_minimum_width: window_default_width
+
+    // setup wizard  constant
+    property int wizard_pane_bottomMargin: 92
+    property int wizard_pane_width: 364
+    property int wizard_window_margin: 40
+    property int wizard_spacing_extra_large: 32
+    property int wizard_spacing_extra_small: 4
+    property int wizard_spacing_large: 24
+    property int wizard_spacing_medium: 16
+    property int wizard_spacing_small: 8
 }

internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigAppleMail.qml

@@ -73,7 +73,7 @@ Item {
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.verticalCenter: parent.verticalCenter
-                spacing: 24
+                spacing: ProtonStyle.wizard_spacing_large
 
                 Connections {
                     function onCertificateInstallCanceled() {
@@ -95,7 +95,7 @@ Item {
                 }
                 ColumnLayout {
                     Layout.fillWidth: true
-                    spacing: 16
+                    spacing: ProtonStyle.wizard_spacing_medium
 
                     Label {
                         Layout.alignment: Qt.AlignHCenter
@@ -126,7 +126,7 @@ Item {
                 }
                 ColumnLayout {
                     Layout.fillWidth: true
-                    spacing: 16
+                    spacing: ProtonStyle.wizard_spacing_medium
 
                     Button {
                         Layout.fillWidth: true
@@ -154,11 +154,11 @@ Item {
                     }
                     ColumnLayout {
                         Layout.fillWidth: true
-                        spacing: 8
+                        spacing: ProtonStyle.wizard_spacing_small
 
                         RowLayout {
                             Layout.fillWidth: true
-                            spacing: 4
+                            spacing: ProtonStyle.wizard_spacing_extra_small
 
                             ColorImage {
                                 color: wizard.colorScheme.signal_danger
@@ -199,11 +199,11 @@ Item {
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.verticalCenter: parent.verticalCenter
-                spacing: 24
+                spacing: ProtonStyle.wizard_spacing_large
 
                 ColumnLayout {
                     Layout.fillWidth: true
-                    spacing: 16
+                    spacing: ProtonStyle.wizard_spacing_medium
 
                     Label {
                         Layout.alignment: Qt.AlignHCenter
@@ -228,13 +228,12 @@ Item {
                 Image {
                     Layout.alignment: Qt.AlignHCenter
                     height: 102
-                    opacity: certificateInstall.waitingForCert ? 0.3 : 1.0
                     source: "/qml/icons/img-macos-profile-screenshot.png"
                     width: 364
                 }
                 ColumnLayout {
                     Layout.fillWidth: true
-                    spacing: 16
+                    spacing: ProtonStyle.wizard_spacing_medium
 
                     Button {
                         Layout.fillWidth: true

internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigEnd.qml

@@ -32,13 +32,13 @@ Rectangle {
         anchors.top: parent.top
         anchors.topMargin: 32
         clip: true
-        width: 364
+        width: ProtonStyle.wizard_pane_width
 
         ColumnLayout {
             anchors.left: parent.left
             anchors.right: parent.right
             anchors.verticalCenter: parent.verticalCenter
-            spacing: 16
+            spacing: ProtonStyle.wizard_spacing_medium
 
             Image {
                 Layout.alignment: Qt.AlignHCenter

internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigParameters.qml

@@ -37,7 +37,7 @@ Rectangle {
             anchors.left: parent.left
             anchors.right: parent.right
             anchors.verticalCenter: parent.verticalCenter
-            spacing: 16
+            spacing: ProtonStyle.wizard_spacing_medium
 
             Label {
                 Layout.alignment: Qt.AlignHCenter
@@ -53,15 +53,15 @@ Rectangle {
                 border.color: colorScheme.border_norm
                 border.width: 1
                 color: "transparent"
-                height: childrenRect.height + 2 * 16
+                height: childrenRect.height + 2 * ProtonStyle.wizard_spacing_medium
                 radius: 12
 
                 RowLayout {
                     anchors.left: parent.left
-                    anchors.margins: 16
+                    anchors.margins: ProtonStyle.wizard_spacing_medium
                     anchors.right: parent.right
                     anchors.top: parent.top
-                    spacing: 8
+                    spacing: ProtonStyle.wizard_spacing_small
 
                     Label {
                         Layout.fillHeight: true
@@ -89,15 +89,15 @@ Rectangle {
                 border.color: colorScheme.signal_warning
                 border.width: 1
                 color: "transparent"
-                height: childrenRect.height + 2 * 16
+                height: childrenRect.height + 2 * ProtonStyle.wizard_spacing_medium
-                radius: 12
+                radius: ProtonStyle.banner_radius
 
                 RowLayout {
                     anchors.left: parent.left
-                    anchors.margins: 16
+                    anchors.margins: ProtonStyle.wizard_spacing_medium
                     anchors.right: parent.right
                     anchors.top: parent.top
-                    spacing: 16
+                    spacing: ProtonStyle.wizard_spacing_medium
 
                     ColorImage {
                         id: image
@@ -122,7 +122,7 @@ Rectangle {
             RowLayout {
                 id: configuration
                 Layout.fillWidth: true
-                spacing: 32
+                spacing: ProtonStyle.wizard_spacing_extra_large
 
                 Configuration {
                     Layout.fillWidth: true

internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigSelector.qml

@@ -26,12 +26,12 @@ Item {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.verticalCenter: parent.verticalCenter
-        spacing: 16
+        spacing: ProtonStyle.wizard_spacing_medium
 
         Label {
             Layout.alignment: Qt.AlignHCenter
             Layout.fillWidth: true
-            Layout.topMargin: 16
+            Layout.topMargin: ProtonStyle.wizard_spacing_medium
             colorScheme: wizard.colorScheme
             horizontalAlignment: Qt.AlignHCenter
             text: qsTr("Select your email client")

internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientListItem.qml

@@ -36,14 +36,14 @@ Rectangle {
         return colorScheme.background_norm;
     }
     height: 68
-    radius: 12
+    radius: ProtonStyle.banner_radius
 
     RowLayout {
         anchors.fill: parent
-        anchors.margins: 16
+        anchors.margins: ProtonStyle.wizard_spacing_medium
 
         ColorImage {
-            height: 36
+            height: sourceSize.height
             source: iconSource
             sourceSize.height: 36
         }

internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/HelpButton.qml

@@ -19,17 +19,19 @@ Button {
     id: root
 
     property var wizard
+    readonly property int _iconPadding: 8 // The SVG image we use has internal padding that we need to compensate for alignment.
+    readonly property int _iconSize: 24
 
     anchors.bottom: parent.bottom
-    anchors.bottomMargin: 32
+    anchors.bottomMargin: ProtonStyle.wizard_window_margin - _iconPadding
     anchors.right: parent.right
-    anchors.rightMargin: 32
+    anchors.rightMargin: ProtonStyle.wizard_window_margin - _iconPadding
     colorScheme: wizard.colorScheme
     horizontalPadding: 0
     icon.color: wizard.colorScheme.text_weak
-    icon.height: 24
+    icon.height: _iconSize
     icon.source: "/qml/icons/ic-question-circle.svg"
-    icon.width: 24
+    icon.width: _iconSize
     verticalPadding: 0
 
     onClicked: {

internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml

@@ -87,7 +87,7 @@ Item {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.verticalCenter: parent.verticalCenter
-        spacing: 16
+        spacing: ProtonStyle.wizard_spacing_medium
 
         Image {
             id: icon

internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Login.qml

@@ -151,11 +151,11 @@ FocusScope {
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.verticalCenter: parent.verticalCenter
-                spacing: 16
+                spacing: ProtonStyle.wizard_spacing_medium
 
                 ColumnLayout {
                     Layout.fillWidth: true
-                    spacing: 8
+                    spacing: ProtonStyle.wizard_spacing_small
 
                     Label {
                         Layout.alignment: Qt.AlignHCenter
@@ -287,11 +287,11 @@ FocusScope {
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.verticalCenter: parent.verticalCenter
-                spacing: 16
+                spacing: ProtonStyle.wizard_spacing_medium
 
                 ColumnLayout {
                     Layout.fillWidth: true
-                    spacing: 8
+                    spacing: ProtonStyle.wizard_spacing_small
 
                     Label {
                         Layout.alignment: Qt.AlignHCenter
@@ -388,11 +388,11 @@ FocusScope {
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.verticalCenter: parent.verticalCenter
-                spacing: 16
+                spacing: ProtonStyle.wizard_spacing_medium
 
                 ColumnLayout {
                     Layout.fillWidth: true
-                    spacing: 8
+                    spacing: ProtonStyle.wizard_spacing_small
 
                     Label {
                         Layout.alignment: Qt.AlignHCenter

internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Onboarding.qml

@@ -24,7 +24,7 @@ Item {
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.verticalCenter: parent.verticalCenter
-        spacing: 24
+        spacing: ProtonStyle.wizard_spacing_large
 
         StepDescriptionBox {
             colorScheme: wizard.colorScheme

internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml

@@ -168,12 +168,12 @@ Item {
                 LeftPane {
                     id: leftContent
                     anchors.bottom: parent.bottom
-                    anchors.bottomMargin: 92
+                    anchors.bottomMargin: ProtonStyle.wizard_pane_bottomMargin
                     anchors.horizontalCenter: parent.horizontalCenter
                     anchors.top: parent.top
-                    anchors.topMargin: 40
+                    anchors.topMargin: ProtonStyle.wizard_window_margin
                     clip: true
-                    width: 364
+                    width: ProtonStyle.wizard_pane_width
                     wizard: root
 
                     Connections {
@@ -190,13 +190,13 @@ Item {
                 Image {
                     id: mailLogoWithWordmark
                     anchors.bottom: parent.bottom
-                    anchors.bottomMargin: 40
+                    anchors.bottomMargin: ProtonStyle.wizard_window_margin
                     anchors.horizontalCenter: parent.horizontalCenter
-                    height: 36
+                    height: sourceSize.height
                     source: root.colorScheme.mail_logo_with_wordmark
                     sourceSize.height: 36
                     sourceSize.width: 134
-                    width: 134
+                    width: sourceSize.width
                 }
             }
             Rectangle {
@@ -208,13 +208,13 @@ Item {
                 StackLayout {
                     id: rightContent
                     anchors.bottom: parent.bottom
-                    anchors.bottomMargin: 92
+                    anchors.bottomMargin: ProtonStyle.wizard_pane_bottomMargin
                     anchors.horizontalCenter: parent.horizontalCenter
                     anchors.top: parent.top
-                    anchors.topMargin: 40
+                    anchors.topMargin: ProtonStyle.wizard_window_margin
                     clip: true
                     currentIndex: 0
-                    width: 364
+                    width: ProtonStyle.wizard_pane_width
 
                     // rightContent stack index 0
                     Onboarding {
@@ -267,15 +267,15 @@ Item {
     Button {
         id: backButton
         anchors.left: parent.left
-        anchors.leftMargin: 40
+        anchors.leftMargin: ProtonStyle.wizard_window_margin
         anchors.top: parent.top
-        anchors.topMargin: 40
+        anchors.topMargin: ProtonStyle.wizard_window_margin
         colorScheme: root.colorScheme
         icon.source: "/qml/icons/ic-chevron-left.svg"
         iconOnTheLeft: true
         secondary: true
         secondaryIsOpaque: true
-        spacing: 8
+        spacing: ProtonStyle.wizard_spacing_small
         text: qsTr("Back")
         visible: backAction != null
 

internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/StepDescriptionBox.qml

@@ -15,7 +15,7 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
 
-Item {
+RowLayout {
     id: root
 
     property ColorScheme colorScheme
@@ -24,43 +24,36 @@ Item {
     property int iconSize: 64
     property string title
 
-    implicitHeight: children[0].implicitHeight
+    spacing: ProtonStyle.wizard_spacing_large
-    implicitWidth: children[0].implicitWidth
 
-    RowLayout {
+    Image {
-        anchors.fill: parent
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-        spacing: 24
+        Layout.preferredHeight: iconSize
+        Layout.preferredWidth: iconSize
+        mipmap: true
+        source: root.icon
+    }
+    ColumnLayout {
+        Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+        Layout.fillWidth: true
+        spacing: ProtonStyle.wizard_spacing_small
 
-        Image {
+        Label {
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
-            Layout.preferredHeight: iconSize
+            Layout.fillHeight: false
-            Layout.preferredWidth: iconSize
-            mipmap: true
-            source: root.icon
-        }
-        ColumnLayout {
-            Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
             Layout.fillWidth: true
-            spacing: 8
+            colorScheme: root.colorScheme
-
+            text: root.title
-            Label {
+            type: Label.LabelType.Body_bold
-                Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+        }
-                Layout.fillHeight: false
+        Label {
-                Layout.fillWidth: true
+            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
-                colorScheme: root.colorScheme
+            Layout.fillHeight: true
-                text: root.title
+            Layout.fillWidth: true
-                type: Label.LabelType.Body_bold
+            colorScheme: root.colorScheme
-            }
+            text: root.description
-            Label {
+            type: Label.LabelType.Body
-                Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+            verticalAlignment: Text.AlignTop
-                Layout.fillHeight: true
-                Layout.fillWidth: true
-                color: root.colorScheme.text_weak
-                colorScheme: root.colorScheme
-                text: root.description
-                type: Label.LabelType.Body
-                verticalAlignment: Text.AlignTop
-            }
         }
     }
 }