feat(GODT-2772): tweaked client parameter screen.

internal/frontend/bridge-gui/bridge-gui/Resources.qrc

@@ -49,6 +49,7 @@
         <file>qml/icons/ic-success.svg</file>
         <file>qml/icons/ic-three-dots-vertical.svg</file>
         <file>qml/icons/ic-trash.svg</file>
+        <file>qml/icons/ic-warning-orange.svg</file>
         <file>qml/icons/img-client-config-selector.svg</file>
         <file>qml/icons/img-mail-clients.svg</file>
         <file>qml/icons/img-mail-logo-wordmark-dark.svg</file>

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

@@ -21,6 +21,7 @@ Rectangle {
 
     property int _margin: 24
     property ColorScheme colorScheme
+    property bool highlightPassword
     property string hostname
     property string password
     property string port
@@ -68,7 +69,8 @@ Rectangle {
         }
         ConfigurationItem {
             colorScheme: root.colorScheme
-            label: qsTr("Password")
+            label: highlightPassword ? qsTr("Use this password") : qsTr("Password")
+            labelColor: highlightPassword ? colorScheme.signal_warning_active : colorScheme.text_norm
             value: root.password
         }
         ConfigurationItem {

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

@@ -21,6 +21,7 @@ Item {
 
     property var colorScheme
     property string label
+    property string labelColor: root.colorScheme.text_norm
     property string value
 
     Layout.fillWidth: true
@@ -35,9 +36,10 @@ Item {
 
             ColumnLayout {
                 Label {
+                    color: labelColor
                     colorScheme: root.colorScheme
                     text: root.label
-                    type: Label.Body
+                    type: Label.Body_semibold
                 }
                 TextEdit {
                     id: valueText

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

@@ -21,9 +21,11 @@ import ".."
 Rectangle {
     id: root
 
+    property ColorScheme colorScheme: wizard.colorScheme
     readonly property bool genericClient: SetupWizard.Client.Generic === wizard.client
     property var wizard
 
+    clip: true
     color: colorScheme.background_weak
 
     Item {
@@ -31,15 +33,13 @@ Rectangle {
         anchors.bottom: parent.bottom
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.top: parent.top
-        width: 800
+        width: 640
 
         ColumnLayout {
-            anchors.bottomMargin: 96
             anchors.left: parent.left
             anchors.right: parent.right
-            anchors.top: parent.top
+            anchors.verticalCenter: parent.verticalCenter
-            anchors.topMargin: 32
+            spacing: 16
-            spacing: 0
 
             Label {
                 Layout.alignment: Qt.AlignHCenter
@@ -47,31 +47,84 @@ Rectangle {
                 colorScheme: wizard.colorScheme
                 horizontalAlignment: Text.AlignHCenter
                 text: qsTr("Configure %1").arg(wizard.clientName())
-                type: Label.LabelType.Heading
+                type: Label.LabelType.Title
                 wrapMode: Text.WordWrap
             }
-            Label {
+            Rectangle {
-                id: descriptionLabel
+                Layout.fillWidth: true
-                Layout.alignment: Qt.AlignHCenter
+                border.color: colorScheme.border_norm
+                border.width: 1
+                color: "transparent"
+                height: childrenRect.height + 2 * 16
+                radius: 12
+
+                RowLayout {
+                    anchors.left: parent.left
+                    anchors.margins: 16
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                    spacing: 16
+
+                    Label {
+                        Layout.fillHeight: true
                         Layout.fillWidth: true
-                Layout.topMargin: 8
-                color: colorScheme.text_weak
                         colorScheme: wizard.colorScheme
-                horizontalAlignment: Text.AlignHCenter
+                        horizontalAlignment: Text.AlignLeft
-                text: genericClient ? qsTr("Here are the IMAP and SMTP configuration parameters for your email client") : qsTr("Here are your email configuration parameters for %1. \nWe have prepared an easy to follow configuration guide to help you setup your account in %1.").arg(wizard.clientName())
+                        text: (SetupWizard.Client.MicrosoftOutlook === wizard.client) ? qsTr("Are you unsure about your Outlook version or do you need assistance in configuring Outlook?") : qsTr("Do you need assistant is configuring %1?".arg(wizard.clientName()))
                         type: Label.LabelType.Body
+                        verticalAlignment: Text.AlignVCenter
                         wrapMode: Text.WordWrap
                     }
+                    Button {
+                        colorScheme: root.colorScheme
+                        text: qsTr("Open Guide")
+                    }
+                }
+            }
+            Rectangle {
+                Layout.fillWidth: true
+                border.color: colorScheme.signal_warning
+                border.width: 1
+                color: "transparent"
+                height: childrenRect.height + 2 * 16
+                radius: 12
+
+                RowLayout {
+                    anchors.left: parent.left
+                    anchors.margins: 16
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                    spacing: 16
+
+                    ColorImage {
+                        id: image
+                        height: 36
+                        source: "/qml/icons/ic-warning-orange.svg"
+                        sourceSize.height: height
+                        sourceSize.width: width
+                        width: height
+                    }
+                    Label {
+                        Layout.fillHeight: true
+                        Layout.fillWidth: true
+                        colorScheme: wizard.colorScheme
+                        horizontalAlignment: Text.AlignLeft
+                        text: qsTr("Copy paste the provided configuration parameters. Use the password below (not your Proton password), when adding your Proton account to %1.".arg(wizard.clientName()))
+                        type: Label.LabelType.Body
+                        verticalAlignment: Text.AlignVCenter
+                        wrapMode: Text.WordWrap
+                    }
+                }
+            }
             RowLayout {
                 id: configuration
-                Layout.fillHeight: true
                 Layout.fillWidth: true
-                Layout.topMargin: 32
+                spacing: 32
-                spacing: 64
 
                 Configuration {
                     Layout.fillWidth: true
                     colorScheme: wizard.colorScheme
+                    highlightPassword: true
                     hostname: Backend.hostname
                     password: wizard.user ? wizard.user.password : ""
                     port: Backend.imapPort.toString()
@@ -82,6 +135,7 @@ Rectangle {
                 Configuration {
                     Layout.fillWidth: true
                     colorScheme: wizard.colorScheme
+                    highlightPassword: true
                     hostname: Backend.hostname
                     password: wizard.user ? wizard.user.password : ""
                     port: Backend.smtpPort.toString()
@@ -92,21 +146,15 @@ Rectangle {
             }
             Button {
                 Layout.alignment: Qt.AlignHCenter
-                Layout.preferredWidth: 444
+                Layout.preferredWidth: 304
-                Layout.topMargin: 32
+                colorScheme: root.colorScheme
-                colorScheme: wizard.colorScheme
+                secondary: true
-                text: qsTr("Open configuration guide")
+                secondaryIsOpaque: true
-                visible: !genericClient
+                text: qsTr("Continue")
-            }
-            Button {
-                Layout.alignment: Qt.AlignHCenter
-                Layout.preferredWidth: 444
-                Layout.topMargin: 32
-                colorScheme: wizard.colorScheme
-                text: qsTr("Done")
 
                 onClicked: wizard.closeWizard()
             }
         }
     }
 }
+

internal/frontend/bridge-gui/bridge-gui/qml/icons/ic-warning-orange.svg

@@ -0,0 +1,11 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.9864 4.0315C14.3445 1.75773 17.6381 1.75773 18.9961 4.0315L31.232 24.5182C32.6254 26.8512 30.9445 29.8129 28.2272 29.8129H3.75539C1.03801 29.8129 -0.642844 26.8512 0.75053 24.5182L12.9864 4.0315Z" fill="url(#paint0_linear_4081_29778)"/>
+<path d="M14.5387 12.1944C14.5432 11.3954 15.1922 10.75 15.9912 10.75C16.7903 10.75 17.4392 11.3954 17.4437 12.1944L17.4829 19.25C17.4875 20.0771 16.8183 20.75 15.9912 20.75C15.1641 20.75 14.4949 20.0771 14.4995 19.25L14.5387 12.1944Z" fill="white"/>
+<path d="M17.4912 23.75C17.4912 24.5784 16.8196 25.25 15.9912 25.25C15.1628 25.25 14.4912 24.5784 14.4912 23.75C14.4912 22.9216 15.1628 22.25 15.9912 22.25C16.8196 22.25 17.4912 22.9216 17.4912 23.75Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_4081_29778" x1="15.9913" y1="2.09253" x2="15.9913" y2="42.104" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFB800"/>
+<stop offset="1" stop-color="#FF8419"/>
+</linearGradient>
+</defs>
+</svg>