diff --git a/internal/frontend/bridge-gui/bridge-gui/Resources.qrc b/internal/frontend/bridge-gui/bridge-gui/Resources.qrc
index e7444c81..488b8637 100644
--- a/internal/frontend/bridge-gui/bridge-gui/Resources.qrc
+++ b/internal/frontend/bridge-gui/bridge-gui/Resources.qrc
@@ -20,6 +20,7 @@
qml/icons/ic-alert.svgqml/icons/ic-apple-mail.svgqml/icons/ic-arrow-left.svg
+ qml/icons/ic-bridge.svgqml/icons/ic-card-identity.svgqml/icons/ic-check.svgqml/icons/ic-chevron-down.svg
@@ -49,6 +50,7 @@
qml/icons/ic-success.svgqml/icons/ic-three-dots-vertical.svgqml/icons/ic-trash.svg
+ qml/icons/img-mail-clients.svgqml/icons/img-mail-logo-wordmark-dark.svgqml/icons/img-mail-logo-wordmark.svgqml/icons/img-proton-logos.png
@@ -108,6 +110,8 @@
qml/SetupGuide.qmlqml/SetupWizard/SetupWizard.qmlqml/SetupWizard/OnboardingLeftPane.qml
+ qml/SetupWizard/OnboardingRightPane.qml
+ qml/SetupWizard/StepDescriptionBox.qmlqml/SignIn.qmlqml/ConnectionModeSettings.qmlqml/SplashScreen.qml
diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/OnboardingRightPane.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/OnboardingRightPane.qml
new file mode 100644
index 00000000..5a66de44
--- /dev/null
+++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/OnboardingRightPane.qml
@@ -0,0 +1,61 @@
+// Copyright (c) 2023 Proton AG
+// This file is part of Proton Mail Bridge.
+// Proton Mail Bridge is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+// Proton Mail Bridge is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+// You should have received a copy of the GNU General Public License
+// along with Proton Mail Bridge. If not, see .
+import QtQml
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Controls.impl
+import "." as Proton
+
+Item {
+ id: root
+
+ property ColorScheme colorScheme
+
+ ColumnLayout {
+ anchors.left: parent.left
+ anchors.right: parent.right
+ anchors.top: parent.top
+ spacing: 96
+
+ Label {
+ Layout.alignment: Qt.AlignHCenter
+ Layout.fillWidth: true
+ colorScheme: root.colorScheme
+ horizontalAlignment: Text.AlignHCenter
+ text: qsTr("Two-step process")
+ type: Label.LabelType.Heading
+ }
+ StepDescriptionBox {
+ colorScheme: root.colorScheme
+ description: "Connect Bridge to your Proton account"
+ icon: "/qml/icons/ic-bridge.svg"
+ title: "Step 1"
+ iconSize: 48
+ }
+ StepDescriptionBox {
+ colorScheme: root.colorScheme
+ description: "Connect your email client to Bridge"
+ icon: "/qml/icons/img-mail-clients.svg"
+ title: "Step 2"
+ iconSize: 64
+
+ }
+ Button {
+ Layout.alignment: Qt.AlignHCenter
+ Layout.preferredWidth: 320
+ colorScheme: root.colorScheme
+ text: "Let's start"
+ }
+ }
+}
\ No newline at end of file
diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml
index 03ce9e89..a142f6ff 100644
--- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml
+++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml
@@ -23,7 +23,7 @@ Item {
property ColorScheme colorScheme
function start() {
- root.visible = true
+ root.visible = true;
}
RowLayout {
@@ -46,10 +46,9 @@ Item {
width: 444
OnboardingLeftPane {
- colorScheme: root.colorScheme
anchors.fill: parent
+ colorScheme: root.colorScheme
}
-
}
Image {
id: mailLogoWithWordmark
@@ -71,15 +70,19 @@ Item {
Layout.fillWidth: true
color: root.colorScheme.background_weak
- Rectangle {
+ Item {
id: rightContent
anchors.bottom: parent.bottom
anchors.bottomMargin: 96
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 96
- color: "#ff0000"
width: 444
+
+ OnboardingRightPane {
+ anchors.fill: parent
+ colorScheme: root.colorScheme
+ }
}
Label {
id: reportProblemLink
diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/StepDescriptionBox.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/StepDescriptionBox.qml
new file mode 100644
index 00000000..652e7894
--- /dev/null
+++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/StepDescriptionBox.qml
@@ -0,0 +1,68 @@
+// Copyright (c) 2023 Proton AG
+// This file is part of Proton Mail Bridge.
+// Proton Mail Bridge is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+// Proton Mail Bridge is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+// You should have received a copy of the GNU General Public License
+// along with Proton Mail Bridge. If not, see .
+import QtQml
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Controls.impl
+import "." as Proton
+
+Item {
+ id: root
+
+ property ColorScheme colorScheme
+ property string description
+ property string icon
+ property int iconSize: 64
+ property string title
+
+ implicitHeight: children[0].implicitHeight
+ implicitWidth: children[0].implicitWidth
+
+ RowLayout {
+ anchors.fill: parent
+ spacing: 24
+
+ Image {
+ Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+ Layout.preferredHeight: iconSize
+ Layout.preferredWidth: iconSize
+ antialiasing: true
+ mipmap: true
+ source: root.icon
+ }
+ ColumnLayout {
+ Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+ Layout.fillWidth: true
+ spacing: 8
+
+ Label {
+ Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+ Layout.fillHeight: false
+ Layout.fillWidth: true
+ colorScheme: root.colorScheme
+ text: root.title
+ type: Label.LabelType.Body_bold
+ }
+ Label {
+ Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+ colorScheme: root.colorScheme
+ text: root.description
+ type: Label.LabelType.Body
+ verticalAlignment: Text.AlignTop
+ }
+ }
+ }
+}
diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/icons/ic-bridge.svg b/internal/frontend/bridge-gui/bridge-gui/qml/icons/ic-bridge.svg
new file mode 100644
index 00000000..b2aa5fe6
--- /dev/null
+++ b/internal/frontend/bridge-gui/bridge-gui/qml/icons/ic-bridge.svg
@@ -0,0 +1,13 @@
+
+
+
diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/icons/ic-mozilla-thunderbird.svg b/internal/frontend/bridge-gui/bridge-gui/qml/icons/ic-mozilla-thunderbird.svg
index 83759ef0..6c41b98d 100644
--- a/internal/frontend/bridge-gui/bridge-gui/qml/icons/ic-mozilla-thunderbird.svg
+++ b/internal/frontend/bridge-gui/bridge-gui/qml/icons/ic-mozilla-thunderbird.svg
@@ -1,112 +1,80 @@
-