GODT-1179 GODT-658: Components and login flows

internal/frontend/qml/AccountDelegate.qml

@@ -0,0 +1,69 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+
+import Proton 4.0
+
+RowLayout {
+    id: root
+    property var colorScheme: parent.colorScheme
+
+    property var text: "janedoe@protonmail.com"
+    property var avatarText: "jd"
+    property var captionText: "50.5 MB / 20 GB"
+
+    spacing: 16
+
+    Rectangle {
+        id: avatar
+        Layout.preferredHeight: account.height
+        Layout.preferredWidth: account.height
+        radius: 4
+
+        color: root.colorScheme.background_avatar
+
+        ProtonLabel {
+            anchors.centerIn: avatar
+            color: root.colorScheme.text_norm
+            text: root.avatarText.toUpperCase()
+            state: "body"
+            horizontalAlignment: Qt.AlignHCenter
+            verticalAlignment: Qt.AlignVCenter
+        }
+    }
+
+    ColumnLayout {
+        id: account
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+
+        ProtonLabel {
+            text: root.text
+            color: root.colorScheme.text_norm
+            state: "body"
+        }
+
+        ProtonLabel {
+            text: root.captionText
+            color: root.colorScheme.text_weak
+            state: "caption"
+        }
+    }
+}

internal/frontend/qml/AccountView.qml

@@ -0,0 +1,48 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+
+import Proton 4.0
+
+ColumnLayout {
+    id: root
+    property var colorScheme: parent.colorScheme
+
+    spacing: 0
+
+    Rectangle {
+        Layout.fillWidth: true
+        Layout.minimumHeight: 277
+        Layout.maximumHeight: 277
+
+        color: root.colorScheme.background_norm
+
+        ColumnLayout {
+
+        }
+    }
+
+    Rectangle {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        color: root.colorScheme.background_weak
+    }
+}

internal/frontend/qml/Banners.qml

@@ -0,0 +1,121 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQml 2.12
+import QtQuick 2.13
+import Proton 4.0
+import QtQuick.Controls 2.13
+
+Rectangle {
+    id: root
+
+    property var window
+
+    property bool onTop: false
+    property bool blocking: root.nDangers != 0
+    property int  nDangers: 0
+
+    color: root.getTransparentVersion(window.colorScheme.text_norm,root.blocking ? 0.5 : 0)
+
+    MouseArea {
+        anchors.fill: root
+        acceptedButtons: root.blocking ? Qt.AllButtons : Qt.NoButton
+        enabled: root.blocking
+    }
+
+    ListModel {
+        id: notifications
+    }
+
+    ListView {
+        id: view
+        anchors.top              : root.top
+        anchors.bottom           : root.bottom
+        anchors.horizontalCenter : root.horizontalCenter
+        anchors.topMargin        : root.height/20
+        anchors.bottomMargin     : root.height/20
+
+        layoutDirection: ListView.Vertical
+        verticalLayoutDirection: root.onTop ? ListView.TopToBottom : ListView.BottomToTop
+
+        spacing: 5
+
+        model: notifications
+        delegate: Banner {
+            id: bannerDelegate
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: model.text
+            actionText: model.buttonText
+            state: model.state
+
+            onAccepted: {
+                switch (model.submitAction) {
+                    case "update":
+                    console.log("I am updating now")
+                    break;
+                    default:
+                    console.log("NOOP")
+                }
+                if (model.state == "danger") root.nDangers-=1
+                anchors.horizontalCenter = undefined
+                notifications.remove(index)
+            }
+        }
+    }
+
+    function notify(descriptionText, buttonText, type = "info", submitAction = "noop") {
+        if (type === "danger") root.nDangers+=1
+        notifications.append({
+            "text": descriptionText,
+            "buttonText": buttonText,
+            "state": type,
+            "submitAction": submitAction
+        })
+    }
+
+    function notifyOnlyPaidUsers(){
+        root.notify(
+            qsTr("Bridge is exclusive to our paid plans. Upgrade your account to use Bridge."),
+            qsTr("ok"), "danger"
+        )
+    }
+
+    function notifyConnectionLostWhileLogin(){
+        root.notify(
+            qsTr("Can't connect to the server. Check your internet connection and try again."),
+            qsTr("ok"), "danger"
+        )
+    }
+
+    function notifyUpdateManually(){
+        root.notify(
+            qsTr("Bridge could not update automatically."),
+            qsTr("update"), "warning", "update"
+        )
+    }
+
+    function notifyUserAdded(){
+        root.notify(
+            qsTr("Your account has been added to Bridge and you are now signed in."),
+            qsTr("ok"), "success"
+        )
+    }
+
+    function getTransparentVersion(original, transparency){
+        return Qt.rgba(original.r, original.g, original.b, transparency)
+    }
+}

internal/frontend/qml/Bridge.qml

@@ -15,17 +15,41 @@
 // You should have received a copy of the GNU General Public License
 // along with ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
 
+import QtQml 2.12
 import QtQuick 2.13
 import QtQuick.Window 2.13
 import Qt.labs.platform 1.0
 
 QtObject {
-    // default property list children: []
+    id: root
 
-    property var _mainWindow: MainWindow {
+    property var backend
+    property var users
+
+    signal login(string username, string password)
+    signal login2FA(string username, string code)
+    signal login2Password(string username, string password)
+    signal loginAbort(string username)
+
+    property var mainWindow: MainWindow {
         id: mainWindow
-        title: "ProtonMail Bridge"
+        visible: true
-        visible: false
+
+        backend: root.backend
+        users: root.users
+
+        onLogin: {
+            root.login(username, password)
+        }
+        onLogin2FA: {
+            root.login2FA(username, code)
+        }
+        onLogin2Password: {
+            root.login2Password(username, password)
+        }
+        onLoginAbort: {
+            root.loginAbort(username)
+        }
     }
 
     property var _trayMenu: Window {
@@ -33,22 +57,23 @@ QtObject {
         title: "window 2"
         visible: false
         flags: Qt.Dialog
-
-        width: 448
     }
 
     property var _trayIcon: SystemTrayIcon {
         id: trayIcon
         visible: true
-        iconSource: "./icons/rectangle-systray.png"
+        iconSource: "./icons/ic-systray.svg"
         onActivated: {
             switch (reason) {
                 case SystemTrayIcon.Unknown:
                 break;
                 case SystemTrayIcon.Context:
+                trayMenu.x = (Screen.desktopAvailableWidth - trayMenu.width) / 2
+                trayMenu.visible = !trayMenu.visible
                 break
                 case SystemTrayIcon.DoubleClick:
-                break
+                mainWindow.visible = !mainWindow.visible
+                break;
                 case SystemTrayIcon.Trigger:
                 trayMenu.x = (Screen.desktopAvailableWidth - trayMenu.width) / 2
                 trayMenu.visible = !trayMenu.visible

internal/frontend/qml/BridgeTest/UserControl.qml

@@ -0,0 +1,208 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQml 2.12
+import QtQuick 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.13
+
+ColumnLayout {
+    property var user
+    property var backend
+
+    spacing : 5
+
+    Layout.fillHeight: true
+    //Layout.fillWidth: true
+
+    property var colorScheme
+
+    TextField {
+        Layout.fillWidth: true
+
+        text: user !== undefined ? user.username : ""
+
+        onEditingFinished: {
+            user.username = text
+        }
+    }
+
+    RowLayout {
+        Layout.fillWidth: true
+
+        Button {
+            //Layout.fillWidth: true
+
+            text: "Login"
+            enabled: user !== undefined && !user.loggedIn && user.username.length > 0
+
+            onClicked: {
+                if (user === backend.loginUser) {
+                    var newUserObject = backend.userComponent.createObject(backend, {username: user.username, loggedIn: true})
+                    backend.users.append( { object: newUserObject } )
+
+                    user.username = ""
+                    user.resetLoginRequests()
+                    return
+                }
+
+                user.loggedIn = true
+                user.resetLoginRequests()
+            }
+        }
+
+        Button {
+            //Layout.fillWidth: true
+
+            text: "Logout"
+            enabled: user !== undefined && user.loggedIn && user.username.length > 0
+
+            onClicked: {
+                user.loggedIn = false
+                user.resetLoginRequests()
+            }
+        }
+    }
+
+
+    RowLayout {
+        Layout.fillWidth: true
+
+        Label {
+            id: loginLabel
+            text: "Login:"
+
+            Layout.preferredWidth: Math.max(loginLabel.implicitWidth, faLabel.implicitWidth, passLabel.implicitWidth)
+        }
+
+        Button {
+            text: "name/pass error"
+            enabled: user !== undefined && user.isLoginRequested && !user.isLogin2FARequested && !user.isLogin2PasswordProvided
+
+            onClicked: {
+                user.loginUsernamePasswordError()
+                user.resetLoginRequests()
+            }
+        }
+
+        Button {
+            text: "free user error"
+            enabled: user !== undefined && user.isLoginRequested
+            onClicked: {
+                user.loginFreeUserError()
+                user.resetLoginRequests()
+            }
+        }
+
+        Button {
+            text: "connection error"
+            enabled: user !== undefined && user.isLoginRequested
+            onClicked: {
+                user.loginConnectionError()
+                user.resetLoginRequests()
+            }
+        }
+    }
+
+    RowLayout {
+        Layout.fillWidth: true
+
+        Label {
+            id: faLabel
+            text: "2FA:"
+
+            Layout.preferredWidth: Math.max(loginLabel.implicitWidth, faLabel.implicitWidth, passLabel.implicitWidth)
+        }
+
+        Button {
+            text: "request"
+
+            enabled: user !== undefined && user.isLoginRequested && !user.isLogin2FARequested && !user.isLogin2PasswordRequested
+            onClicked: {
+                user.login2FARequested()
+                user.isLogin2FARequested = true
+            }
+        }
+
+        Button {
+            text: "error"
+
+            enabled: user !== undefined && user.isLogin2FAProvided && !(user.isLogin2PasswordRequested && !user.isLogin2PasswordProvided)
+            onClicked: {
+                user.login2FAError()
+                user.isLogin2FAProvided = false
+            }
+        }
+
+        Button {
+            text: "Abort"
+
+            enabled: user !== undefined && user.isLogin2FAProvided && !(user.isLogin2PasswordRequested && !user.isLogin2PasswordProvided)
+            onClicked: {
+                user.login2FAErrorAbort()
+                user.resetLoginRequests()
+            }
+        }
+    }
+
+    RowLayout {
+        Layout.fillWidth: true
+
+        Label {
+            id: passLabel
+            text: "2 Password:"
+
+            Layout.preferredWidth: Math.max(loginLabel.implicitWidth, faLabel.implicitWidth, passLabel.implicitWidth)
+        }
+
+        Button {
+            text: "request"
+
+            enabled: user !== undefined && user.isLoginRequested && !user.isLogin2PasswordRequested && !(user.isLogin2FARequested && !user.isLogin2FAProvided)
+            onClicked: {
+                user.login2PasswordRequested()
+                user.isLogin2PasswordRequested = true
+            }
+        }
+
+        Button {
+            text: "error"
+
+            enabled: user !== undefined && user.isLogin2PasswordProvided && !(user.isLogin2FARequested && !user.isLogin2FAProvided)
+            onClicked: {
+                user.login2PasswordError()
+
+                user.isLogin2PasswordProvided = false
+            }
+        }
+
+        Button {
+            text: "Abort"
+
+            enabled: user !== undefined && user.isLogin2PasswordProvided && !(user.isLogin2FARequested && !user.isLogin2FAProvided)
+            onClicked: {
+                user.login2PasswordErrorAbort()
+                user.resetLoginRequests()
+            }
+        }
+    }
+
+
+    Item {
+        Layout.fillHeight: true
+    }
+}

internal/frontend/qml/BridgeTest/UserList.qml

@@ -0,0 +1,91 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.13
+
+import Proton 4.0
+
+ColumnLayout {
+    id: root
+
+    property var colorScheme
+    property var backend
+
+    property alias currentIndex: usersListView.currentIndex
+    ListView {
+        id: usersListView
+        Layout.fillHeight: true
+        Layout.preferredWidth: 200
+
+        model: backend.usersTest
+        highlightFollowsCurrentItem: true
+
+        delegate: Item {
+
+            implicitHeight: children[0].implicitHeight + anchors.topMargin + anchors.bottomMargin
+            implicitWidth: children[0].implicitWidth + anchors.leftMargin + anchors.rightMargin
+
+            width: usersListView.width
+
+            anchors.margins: 10
+
+            Label {
+                text: modelData.username
+                anchors.margins: 10
+                anchors.fill: parent
+                color: root.colorScheme.text_norm
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: {
+                        usersListView.currentIndex = index
+                    }
+                }
+            }
+        }
+
+        highlight: Rectangle {
+            color: root.colorScheme.interaction_default_active
+        }
+    }
+
+    RowLayout {
+        Layout.fillWidth: true
+
+        Button {
+            text: "+"
+
+            onClicked: {
+                var newUserObject = backend.userComponent.createObject(backend, { username: "test@protonmail.com", loggedIn: false } )
+                backend.users.append( { object: newUserObject } )
+            }
+        }
+        Button {
+            text: "-"
+
+            enabled: usersListView.currentIndex != 0
+
+            onClicked: {
+                // var userObject = backend.users.get(usersListView.currentIndex - 1)
+                backend.users.remove(usersListView.currentIndex - 1)
+                // userObject.deleteLater()
+            }
+        }
+    }
+}

internal/frontend/qml/BridgeTest/UserModel.qml

@@ -0,0 +1,28 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQml.Models 2.12
+
+ListModel {
+    // overriding get method to ignore any role and return directly object itself
+    function get(row) {
+        if (row < 0 || row >= count) {
+            return undefined
+        }
+        return data(index(row, 0), Qt.DisplayRole)
+    }
+}

internal/frontend/qml/Bridge_test.qml

@@ -15,42 +15,431 @@
 // You should have received a copy of the GNU General Public License
 // along with ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
 
+import QtQml 2.12
 import QtQuick 2.13
 import QtQuick.Window 2.13
+import QtQuick.Layouts 1.12
 import QtQuick.Controls 2.13
 
+import QtQml.Models 2.12
+
+import Proton 4.0
+
+import "./BridgeTest"
+
 Window {
-    id: testroot
+    id: root
-    width   : 250
+
-    height  : 600
+    width: 640
-    flags   : Qt.Window | Qt.Dialog | Qt.FramelessWindowHint
+    height: 480
+    x: 100
+    y: 100
+
+    property var colorScheme: ProtonStyle.darkStyle
+
+    flags   : Qt.Window | Qt.Dialog
     visible : true
-    title   : "GUI test Window"
+    title   : "Bridge Test GUI"
-    color   : "#10101010"
+    color   : colorScheme.background_norm
 
-    Column {
+    function _log(msg, color) {
-        anchors.horizontalCenter: parent.horizontalCenter
+        logTextArea.text += "<p style='color: " + color + ";'>" + msg + "</p>"
-        spacing : 5
+        logTextArea.text += "\n"
-        Button {
+    }
-            text: "Show window"
+
-            onClicked: {
+    function log(msg) {
-                bridge._mainWindow.visible = true
+        console.log(msg)
+        _log(msg, root.colorScheme.signal_info)
+    }
+
+    function error(msg) {
+        console.error(msg)
+        _log(msg, root.colorScheme.signal_danger)
+    }
+
+    // No user object should be put in this list until a successful login
+    property var users: UserModel {
+        id: _users
+
+        onRowsInserted: {
+            for (var i = first; i <= last; i++) {
+                _usersTest.insert(i + 1, { object: get(i) } )
             }
         }
-        Button {
+
-            text: "Hide window"
+        onRowsRemoved: {
-            onClicked: {
+            _usersTest.remove(first + 1, first - last + 1)
-                bridge._mainWindow.visible = false
+        }
+
+        onRowsMoved: {
+            _usersTest.move(start + 1, row + 1, end - start + 1)
+        }
+
+        onDataChanged: {
+            for (var i = topLeft.row; i <= bottomRight.row; i++) {
+                _usersTest.set(i + 1, { object: get(i) } )
             }
         }
     }
 
-    Component.onCompleted : {
+    // this list is used on test gui: it contains same users list as users above + fake user to represent login request of new user on pos 0
-        testroot.x= 10
+    property var usersTest: UserModel {
-        testroot.y= 100
+        id: _usersTest
-        bridge._mainWindow.visible = true
+    }
+
+    property var userComponent: Component {
+        id: _userComponent
+
+        QtObject {
+            property string username: ""
+            property bool loggedIn: false
+
+            signal loginUsernamePasswordError()
+            signal loginFreeUserError()
+            signal loginConnectionError()
+            signal login2FARequested()
+            signal login2FAError()
+            signal login2FAErrorAbort()
+            signal login2PasswordRequested()
+            signal login2PasswordError()
+            signal login2PasswordErrorAbort()
+
+            // Test purpose only:
+            property bool isFakeUser: this === root.loginUser
+
+            function userSignal(msg) {
+                if (isFakeUser) {
+                    return
+                }
+
+                root.log("<- User (" + username + "): " + msg)
+            }
+
+            onLoginUsernamePasswordError: {
+                userSignal("loginUsernamePasswordError")
+            }
+            onLoginFreeUserError: {
+                userSignal("loginFreeUserError")
+            }
+            onLoginConnectionError: {
+                userSignal("loginConnectionError")
+            }
+            onLogin2FARequested: {
+                userSignal("login2FARequested")
+            }
+            onLogin2FAError: {
+                userSignal("login2FAError")
+            }
+            onLogin2FAErrorAbort: {
+                userSignal("login2FAErrorAbort")
+            }
+            onLogin2PasswordRequested: {
+                userSignal("login2PasswordRequested")
+            }
+            onLogin2PasswordError: {
+                userSignal("login2PasswordError")
+            }
+            onLogin2PasswordErrorAbort: {
+                userSignal("login2PasswordErrorAbort")
+            }
+
+            function resetLoginRequests() {
+                isLoginRequested = false
+                isLogin2FARequested = false
+                isLogin2FAProvided = false
+                isLogin2PasswordRequested = false
+                isLogin2PasswordProvided = false
+            }
+
+            property bool isLoginRequested: false
+
+            property bool isLogin2FARequested: false
+            property bool isLogin2FAProvided: false
+
+            property bool isLogin2PasswordRequested: false
+            property bool isLogin2PasswordProvided: false
+        }
+    }
+
+    // this it fake user used only for representing first login request
+    property var loginUser
+    Component.onCompleted: {
+        var newLoginUser = _userComponent.createObject()
+        root.loginUser = newLoginUser
+        _usersTest.append({object: newLoginUser})
+
+        newLoginUser.loginUsernamePasswordError.connect(root.loginUsernamePasswordError)
+        newLoginUser.loginFreeUserError.connect(root.loginFreeUserError)
+        newLoginUser.loginConnectionError.connect(root.loginConnectionError)
+        newLoginUser.login2FARequested.connect(root.login2FARequested)
+        newLoginUser.login2FAError.connect(root.login2FAError)
+        newLoginUser.login2FAErrorAbort.connect(root.login2FAErrorAbort)
+        newLoginUser.login2PasswordRequested.connect(root.login2PasswordRequested)
+        newLoginUser.login2PasswordError.connect(root.login2PasswordError)
+        newLoginUser.login2PasswordErrorAbort.connect(root.login2PasswordErrorAbort)
     }
 
 
-    Bridge {id:bridge}
+    TabBar {
+        id: tabBar
+        anchors.left: parent.left
+        anchors.right: parent.right
+
+        TabButton {
+            text: "Global settings"
+        }
+
+        TabButton {
+            text: "User control"
+        }
+
+        TabButton {
+            text: "Playground"
+        }
+
+        TabButton {
+            text: "Log"
+        }
+    }
+
+    StackLayout {
+        anchors.top: tabBar.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+
+        currentIndex: tabBar.currentIndex
+
+        anchors.margins: 10
+
+        RowLayout {
+            id: globalTab
+            spacing : 5
+            property alias colorScheme: root.colorScheme
+
+            ColumnLayout {
+                spacing : 5
+
+                property alias colorScheme: globalTab.colorScheme
+
+                ProtonLabel {
+                    text: "Global settings"
+                    color: globalTab.colorScheme.text_norm
+                }
+
+                ButtonGroup {
+                    id: styleRadioGroup
+                }
+
+                RadioButton {
+                    Layout.fillWidth: true
+
+                    text: "Light UI"
+                    checked: ProtonStyle.currentStyle === ProtonStyle.lightStyle
+                    ButtonGroup.group: styleRadioGroup
+
+                    onCheckedChanged: {
+                        if (checked && ProtonStyle.currentStyle !== ProtonStyle.lightStyle) {
+                            ProtonStyle.currentStyle = ProtonStyle.lightStyle
+                        }
+                    }
+                }
+
+                RadioButton {
+                    Layout.fillWidth: true
+
+                    text: "Dark UI"
+                    checked: ProtonStyle.currentStyle === ProtonStyle.darkStyle
+                    ButtonGroup.group: styleRadioGroup
+
+                    onCheckedChanged: {
+                        if (checked && ProtonStyle.currentStyle !== ProtonStyle.darkStyle) {
+                            ProtonStyle.currentStyle = ProtonStyle.darkStyle
+                        }
+                    }
+
+
+                }
+
+                Button {
+                    //Layout.fillWidth: true
+
+                    text: "Open Bridge"
+                    enabled: bridge === undefined || bridge === null
+                    onClicked: {
+                        bridge = bridgeComponent.createObject()
+                    }
+                }
+
+                Button {
+                    //Layout.fillWidth: true
+
+                    text: "Close Bridge"
+                    enabled: bridge !== undefined && bridge !== null
+                    onClicked: {
+                        bridge.destroy()
+                    }
+                }
+
+                Item {
+                    Layout.fillHeight: true
+                }
+            }
+
+            ColumnLayout {
+                spacing : 5
+
+                property alias colorScheme: globalTab.colorScheme
+
+                ProtonLabel {
+                    text: "Notifications"
+                    color: globalTab.colorScheme.text_norm
+                }
+
+                Button {
+                    text: "Notify: danger"
+                    enabled: bridge !== undefined && bridge !== null
+                    onClicked: {
+                        bridge.mainWindow.notifyOnlyPaidUsers()
+                    }
+                }
+
+                Button {
+                    text: "Notify: warning"
+                    enabled: bridge !== undefined && bridge !== null
+                    onClicked: {
+                        bridge.mainWindow.notifyUpdateManually()
+                    }
+                }
+
+                Button {
+                    text: "Notify: success"
+                    enabled: bridge !== undefined && bridge !== null
+                    onClicked: {
+                        bridge.mainWindow.notifyUserAdded()
+                    }
+                }
+
+
+
+                Item {
+                    Layout.fillHeight: true
+                }
+            }
+        }
+
+        RowLayout {
+            id: usersTab
+            UserList {
+                id: usersListView
+                Layout.fillHeight: true
+                colorScheme: root.colorScheme
+                backend: root
+            }
+
+            UserControl {
+                colorScheme: root.colorScheme
+                backend: root
+                user: ((root.usersTest.count > usersListView.currentIndex) && usersListView.currentIndex != -1) ? root.usersTest.get(usersListView.currentIndex) : undefined
+            }
+        }
+
+        RowLayout {
+            id: playgroundTab
+
+            property var colorScheme: root.colorScheme
+
+            AccountDelegate{}
+        }
+
+        TextArea {
+            id: logTextArea
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            Layout.preferredWidth: 400
+            Layout.preferredHeight: 200
+
+            textFormat: TextEdit.RichText
+            //readOnly: true
+        }
+    }
+
+    property var bridge
+
+    // this signals are used only when trying to login with new user (i.e. not in users model)
+    signal loginUsernamePasswordError()
+    signal loginFreeUserError()
+    signal loginConnectionError()
+    signal login2FARequested()
+    signal login2FAError()
+    signal login2FAErrorAbort()
+    signal login2PasswordRequested()
+    signal login2PasswordError()
+    signal login2PasswordErrorAbort()
+
+    onLoginUsernamePasswordError: {
+        console.debug("<- loginUsernamePasswordError")
+    }
+    onLoginFreeUserError: {
+        console.debug("<- loginFreeUserError")
+    }
+    onLoginConnectionError: {
+        console.debug("<- loginConnectionError")
+    }
+    onLogin2FARequested: {
+        console.debug("<- login2FARequested")
+    }
+    onLogin2FAError: {
+        console.debug("<- login2FAError")
+    }
+    onLogin2FAErrorAbort: {
+        console.debug("<- login2FAErrorAbort")
+    }
+    onLogin2PasswordRequested: {
+        console.debug("<- login2PasswordRequested")
+    }
+    onLogin2PasswordError: {
+        console.debug("<- login2PasswordError")
+    }
+    onLogin2PasswordErrorAbort: {
+        console.debug("<- login2PasswordErrorAbort")
+    }
+
+    Component {
+        id: bridgeComponent
+
+        Bridge {
+            backend: root
+
+            onLogin: {
+                root.log("-> login(" + username + ", " + password + ")")
+
+                loginUser.username = username
+                loginUser.isLoginRequested = true
+            }
+
+            onLogin2FA: {
+                root.log("-> login2FA(" + username + ", " + code + ")")
+
+                loginUser.isLogin2FAProvided = true
+            }
+
+            onLogin2Password: {
+                root.log("-> login2FA(" + username + ", " + password + ")")
+
+                loginUser.isLogin2PasswordProvided = true
+            }
+
+            onLoginAbort: {
+                root.log("-> loginAbort(" + username + ")")
+
+                loginUser.resetLoginRequests()
+            }
+        }
+    }
+
+    onClosing: {
+        Qt.quit()
+    }
 }

internal/frontend/qml/ContentWrapper.qml

@@ -0,0 +1,230 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+
+import Proton 4.0
+
+Item {
+    id: root
+    property var colorScheme: parent.colorScheme
+
+    property var window
+
+    RowLayout {
+        anchors.fill: parent
+        spacing: 0
+
+        Rectangle {
+            id: leftBar
+            property var colorScheme: ProtonStyle.prominentStyle
+
+            Layout.minimumWidth: 264
+            Layout.maximumWidth: 320
+            Layout.preferredWidth: 320
+            Layout.fillHeight: true
+
+            color: colorScheme.background_norm
+
+            ColumnLayout {
+                anchors.fill: parent
+                spacing: 0
+
+                RowLayout {
+                    id:topLeftBar
+
+                    Layout.fillWidth: true
+                    Layout.minimumHeight: 60
+                    Layout.maximumHeight: 60
+                    Layout.preferredHeight: 60
+                    spacing: 0
+
+                    property var colorScheme: leftBar.colorScheme
+
+                    Status {
+                        Layout.leftMargin: 16
+                        Layout.topMargin: 24
+                        Layout.bottomMargin: 17
+
+                        Layout.alignment: Qt.AlignHCenter
+                    }
+
+                    // just a placeholder
+                    Item {
+                        Layout.fillHeight: true
+                        Layout.fillWidth: true
+                    }
+
+                    Button {
+                        Layout.minimumHeight: 36
+                        Layout.maximumHeight: 36
+                        Layout.preferredHeight: 36
+                        Layout.minimumWidth: 36
+                        Layout.maximumWidth: 36
+                        Layout.preferredWidth: 36
+
+                        Layout.topMargin: 16
+                        Layout.bottomMargin: 9
+                        Layout.rightMargin: 4
+
+                        horizontalPadding: 0
+
+                        icon.source: "./icons/ic-question-circle.svg"
+                    }
+
+                    Button {
+                        Layout.minimumHeight: 36
+                        Layout.maximumHeight: 36
+                        Layout.preferredHeight: 36
+                        Layout.minimumWidth: 36
+                        Layout.maximumWidth: 36
+                        Layout.preferredWidth: 36
+
+                        Layout.topMargin: 16
+                        Layout.bottomMargin: 9
+                        Layout.rightMargin: 16
+
+                        horizontalPadding: 0
+
+                        icon.source: "./icons/ic-cog-wheel.svg"
+                    }
+                }
+
+                // Separator
+                Rectangle {
+                    Layout.fillWidth: true
+                    Layout.minimumHeight: 1
+                    Layout.maximumHeight: 1
+                    color: leftBar.colorScheme.border_weak
+                }
+
+                ListView {
+                    id: accounts
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    Layout.leftMargin: 16
+                    Layout.rightMargin: 16
+                    Layout.topMargin: 24
+                    Layout.bottomMargin: 24
+
+                    spacing: 12
+
+                    header: Rectangle {
+                        height: headerLabel.height+16
+                        color: ProtonStyle.transparent
+                        ProtonLabel{
+                            id:headerLabel
+                            text: qsTr("Accounts")
+                            color: leftBar.colorScheme.text_norm
+                            state: "body"
+                        }
+                    }
+
+                    model: window.backend.users
+                    delegate: AccountDelegate{
+                        id: accountDelegate
+                        colorScheme: leftBar.colorScheme
+                        text: modelData.username
+                    }
+                }
+
+                // Separator
+                Rectangle {
+                    Layout.fillWidth: true
+                    Layout.minimumHeight: 1
+                    Layout.maximumHeight: 1
+                    color: leftBar.colorScheme.border_weak
+                }
+
+                Item {
+                    id: bottomLeftBar
+
+                    Layout.fillWidth: true
+                    Layout.minimumHeight: 52
+                    Layout.maximumHeight: 52
+                    Layout.preferredHeight: 52
+
+                    property var colorScheme: leftBar.colorScheme
+
+                    Button {
+                        width: 36
+                        height: 36
+
+                        anchors.left: parent.left
+                        anchors.top: parent.top
+
+                        anchors.leftMargin: 16
+                        anchors.topMargin: 7
+
+                        horizontalPadding: 0
+
+                        icon.source: "./icons/ic-plus.svg"
+
+                        onClicked: root.showSignIn()
+                    }
+                }
+            }
+        }
+
+        Rectangle {
+            id: rightPlane
+
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            color: colorScheme.background_norm
+
+            StackLayout {
+                id: rightContent
+                anchors.fill: parent
+
+                AccountView {
+                    colorScheme: root.colorScheme
+                }
+
+                GridLayout {
+                    SignIn {
+                        Layout.topMargin: 68
+                        Layout.leftMargin: 80
+                        Layout.rightMargin: 80
+                        Layout.bottomMargin: 68
+                        Layout.preferredWidth: 320
+                        Layout.fillWidth: true
+                        Layout.fillHeight: true
+
+                        colorScheme: root.colorScheme
+                        user: (root.window.backend.users.count === 1 && root.window.backend.users.get(0).loggedIn === false) ? root.window.backend.users.get(0) : undefined
+                        backend: root.window.backend
+                        window: root.window
+
+                        onLogin          : { root.window.login          ( username , password ) }
+                        onLogin2FA       : { root.window.login2FA       ( username , code     ) }
+                        onLogin2Password : { root.window.login2Password ( username , password ) }
+                        onLoginAbort     : { root.window.loginAbort     ( username ) }
+                    }
+                }
+            }
+        }
+    }
+
+
+    function showSignIn() {
+        rightContent.currentIndex = 1
+    }
+}

internal/frontend/qml/DebugWrapper.qml

@@ -0,0 +1,33 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Controls 2.12
+
+Rectangle {
+    anchors.fill: parent
+    color: "transparent"
+    border.color: "red"
+    border.width: 1
+    z: parent.z - 1
+
+    Label {
+        text: parent.width + "x" + parent.height
+        anchors.centerIn: parent
+        color: "black"
+    }
+}

internal/frontend/qml/MainWindow.qml

@@ -15,6 +15,7 @@
 // You should have received a copy of the GNU General Public License
 // along with ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
 
+import QtQml 2.12
 import QtQuick 2.13
 import QtQuick.Window 2.13
 import QtQuick.Layouts 1.12
@@ -22,29 +23,96 @@ import QtQuick.Controls 2.12
 
 import Proton 4.0
 
+import "tests"
+
 Window {
-    //currentStyle: Proton.Style.prominentStyle
+    id: root
+    title: "ProtonMail Bridge"
 
-    //Button {
+    width: 960
-        //
+    height: 576
-        //}
 
-        visible: true
+    minimumHeight: contentLayout.implicitHeight
-        color: ProtonStyle.currentStyle.background_norm
+    minimumWidth: contentLayout.implicitWidth
-        //StackLayout {
-            //    SignIn {
-            //
-            //    }
-            //}
 
-            Button {
+    property var colorScheme: ProtonStyle.currentStyle
-                id: testButton1
+
-                text: "Test button"
+    property var backend
+    property var users
+
+
+    property bool isNoUser: backend.users.count === 0
+    property bool isNoLoggedUser: backend.users.count === 1 && backend.users.get(0).loggedIn === false
+    property bool showSetup: true
+
+    signal login(string username, string password)
+    signal login2FA(string username, string code)
+    signal login2Password(string username, string password)
+    signal loginAbort(string username)
+
+    StackLayout {
+        id: contentLayout
+
+        anchors.fill: parent
+
+        currentIndex: (root.isNoUser || root.isNoLoggedUser) ? 0 : ( root.showSetup ? 1 : 2)
+
+        WelcomeWindow {
+            colorScheme: root.colorScheme
+            backend: root.backend
+            window: root
+            enabled: !banners.blocking
+
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            onLogin: {
+                root.login(username, password)
             }
-
+            onLogin2FA: {
-            Button {
+                root.login2FA(username, code)
-                anchors.top: testButton1.bottom
+            }
-                secondary: true
+            onLogin2Password: {
-                text: "Test button"
+                root.login2Password(username, password)
+            }
+            onLoginAbort: {
+                root.loginAbort(username)
             }
         }
+
+        SetupGuide {
+            colorScheme: root.colorScheme
+            window: root
+            enabled: !banners.blocking
+
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+        }
+
+        ContentWrapper {
+            colorScheme: root.colorScheme
+            window: root
+            enabled: !banners.blocking
+
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+        }
+    }
+
+    Banners {
+        id: banners
+        anchors.fill: parent
+        window: root
+        onTop: contentLayout.currentIndex == 0
+    }
+
+    function notifyOnlyPaidUsers()            { banners.notifyOnlyPaidUsers()            }
+    function notifyConnectionLostWhileLogin() { banners.notifyConnectionLostWhileLogin() }
+    function notifyUpdateManually()           { banners.notifyUpdateManually()           }
+    function notifyUserAdded()                { banners.notifyUserAdded()                }
+
+    function showSetupGuide(user)   {
+        setupGuide.user = user
+        root.showSetup = true
+    }
+}

internal/frontend/qml/Proton/Banner.qml

@@ -0,0 +1,117 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+
+import QtQml 2.12
+import QtQuick 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls.impl 2.12
+
+Rectangle {
+    id: root
+
+    width: layout.width
+    height: layout.height
+
+    radius: 10
+
+    signal accepted()
+
+
+    property alias text: description.text
+    property var actionText: ""
+
+    property var colorText: Style.currentStyle.text_invert
+    property var colorMain: "#000"
+    property var colorHover: "#000"
+    property var colorActive: "#000"
+    property var iconSource: "../icons/ic-exclamation-circle-filled.svg"
+
+    color: root.colorMain
+    border.color: root.colorActive
+    border.width: 1
+
+    property var maxWidth: 600
+    property var minWidth: 400
+    property var usedWidth: button.width + icon.width
+
+    RowLayout {
+        id: layout
+
+        IconLabel {
+            id:icon
+            Layout.alignment: Qt.AlignCenter
+            Layout.leftMargin: 17.5
+            Layout.topMargin: 15.5
+            Layout.bottomMargin: 15.5
+            color: root.colorText
+            icon.source: root.iconSource
+            icon.color: root.colorText
+            icon.height: Style.title_line_height
+        }
+
+        ProtonLabel {
+            id: description
+            Layout.alignment: Qt.AlignCenter
+            Layout.leftMargin: 9.5
+            Layout.minimumWidth: root.minWidth - root.usedWidth
+            Layout.maximumWidth: root.maxWidth - root.usedWidth
+
+            color: root.colorText
+            state: "body"
+
+            wrapMode: Text.WordWrap
+            verticalAlignment: Text.AlignVCenter
+        }
+
+        Button {
+            id:button
+            Layout.fillHeight: true
+
+            hoverEnabled: true
+
+            text: root.actionText.toUpperCase()
+
+            onClicked: root.accepted()
+
+            background: RoundedRectangle {
+                width:parent.width
+                height:parent.height
+                strokeColor: root.colorActive
+                strokeWidth: root.border.width
+
+                radiusTopRight    : root.radius
+                radiusBottomRight : root.radius
+                radiusTopLeft     : 0
+                radiusBottomLeft  : 0
+
+                fillColor: button.down ? root.colorActive : (
+                    button.hovered ? root.colorHover :
+                    root.colorMain
+                )
+            }
+        }
+    }
+
+    state: "info"
+    states: [
+        State{ name : "danger"  ; PropertyChanges{ target : root ; colorMain : Style.currentStyle.signal_danger  ; colorHover : Style.currentStyle.signal_danger_hover  ; colorActive : Style.currentStyle.signal_danger_active  ; iconSource: "../icons/ic-exclamation-circle-filled.svg"}} ,
+        State{ name : "warning" ; PropertyChanges{ target : root ; colorMain : Style.currentStyle.signal_warning ; colorHover : Style.currentStyle.signal_warning_hover ; colorActive : Style.currentStyle.signal_warning_active ; iconSource: "../icons/ic-exclamation-circle-filled.svg"}} ,
+        State{ name : "success" ; PropertyChanges{ target : root ; colorMain : Style.currentStyle.signal_success ; colorHover : Style.currentStyle.signal_success_hover ; colorActive : Style.currentStyle.signal_success_active ; iconSource: "../icons/ic-info-circle-filled.svg"}} ,
+        State{ name : "info"    ; PropertyChanges{ target : root ; colorMain : Style.currentStyle.signal_info    ; colorHover : Style.currentStyle.signal_info_hover    ; colorActive : Style.currentStyle.signal_info_active    ; iconSource: "../icons/ic-info-circle-filled.svg"}}
+    ]
+}

internal/frontend/qml/Proton/Button.qml

@@ -28,49 +28,151 @@ T.Button {
     readonly property bool primary: !secondary
     readonly property bool isIcon: control.text === ""
 
+    property bool loading: false
+
+    // TODO: store previous enabled state and restore it?
+    // For now assuming that only enabled buttons could have loading state
+    onLoadingChanged: {
+        if (loading) {
+            enabled = false
+        } else {
+            enabled = true
+        }
+    }
+
     id: control
 
-    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+    implicitWidth: Math.max(
-    implicitContentWidth + leftPadding + rightPadding)
+        implicitBackgroundWidth + leftInset + rightInset,
-    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+        implicitContentWidth + leftPadding + rightPadding
-    implicitContentHeight + topPadding + bottomPadding)
+    )
+    implicitHeight: Math.max(
+        implicitBackgroundHeight + topInset + bottomInset,
+        implicitContentHeight + topPadding + bottomPadding
+    )
 
     padding: 8
     horizontalPadding: 16
     spacing: 10
 
-    icon.width: 12
+    font.family: Style.font_family
-    icon.height: 12
+    font.pixelSize: Style.body_font_size
-    icon.color: control.checked || control.highlighted ? control.palette.brightText :
+    font.letterSpacing: Style.body_letter_spacing
-    control.flat && !control.down ? (control.visualFocus ? control.palette.highlight : control.palette.windowText) : control.palette.buttonText
 
-    contentItem: IconLabel {
+    icon.width: 16
-        spacing: control.spacing
+    icon.height: 16
-        mirrored: control.mirrored
+    icon.color: {
-        display: control.display
+        if (primary && !isIcon) {
+            return "#FFFFFF"
+        } else {
+            return colorScheme.text_norm
+        }
+    }
 
-        icon: control.icon
+    contentItem: Item {
-        text: control.text
+        id: _contentItem
-        font: control.font
+
-        color: {
+        // Since contentItem is allways resized to maximum available size - we need to "incapsulate" label
-            if (!secondary) {
+        // and icon within one single item with calculated fixed implicit size
-                // Primary colors
+
-                return "#FFFFFF"
+        implicitHeight: labelIcon.implicitHeight
-            } else {
+        implicitWidth: labelIcon.implicitWidth
-                // Secondary colors
+
-                return colorScheme.text_norm
+        Item {
+            id: labelIcon
+
+            anchors.horizontalCenter: _contentItem.horizontalCenter
+            anchors.verticalCenter: _contentItem.verticalCenter
+
+            width: Math.min(implicitWidth, control.availableWidth)
+            height: Math.min(implicitHeight, control.availableHeight)
+
+            implicitWidth: {
+                var textImplicitWidth = control.text !== "" ? label.implicitWidth : 0
+                var iconImplicitWidth = iconImage.source ? iconImage.implicitWidth : 0
+                var spacing = (control.text !== ""  && iconImage.source && control.display === AbstractButton.TextBesideIcon) ? control.spacing : 0
+
+                return control.display === AbstractButton.TextBesideIcon ? textImplicitWidth + iconImplicitWidth + spacing : Math.max(textImplicitWidth, iconImplicitWidth)
+            }
+            implicitHeight: {
+                var textImplicitHeight = control.text !== "" ? label.implicitHeight : 0
+                var iconImplicitHeight = iconImage.source ? iconImage.implicitHeight : 0
+                var spacing = (control.text !== ""  && iconImage.source && control.display === AbstractButton.TextUnderIcon) ? control.spacing : 0
+
+                return control.display === AbstractButton.TextUnderIcon ? textImplicitHeight + iconImplicitHeight + spacing : Math.max(textImplicitHeight, iconImplicitHeight)
+            }
+
+            Label {
+                id: label
+                anchors.left: labelIcon.left
+                anchors.top: labelIcon.top
+                anchors.bottom: labelIcon.bottom
+                anchors.right: control.loading ? iconImage.left : labelIcon.right
+                anchors.rightMargin: control.loading ? control.spacing : 0
+
+                elide: Text.ElideRight
+                horizontalAlignment: Qt.AlignHCenter
+                verticalAlignment: Qt.AlignVCenter
+
+                text: control.text
+                font: control.font
+                color: {
+                    if (primary && !isIcon) {
+                        return "#FFFFFF"
+                    } else {
+                        return colorScheme.text_norm
+                    }
+                }
+                opacity: control.enabled || control.loading ? 1.0 : 0.5
+            }
+
+            ColorImage {
+                id: iconImage
+
+                anchors.verticalCenter: labelIcon.verticalCenter
+                anchors.right: labelIcon.right
+
+                width: {
+                    // special case for loading since we want icon to be square for rotation animation
+                    if (control.loading) {
+                        return Math.min(control.icon.width, availableWidth, control.icon.height, availableHeight)
+                    }
+
+                    return Math.min(control.icon.width, availableWidth)
+                }
+                height: {
+                    if (control.loading) {
+                        return width
+                    }
+
+                    Math.min(control.icon.height, availableHeight)
+                }
+
+                color: control.icon.color
+                source: control.loading ? "../icons/Loader_16.svg" : control.icon.source
+                visible: control.loading || control.icon.source
+
+                RotationAnimation {
+                    target: iconImage
+                    loops: Animation.Infinite
+                    duration: 1000
+                    from: 0
+                    to: 360
+                    direction: RotationAnimation.Clockwise
+                    running: control.loading
+                }
             }
         }
     }
 
     background: Rectangle {
-        implicitWidth: 72
+        implicitWidth: 36
         implicitHeight: 36
         radius: 4
-        visible: !control.flat || control.down || control.checked || control.highlighted
+        visible: true
         color: {
             if (!isIcon) {
-                if (!secondary) {
+                if (primary) {
                     // Primary colors
 
                     if (control.down) {
@@ -81,6 +183,10 @@ T.Button {
                         return colorScheme.interaction_norm_hover
                     }
 
+                    if (control.loading) {
+                        return colorScheme.interaction_norm_hover
+                    }
+
                     return colorScheme.interaction_norm
                 } else {
                     // Secondary colors
@@ -93,10 +199,14 @@ T.Button {
                         return colorScheme.interaction_default_hover
                     }
 
+                    if (control.loading) {
+                        return colorScheme.interaction_default_hover
+                    }
+
                     return colorScheme.interaction_default
                 }
             } else {
-                if (!secondary) {
+                if (primary) {
                     // Primary icon colors
 
                     if (control.down) {
@@ -107,6 +217,10 @@ T.Button {
                         return colorScheme.interaction_default_hover
                     }
 
+                    if (control.loading) {
+                        return colorScheme.interaction_default_hover
+                    }
+
                     return colorScheme.interaction_default
                 } else {
                     // Secondary icon colors
@@ -119,10 +233,18 @@ T.Button {
                         return colorScheme.interaction_default_hover
                     }
 
+                    if (control.loading) {
+                        return colorScheme.interaction_default_hover
+                    }
+
                     return colorScheme.interaction_default
                 }
             }
         }
-        opacity: control.enabled ? 1.0 : 0.5
+
+        border.color: colorScheme.border_norm
+        border.width: secondary ? 1 : 0
+
+        opacity: control.enabled || control.loading ? 1.0 : 0.5
     }
 }

internal/frontend/qml/Proton/CheckBox.qml

@@ -0,0 +1,132 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.impl 2.12
+import QtQuick.Templates 2.12 as T
+
+T.CheckBox {
+    property var colorScheme: parent.colorScheme ? parent.colorScheme : Style.currentStyle
+
+    property bool error: false
+
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 0
+    spacing: 8
+
+    indicator: Rectangle {
+        implicitWidth: 20
+        implicitHeight: 20
+        radius: 4
+
+        x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        color: {
+            if (!checked) {
+                return colorScheme.background_norm
+            }
+
+            if (!control.enabled) {
+                return colorScheme.field_disabled
+            }
+
+            if (control.error) {
+                return colorScheme.signal_danger
+            }
+
+            if (control.hovered) {
+                return colorScheme.interaction_norm_hover
+            }
+
+            return colorScheme.interaction_norm
+        }
+
+        border.width: control.checked ? 0 : 1
+        border.color: {
+            if (!control.enabled) {
+                return colorScheme.field_disabled
+            }
+
+            if (control.error) {
+                return colorScheme.signal_danger
+            }
+
+            if (control.hovered) {
+                return colorScheme.interaction_norm_hover
+            }
+
+            return colorScheme.field_norm
+        }
+
+        ColorImage {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+
+            width: parent.width - 4
+            height: parent.height - 4
+            color: "#FFFFFF"
+            source: "../icons/ic-check.svg"
+            visible: control.checkState === Qt.Checked
+        }
+
+        // TODO: do we need PartiallyChecked state?
+
+        //Rectangle {
+        //    x: (parent.width - width) / 2
+        //    y: (parent.height - height) / 2
+        //    width: 16
+        //    height: 3
+        //    color: control.palette.text
+        //    visible: control.checkState === Qt.PartiallyChecked
+        //}
+    }
+
+    contentItem: CheckLabel {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+
+        color: {
+            if (!enabled) {
+                return colorScheme.text_disabled
+            }
+
+            if (error) {
+                return colorScheme.signal_danger
+            }
+
+            return colorScheme.text_norm
+        }
+
+        font.family: Style.font_family
+        font.weight: Style.fontWidth_400
+        font.pixelSize: 14
+        lineHeight: 20
+        lineHeightMode: Text.FixedHeight
+        font.letterSpacing: 0.2
+    }
+}

internal/frontend/qml/Proton/ColorScheme.qml

@@ -17,10 +17,10 @@
 
 import QtQml 2.13
 
-// https://wiki.qt.io/Qml_Styling
-// http://imaginativethinking.ca/make-qml-component-singleton/
-
 QtObject {
+    // should be a pointer to ColorScheme object
+    property var prominent
+
     // Primary
     property color primay_norm
 

internal/frontend/qml/Proton/ProtonLabel.qml

@@ -0,0 +1,43 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Controls 2.12
+
+Label {
+    id: root
+
+    color: Style.currentStyle.text_norm
+    palette.link: Style.currentStyle.interaction_norm
+
+    font.family: ProtonStyle.font_family
+    font.weight: ProtonStyle.fontWidth_400
+    lineHeightMode: Text.FixedHeight
+
+    function putLink(linkURL,linkText) {
+        return `<a href="${linkURL}">${linkText}</a>`
+    }
+
+    state: "title"
+    states: [
+        State { name : "heading" ; PropertyChanges { target : root ; font.pixelSize : Style.heading_font_size ; lineHeight : Style.heading_line_height } },
+        State { name : "title"   ; PropertyChanges { target : root ; font.pixelSize : Style.title_font_size   ; lineHeight : Style.title_line_height   } },
+        State { name : "lead"    ; PropertyChanges { target : root ; font.pixelSize : Style.lead_font_size    ; lineHeight : Style.lead_line_height    } },
+        State { name : "body"    ; PropertyChanges { target : root ; font.pixelSize : Style.body_font_size    ; lineHeight : Style.body_line_height    ; font.letterSpacing : Style.body_letter_spacing    } },
+        State { name : "caption" ; PropertyChanges { target : root ; font.pixelSize : Style.caption_font_size ; lineHeight : Style.caption_line_height ; font.letterSpacing : Style.caption_letter_spacing } }
+    ]
+}

internal/frontend/qml/Proton/RadioButton.qml

@@ -0,0 +1,115 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.impl 2.12
+import QtQuick.Templates 2.12 as T
+
+T.RadioButton {
+    property var colorScheme: parent.colorScheme ? parent.colorScheme : Style.currentStyle
+
+    property bool error: false
+
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 0
+    spacing: 8
+
+    indicator: Rectangle {
+        implicitWidth: 20
+        implicitHeight: 20
+        radius: width / 2
+
+        x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        color: colorScheme.background_norm
+        border.width: 1
+        border.color: {
+            if (!control.enabled) {
+                return colorScheme.field_disabled
+            }
+
+            if (control.error) {
+                return colorScheme.signal_danger
+            }
+
+            if (control.hovered) {
+                return colorScheme.interaction_norm_hover
+            }
+
+            return colorScheme.field_norm
+        }
+
+        Rectangle {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: 8
+            height: 8
+            radius: width / 2
+            color: {
+                if (!control.enabled) {
+                    return colorScheme.field_disabled
+                }
+
+                if (control.error) {
+                    return colorScheme.signal_danger
+                }
+
+                if (control.hovered) {
+                    return colorScheme.interaction_norm_hover
+                }
+
+                return colorScheme.interaction_norm
+            }
+            visible: control.checked
+        }
+    }
+
+    contentItem: CheckLabel {
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+
+        color: {
+            if (!enabled) {
+                return colorScheme.text_disabled
+            }
+
+            if (error) {
+                return colorScheme.signal_danger
+            }
+
+            return colorScheme.text_norm
+        }
+
+        font.family: Style.font_family
+        font.weight: Style.fontWidth_400
+        font.pixelSize: 14
+        lineHeight: 20
+        lineHeightMode: Text.FixedHeight
+        font.letterSpacing: 0.2
+    }
+}

internal/frontend/qml/Proton/RoundedRectangle.qml

@@ -0,0 +1,116 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.8
+
+
+Rectangle {
+    id: root
+
+    color: Style.transparent
+
+    property color fillColor        : Style.currentStyle.background_norm
+    property color strokeColor      : Style.currentStyle.background_strong
+    property real strokeWidth       : 1
+
+    property real radiusTopLeft     : 10
+    property real radiusBottomLeft  : 10
+    property real radiusTopRight    : 10
+    property real radiusBottomRight : 10
+
+    function paint() {
+        canvas.requestPaint()
+    }
+
+    onFillColorChanged         : root.paint()
+    onStrokeColorChanged       : root.paint()
+    onStrokeWidthChanged       : root.paint()
+    onRadiusTopLeftChanged     : root.paint()
+    onRadiusBottomLeftChanged  : root.paint()
+    onRadiusTopRightChanged    : root.paint()
+    onRadiusBottomRightChanged : root.paint()
+
+
+    Canvas {
+        id: canvas
+        anchors.fill: root
+
+        onPaint: {
+            var ctx = getContext("2d")
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle   = root.fillColor
+            ctx.strokeStyle = root.strokeColor
+            ctx.lineWidth   = root.strokeWidth
+            var dimensions = {
+                x: ctx.lineWidth,
+                y: ctx.lineWidth,
+                w: canvas.width-2*ctx.lineWidth,
+                h: canvas.height-2*ctx.lineWidth,
+            }
+            var radius = {
+                tl: root.radiusTopLeft,
+                tr: root.radiusTopRight,
+                bl: root.radiusBottomLeft,
+                br: root.radiusBottomRight,
+            }
+
+            root.roundRect(
+                ctx,
+                dimensions,
+                radius, true, true
+            )
+        }
+    }
+
+    // adapted from: https://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas/3368118#3368118
+    function roundRect(ctx, dim, radius, fill, stroke) {
+        if (typeof stroke == 'undefined') {
+            stroke = true;
+        }
+        if (typeof radius === 'undefined') {
+            radius = 5;
+        }
+        if (typeof radius === 'number') {
+            radius = {tl: radius, tr: radius, br: radius, bl: radius};
+        } else {
+            var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0};
+            for (var side in defaultRadius) {
+                radius[side] = radius[side] || defaultRadius[side];
+            }
+        }
+        ctx.beginPath();
+        ctx.moveTo(dim.x + radius.tl, dim.y);
+        ctx.lineTo(dim.x + dim.w - radius.tr, dim.y);
+        ctx.quadraticCurveTo(dim.x + dim.w, dim.y, dim.x + dim.w, dim.y + radius.tr);
+        ctx.lineTo(dim.x + dim.w, dim.y + dim.h - radius.br);
+        ctx.quadraticCurveTo(dim.x + dim.w, dim.y + dim.h, dim.x + dim.w - radius.br, dim.y + dim.h);
+        ctx.lineTo(dim.x + radius.bl, dim.y + dim.h);
+        ctx.quadraticCurveTo(dim.x, dim.y + dim.h, dim.x, dim.y + dim.h - radius.bl);
+        ctx.lineTo(dim.x, dim.y + radius.tl);
+        ctx.quadraticCurveTo(dim.x, dim.y, dim.x + radius.tl, dim.y);
+        ctx.closePath();
+        if (fill) {
+            ctx.fill();
+        }
+        if (stroke) {
+            ctx.stroke();
+        }
+    }
+
+    Component.onCompleted: root.paint()
+}
+

internal/frontend/qml/Proton/Style.qml

@@ -17,6 +17,7 @@
 
 pragma Singleton
 import QtQml 2.13
+import QtQuick 2.12
 
 import "./"
 
@@ -24,279 +25,271 @@ import "./"
 // http://imaginativethinking.ca/make-qml-component-singleton/
 
 QtObject {
-
     // TODO: Once we will use Qt >=5.15 this should be refactored with inline components as follows:
     // https://doc.qt.io/qt-5/qtqml-documents-definetypes.html#inline-components
 
-    //component ColorScheme: QtObject {
+    // component ColorScheme: QtObject {
-        //    property color primay_norm
+    //    property color primay_norm
-        //    ...
+    //    ...
-        //}
+    // }
+    // and instead of "var" later on "ColorScheme" should be used (also in each component)
 
-        // and instead of "var" later on "ColorScheme" should be used
+    property var lightStyle: ColorScheme {
+        id: _lightStyle
 
-        property var _lightStyle: ColorScheme {
+        prominent: prominentStyle
-            id: lightStyle
 
-            // Primary
+        // Primary
-            primay_norm: "#657EE4"
+        primay_norm: "#657EE4"
 
-            // Interaction-norm
+        // Interaction-norm
-            interaction_norm: "#657EE4"
+        interaction_norm: "#657EE4"
-            interaction_norm_hover: "#5064B6"
+        interaction_norm_hover: "#5064B6"
-            interaction_norm_active: "#3C4B88"
+        interaction_norm_active: "#3C4B88"
 
-            // Text
+        // Text
-            text_norm: "#262A33"
+        text_norm: "#262A33"
-            text_weak: "#696F7D"
+        text_weak: "#696F7D"
-            text_hint: "#A4A9B5"
+        text_hint: "#A4A9B5"
-            text_disabled: "#BABEC7"
+        text_disabled: "#BABEC7"
-            text_invert: "#FFFFFF"
+        text_invert: "#FFFFFF"
 
-            // Field
+        // Field
-            field_norm: "#BABEC7"
+        field_norm: "#BABEC7"
-            field_hover: "#A4A9B5"
+        field_hover: "#A4A9B5"
-            field_disabled: "#D0D3DA"
+        field_disabled: "#D0D3DA"
 
-            // Border
+        // Border
-            border_norm: "#D0D3DA"
+        border_norm: "#D0D3DA"
-            border_weak: "#E7E9EC"
+        border_weak: "#E7E9EC"
 
-            // Background
+        // Background
-            background_norm: "#FFFFFF"
+        background_norm: "#FFFFFF"
-            background_weak: "#F3F4F6"
+        background_weak: "#F3F4F6"
-            background_strong: "#E7E9EC"
+        background_strong: "#E7E9EC"
-            background_avatar: "#A4A9B5"
+        background_avatar: "#A4A9B5"
 
-            // Interaction-weak
+        // Interaction-weak
-            interaction_weak: "#D0D3DA"
+        interaction_weak: "#D0D3DA"
-            interaction_weak_hover: "#BABEC7"
+        interaction_weak_hover: "#BABEC7"
-            interaction_weak_active: "#A4A9B5"
+        interaction_weak_active: "#A4A9B5"
 
-            // Interaction-default
+        // Interaction-default
-            interaction_default: "#00000000"
+        interaction_default: "#00000000"
-            interaction_default_hover: "#33BABEC7"
+        interaction_default_hover: "#33BABEC7"
-            interaction_default_active: "#4DBABEC7"
+        interaction_default_active: "#4DBABEC7"
 
-            // Scrollbar
+        // Scrollbar
-            scrollbar_norm: "#D0D3DA"
+        scrollbar_norm: "#D0D3DA"
-            scrollbar_hover: "#BABEC7"
+        scrollbar_hover: "#BABEC7"
 
-            // Signal
+        // Signal
-            signal_danger: "#D42F34"
+        signal_danger: "#D42F34"
-            signal_danger_hover: "#C7262B"
+        signal_danger_hover: "#C7262B"
-            signal_danger_active: "#BA1E23"
+        signal_danger_active: "#BA1E23"
-            signal_warning: "#F5830A"
+        signal_warning: "#F5830A"
-            signal_warning_hover: "#F5740A"
+        signal_warning_hover: "#F5740A"
-            signal_warning_active: "#F5640A"
+        signal_warning_active: "#F5640A"
-            signal_success: "#1B8561"
+        signal_success: "#1B8561"
-            signal_success_hover: "#147857"
+        signal_success_hover: "#147857"
-            signal_success_active: "#0F6B4C"
+        signal_success_active: "#0F6B4C"
-            signal_info: "#1578CF"
+        signal_info: "#1578CF"
-            signal_info_hover: "#0E6DC2"
+        signal_info_hover: "#0E6DC2"
-            signal_info_active: "#0764B5"
+        signal_info_active: "#0764B5"
 
-            // Shadows
+        // Shadows
-            shadow_norm: "#FFFFFF"
+        shadow_norm: "#FFFFFF"
-            shadow_lifted: "#FFFFFF"
+        shadow_lifted: "#FFFFFF"
 
-            // Backdrop
+        // Backdrop
-            backdrop_norm: "#7A262A33"
+        backdrop_norm: "#7A262A33"
-        }
+    }
 
-        property var _prominentStyle: ColorScheme {
+    property var prominentStyle: ColorScheme {
-            id: prominentStyle
+        id: _prominentStyle
 
-            // Primary
+        prominent: this
-            primay_norm: "#657EE4"
 
-            // Interaction-norm
+        // Primary
-            interaction_norm: "#657EE4"
+        primay_norm: "#657EE4"
-            interaction_norm_hover: "#7D92E8"
-            interaction_norm_active: "#98A9EE"
 
-            // Text
+        // Interaction-norm
-            text_norm: "#FFFFFF"
+        interaction_norm: "#657EE4"
-            text_weak: "#949BB9"
+        interaction_norm_hover: "#7D92E8"
-            text_hint: "#565F84"
+        interaction_norm_active: "#98A9EE"
-            text_disabled: "#444E72"
-            text_invert: "#1C223D"
 
-            // Field
+        // Text
-            field_norm: "#565F84"
+        text_norm: "#FFFFFF"
-            field_hover: "#949BB9"
+        text_weak: "#949BB9"
-            field_disabled: "#353E60"
+        text_hint: "#565F84"
+        text_disabled: "#444E72"
+        text_invert: "#1C223D"
 
-            // Border
+        // Field
-            border_norm: "#353E60"
+        field_norm: "#565F84"
-            border_weak: "#2D3657"
+        field_hover: "#949BB9"
+        field_disabled: "#353E60"
 
-            // Background
+        // Border
-            background_norm: "#1C223D"
+        border_norm: "#353E60"
-            background_weak: "#272F4F"
+        border_weak: "#2D3657"
-            background_strong: "#2D3657"
-            background_avatar: "#444E72"
 
-            // Interaction-weak
+        // Background
-            interaction_weak: "#353E60"
+        background_norm: "#1C223D"
-            interaction_weak_hover: "#444E72"
+        background_weak: "#272F4F"
-            interaction_weak_active: "#565F84"
+        background_strong: "#2D3657"
+        background_avatar: "#444E72"
 
-            // Interaction-default
+        // Interaction-weak
-            interaction_default: "#00000000"
+        interaction_weak: "#353E60"
-            interaction_default_hover: "#4D444E72"
+        interaction_weak_hover: "#444E72"
-            interaction_default_active: "#66444E72"
+        interaction_weak_active: "#565F84"
 
-            // Scrollbar
+        // Interaction-default
-            scrollbar_norm: "#353E60"
+        interaction_default: "#00000000"
-            scrollbar_hover: "#444E72"
+        interaction_default_hover: "#4D444E72"
+        interaction_default_active: "#66444E72"
 
-            // Signal
+        // Scrollbar
-            signal_danger: "#ED4C51"
+        scrollbar_norm: "#353E60"
-            signal_danger_hover: "#F7595E"
+        scrollbar_hover: "#444E72"
-            signal_danger_active: "#FF666B"
-            signal_warning: "#F5930A"
-            signal_warning_hover: "#F5A716"
-            signal_warning_active: "#F5B922"
-            signal_success: "#349172"
-            signal_success_hover: "#339C79"
-            signal_success_active: "#31A67F"
-            signal_info: "#2C89DB"
-            signal_info_hover: "#3491E3"
-            signal_info_active: "#3D99EB"
 
-            // Shadows
+        // Signal
-            shadow_norm: "#1C223D"
+        signal_danger: "#ED4C51"
-            shadow_lifted: "#1C223D"
+        signal_danger_hover: "#F7595E"
+        signal_danger_active: "#FF666B"
+        signal_warning: "#F5930A"
+        signal_warning_hover: "#F5A716"
+        signal_warning_active: "#F5B922"
+        signal_success: "#349172"
+        signal_success_hover: "#339C79"
+        signal_success_active: "#31A67F"
+        signal_info: "#2C89DB"
+        signal_info_hover: "#3491E3"
+        signal_info_active: "#3D99EB"
 
-            // Backdrop
+        // Shadows
-            backdrop_norm: "#52000000"
+        shadow_norm: "#1C223D"
-        }
+        shadow_lifted: "#1C223D"
 
-        property var _darkStyle: ColorScheme {
+        // Backdrop
-            id: darkStyle
+        backdrop_norm: "#52000000"
+    }
 
-            // Primary
+    property var darkStyle: ColorScheme {
-            primay_norm: "#657EE4"
+        id: _darkStyle
 
-            // Interaction-norm
+        prominent: prominentStyle
-            interaction_norm: "#657EE4"
-            interaction_norm_hover: "#7D92E8"
-            interaction_norm_active: "#98A9EE"
 
-            // Text
+        // Primary
-            text_norm: "#FFFFFF"
+        primay_norm: "#657EE4"
-            text_weak: "#A4A9B5"
-            text_hint: "#696F7D"
-            text_disabled: "#575D6B"
-            text_invert: "#262A33"
 
-            // Field
+        // Interaction-norm
-            field_norm: "#575D6B"
+        interaction_norm: "#657EE4"
-            field_hover: "#696F7D"
+        interaction_norm_hover: "#7D92E8"
-            field_disabled: "#464B58"
+        interaction_norm_active: "#98A9EE"
 
-            // Border
+        // Text
-            border_norm: "#464B58"
+        text_norm: "#FFFFFF"
-            border_weak: "#363A46"
+        text_weak: "#A4A9B5"
+        text_hint: "#696F7D"
+        text_disabled: "#575D6B"
+        text_invert: "#262A33"
 
-            // Background
+        // Field
-            background_norm: "#262A33"
+        field_norm: "#575D6B"
-            background_weak: "#2E323C"
+        field_hover: "#696F7D"
-            background_strong: "#363A46"
+        field_disabled: "#464B58"
-            background_avatar: "#575D6B"
 
-            // Interaction-weak
+        // Border
-            interaction_weak: "#464B58"
+        border_norm: "#464B58"
-            interaction_weak_hover: "#575D6B"
+        border_weak: "#363A46"
-            interaction_weak_active: "#696F7D"
 
-            // Interaction-default
+        // Background
-            interaction_default: "#00000000"
+        background_norm: "#262A33"
-            interaction_default_hover: "#33575D6B"
+        background_weak: "#2E323C"
-            interaction_default_active: "#4D575D6B"
+        background_strong: "#363A46"
+        background_avatar: "#575D6B"
 
-            // Scrollbar
+        // Interaction-weak
-            scrollbar_norm: "#464B58"
+        interaction_weak: "#464B58"
-            scrollbar_hover: "#575D6B"
+        interaction_weak_hover: "#575D6B"
+        interaction_weak_active: "#696F7D"
 
-            // Signal
+        // Interaction-default
-            signal_danger: "#ED4C51"
+        interaction_default: "#00000000"
-            signal_danger_hover: "#F7595E"
+        interaction_default_hover: "#33575D6B"
-            signal_danger_active: "#FF666B"
+        interaction_default_active: "#4D575D6B"
-            signal_warning: "#F5930A"
-            signal_warning_hover: "#F5A716"
-            signal_warning_active: "#F5B922"
-            signal_success: "#349172"
-            signal_success_hover: "#339C79"
-            signal_success_active: "#31A67F"
-            signal_info: "#2C89DB"
-            signal_info_hover: "#3491E3"
-            signal_info_active: "#3D99EB"
 
-            // Shadows
+        // Scrollbar
-            shadow_norm: "#262A33"
+        scrollbar_norm: "#464B58"
-            shadow_lifted: "#262A33"
+        scrollbar_hover: "#575D6B"
 
-            // Backdrop
+        // Signal
-            backdrop_norm: "#52000000"
+        signal_danger: "#ED4C51"
-        }
+        signal_danger_hover: "#F7595E"
+        signal_danger_active: "#FF666B"
+        signal_warning: "#F5930A"
+        signal_warning_hover: "#F5A716"
+        signal_warning_active: "#F5B922"
+        signal_success: "#349172"
+        signal_success_hover: "#339C79"
+        signal_success_active: "#31A67F"
+        signal_info: "#2C89DB"
+        signal_info_hover: "#3491E3"
+        signal_info_active: "#3D99EB"
 
-        // TODO: if default style should be loaded from somewhere - it should be loaded here
+        // Shadows
-        property var currentStyle: lightStyle
+        shadow_norm: "#262A33"
+        shadow_lifted: "#262A33"
 
-        property var _timer: Timer {
+        // Backdrop
-            interval: 1000
+        backdrop_norm: "#52000000"
-            repeat: true
+    }
-            running: true
-            onTriggered: {
-                switch (currentStyle) {
-                    case lightStyle:
-                    console.debug("Dark Style")
-                    currentStyle = darkStyle
-                    return
-                    case darkStyle:
-                    console.debug("Prominent Style")
-                    currentStyle = prominentStyle
-                    return
-                    case prominentStyle:
-                    console.debug("Light Style")
-                    currentStyle = lightStyle
-                    return
-                }
-            }
-        }
 
+    // TODO: if default style should be loaded from somewhere
+    // (i.e. from preferencies file) - it should be loaded here
+    property var currentStyle: lightStyle
 
-
+    property string font_family: {
-        property string font: {
+        switch (Qt.platform.os) {
-            // TODO: add OS to backend
+            case "windows":
+            return "Segoe UI"
+            case "osx":
+            return "SF Pro Display"
+            case "linux":
             return "Ubuntu"
-
+            default:
-            //switch (backend.OS) {
+            console.error("Unknown platform")
-                //    case "Windows":
-                //        return "Segoe UI"
-                //    case "OSX":
-                //        return "SF Pro Display"
-                //    case "Linux":
-                //        return "Ubuntu"
-                //}
-            }
-
-            property int heading_font_size: 28
-            property int heading_line_height: 36
-
-            property int title_font_size: 20
-            property int title_line_height: 24
-
-            property int lead_font_size: 18
-            property int lead_line_height: 26
-
-            property int body_font_size: 14
-            property int body_line_height: 20
-            property real body_letter_spacing: 0.2
-
-            property int caption_font_size: 12
-            property int caption_line_height: 16
-            property real caption_letter_spacing: 0.4
         }
+    }
+
+    property int heading_font_size: 28
+    property int heading_line_height: 36
+
+    property int title_font_size: 20
+    property int title_line_height: 24
+
+    property int lead_font_size: 18
+    property int lead_line_height: 26
+
+    property int body_font_size: 14
+    property int body_line_height: 20
+    property real body_letter_spacing: 0.2
+
+    property int caption_font_size: 12
+    property int caption_line_height: 16
+    property real caption_letter_spacing: 0.4
+
+    property int fontWidth_100: Font.Thin
+    property int fontWidth_200: Font.Light
+    property int fontWidth_300: Font.ExtraLight
+    property int fontWidth_400: Font.Normal
+    property int fontWidth_500: Font.Medium
+    property int fontWidth_600: Font.DemiBold
+    property int fontWidth_700: Font.Bold
+    property int fontWidth_800: Font.ExtraBold
+    property int fontWidth_900: Font.Black
+
+    property var transparent: "#00000000"
+}

internal/frontend/qml/Proton/Switch.qml

@@ -0,0 +1,149 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.12
+import QtQuick.Templates 2.12 as T
+import QtQuick.Controls 2.12
+import QtQuick.Controls.impl 2.12
+
+T.Switch {
+    property var colorScheme: parent.colorScheme ? parent.colorScheme : Style.currentStyle
+
+    property bool loading: false
+
+    // TODO: store previous enabled state and restore it?
+    // For now assuming that only enabled buttons could have loading state
+    onLoadingChanged: {
+        if (loading) {
+            enabled = false
+        } else {
+            enabled = true
+        }
+    }
+
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             implicitIndicatorHeight + topPadding + bottomPadding)
+
+    padding: 0
+    spacing: 7
+
+    indicator: PaddedRectangle {
+        implicitWidth: 40
+        implicitHeight: 24
+
+        x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        radius: 12
+        leftPadding: 0
+        rightPadding: 0
+        padding: 0
+        color: control.enabled || control.loading ? colorScheme.background_norm : colorScheme.background_strong
+        border.width: control.enabled && !loading ? 1 : 0
+        border.color: control.hovered ? colorScheme.field_hover : colorScheme.field_norm
+
+        Rectangle {
+            x: Math.max(0, Math.min(parent.width - width, control.visualPosition * parent.width - (width / 2)))
+            y: (parent.height - height) / 2
+            width: 24
+            height: 24
+            radius: 12
+
+            visible: !loading
+
+            color: {
+                if (!control.enabled) {
+                    return colorScheme.field_disabled
+                }
+
+                if (control.checked) {
+                    if (control.hovered) {
+                        return colorScheme.interaction_norm_hover
+                    }
+
+                    return colorScheme.interaction_norm
+                }
+
+                if (control.hovered) {
+                    return colorScheme.field_hover
+                }
+
+                return colorScheme.field_norm
+            }
+
+            ColorImage {
+                x: (parent.width - width) / 2
+                y: (parent.height - height) / 2
+
+                width: 16
+                height: 16
+                color: "#FFFFFF"
+                source: "../icons/ic-check.svg"
+                visible: control.checked
+            }
+
+            Behavior on x {
+                enabled: !control.down
+                SmoothedAnimation { velocity: 200 }
+            }
+        }
+
+        ColorImage {
+            id: loadingImage
+            x: parent.width - width
+            y: (parent.height - height) / 2
+
+            width: 18
+            height: 18
+            color: colorScheme.interaction_norm_hover
+            source: "../icons/Loader_16.svg"
+            visible: control.loading
+
+            RotationAnimation {
+                target: loadingImage
+                loops: Animation.Infinite
+                duration: 1000
+                from: 0
+                to: 360
+                direction: RotationAnimation.Clockwise
+                running: control.loading
+            }
+        }
+    }
+
+    contentItem: CheckLabel {
+        id: label
+        leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+
+        color: control.enabled || control.loading ? colorScheme.text_norm : colorScheme.text_disabled
+
+        font.family: Style.font_family
+        font.weight: Style.fontWidth_400
+        font.pixelSize: 14
+        lineHeight: 20
+        lineHeightMode: Text.FixedHeight
+        font.letterSpacing: 0.2
+    }
+}

internal/frontend/qml/Proton/TextArea.qml

@@ -0,0 +1,274 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQml 2.12
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.impl 2.12
+import QtQuick.Templates 2.12 as T
+
+Item {
+    id: root
+    property var colorScheme: parent.colorScheme ? parent.colorScheme : Style.currentStyle
+
+    property alias background: control.background
+    property alias bottomInset: control.bottomInset
+    //property alias flickable: control.flickable
+    property alias focusReason: control.focusReason
+    property alias hoverEnabled: control.hoverEnabled
+    property alias hovered: control.hovered
+    property alias implicitBackgroundHeight: control.implicitBackgroundHeight
+    property alias implicitBackgroundWidth: control.implicitBackgroundWidth
+    property alias leftInset: control.leftInset
+    property alias palette: control.palette
+    property alias placeholderText: control.placeholderText
+    property alias placeholderTextColor: control.placeholderTextColor
+    property alias rightInset: control.rightInset
+    property alias topInset: control.topInset
+    property alias activeFocusOnPress: control.activeFocusOnPress
+    property alias baseUrl: control.baseUrl
+    property alias bottomPadding: control.bottomPadding
+    property alias canPaste: control.canPaste
+    property alias canRedo: control.canRedo
+    property alias canUndo: control.canUndo
+    property alias color: control.color
+    property alias contentHeight: control.contentHeight
+    property alias contentWidth: control.contentWidth
+    property alias cursorDelegate: control.cursorDelegate
+    property alias cursorPosition: control.cursorPosition
+    property alias cursorRectangle: control.cursorRectangle
+    property alias cursorVisible: control.cursorVisible
+    property alias effectiveHorizontalAlignment: control.effectiveHorizontalAlignment
+    property alias font: control.font
+    property alias horizontalAlignment: control.horizontalAlignment
+    property alias hoveredLink: control.hoveredLink
+    property alias inputMethodComposing: control.inputMethodComposing
+    property alias inputMethodHints: control.inputMethodHints
+    property alias leftPadding: control.leftPadding
+    property alias length: control.length
+    property alias lineCount: control.lineCount
+    property alias mouseSelectionMode: control.mouseSelectionMode
+    property alias overwriteMode: control.overwriteMode
+    property alias padding: control.padding
+    property alias persistentSelection: control.persistentSelection
+    property alias preeditText: control.preeditText
+    property alias readOnly: control.readOnly
+    property alias renderType: control.renderType
+    property alias rightPadding: control.rightPadding
+    property alias selectByKeyboard: control.selectByKeyboard
+    property alias selectByMouse: control.selectByMouse
+    property alias selectedText: control.selectedText
+    property alias selectedTextColor: control.selectedTextColor
+    property alias selectionColor: control.selectionColor
+    property alias selectionEnd: control.selectionEnd
+    property alias selectionStart: control.selectionStart
+    property alias tabStopDistance: control.tabStopDistance
+    property alias text: control.text
+    property alias textDocument: control.textDocument
+    property alias textFormat: control.textFormat
+    property alias textMargin: control.textMargin
+    property alias topPadding: control.topPadding
+    property alias verticalAlignment: control.verticalAlignment
+    property alias wrapMode: control.wrapMode
+
+    implicitWidth: background.width
+    implicitHeight: control.implicitHeight +
+                    Math.max(label.implicitHeight + label.anchors.topMargin + label.anchors.bottomMargin, hint.implicitHeight + hint.anchors.topMargin + hint.anchors.bottomMargin) +
+                    assistiveText.implicitHeight
+
+    property alias label: label.text
+    property alias hint: hint.text
+    property alias assistiveText: assistiveText.text
+
+    property bool error: false
+
+    // Backgroud is moved away from within control as it will be clipped with scrollview
+    Rectangle {
+        id: background
+
+        anchors.fill: controlView
+
+        radius: 4
+        visible: true
+        color: colorScheme.background_norm
+        border.color: {
+            if (!control.enabled) {
+                return colorScheme.field_disabled
+            }
+
+            if (control.activeFocus) {
+                return colorScheme.interaction_norm
+            }
+
+            if (root.error) {
+                return colorScheme.signal_danger
+            }
+
+            if (control.hovered) {
+                return colorScheme.field_hover
+            }
+
+            return colorScheme.field_norm
+        }
+        border.width: 1
+    }
+
+    Label {
+        id: label
+
+        anchors.top: root.top
+        anchors.left: root.left
+        anchors.bottomMargin: 4
+
+        color: root.enabled ? colorScheme.text_norm : colorScheme.text_disabled
+
+        font.family: Style.font_family
+        font.weight: Style.fontWidth_600
+        font.pixelSize: 14
+        lineHeight: 20
+        lineHeightMode: Text.FixedHeight
+        font.letterSpacing: 0.2
+    }
+
+    Label {
+        id: hint
+
+        anchors.right: root.right
+        anchors.bottom: controlView.top
+        anchors.bottomMargin: 5
+
+        color: root.enabled ? colorScheme.text_weak : colorScheme.text_disabled
+
+        font.family: Style.font_family
+        font.weight: Style.fontWidth_400
+        font.pixelSize: 12
+        lineHeight: 16
+        lineHeightMode: Text.FixedHeight
+        font.letterSpacing: 0.4
+    }
+
+    ColorImage {
+        id: errorIcon
+        visible: root.error
+        anchors.left: parent.left
+        anchors.top: assistiveText.top
+        anchors.bottom: assistiveText.bottom
+        source: "../icons/ic-exclamation-circle-filled.svg"
+        color: colorScheme.signal_danger
+    }
+
+    Label {
+        id: assistiveText
+
+        anchors.left: root.error ? errorIcon.right : parent.left
+        anchors.leftMargin: root.error ? 5 : 0
+        anchors.bottom: root.bottom
+        anchors.topMargin: 4
+
+        color: {
+            if (!root.enabled) {
+                return colorScheme.text_disabled
+            }
+
+            if (root.error) {
+                return colorScheme.signal_danger
+            }
+
+            return colorScheme.text_weak
+        }
+
+        font.family: Style.font_family
+        font.weight: root.error ? Style.fontWidth_600 : Style.fontWidth_400
+        font.pixelSize: 12
+        lineHeight: 16
+        lineHeightMode: Text.FixedHeight
+        font.letterSpacing: 0.4
+    }
+
+    ScrollView {
+        id: controlView
+
+        anchors.top: label.bottom
+        anchors.left: root.left
+        anchors.right: root.right
+        anchors.bottom: assistiveText.top
+
+        clip: true
+
+        T.TextArea {
+            id: control
+
+            implicitWidth: Math.max(contentWidth + leftPadding + rightPadding,
+                                    implicitBackgroundWidth + leftInset + rightInset,
+                                    placeholder.implicitWidth + leftPadding + rightPadding)
+            implicitHeight: Math.max(contentHeight + topPadding + bottomPadding,
+                                     implicitBackgroundHeight + topInset + bottomInset,
+                                     placeholder.implicitHeight + topPadding + bottomPadding)
+
+            padding: 8
+            leftPadding: 12
+
+            color: control.enabled ? colorScheme.text_norm : colorScheme.text_disabled
+            placeholderTextColor: control.enabled ? colorScheme.text_hint : colorScheme.text_disabled
+
+            selectionColor: control.palette.highlight
+            selectedTextColor: control.palette.highlightedText
+
+            cursorDelegate: Rectangle {
+                id: cursor
+                width: 1
+                color: colorScheme.interaction_norm
+                visible: control.activeFocus && !control.readOnly && control.selectionStart === control.selectionEnd
+
+                Connections {
+                    target: control
+                    onCursorPositionChanged: {
+                        // keep a moving cursor visible
+                        cursor.opacity = 1
+                        timer.restart()
+                    }
+                }
+
+                Timer {
+                    id: timer
+                    running: control.activeFocus && !control.readOnly
+                    repeat: true
+                    interval: Qt.styleHints.cursorFlashTime / 2
+                    onTriggered: cursor.opacity = !cursor.opacity ? 1 : 0
+                    // force the cursor visible when gaining focus
+                    onRunningChanged: cursor.opacity = 1
+                }
+            }
+
+            PlaceholderText {
+                id: placeholder
+                x: control.leftPadding
+                y: control.topPadding
+                width: control.width - (control.leftPadding + control.rightPadding)
+                height: control.height - (control.topPadding + control.bottomPadding)
+
+                text: control.placeholderText
+                font: control.font
+                color: control.placeholderTextColor
+                verticalAlignment: control.verticalAlignment
+                visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
+                elide: Text.ElideRight
+                renderType: control.renderType
+            }
+        }
+    }
+}

internal/frontend/qml/Proton/TextField.qml

@@ -0,0 +1,329 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQml 2.12
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.impl 2.12
+import QtQuick.Templates 2.12 as T
+import QtQuick.Layouts 1.12
+
+Item {
+    id: root
+    property var colorScheme: parent.colorScheme ? parent.colorScheme : Style.currentStyle
+
+    property alias background: control.background
+    property alias bottomInset: control.bottomInset
+    property alias focusReason: control.focusReason
+    property alias hoverEnabled: control.hoverEnabled
+    property alias hovered: control.hovered
+    property alias implicitBackgroundHeight: control.implicitBackgroundHeight
+    property alias implicitBackgroundWidth: control.implicitBackgroundWidth
+    property alias leftInset: control.leftInset
+    property alias palette: control.palette
+    property alias placeholderText: control.placeholderText
+    property alias placeholderTextColor: control.placeholderTextColor
+    property alias rightInset: control.rightInset
+    property alias topInset: control.topInset
+    property alias acceptableInput: control.acceptableInput
+    property alias activeFocusOnPress: control.activeFocusOnPress
+    property alias autoScroll: control.autoScroll
+    property alias bottomPadding: control.bottomPadding
+    property alias canPaste: control.canPaste
+    property alias canRedo: control.canRedo
+    property alias canUndo: control.canUndo
+    property alias color: control.color
+    //property alias contentHeight: control.contentHeight
+    //property alias contentWidth: control.contentWidth
+    property alias cursorDelegate: control.cursorDelegate
+    property alias cursorPosition: control.cursorPosition
+    property alias cursorRectangle: control.cursorRectangle
+    property alias cursorVisible: control.cursorVisible
+    property alias displayText: control.displayText
+    property alias effectiveHorizontalAlignment: control.effectiveHorizontalAlignment
+    property alias font: control.font
+    property alias horizontalAlignment: control.horizontalAlignment
+    property alias inputMask: control.inputMask
+    property alias inputMethodComposing: control.inputMethodComposing
+    property alias inputMethodHints: control.inputMethodHints
+    property alias leftPadding: control.leftPadding
+    property alias length: control.length
+    property alias maximumLength: control.maximumLength
+    property alias mouseSelectionMode: control.mouseSelectionMode
+    property alias overwriteMode: control.overwriteMode
+    property alias padding: control.padding
+    property alias passwordCharacter: control.passwordCharacter
+    property alias passwordMaskDelay: control.passwordMaskDelay
+    property alias persistentSelection: control.persistentSelection
+    property alias preeditText: control.preeditText
+    property alias readOnly: control.readOnly
+    property alias renderType: control.renderType
+    property alias rightPadding: control.rightPadding
+    property alias selectByMouse: control.selectByMouse
+    property alias selectedText: control.selectedText
+    property alias selectedTextColor: control.selectedTextColor
+    property alias selectionColor: control.selectionColor
+    property alias selectionEnd: control.selectionEnd
+    property alias selectionStart: control.selectionStart
+    property alias text: control.text
+    property alias validator: control.validator
+    property alias verticalAlignment: control.verticalAlignment
+    property alias wrapMode: control.wrapMode
+
+    implicitWidth: children[0].implicitWidth
+    implicitHeight: children[0].implicitHeight
+
+    property alias label: label.text
+    property alias hint: hint.text
+    property alias assistiveText: assistiveText.text
+
+    property var echoMode: TextInput.Normal
+
+    property bool error: false
+
+    signal accepted()
+    signal editingFinished()
+    signal textEdited()
+
+    function clear() { control.clear() }
+    function copy() { control.copy() }
+    function cut() { control.cut() }
+    function deselect() { control.deselect() }
+    function ensureVisible(position) { control.ensureVisible(position) }
+    function getText(start, end) { control.getText(start, end) }
+    function insert(position, text) { control.insert(position, text) }
+    function isRightToLeft(start, end) { control.isRightToLeft(start, end) }
+    function moveCursorSelection(position, mode) { control.moveCursorSelection(position, mode) }
+    function paste() { control.paste() }
+    function positionAt(x, y, position) { control.positionAt(x, y, position) }
+    function positionToRectangle(pos) { control.positionToRectangle(pos) }
+    function redo() { control.redo() }
+    function remove(start, end) { control.remove(start, end) }
+    function select(start, end) { control.select(start, end) }
+    function selectAll() { control.selectAll() }
+    function selectWord() { control.selectWord() }
+    function undo() { control.undo() }
+    function forceActiveFocus() {control.forceActiveFocus()}
+
+    ColumnLayout {
+        anchors.fill: parent
+        spacing: 0
+
+        RowLayout {
+            Layout.fillWidth: true
+            spacing: 0
+
+            ProtonLabel {
+                id: label
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                color: root.enabled ? colorScheme.text_norm : colorScheme.text_disabled
+                font.weight: Style.fontWidth_600
+                state: "body"
+            }
+
+            ProtonLabel {
+                id: hint
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                color: root.enabled ? colorScheme.text_weak : colorScheme.text_disabled
+                horizontalAlignment: Text.AlignRight
+                state: "caption"
+            }
+        }
+
+        // Background is moved away from within control to cover eye button as well.
+        // In case it will remain as control background property - control's width
+        // will be adjusted to background's width making text field and eye button overlap
+        Rectangle {
+            id: background
+
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            radius: 4
+            visible: true
+            color: colorScheme.background_norm
+            border.color: {
+                if (!control.enabled) {
+                    return colorScheme.field_disabled
+                }
+
+                if (control.activeFocus) {
+                    return colorScheme.interaction_norm
+                }
+
+                if (root.error) {
+                    return colorScheme.signal_danger
+                }
+
+                if (control.hovered) {
+                    return colorScheme.field_hover
+                }
+
+                return colorScheme.field_norm
+            }
+            border.width: 1
+
+            implicitWidth: children[0].implicitWidth
+            implicitHeight: children[0].implicitHeight
+
+            RowLayout {
+                anchors.fill: parent
+                spacing: 0
+
+                T.TextField {
+                    id: control
+
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
+
+                    implicitWidth: implicitBackgroundWidth + leftInset + rightInset
+                    || Math.max(contentWidth, placeholder.implicitWidth) + leftPadding + rightPadding
+                    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                    contentHeight + topPadding + bottomPadding,
+                    placeholder.implicitHeight + topPadding + bottomPadding)
+
+                    padding: 8
+                    leftPadding: 12
+
+                    color: control.enabled ? colorScheme.text_norm : colorScheme.text_disabled
+
+                    selectionColor: control.palette.highlight
+                    selectedTextColor: control.palette.highlightedText
+                    placeholderTextColor: control.enabled ? colorScheme.text_hint : colorScheme.text_disabled
+                    verticalAlignment: TextInput.AlignVCenter
+
+                    cursorDelegate: Rectangle {
+                        id: cursor
+                        width: 1
+                        color: colorScheme.interaction_norm
+                        visible: control.activeFocus && !control.readOnly && control.selectionStart === control.selectionEnd
+
+                        Connections {
+                            target: control
+                            onCursorPositionChanged: {
+                                // keep a moving cursor visible
+                                cursor.opacity = 1
+                                timer.restart()
+                            }
+                        }
+
+                        Timer {
+                            id: timer
+                            running: control.activeFocus && !control.readOnly
+                            repeat: true
+                            interval: Qt.styleHints.cursorFlashTime / 2
+                            onTriggered: cursor.opacity = !cursor.opacity ? 1 : 0
+                            // force the cursor visible when gaining focus
+                            onRunningChanged: cursor.opacity = 1
+                        }
+                    }
+
+                    PlaceholderText {
+                        id: placeholder
+                        x: control.leftPadding
+                        y: control.topPadding
+                        width: control.width - (control.leftPadding + control.rightPadding)
+                        height: control.height - (control.topPadding + control.bottomPadding)
+
+                        text: control.placeholderText
+                        font: control.font
+                        color: control.placeholderTextColor
+                        verticalAlignment: control.verticalAlignment
+                        visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
+                        elide: Text.ElideRight
+                        renderType: control.renderType
+                    }
+
+                    background: Item {
+                        implicitWidth: 80
+                        implicitHeight: 36
+                        visible: false
+                    }
+
+                    onAccepted: {
+                        root.accepted()
+                    }
+                    onEditingFinished: {
+                        root.editingFinished()
+                    }
+                    onTextEdited: {
+                        root.textEdited()
+                    }
+                }
+
+                Button {
+                    id: eyeButton
+
+                    Layout.fillHeight: true
+
+                    visible: root.echoMode === TextInput.Password
+                    icon.source: control.echoMode == TextInput.Password ? "../icons/ic-eye.svg" : "../icons/ic-eye-slash.svg"
+                    icon.color: control.color
+                    background: Rectangle{color: "#00000000"}
+                    onClicked: {
+                        if (control.echoMode == TextInput.Password) {
+                            control.echoMode = TextInput.Normal
+                        } else {
+                            control.echoMode = TextInput.Password
+                        }
+                    }
+                    Component.onCompleted: control.echoMode = root.echoMode
+                }
+            }
+        }
+
+        RowLayout {
+            Layout.fillWidth: true
+            spacing: 0
+
+            // FIXME: maybe somewhere in the future there will be an Icon component capable of setting color to the icon
+            // but before that moment we need to use IconLabel
+            IconLabel {
+                id: errorIcon
+
+                visible: root.error && (assistiveText.text.length > 0)
+                icon.source: "../icons/ic-exclamation-circle-filled.svg"
+                icon.color: colorScheme.signal_danger
+            }
+
+            ProtonLabel {
+                id: assistiveText
+
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                Layout.leftMargin: 4
+
+                color: {
+                    if (!root.enabled) {
+                        return colorScheme.text_disabled
+                    }
+
+                    if (root.error) {
+                        return colorScheme.signal_danger
+                    }
+
+                    return colorScheme.text_weak
+                }
+
+                font.weight: root.error ? Style.fontWidth_600 : Style.fontWidth_400
+                state: "caption"
+            }
+        }
+    }
+}

internal/frontend/qml/Proton/qmldir

@@ -2,5 +2,12 @@ module QQtQuick.Controls.Proton
 depends QtQuick.Controls 2.12
 
 singleton ProtonStyle 4.0 Style.qml
+Banner 4.0 Banner.qml
 Button 4.0 Button.qml
-
+CheckBox 4.0 CheckBox.qml
+ProtonLabel 4.0 ProtonLabel.qml
+RoundedRectangle 4.0 RoundedRectangle.qml
+RadioButton 4.0 RadioButton.qml
+Switch 4.0 Switch.qml
+TextArea 4.0 TextArea.qml
+TextField 4.0 TextField.qml

internal/frontend/qml/SetupGuide.qml

@@ -0,0 +1,110 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+
+import QtQuick 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls.impl 2.12
+
+import Proton 4.0
+
+RowLayout {
+    id:root
+
+    property var colorScheme
+    property var window
+
+    property var user: { "username": "janedoe@protonmail.com" }
+
+    ColumnLayout {
+        Layout.fillHeight: true
+        Layout.leftMargin: 80
+        Layout.rightMargin: 80
+        Layout.topMargin: 30
+        Layout.bottomMargin: 70
+
+        ProtonLabel {
+            text: qsTr("Set up email client")
+            font.weight: ProtonStyle.fontWidth_700
+            state: "heading"
+        }
+
+        ProtonLabel {
+            text: user.username
+            color: root.colorScheme.text_weak
+            state: "lead"
+        }
+
+        ProtonLabel {
+            Layout.topMargin: 32
+            text: qsTr("Choose an email client")
+            font.weight: ProtonStyle.fontWidth_600
+            state: "body"
+        }
+
+        ListModel {
+            id: clients
+            ListElement{name : "Apple Mail"          ; iconSource : "./icons/ic-apple-mail.svg"          }
+            ListElement{name : "Microsoft Outlook"   ; iconSource : "./icons/ic-microsoft-outlook.svg"   }
+            ListElement{name : "Mozilla Thunderbird" ; iconSource : "./icons/ic-mozilla-thunderbird.svg" }
+            ListElement{name : "Other"               ; iconSource : "./icons/ic-other-mail-clients.svg"  }
+        }
+
+
+        Repeater {
+            model: clients
+
+            ColumnLayout {
+                RowLayout {
+                    Layout.topMargin: 12
+                    Layout.bottomMargin: 12
+                    Layout.leftMargin: 16
+                    Layout.rightMargin: 16
+
+                    IconLabel {
+                        icon.source: model.iconSource
+                        icon.height: 36
+                    }
+
+                    ProtonLabel {
+                        Layout.leftMargin: 12
+                        text: model.name
+                        state: "body"
+                    }
+                }
+
+                Rectangle {
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 1
+                    color: root.colorScheme.border_weak
+                }
+            }
+        }
+
+        Item { Layout.fillHeight: true }
+
+        Button {
+            text: qsTr("Set up later")
+            flat: true
+
+            onClicked: {
+                root.window.showSetup = false
+                root.reset()
+            }
+        }
+    }
+}

internal/frontend/qml/SignIn.qml

@@ -0,0 +1,503 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQml 2.12
+import QtQuick 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.impl 2.12
+
+import Proton 4.0
+
+Item {
+    id: root
+    property var colorScheme: parent.colorScheme
+
+    function abort() {
+        root.loginAbort(usernameTextField.text)
+    }
+
+    signal login(string username, string password)
+    signal login2FA(string username, string code)
+    signal login2Password(string username, string password)
+    signal loginAbort(string username)
+
+    implicitHeight: children[0].implicitHeight
+    implicitWidth: children[0].implicitWidth
+
+    property var backend
+    property var window
+
+    // in case of adding new account this property should be undefined
+    property var user
+    state: "Page 1"
+
+    onUserChanged: {
+        stackLayout.currentIndex = 0
+        loginNormalLayout.reset()
+        passwordTextField.text = ""
+        login2FALayout.reset()
+        login2PasswordLayout.reset()
+    }
+
+    onLoginAbort: {
+        stackLayout.currentIndex = 0
+        loginNormalLayout.reset()
+        login2FALayout.reset()
+        login2PasswordLayout.reset()
+    }
+
+    property alias currentIndex: stackLayout.currentIndex
+
+    StackLayout {
+        id: stackLayout
+        anchors.fill: parent
+
+        function loginFailed() {
+            signInButton.loading = false
+
+            usernameTextField.enabled = true
+            usernameTextField.error = true
+
+            passwordTextField.enabled = true
+            passwordTextField.error = true
+        }
+
+        Connections {
+            target: user !== undefined ? user : root.backend
+
+            onLoginUsernamePasswordError: {
+                console.assert(stackLayout.currentIndex == 0, "Unexpected loginUsernamePasswordError")
+                console.assert(signInButton.loading == true, "Unexpected loginUsernamePasswordError")
+
+                stackLayout.loginFailed()
+                errorLabel.text = qsTr("Your email and/or password are incorrect")
+
+            }
+
+            onLoginFreeUserError: {
+                console.assert(stackLayout.currentIndex == 0, "Unexpected loginFreeUserError")
+                stackLayout.loginFailed()
+                window.notifyOnlyPaidUsers()
+            }
+            onLoginConnectionError: {
+                if (stackLayout.currentIndex == 0 ) {
+                    stackLayout.loginFailed()
+                }
+                window.notifyConnectionLostWhileLogin()
+            }
+
+            onLogin2FARequested: {
+                console.assert(stackLayout.currentIndex == 0, "Unexpected login2FARequested")
+
+                stackLayout.currentIndex = 1
+            }
+            onLogin2FAError: {
+                console.assert(stackLayout.currentIndex == 1, "Unexpected login2FAError")
+
+                twoFAButton.loading = false
+
+                twoFactorPasswordTextField.enabled = true
+                twoFactorPasswordTextField.error = true
+                twoFactorPasswordTextField.assistiveText = qsTr("Your code is incorrect")
+            }
+            onLogin2FAErrorAbort: {
+                console.assert(stackLayout.currentIndex == 1, "Unexpected login2FAErrorAbort")
+
+                stackLayout.currentIndex = 0
+                loginNormalLayout.reset()
+                login2FALayout.reset()
+                login2PasswordLayout.reset()
+
+                errorLabel.text = qsTr("Incorrect login credentials. Please try again.")
+                passwordTextField.text = ""
+            }
+
+            onLogin2PasswordRequested: {
+                console.assert(stackLayout.currentIndex == 0 || stackLayout.currentIndex == 1, "Unexpected login2PasswordRequested")
+
+                stackLayout.currentIndex = 2
+            }
+            onLogin2PasswordError: {
+                console.assert(stackLayout.currentIndex == 2, "Unexpected login2PasswordError")
+
+                secondPasswordButton.loading = false
+
+                secondPasswordTextField.enabled = true
+                secondPasswordTextField.error = true
+                secondPasswordTextField.assistiveText = qsTr("Your mailbox password is incorrect")
+            }
+            onLogin2PasswordErrorAbort: {
+                console.assert(stackLayout.currentIndex == 2, "Unexpected login2PasswordErrorAbort")
+
+                stackLayout.currentIndex = 0
+                loginNormalLayout.reset()
+                login2FALayout.reset()
+                login2PasswordLayout.reset()
+
+                errorLabel.text = qsTr("Incorrect login credentials. Please try again.")
+                passwordTextField.text = ""
+            }
+        }
+
+        ColumnLayout {
+            id: loginNormalLayout
+
+            function reset() {
+                signInButton.loading = false
+
+                errorLabel.text = ""
+
+                usernameTextField.enabled = true
+                usernameTextField.error = false
+                usernameTextField.assistiveText = ""
+
+                passwordTextField.enabled = true
+                passwordTextField.error = false
+                passwordTextField.assistiveText = ""
+            }
+
+            spacing: 0
+
+            ProtonLabel {
+                text: qsTr("Sign in")
+                Layout.alignment: Qt.AlignHCenter
+                Layout.topMargin: 16
+                font.weight: ProtonStyle.fontWidth_700
+            }
+
+            ProtonLabel {
+                id: subTitle
+                text: qsTr("Enter your Proton Account details.")
+                Layout.alignment: Qt.AlignHCenter
+                Layout.topMargin: 8
+                color: root.colorScheme.text_weak
+                state: "body"
+            }
+
+            RowLayout {
+                Layout.fillWidth: true
+                Layout.topMargin: 36
+
+                spacing: 0
+                visible: errorLabel.text.length > 0
+
+                ColorImage {
+                    color: root.colorScheme.signal_danger
+                    source: "./icons/ic-exclamation-circle-filled.svg"
+                }
+
+                ProtonLabel {
+                    id: errorLabel
+                    Layout.leftMargin: 4
+                    color: root.colorScheme.signal_danger
+
+                    font.weight: root.error ? ProtonStyle.fontWidth_600 : ProtonStyle.fontWidth_400
+                    state: "caption"
+                }
+            }
+
+            TextField {
+                id: usernameTextField
+                label: qsTr("Username or email")
+
+                text: user !== undefined ? user.username : ""
+
+                Layout.fillWidth: true
+                Layout.topMargin: 24
+
+                onTextEdited: { // TODO: repeating?
+                    if (error || errorLabel.text.length > 0) {
+                        errorLabel.text = ""
+
+                        usernameTextField.error = false
+                        usernameTextField.assistiveText = ""
+
+                        passwordTextField.error = false
+                        passwordTextField.assistiveText = ""
+                    }
+                }
+
+                onAccepted: passwordTextField.forceActiveFocus()
+            }
+
+            TextField {
+                id: passwordTextField
+                label: qsTr("Password")
+
+                Layout.fillWidth: true
+                Layout.topMargin: 8
+                echoMode: TextInput.Password
+
+                onTextEdited: {
+                    if (error || errorLabel.text.length > 0) {
+                        errorLabel.text = ""
+
+                        usernameTextField.error = false
+                        usernameTextField.assistiveText = ""
+
+                        passwordTextField.error = false
+                        passwordTextField.assistiveText = ""
+                    }
+                }
+
+                onAccepted: signInButton.checkAndSignIn()
+            }
+
+            Button {
+                id: signInButton
+                text: qsTr("Sign in")
+
+                Layout.fillWidth: true
+                Layout.topMargin: 24
+
+
+                onClicked: checkAndSignIn()
+
+                function checkAndSignIn() {
+                    var err = false
+
+                    if (usernameTextField.text.length == 0) {
+                        usernameTextField.error = true
+                        usernameTextField.assistiveText = qsTr("Enter username or email")
+                        err = true
+                    } else {
+                        usernameTextField.error = false
+                        usernameTextField.assistiveText = qsTr("")
+                    }
+
+                    if (passwordTextField.text.length == 0) {
+                        passwordTextField.error = true
+                        passwordTextField.assistiveText = qsTr("Enter password")
+                        err = true
+                    } else {
+                        passwordTextField.error = false
+                        passwordTextField.assistiveText = qsTr("")
+                    }
+
+                    if (err) {
+                        return
+                    }
+
+                    usernameTextField.enabled = false
+                    passwordTextField.enabled = false
+
+                    enabled = false
+                    loading = true
+
+                    if (root.user !== undefined) {
+                        root.user.login(usernameTextField.text, passwordTextField.text)
+                        return
+                    }
+
+                    root.login(usernameTextField.text, passwordTextField.text)
+                }
+            }
+
+            ProtonLabel {
+                textFormat: Text.StyledText
+                text: putLink("https://protonmail.com/upgrade", qsTr("Create or upgrade your account"))
+                Layout.alignment: Qt.AlignHCenter
+                Layout.topMargin: 24
+                state: "body"
+
+                onLinkActivated: {
+                    Qt.openUrlExternally(link)
+                }
+
+            }
+        }
+
+        ColumnLayout {
+            id: login2FALayout
+
+            function reset() {
+                twoFAButton.loading = false
+
+                twoFactorPasswordTextField.enabled = true
+                twoFactorPasswordTextField.error = false
+                twoFactorPasswordTextField.assistiveText = ""
+            }
+
+            spacing: 0
+
+            ProtonLabel {
+                text: qsTr("Two-factor authentication")
+                Layout.topMargin: 16
+                Layout.alignment: Qt.AlignCenter
+                font.weight: ProtonStyle.fontWidth_700
+
+
+            }
+
+            TextField {
+                id: twoFactorPasswordTextField
+                label: qsTr("Two-factor authentication code")
+
+                Layout.fillWidth: true
+                Layout.topMargin: 8 + implicitHeight + 24 + subTitle.implicitHeight
+
+                onTextEdited: {
+                    if (error) {
+                        twoFactorPasswordTextField.error = false
+                        twoFactorPasswordTextField.assistiveText = ""
+                    }
+                }
+            }
+
+            Button {
+                id: twoFAButton
+                text: loading ? qsTr("Authenticating") : qsTr("Authenticate")
+
+                Layout.fillWidth: true
+                Layout.topMargin: 24
+
+                onClicked: {
+                    var err = false
+
+                    if (twoFactorPasswordTextField.text.length == 0) {
+                        twoFactorPasswordTextField.error = true
+                        twoFactorPasswordTextField.assistiveText = qsTr("Enter username or email")
+                        err = true
+                    } else {
+                        twoFactorPasswordTextField.error = false
+                        twoFactorPasswordTextField.assistiveText = qsTr("")
+                    }
+
+                    if (err) {
+                        return
+                    }
+
+                    twoFactorPasswordTextField.enabled = false
+
+                    enabled = false
+                    loading = true
+
+                    if (root.user !== undefined) {
+                        root.user.login2FA(usernameTextField.text, twoFactorPasswordTextField.text)
+                        return
+                    }
+
+                    root.login2FA(usernameTextField.text, twoFactorPasswordTextField.text)
+                }
+            }
+        }
+
+        ColumnLayout {
+            id: login2PasswordLayout
+
+            function reset() {
+                secondPasswordButton.loading = false
+
+                secondPasswordTextField.enabled = true
+                secondPasswordTextField.error = false
+                secondPasswordTextField.assistiveText = ""
+            }
+
+            spacing: 0
+
+            ProtonLabel {
+                text: qsTr("Unlock your mailbox")
+                Layout.topMargin: 16
+                Layout.alignment: Qt.AlignCenter
+                font.weight: ProtonStyle.fontWidth_700
+            }
+
+
+
+
+
+
+            TextField {
+                id: secondPasswordTextField
+                label: qsTr("Mailbox password")
+
+                Layout.fillWidth: true
+                Layout.topMargin: 8 + implicitHeight + 24 + subTitle.implicitHeight
+                echoMode: TextInput.Password
+
+                onTextEdited: {
+                    if (error) {
+                        secondPasswordTextField.error = false
+                        secondPasswordTextField.assistiveText = ""
+                    }
+                }
+            }
+
+            Button {
+                id: secondPasswordButton
+                text: loading ? qsTr("Unlocking") : qsTr("Unlock")
+
+                Layout.fillWidth: true
+                Layout.topMargin: 24
+
+                onClicked: {
+                    var err = false
+
+                    if (secondPasswordTextField.text.length == 0) {
+                        secondPasswordTextField.error = true
+                        secondPasswordTextField.assistiveText = qsTr("Enter username or email")
+                        err = true
+                    } else {
+                        secondPasswordTextField.error = false
+                        secondPasswordTextField.assistiveText = qsTr("")
+                    }
+
+                    if (err) {
+                        return
+                    }
+
+                    secondPasswordTextField.enabled = false
+
+                    enabled = false
+                    loading = true
+
+                    if (root.user !== undefined) {
+                        root.user.login2Password(usernameTextField.text, secondPasswordTextField.text)
+                        return
+                    }
+
+                    root.login2Password(usernameTextField.text, secondPasswordTextField.text)
+                }
+            }
+        }
+    }
+
+    states: [
+        State {
+            name: "Page 1"
+            PropertyChanges {
+                target: stackLayout
+                currentIndex: 0
+            }
+        },
+        State {
+            name: "Page 2"
+            PropertyChanges {
+                target: stackLayout
+                currentIndex: 1
+            }
+        },
+        State {
+            name: "Page 3"
+            PropertyChanges {
+                target: stackLayout
+                currentIndex: 2
+            }
+        }
+    ]
+}

internal/frontend/qml/Status.qml

@@ -0,0 +1,41 @@
+
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.impl 2.12
+
+import Proton 4.0
+
+RowLayout {
+    id: layout
+    spacing: 8
+
+    ColorImage {
+        id: image
+        source: "./icons/ic-connected.svg"
+        color: ProtonStyle.currentStyle.signal_success
+    }
+
+    Label {
+        id: label
+        text: "Connected"
+        color: ProtonStyle.currentStyle.signal_success
+    }
+}

internal/frontend/qml/WelcomeWindow.qml

@@ -0,0 +1,297 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQml 2.12
+import QtQuick 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+
+import Proton 4.0
+
+RowLayout {
+    id: root
+
+    property var colorScheme: parent.colorScheme
+
+    property var backend
+    property var window
+
+    signal login(string username, string password)
+    signal login2FA(string username, string code)
+    signal login2Password(string username, string password)
+    signal loginAbort(string username)
+
+    spacing: 0
+
+    Rectangle {
+        color: root.colorScheme.background_norm
+
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+
+        implicitHeight: children[0].implicitHeight
+        implicitWidth: children[0].implicitWidth
+
+        visible: signInItem.currentIndex == 0
+
+        GridLayout {
+            anchors.fill: parent
+
+            columnSpacing: 0
+            rowSpacing: 0
+
+            columns: 3
+
+            // top margin
+            Item {
+                Layout.columnSpan: 3
+                Layout.fillWidth: true
+
+                // Using binding component here instead of direct binding to avoid binding loop during construction of element
+                Binding on Layout.preferredHeight {
+                    value: (parent.height - welcomeContentItem.height) / 4
+                }
+            }
+
+            // left margin
+            Item {
+                Layout.minimumWidth: 48
+                Layout.maximumWidth: 80
+                Layout.fillWidth: true
+                Layout.preferredHeight: welcomeContentItem.height
+            }
+
+            ColumnLayout {
+                id: welcomeContentItem
+                Layout.fillWidth: true
+                spacing: 0
+
+                Image {
+                    source: "icons/img-welcome.svg"
+                    Layout.alignment: Qt.AlignHCenter
+                    Layout.topMargin: 16
+                }
+
+                Label {
+                    text: qsTr("Welcome to\nProtonMail Bridge")
+                    Layout.alignment: Qt.AlignHCenter
+                    Layout.fillWidth: true
+                    Layout.topMargin: 16
+
+                    color: root.colorScheme.text_norm
+
+                    horizontalAlignment: Text.AlignHCenter
+
+                    font.family: ProtonStyle.font_family
+                    font.weight: ProtonStyle.fontWidth_700
+                    font.pixelSize: 28
+                    lineHeight: 36
+                    lineHeightMode: Text.FixedHeight
+                }
+
+                Label {
+                    id: longTextLabel
+                    text: qsTr("Now you can securely access and manage ProtonMail messages in your favorite email client. Bridge runs in the background and encrypts and decrypts your messages seamlessly.")
+                    Layout.alignment: Qt.AlignHCenter
+                    Layout.fillWidth: true
+                    Layout.topMargin: 16
+                    Layout.preferredWidth: 320
+
+                    color: root.colorScheme.text_norm
+                    wrapMode: Text.WordWrap
+
+                    horizontalAlignment: Text.AlignHCenter
+
+                    font.family: ProtonStyle.font_family
+                    font.weight: ProtonStyle.fontWidth_400
+                    font.pixelSize: 14
+                    lineHeight: 20
+                    lineHeightMode: Text.FixedHeight
+                    font.letterSpacing: 0.2
+                }
+            }
+
+            // Right margin
+            Item {
+                Layout.minimumWidth: 48
+                Layout.maximumWidth: 80
+                Layout.fillWidth: true
+                Layout.preferredHeight: welcomeContentItem.height
+            }
+
+            // bottom margin
+            Item {
+                Layout.columnSpan: 3
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+
+                implicitHeight: children[0].implicitHeight + children[0].anchors.bottomMargin + children[0].anchors.topMargin
+                implicitWidth: children[0].implicitWidth
+
+                Image {
+                    id: logoImage
+                    source: "icons/product_logos.svg"
+
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.bottom: parent.bottom
+                    anchors.topMargin: 48
+                    anchors.bottomMargin: 48
+                }
+            }
+        }
+    }
+
+    Rectangle {
+        color: (signInItem.currentIndex == 0) ? root.colorScheme.background_weak : root.colorScheme.background_norm
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+
+        implicitHeight: children[0].implicitHeight
+        implicitWidth: children[0].implicitWidth
+
+        RowLayout {
+            anchors.fill: parent
+            spacing: 0
+            Item {
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                Layout.preferredWidth: signInItem.currentIndex == 0 ? 0 : parent.width / 4
+
+                implicitHeight: children[0].implicitHeight + children[0].anchors.topMargin + children[0].anchors.bottomMargin
+                implicitWidth: children[0].implicitWidth + children[0].anchors.leftMargin + children[0].anchors.rightMargin
+
+                Button {
+                    anchors.left: parent.left
+                    anchors.bottom: parent.bottom
+
+                    anchors.leftMargin: 80
+                    anchors.rightMargin: 80
+                    anchors.topMargin: 80
+                    anchors.bottomMargin: 80
+
+                    visible: signInItem.currentIndex != 0
+
+                    secondary: true
+                    text: qsTr("Back")
+
+                    onClicked: {
+                        signInItem.abort()
+                    }
+                }
+            }
+
+            GridLayout {
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+
+                columnSpacing: 0
+                rowSpacing: 0
+
+                columns: 3
+
+                // top margin
+                Item {
+                    Layout.columnSpan: 3
+                    Layout.fillWidth: true
+
+                    // Using binding component here instead of direct binding to avoid binding loop during construction of element
+                    Binding on Layout.preferredHeight {
+                        value: (parent.height - signInItem.height) / 4
+                    }
+                }
+
+                // left margin
+                Item {
+                    Layout.minimumWidth: 48
+                    Layout.maximumWidth: 80
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: signInItem.height
+                }
+
+
+                SignIn {
+                    id: signInItem
+                    colorScheme: root.colorScheme
+
+                    Layout.preferredWidth: 320
+                    Layout.fillWidth: true
+
+                    onLogin: {
+                        root.login(username, password)
+                    }
+                    onLogin2FA: {
+                        root.login2FA(username, code)
+                    }
+                    onLogin2Password: {
+                        root.login2Password(username, password)
+                    }
+                    onLoginAbort: {
+                        root.loginAbort(username)
+                    }
+
+                    user: (backend.users.count === 1 && backend.users.get(0).loggedIn === false) ? backend.users.get(0) : undefined
+                    backend: root.backend
+                    window: root.window
+                }
+
+                // Right margin
+                Item {
+                    Layout.minimumWidth: 48
+                    Layout.maximumWidth: 80
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: signInItem.height
+                }
+
+                // bottom margin
+                Item {
+                    Layout.columnSpan: 3
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                }
+            }
+
+            Item {
+                Layout.fillHeight: true
+                Layout.preferredWidth: signInItem.currentIndex == 0 ? 0 : parent.width / 4
+            }
+        }
+    }
+
+    states: [
+        State {
+            name: "Page 1"
+            PropertyChanges {
+                target: signInItem
+                currentIndex: 0
+            }
+        },
+        State {
+            name: "Page 2"
+            PropertyChanges {
+                target: signInItem
+                currentIndex: 1
+            }
+        },
+        State {
+            name: "Page 3"
+            PropertyChanges {
+                target: signInItem
+                currentIndex: 2
+            }
+        }
+    ]
+}

internal/frontend/qml/bridgeqml.qmlproject

@@ -1,4 +1,19 @@
-/* File generated by Qt Creator */
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
 
 import QmlProject 1.1
 

internal/frontend/qml/icons/Loader_16.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.2" d="M8 2.75C8.68944 2.75 9.37213 2.8858 10.0091 3.14963C10.646 3.41347 11.2248 3.80018 11.7123 4.28769C12.1998 4.7752 12.5865 5.35395 12.8504 5.99091C13.1142 6.62787 13.25 7.31056 13.25 8C13.25 8.68944 13.1142 9.37213 12.8504 10.0091C12.5865 10.646 12.1998 11.2248 11.7123 11.7123C11.2248 12.1998 10.646 12.5865 10.0091 12.8504C9.37213 13.1142 8.68944 13.25 8 13.25C7.31056 13.25 6.62787 13.1142 5.99091 12.8504C5.35395 12.5865 4.7752 12.1998 4.28769 11.7123C3.80018 11.2248 3.41347 10.646 3.14963 10.0091C2.88579 9.37213 2.75 8.68944 2.75 8C2.75 7.31056 2.8858 6.62787 3.14963 5.99091C3.41347 5.35395 3.80018 4.77519 4.28769 4.28769C4.7752 3.80018 5.35396 3.41347 5.99092 3.14963C6.62787 2.88579 7.31056 2.75 8 2.75L8 2.75Z" stroke="#5064B6" stroke-width="1.5"/>
+<path d="M11.7123 11.7123C11.1018 12.3228 10.3502 12.7733 9.52399 13.0239C8.6978 13.2746 7.82255 13.3176 6.97578 13.1491C6.129 12.9807 5.33683 12.606 4.66944 12.0583C4.00204 11.5106 3.48003 10.8067 3.14963 10.0091C2.81924 9.21144 2.69066 8.34462 2.77528 7.48541C2.85991 6.6262 3.15512 5.80112 3.63478 5.08326C4.11445 4.36539 4.76374 3.7769 5.52517 3.36991C6.28659 2.96292 7.13663 2.75 8 2.75" stroke="#5064B6" stroke-width="1.5"/>
+</svg>

internal/frontend/qml/icons/Loader_48.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.2" d="M24 1C27.0204 1 30.0112 1.59491 32.8017 2.75077C35.5922 3.90663 38.1277 5.6008 40.2635 7.73655C42.3992 9.87229 44.0934 12.4078 45.2492 15.1983C46.4051 17.9888 47 20.9796 47 24C47 27.0204 46.4051 30.0112 45.2492 32.8017C44.0934 35.5922 42.3992 38.1277 40.2635 40.2635C38.1277 42.3992 35.5922 44.0934 32.8017 45.2492C30.0112 46.4051 27.0204 47 24 47C20.9796 47 17.9888 46.4051 15.1983 45.2492C12.4078 44.0934 9.87228 42.3992 7.73654 40.2634C5.60079 38.1277 3.90662 35.5922 2.75077 32.8017C1.59491 30.0112 0.999998 27.0204 1 24C1 20.9796 1.59492 17.9888 2.75078 15.1983C3.90664 12.4078 5.6008 9.87228 7.73655 7.73653C9.8723 5.60079 12.4078 3.90662 15.1983 2.75077C17.9888 1.59491 20.9796 0.999998 24 1L24 1Z" stroke="#5064B6" stroke-width="2"/>
+<path d="M40.2635 40.2635C37.5889 42.938 34.2961 44.9117 30.6765 46.0096C27.057 47.1076 23.2226 47.296 19.5129 46.5581C15.8032 45.8202 12.3328 44.1788 9.40895 41.7792C6.48514 39.3797 4.19822 36.2962 2.75077 32.8017C1.30332 29.3073 0.740014 25.5098 1.11075 21.7456C1.48149 17.9814 2.77483 14.3668 4.8762 11.2219C6.97757 8.07696 9.82212 5.49881 13.1579 3.71581C16.4936 1.93281 20.2176 1 24 1" stroke="#5064B6" stroke-width="2"/>
+</svg>

internal/frontend/qml/icons/all_icons.svg

@@ -1,541 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:x="adobe:ns:meta/"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   id="icon_copy"
-   data-name="icon copy"
-   width="1024"
-   height="1024"
-   viewBox="0 0 1024 1024"
-   version="1.1"
-   sodipodi:docname="all_icons.svg"
-   inkscape:version="0.92.2 2405546, 2018-03-11">
-  <sodipodi:namedview
-     pagecolor="#f2f0dc"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="956"
-     inkscape:window-height="1041"
-     id="namedview13"
-     showgrid="false"
-     inkscape:zoom="0.16296602"
-     inkscape:cx="1288.4844"
-     inkscape:cy="612.89586"
-     inkscape:window-x="0"
-     inkscape:window-y="18"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="icon_copy"
-     inkscape:snap-global="true"
-     inkscape:snap-page="true"
-     showguides="true"
-     inkscape:snap-bbox="true"
-     inkscape:bbox-nodes="true"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:guide-bbox="true">
-    <sodipodi:guide
-       position="859.07479,-1294.7484"
-       orientation="0,1"
-       id="guide930"
-       inkscape:locked="false" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata2">
-<?xpacket begin="<22>" id="W5M0MpCehiHzreSzNTczkc9d"?>    <x:xmpmeta
-       x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01        ">
-      <metadata>
-        <rdf:RDF>
-          <rdf:Description
-             rdf:about="" />
-          <cc:Work
-             rdf:about="">
-            <dc:format>image/svg+xml</dc:format>
-            <dc:type
-               rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-            <dc:title></dc:title>
-          </cc:Work>
-        </rdf:RDF>
-      </metadata>
-    </x:xmpmeta>
-<?xpacket end="w"?>  </metadata>
-  <defs
-     id="defs6">
-    <style
-       id="style4">
-      .cls-1 {
-        fill: #524e63;
-      }
-    </style>
-    <style
-       id="style1034">
-      .cls-1 {
-        fill: #524e63;
-      }
-
-      .cls-2 {
-        fill: #f50000;
-      }
-
-      .cls-3 {
-        font-size: 25px;
-        fill: #fff;
-        font-family: FontAwesome;
-      }
-    </style>
-    <style
-       id="style1252">
-      .cls-1 {
-        fill: #524e63;
-      }
-    </style>
-  </defs>
-  <g
-     inkscape:label="#g1094"
-     transform="translate(-616.66035,-1078.5456)"
-     id="rectangle-app">
-    <rect
-       y="-136.43166"
-       x="3144.4905"
-       height="1024"
-       width="1023.9999"
-       id="rect1096"
-       style="opacity:1;fill:#524e63;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
-    <path
-       inkscape:connector-curvature="0"
-       d="m 3656.4904,105.24957 c -96.291,0.11246 -179.6386,71.35368 -192.5081,166.78071 v 25.65195 0.0784 0.0557 102.40927 c 0,15.42041 64.1815,57.97487 96.4999,80.64666 32.3184,22.6718 75.2653,56.62643 96.0082,55.91117 20.7427,0.71526 63.6925,-33.23937 96.0109,-55.91117 32.3184,-22.67179 96.5,-65.22625 96.5,-80.64666 V 272.03022 c -12.8701,-95.43016 -96.2168,-166.67214 -192.5109,-166.78071 z m 0,84.4633 c 48.5585,-8.7e-4 97.0347,34.73428 107.3407,82.31741 v 71.11627 h -107.3407 -107.338 v -71.11627 c 11.0135,-48.17274 58.956,-82.25048 107.338,-82.31741 z M 3849.0013,442.854 c 0,0 -37.5022,25.38545 -85.1702,59.65794 -47.668,34.27255 -78.1135,60.21117 -107.3407,60.21117 -29.2273,0 -59.67,-25.93862 -107.338,-60.21117 -47.668,-34.27249 -85.1701,-59.45675 -85.1701,-59.45675 v 184.23498 c 0,10.30275 8.2942,18.59699 18.597,18.59699 h 347.8249 c 10.3028,0 18.5971,-8.29424 18.5971,-18.59699 z"
-       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.43053901px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       id="path1098" />
-  </g>
-  <g
-     id="rounded-app"
-     transform="translate(-610.5241,136.43165)"
-     inkscape:label="#g1094">
-    <rect
-       style="opacity:1;fill:#524e63;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
-       id="rect1079"
-       width="1023.9999"
-       height="1024"
-       x="3144.4905"
-       y="-136.43166"
-       rx="42" />
-    <path
-       id="path1081"
-       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.43053901px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 3656.4904,105.24957 c -96.291,0.11246 -179.6386,71.35368 -192.5081,166.78071 v 25.65195 0.0784 0.0557 102.40927 c 0,15.42041 64.1815,57.97487 96.4999,80.64666 32.3184,22.6718 75.2653,56.62643 96.0082,55.91117 20.7427,0.71526 63.6925,-33.23937 96.0109,-55.91117 32.3184,-22.67179 96.5,-65.22625 96.5,-80.64666 V 272.03022 c -12.8701,-95.43016 -96.2168,-166.67214 -192.5109,-166.78071 z m 0,84.4633 c 48.5585,-8.7e-4 97.0347,34.73428 107.3407,82.31741 v 71.11627 h -107.3407 -107.338 v -71.11627 c 11.0135,-48.17274 58.956,-82.25048 107.338,-82.31741 z M 3849.0013,442.854 c 0,0 -37.5022,25.38545 -85.1702,59.65794 -47.668,34.27255 -78.1135,60.21117 -107.3407,60.21117 -29.2273,0 -59.67,-25.93862 -107.338,-60.21117 -47.668,-34.27249 -85.1701,-59.45675 -85.1701,-59.45675 v 184.23498 c 0,10.30275 8.2942,18.59699 18.597,18.59699 h 347.8249 c 10.3028,0 18.5971,-8.29424 18.5971,-18.59699 z"
-       inkscape:connector-curvature="0" />
-  </g>
-  <g
-     transform="translate(-547.2369,-1069.8676)"
-     inkscape:label="#g909"
-     id="rectangle-systray">
-    <rect
-       style="opacity:1;fill:#f534eb;fill-opacity:0;stroke:none;stroke-width:5.70958519;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
-       id="rect1102"
-       width="1024"
-       height="1024"
-       x="541.10065"
-       y="-145.10965" />
-    <rect
-       style="opacity:1;fill:#524e63;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
-       id="rect1104"
-       width="952"
-       height="960"
-       x="577.10065"
-       y="-113.10965" />
-    <g
-       transform="matrix(5.406762,0,0,5.406762,2350.7961,-740.71337)"
-       id="g1108"
-       inkscape:label="Layer 1"
-       style="fill:#ffffff;fill-opacity:1">
-      <path
-         inkscape:connector-curvature="0"
-         d="m -240.01344,154.85885 c -17.80935,0.0208 -33.22479,13.19712 -35.60506,30.84669 v 4.74442 l -5.2e-4,0.0145 5.2e-4,0.0103 v 18.94096 c 0,2.85206 11.8706,10.72266 17.848,14.91589 5.97741,4.19323 13.9206,10.47326 17.75706,10.34097 3.83645,0.13229 11.78017,-6.14774 17.75757,-10.34097 5.97741,-4.19323 17.84801,-12.06383 17.84801,-14.91589 v -23.71019 c -2.38036,-17.65015 -17.79564,-30.82661 -35.60558,-30.84669 z m 0,15.62179 c 8.98108,-1.6e-4 17.94693,6.42423 19.85305,15.2249 v 13.15321 h -19.85305 -19.85254 v -13.15321 c 2.03699,-8.90972 10.90412,-15.21252 19.85254,-15.2249 z M -204.40786,217.3 c 0,0 -6.93616,4.69513 -15.75253,11.03395 -8.81637,6.33883 -14.44737,11.13627 -19.85305,11.13627 -5.40568,0 -11.03617,-4.79744 -19.85254,-11.13627 -8.81637,-6.33882 -15.75252,-10.99674 -15.75252,-10.99674 v 34.07492 c 0,1.90553 1.53405,3.43958 3.43958,3.43958 h 64.33147 c 1.90554,0 3.43959,-1.53405 3.43959,-3.43958 z"
-         style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         id="path1106" />
-    </g>
-  </g>
-  <g
-     id="rounded-systray"
-     inkscape:label="#g909"
-     transform="translate(-541.10065,145.10965)">
-    <rect
-       y="-145.10965"
-       x="541.10065"
-       height="1024"
-       width="1024"
-       id="rect9"
-       style="opacity:1;fill:#f534eb;fill-opacity:0.00680272;stroke:none;stroke-width:5.70958519;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
-    <rect
-       y="-113.10965"
-       x="577.10065"
-       height="960"
-       width="952"
-       id="rect903"
-       style="opacity:1;fill:#524e63;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
-       rx="42" />
-    <g
-       style="fill:#ffffff;fill-opacity:1"
-       inkscape:label="Layer 1"
-       id="layer1"
-       transform="matrix(5.406762,0,0,5.406762,2350.7961,-740.71337)">
-      <path
-         id="path5076"
-         style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m -240.01344,154.85885 c -17.80935,0.0208 -33.22479,13.19712 -35.60506,30.84669 v 4.74442 l -5.2e-4,0.0145 5.2e-4,0.0103 v 18.94096 c 0,2.85206 11.8706,10.72266 17.848,14.91589 5.97741,4.19323 13.9206,10.47326 17.75706,10.34097 3.83645,0.13229 11.78017,-6.14774 17.75757,-10.34097 5.97741,-4.19323 17.84801,-12.06383 17.84801,-14.91589 v -23.71019 c -2.38036,-17.65015 -17.79564,-30.82661 -35.60558,-30.84669 z m 0,15.62179 c 8.98108,-1.6e-4 17.94693,6.42423 19.85305,15.2249 v 13.15321 h -19.85305 -19.85254 v -13.15321 c 2.03699,-8.90972 10.90412,-15.21252 19.85254,-15.2249 z M -204.40786,217.3 c 0,0 -6.93616,4.69513 -15.75253,11.03395 -8.81637,6.33883 -14.44737,11.13627 -19.85305,11.13627 -5.40568,0 -11.03617,-4.79744 -19.85254,-11.13627 -8.81637,-6.33882 -15.75252,-10.99674 -15.75252,-10.99674 v 34.07492 c 0,1.90553 1.53405,3.43958 3.43958,3.43958 h 64.33147 c 1.90554,0 3.43959,-1.53405 3.43959,-3.43958 z"
-         inkscape:connector-curvature="0" />
-    </g>
-  </g>
-  <g
-     transform="translate(-473.47431,-1061.1896)"
-     inkscape:label="#g1075"
-     id="rectangle-syswarn">
-    <rect
-       y="-153.78761"
-       x="1734.3209"
-       height="1024"
-       width="1024"
-       id="rect1112"
-       style="opacity:1;fill:#f534eb;fill-opacity:0;stroke:none;stroke-width:5.70958519;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
-    <rect
-       y="-121.78761"
-       x="1770.3209"
-       height="960"
-       width="952"
-       id="rect1114"
-       style="opacity:1;fill:#524e63;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
-    <path
-       inkscape:connector-curvature="0"
-       d="m 2246.3209,87.893606 c -96.291,0.11246 -179.6386,71.353684 -192.5081,166.780714 v 25.65195 0.0784 0.0557 102.40927 c 0,15.42041 64.1815,57.97487 96.4999,80.64666 32.3184,22.6718 75.2653,56.62643 96.0082,55.91117 20.7427,0.71526 63.6925,-33.23937 96.0109,-55.91117 32.3184,-22.67179 96.5,-65.22625 96.5,-80.64666 V 254.67426 C 2425.9617,159.2441 2342.615,88.002119 2246.3209,87.893551 Z m 0,84.463304 c 48.5585,-8.7e-4 97.0347,34.73428 107.3407,82.31741 v 71.11627 h -107.3407 -107.338 v -71.11627 c 11.0135,-48.17274 58.956,-82.25048 107.338,-82.31741 z m 192.5109,253.14113 c 0,0 -37.5022,25.38545 -85.1702,59.65794 -47.668,34.27255 -78.1135,60.21117 -107.3407,60.21117 -29.2273,0 -59.67,-25.93862 -107.338,-60.21117 -47.668,-34.27249 -85.1701,-59.45675 -85.1701,-59.45675 v 184.23498 c 0,10.30275 8.2942,18.59699 18.597,18.59699 h 347.8249 c 10.3028,0 18.5971,-8.29424 18.5971,-18.59699 z"
-       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.43053901px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       id="path1116" />
-    <circle
-       style="fill:#f50000;stroke-width:8.21978283"
-       class="cls-2"
-       cx="2556.9363"
-       cy="668.8277"
-       r="201.38469"
-       id="circle1118" />
-    <text
-       style="font-size:205.49458313px;font-family:FontAwesome;fill:#ffffff;stroke-width:8.21978283"
-       id="text1120"
-       data-name=""
-       class="cls-3"
-       x="2520.241"
-       y="749.55774"></text>
-  </g>
-  <g
-     id="rounded-syswarn"
-     inkscape:label="#g1075"
-     transform="translate(-467.33806,153.78755)">
-    <rect
-       style="opacity:1;fill:#f534eb;fill-opacity:0;stroke:none;stroke-width:5.70958519;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
-       id="rect921"
-       width="1024"
-       height="1024"
-       x="1734.3209"
-       y="-153.78761" />
-    <rect
-       style="opacity:1;fill:#524e63;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
-       id="rect923"
-       width="952"
-       height="960"
-       x="1770.3209"
-       y="-121.78761"
-       rx="42" />
-    <path
-       id="path925"
-       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.43053901px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 2246.3209,87.893606 c -96.291,0.11246 -179.6386,71.353684 -192.5081,166.780714 v 25.65195 0.0784 0.0557 102.40927 c 0,15.42041 64.1815,57.97487 96.4999,80.64666 32.3184,22.6718 75.2653,56.62643 96.0082,55.91117 20.7427,0.71526 63.6925,-33.23937 96.0109,-55.91117 32.3184,-22.67179 96.5,-65.22625 96.5,-80.64666 V 254.67426 C 2425.9617,159.2441 2342.615,88.002119 2246.3209,87.893551 Z m 0,84.463304 c 48.5585,-8.7e-4 97.0347,34.73428 107.3407,82.31741 v 71.11627 h -107.3407 -107.338 v -71.11627 c 11.0135,-48.17274 58.956,-82.25048 107.338,-82.31741 z m 192.5109,253.14113 c 0,0 -37.5022,25.38545 -85.1702,59.65794 -47.668,34.27255 -78.1135,60.21117 -107.3407,60.21117 -29.2273,0 -59.67,-25.93862 -107.338,-60.21117 -47.668,-34.27249 -85.1701,-59.45675 -85.1701,-59.45675 v 184.23498 c 0,10.30275 8.2942,18.59699 18.597,18.59699 h 347.8249 c 10.3028,0 18.5971,-8.29424 18.5971,-18.59699 z"
-       inkscape:connector-curvature="0" />
-    <circle
-       id="circle1042"
-       r="201.38469"
-       cy="668.8277"
-       cx="2556.9363"
-       class="cls-2"
-       style="fill:#f50000;stroke-width:8.21978283" />
-    <text
-       y="749.55774"
-       x="2520.241"
-       class="cls-3"
-       data-name=""
-       id="_"
-       style="font-size:205.49458313px;font-family:FontAwesome;fill:#ffffff;stroke-width:8.21978283"></text>
-  </g>
-  <g
-     id="white-systray"
-     inkscape:label="#g909"
-     transform="translate(-584.05439,1519.6293)"
-     inkscape:export-xdpi="96"
-     inkscape:export-ydpi="96">
-    <rect
-       y="-145.10965"
-       x="541.10065"
-       height="1024"
-       width="1024"
-       id="rect886"
-       style="opacity:1;fill:#f534eb;fill-opacity:0;stroke:none;stroke-width:5.70958519;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
-    <g
-       style="fill:#ffffff;fill-opacity:1"
-       inkscape:label="Layer 1"
-       id="g892"
-       transform="matrix(8.5660731,0,0,8.5660731,3108.4473,-1387.0358)">
-      <path
-         id="path890"
-         style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m -240.01344,154.85885 c -17.80935,0.0208 -33.22479,13.19712 -35.60506,30.84669 v 4.74442 l -5.2e-4,0.0145 5.2e-4,0.0103 v 18.94096 c 0,2.85206 11.8706,10.72266 17.848,14.91589 5.97741,4.19323 13.9206,10.47326 17.75706,10.34097 3.83645,0.13229 11.78017,-6.14774 17.75757,-10.34097 5.97741,-4.19323 17.84801,-12.06383 17.84801,-14.91589 v -23.71019 c -2.38036,-17.65015 -17.79564,-30.82661 -35.60558,-30.84669 z m 0,15.62179 c 8.98108,-1.6e-4 17.94693,6.42423 19.85305,15.2249 v 13.15321 h -19.85305 -19.85254 v -13.15321 c 2.03699,-8.90972 10.90412,-15.21252 19.85254,-15.2249 z M -204.40786,217.3 c 0,0 -6.93616,4.69513 -15.75253,11.03395 -8.81637,6.33883 -14.44737,11.13627 -19.85305,11.13627 -5.40568,0 -11.03617,-4.79744 -19.85254,-11.13627 -8.81637,-6.33882 -15.75252,-10.99674 -15.75252,-10.99674 v 34.07492 c 0,1.90553 1.53405,3.43958 3.43958,3.43958 h 64.33147 c 1.90554,0 3.43959,-1.53405 3.43959,-3.43958 z"
-         inkscape:connector-curvature="0" />
-    </g>
-  </g>
-  <g
-     transform="translate(-577.91814,2734.6065)"
-     inkscape:label="#g909"
-     id="black-systray"
-     inkscape:export-xdpi="96"
-     inkscape:export-ydpi="96">
-    <rect
-       style="opacity:1;fill:#f534eb;fill-opacity:0.00680273;stroke:none;stroke-width:5.70958519;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
-       id="rect896"
-       width="1024"
-       height="1024"
-       x="541.10065"
-       y="-145.10965" />
-    <g
-       transform="matrix(8.5660731,0,0,8.5660731,3109.0733,-1387.9149)"
-       id="g902"
-       inkscape:label="Layer 1"
-       style="fill:#000000;fill-opacity:1">
-      <path
-         inkscape:connector-curvature="0"
-         d="m -240.01344,154.85885 c -17.80935,0.0208 -33.22479,13.19712 -35.60506,30.84669 v 4.74442 l -5.2e-4,0.0145 5.2e-4,0.0103 v 18.94096 c 0,2.85206 11.8706,10.72266 17.848,14.91589 5.97741,4.19323 13.9206,10.47326 17.75706,10.34097 3.83645,0.13229 11.78017,-6.14774 17.75757,-10.34097 5.97741,-4.19323 17.84801,-12.06383 17.84801,-14.91589 v -23.71019 c -2.38036,-17.65015 -17.79564,-30.82661 -35.60558,-30.84669 z m 0,15.62179 c 8.98108,-1.6e-4 17.94693,6.42423 19.85305,15.2249 v 13.15321 h -19.85305 -19.85254 v -13.15321 c 2.03699,-8.90972 10.90412,-15.21252 19.85254,-15.2249 z M -204.40786,217.3 c 0,0 -6.93616,4.69513 -15.75253,11.03395 -8.81637,6.33883 -14.44737,11.13627 -19.85305,11.13627 -5.40568,0 -11.03617,-4.79744 -19.85254,-11.13627 -8.81637,-6.33882 -15.75252,-10.99674 -15.75252,-10.99674 v 34.07492 c 0,1.90553 1.53405,3.43958 3.43958,3.43958 h 64.33147 c 1.90554,0 3.43959,-1.53405 3.43959,-3.43958 z"
-         style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         id="path900" />
-    </g>
-  </g>
-  <g
-     inkscape:export-ydpi="96"
-     inkscape:export-xdpi="96"
-     id="g4689"
-     inkscape:label="#g1075"
-     transform="translate(-4075.8883,1448.536)">
-    <rect
-       style="opacity:1;fill:#f534eb;fill-opacity:0;stroke:none;stroke-width:5.70958519;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
-       id="rect4683"
-       width="1024"
-       height="1024"
-       x="1734.3209"
-       y="-153.78761" />
-    <path
-       id="path4685"
-       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.26645637px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 2246.3187,-70.063748 c -152.5575,0.17818 -284.6082,113.04831 -304.9978,264.236918 v 40.64135 0.12421 0.0883 162.25083 c 0,24.43114 101.6852,91.85176 152.8884,127.77152 51.2033,35.91978 119.2456,89.71537 152.1094,88.58216 32.8634,1.13321 100.9104,-52.66238 152.1136,-88.58216 51.2033,-35.91976 152.8886,-103.34038 152.8886,-127.77152 V 194.17308 C 2530.9303,42.979512 2398.881,-69.891828 2246.3187,-70.063838 Z m 0,133.818373 c 76.933,-0.0014 153.7357,55.030815 170.0639,130.418545 V 306.84534 H 2246.3187 2076.2591 V 194.17317 c 17.4491,-76.32187 93.4062,-130.312505 170.0596,-130.418545 z m 305.0022,401.060955 c 0,0 -59.4161,40.21912 -134.9383,94.51831 -75.5222,54.29928 -123.7582,95.39481 -170.0639,95.39481 -46.3059,0 -94.5374,-41.09553 -170.0596,-95.39481 -75.5222,-54.29919 -134.9382,-94.19956 -134.9382,-94.19956 V 757.0247 c 0,16.32304 13.1408,29.46391 29.4639,29.46391 h 551.072 c 16.3231,0 29.4641,-13.14087 29.4641,-29.46391 z"
-       inkscape:connector-curvature="0" />
-    <circle
-       id="circle4687"
-       r="201.38469"
-       cy="668.8277"
-       cx="2556.9363"
-       class="cls-2"
-       style="fill:#f50000;stroke-width:8.21978283" />
-  </g>
-  <g
-     transform="translate(-462.41654,1532.9095)"
-     inkscape:label="#g1075"
-     id="white-syserror"
-     inkscape:export-xdpi="96"
-     inkscape:export-ydpi="96"
-     style="fill:#ffffff">
-    <rect
-       y="-153.78761"
-       x="1734.3209"
-       height="1024"
-       width="1024"
-       id="rect957"
-       style="opacity:1;fill:#ffffff;fill-opacity:0;stroke:none;stroke-width:5.70958519;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
-    <path
-       id="path959"
-       transform="translate(462.41654,-1532.9095)"
-       d="m 1783.9023,1462.8457 c -152.5575,0.1782 -284.6084,113.0477 -304.998,264.2363 v 40.6426 0.1231 0.09 162.25 c 0,24.4311 101.6855,91.8517 152.8887,127.7715 24.4444,17.1481 52.7213,38.3596 79.1816,55.7344 a 301.28098,301.28098 0 0 1 188.7871,-273.9395 H 1783.9023 1613.8418 V 1727.082 c 17.4491,-76.3218 93.4071,-130.3119 170.0605,-130.4179 76.933,-0 153.7363,55.0302 170.0645,130.4179 v 96.7442 a 301.28098,301.28098 0 0 1 58.0117,-5.9102 301.28098,301.28098 0 0 1 76.9258,10.3652 V 1727.082 c -20.3906,-151.1935 -152.4397,-264.0643 -305.002,-264.2363 z m -304.998,535.1973 v 291.8906 c 0,16.323 13.1417,29.4648 29.4648,29.4648 h 278.961 a 301.28098,301.28098 0 0 1 -73.1504,-156.4199 c -28.3461,-17.1986 -60.5527,-42.1294 -100.3379,-70.7344 -75.5222,-54.2991 -134.9375,-94.2011 -134.9375,-94.2011 z"
-       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.26645637px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       inkscape:connector-curvature="0" />
-    <path
-       style="fill:#ffffff;stroke-width:11.58877659"
-       d="M 2011.9785 1835.2715 A 283.92505 283.92505 0 0 0 1728.0547 2119.1973 A 283.92505 283.92505 0 0 0 2011.9785 2403.1211 A 283.92505 283.92505 0 0 0 2295.9043 2119.1973 A 283.92505 283.92505 0 0 0 2011.9785 1835.2715 z M 1863.9434 1939.6738 C 1871.9845 1939.6738 1880.024 1942.7545 1886.1855 1948.916 L 2011.9805 2074.7109 L 2137.7734 1948.916 C 2150.0966 1936.5929 2169.9366 1936.5929 2182.2598 1948.916 C 2194.5829 1961.2391 2194.5829 1981.0792 2182.2598 1993.4023 L 2056.4648 2119.1953 L 2182.2598 2244.9902 C 2194.5829 2257.3134 2194.5829 2277.1534 2182.2598 2289.4766 C 2169.9366 2301.7997 2150.0966 2301.7997 2137.7734 2289.4766 L 2011.9805 2163.6836 L 1886.1855 2289.4766 C 1873.8624 2301.7997 1854.0223 2301.7997 1841.6992 2289.4766 C 1829.3761 2277.1534 1829.3761 2257.3134 1841.6992 2244.9902 L 1967.4922 2119.1953 L 1841.6992 1993.4023 C 1829.3761 1981.0792 1829.3761 1961.2391 1841.6992 1948.916 C 1847.8608 1942.7545 1855.9022 1939.6738 1863.9434 1939.6738 z "
-       transform="translate(462.41654,-1532.9095)"
-       id="path961" />
-  </g>
-  <g
-     transform="translate(-462.41654,2735.6142)"
-     inkscape:label="#g1075"
-     id="black-syserror"
-     inkscape:export-xdpi="96"
-     inkscape:export-ydpi="96"
-     style="fill:#000000">
-    <rect
-       y="-153.78761"
-       x="1734.3209"
-       height="1024"
-       width="1024"
-       id="rect4566"
-       style="opacity:1;fill:#000000;fill-opacity:0;stroke:none;stroke-width:5.70958519;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
-    <path
-       id="path4568"
-       transform="translate(462.41654,-1532.9095)"
-       d="m 1783.9023,1462.8457 c -152.5575,0.1782 -284.6084,113.0477 -304.998,264.2363 v 40.6426 0.1231 0.09 162.25 c 0,24.4311 101.6855,91.8517 152.8887,127.7715 24.4444,17.1481 52.7213,38.3596 79.1816,55.7344 a 301.28098,301.28098 0 0 1 188.7871,-273.9395 H 1783.9023 1613.8418 V 1727.082 c 17.4491,-76.3218 93.4071,-130.3119 170.0605,-130.4179 76.933,0 153.7363,55.0302 170.0645,130.4179 v 96.7442 a 301.28098,301.28098 0 0 1 58.0117,-5.9102 301.28098,301.28098 0 0 1 76.9258,10.3652 V 1727.082 c -20.3906,-151.1935 -152.4397,-264.0643 -305.002,-264.2363 z m -304.998,535.1973 v 291.8906 c 0,16.323 13.1417,29.4648 29.4648,29.4648 h 278.961 a 301.28098,301.28098 0 0 1 -73.1504,-156.4199 c -28.3461,-17.1986 -60.5527,-42.1294 -100.3379,-70.7344 -75.5222,-54.2991 -134.9375,-94.2011 -134.9375,-94.2011 z"
-       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.26645637px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       inkscape:connector-curvature="0" />
-    <path
-       inkscape:connector-curvature="0"
-       style="fill:#000000;stroke-width:11.58877659"
-       d="m 2011.9785,1835.2715 a 283.92505,283.92505 0 0 0 -283.9238,283.9258 283.92505,283.92505 0 0 0 283.9238,283.9238 283.92505,283.92505 0 0 0 283.9258,-283.9238 283.92505,283.92505 0 0 0 -283.9258,-283.9258 z m -148.0351,104.4023 c 8.0411,0 16.0806,3.0807 22.2421,9.2422 l 125.795,125.7949 125.7929,-125.7949 c 12.3232,-12.3231 32.1632,-12.3231 44.4864,0 12.3231,12.3231 12.3231,32.1632 0,44.4863 l -125.795,125.793 125.795,125.7949 c 12.3231,12.3232 12.3231,32.1632 0,44.4864 -12.3232,12.3231 -32.1632,12.3231 -44.4864,0 l -125.7929,-125.793 -125.795,125.793 c -12.3231,12.3231 -32.1632,12.3231 -44.4863,0 -12.3231,-12.3232 -12.3231,-32.1632 0,-44.4864 l 125.793,-125.7949 -125.793,-125.793 c -12.3231,-12.3231 -12.3231,-32.1632 0,-44.4863 6.1616,-6.1615 14.203,-9.2422 22.2442,-9.2422 z"
-       transform="translate(462.41654,-1532.9095)"
-       id="path4570" />
-  </g>
-  <rect
-     y="4850.4414"
-     x="2409.3984"
-     height="1024"
-     width="1024"
-     id="rect897"
-     style="opacity:1;fill:#000000;fill-opacity:0;stroke:none;stroke-width:5.70958519;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
-  <g
-     id="g4725"
-     transform="translate(-3632.6591,-2350.1832)">
-    <g
-       style="fill:#000000"
-       inkscape:export-ydpi="96"
-       inkscape:export-xdpi="96"
-       id="g4603"
-       inkscape:label="#g1075"
-       transform="translate(-437.87154,4999.8899)">
-      <rect
-         style="opacity:1;fill:#000000;fill-opacity:0;stroke:none;stroke-width:5.70958519;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
-         id="rect4597"
-         width="1024"
-         height="1024"
-         x="1734.3209"
-         y="-153.78761" />
-      <path
-         inkscape:connector-curvature="0"
-         style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.26645637px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m 1783.9023,1462.8457 c -152.5575,0.1782 -284.6084,113.0477 -304.998,264.2363 v 40.6426 0.1231 0.09 162.25 c 0,24.4311 101.6855,91.8517 152.8887,127.7715 24.4444,17.1481 52.7213,38.3596 79.1816,55.7344 a 301.28098,301.28098 0 0 1 188.7871,-273.9395 H 1783.9023 1613.8418 V 1727.082 c 17.4491,-76.3218 93.4071,-130.3119 170.0605,-130.4179 76.933,0 153.7363,55.0302 170.0645,130.4179 v 96.7442 a 301.28098,301.28098 0 0 1 58.0117,-5.9102 301.28098,301.28098 0 0 1 76.9258,10.3652 V 1727.082 c -20.3906,-151.1935 -152.4397,-264.0643 -305.002,-264.2363 z m -304.998,535.1973 v 291.8906 c 0,16.323 13.1417,29.4648 29.4648,29.4648 h 278.961 a 301.28098,301.28098 0 0 1 -73.1504,-156.4199 c -28.3461,-17.1986 -60.5527,-42.1294 -100.3379,-70.7344 -75.5222,-54.2991 -134.9375,-94.2011 -134.9375,-94.2011 z"
-         transform="translate(462.41654,-1532.9095)"
-         id="path4599" />
-      <path
-         id="path4601"
-         transform="translate(462.41654,-1532.9095)"
-         d="m 2011.9785,1835.2715 a 283.92505,283.92505 0 0 0 -283.9238,283.9258 283.92505,283.92505 0 0 0 283.9238,283.9238 283.92505,283.92505 0 0 0 283.9258,-283.9238 283.92505,283.92505 0 0 0 -283.9258,-283.9258 z m -148.0351,104.4023 c 8.0411,0 16.0806,3.0807 22.2421,9.2422 l 125.795,125.7949 125.7929,-125.7949 c 12.3232,-12.3231 32.1632,-12.3231 44.4864,0 12.3231,12.3231 12.3231,32.1632 0,44.4863 l -125.795,125.793 125.795,125.7949 c 12.3231,12.3232 12.3231,32.1632 0,44.4864 -12.3232,12.3231 -32.1632,12.3231 -44.4864,0 l -125.7929,-125.793 -125.795,125.793 c -12.3231,12.3231 -32.1632,12.3231 -44.4863,0 -12.3231,-12.3232 -12.3231,-32.1632 0,-44.4864 l 125.793,-125.7949 -125.793,-125.793 c -12.3231,-12.3231 -12.3231,-32.1632 0,-44.4863 6.1616,-6.1615 14.203,-9.2422 22.2442,-9.2422 z"
-         style="fill:#000000;stroke-width:11.58877659"
-         inkscape:connector-curvature="0" />
-    </g>
-    <ellipse
-       style="opacity:0.69040013;fill:#ff00ff;fill-opacity:1;stroke:none;stroke-width:14.07630157;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
-       id="ellipse4605"
-       cx="2036.5756"
-       cy="5585.3564"
-       rx="283.87378"
-       ry="284.74576" />
-    <ellipse
-       ry="240.12131"
-       rx="239.38597"
-       cy="5585.3564"
-       cx="2036.5756"
-       id="ellipse4607"
-       style="opacity:0.69040013;fill:#ff00ff;fill-opacity:1;stroke:none;stroke-width:11.87030792;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
-    <g
-       id="g4613"
-       transform="translate(-639.64538,-42.987255)">
-      <path
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:147.49169922px;line-height:0;font-family:'East Syriac Ctesiphon';-inkscape-font-specification:'East Syriac Ctesiphon';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:4.87682009"
-         d="m 2720.1212,5441.3299 -0.5352,13.1897 -20.4757,263.0224 c -1.0785,15.0004 -8.6206,22.5004 -22.6301,22.5004 -14.3696,0 -22.0918,-7.5 -23.1701,-22.5004 l -19.9362,-263.0224 -1.0785,-13.5777 c 0,-8.7932 4.1305,-16.1639 12.3928,-22.1125 8.6219,-5.9486 19.2185,-8.9223 31.792,-8.9223 12.5729,0 22.9895,2.9737 31.2518,8.9223 8.6217,5.9486 12.7523,13.4488 12.3929,22.5005 z"
-         id="path4609"
-         inkscape:connector-curvature="0" />
-      <path
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:147.49169922px;line-height:0;font-family:'East Syriac Ctesiphon';-inkscape-font-specification:'East Syriac Ctesiphon';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:3.75004935"
-         d="m 2714.2789,5805.0667 c 0,11.4981 -3.184,21.3912 -9.553,29.6801 -6.1632,8.0221 -13.6622,12.0335 -22.4956,12.0335 h -12.0187 c -8.8335,0 -16.4346,-4.0114 -22.804,-12.0335 -6.1627,-8.0213 -9.2447,-17.7812 -9.2447,-29.2793 0,-11.765 3.082,-21.658 9.2447,-29.6801 6.1638,-8.2896 13.7649,-12.4337 22.804,-12.4337 h 12.0187 c 8.8334,0 16.3324,4.1441 22.4956,12.4337 6.369,8.0221 9.553,17.7818 9.553,29.2793 z"
-         id="path4611"
-         inkscape:connector-curvature="0" />
-    </g>
-  </g>
-  <g
-     inkscape:label="#g4702"
-     transform="translate(-3083.6214,-1613.909)"
-     id="black-syswarn"
-     inkscape:export-xdpi="96"
-     inkscape:export-ydpi="96">
-    <rect
-       style="opacity:1;fill:#f534eb;fill-opacity:0;stroke:none;stroke-width:5.70958519;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
-       id="rect4704"
-       width="1024"
-       height="1024"
-       x="5798.3647"
-       y="4203.5366" />
-    <path
-       inkscape:connector-curvature="0"
-       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.26645637px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 6310.3633,4287.261 c -152.5575,0.1782 -284.6084,113.0477 -304.998,264.2363 v 40.6426 0.1231 0.09 162.25 c 0,24.4311 101.6855,91.8517 152.8887,127.7715 24.4444,17.1481 52.7213,38.3596 79.1816,55.7344 a 301.28098,301.28098 0 0 1 188.7871,-273.9395 h -115.8594 -170.0605 v -112.6721 c 17.4491,-76.3218 93.4071,-130.3119 170.0605,-130.4179 76.933,0 153.7363,55.0302 170.0645,130.4179 v 96.7442 a 301.28098,301.28098 0 0 1 58.0117,-5.9102 301.28098,301.28098 0 0 1 76.9258,10.3652 v -101.1992 c -20.3906,-151.1935 -152.4397,-264.0643 -305.002,-264.2363 z m -304.998,535.1973 v 291.8906 c 0,16.323 13.1417,29.4648 29.4648,29.4648 h 278.961 a 301.28098,301.28098 0 0 1 -73.1504,-156.4199 c -28.3462,-17.1986 -60.5527,-42.1294 -100.3379,-70.7344 -75.5222,-54.2991 -134.9375,-94.2011 -134.9375,-94.2011 z"
-       id="path4706" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path4708"
-       d="m 6538.4923,4658.0451 a 283.87378,284.74576 0 0 0 -283.875,284.7461 283.87378,284.74576 0 0 0 283.875,284.7461 283.87378,284.74576 0 0 0 283.873,-284.7461 283.87378,284.74576 0 0 0 -283.873,-284.7461 z m 0,44.625 a 239.38597,240.12131 0 0 1 239.3847,240.1211 239.38597,240.12131 0 0 1 -239.3847,240.1211 239.38597,240.12131 0 0 1 -239.3867,-240.1211 239.38597,240.12131 0 0 1 239.3867,-240.1211 z"
-       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:14.07630157;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
-    <path
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:147.49169922px;line-height:0;font-family:'East Syriac Ctesiphon';-inkscape-font-specification:'East Syriac Ctesiphon';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:4.87682009"
-       d="m 6582.3918,4755.7775 -0.5352,13.1897 -20.4757,263.0224 c -1.0785,15.0004 -8.6206,22.5004 -22.6301,22.5004 -14.3696,0 -22.0918,-7.5 -23.1701,-22.5004 l -19.9362,-263.0224 -1.0785,-13.5777 c 0,-8.7932 4.1305,-16.1639 12.3928,-22.1125 8.6219,-5.9486 19.2185,-8.9223 31.792,-8.9223 12.5729,0 22.9895,2.9737 31.2518,8.9223 8.6217,5.9486 12.7523,13.4488 12.3929,22.5005 z"
-       id="path4710"
-       inkscape:connector-curvature="0" />
-    <path
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:147.49169922px;line-height:0;font-family:'East Syriac Ctesiphon';-inkscape-font-specification:'East Syriac Ctesiphon';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:3.75004935"
-       d="m 6576.5495,5119.5143 c 0,11.4981 -3.184,21.3912 -9.553,29.6801 -6.1632,8.0221 -13.6622,12.0335 -22.4956,12.0335 h -12.0187 c -8.8335,0 -16.4346,-4.0114 -22.804,-12.0335 -6.1627,-8.0213 -9.2447,-17.7812 -9.2447,-29.2793 0,-11.765 3.082,-21.658 9.2447,-29.6801 6.1638,-8.2896 13.7649,-12.4337 22.804,-12.4337 h 12.0187 c 8.8334,0 16.3324,4.1441 22.4956,12.4337 6.369,8.0221 9.553,17.7818 9.553,29.2793 z"
-       id="path4712"
-       inkscape:connector-curvature="0" />
-  </g>
-  <g
-     id="white-syswarn"
-     transform="translate(-3111.2345,-2825.8181)"
-     inkscape:label="#g4702"
-     inkscape:export-xdpi="96"
-     inkscape:export-ydpi="96">
-    <rect
-       y="4203.5366"
-       x="5798.3647"
-       height="1024"
-       width="1024"
-       id="rect932"
-       style="opacity:1;fill:#f534eb;fill-opacity:0;stroke:none;stroke-width:5.70958519;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
-    <path
-       id="path4633"
-       d="m 6310.3633,4287.261 c -152.5575,0.1782 -284.6084,113.0477 -304.998,264.2363 v 40.6426 0.1231 0.09 162.25 c 0,24.4311 101.6855,91.8517 152.8887,127.7715 24.4444,17.1481 52.7213,38.3596 79.1816,55.7344 a 301.28098,301.28098 0 0 1 188.7871,-273.9395 h -115.8594 -170.0605 v -112.6721 c 17.4491,-76.3218 93.4071,-130.3119 170.0605,-130.4179 76.933,0 153.7363,55.0302 170.0645,130.4179 v 96.7442 a 301.28098,301.28098 0 0 1 58.0117,-5.9102 301.28098,301.28098 0 0 1 76.9258,10.3652 v -101.1992 c -20.3906,-151.1935 -152.4397,-264.0643 -305.002,-264.2363 z m -304.998,535.1973 v 291.8906 c 0,16.323 13.1417,29.4648 29.4648,29.4648 h 278.961 a 301.28098,301.28098 0 0 1 -73.1504,-156.4199 c -28.3462,-17.1986 -60.5527,-42.1294 -100.3379,-70.7344 -75.5222,-54.2991 -134.9375,-94.2011 -134.9375,-94.2011 z"
-       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.26645637px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       inkscape:connector-curvature="0" />
-    <path
-       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:14.07630157;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
-       d="m 6538.4923,4658.0451 a 283.87378,284.74576 0 0 0 -283.875,284.7461 283.87378,284.74576 0 0 0 283.875,284.7461 283.87378,284.74576 0 0 0 283.873,-284.7461 283.87378,284.74576 0 0 0 -283.873,-284.7461 z m 0,44.625 a 239.38597,240.12131 0 0 1 239.3847,240.1211 239.38597,240.12131 0 0 1 -239.3847,240.1211 239.38597,240.12131 0 0 1 -239.3867,-240.1211 239.38597,240.12131 0 0 1 239.3867,-240.1211 z"
-       id="path4635"
-       inkscape:connector-curvature="0" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path4637"
-       d="m 6582.3918,4755.7775 -0.5352,13.1897 -20.4757,263.0224 c -1.0785,15.0004 -8.6206,22.5004 -22.6301,22.5004 -14.3696,0 -22.0918,-7.5 -23.1701,-22.5004 l -19.9362,-263.0224 -1.0785,-13.5777 c 0,-8.7932 4.1305,-16.1639 12.3928,-22.1125 8.6219,-5.9486 19.2185,-8.9223 31.792,-8.9223 12.5729,0 22.9895,2.9737 31.2518,8.9223 8.6217,5.9486 12.7523,13.4488 12.3929,22.5005 z"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:147.49169922px;line-height:0;font-family:'East Syriac Ctesiphon';-inkscape-font-specification:'East Syriac Ctesiphon';letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:4.87682009" />
-    <path
-       inkscape:connector-curvature="0"
-       id="path4639"
-       d="m 6576.5495,5119.5143 c 0,11.4981 -3.184,21.3912 -9.553,29.6801 -6.1632,8.0221 -13.6622,12.0335 -22.4956,12.0335 h -12.0187 c -8.8335,0 -16.4346,-4.0114 -22.804,-12.0335 -6.1627,-8.0213 -9.2447,-17.7812 -9.2447,-29.2793 0,-11.765 3.082,-21.658 9.2447,-29.6801 6.1638,-8.2896 13.7649,-12.4337 22.804,-12.4337 h 12.0187 c 8.8334,0 16.3324,4.1441 22.4956,12.4337 6.369,8.0221 9.553,17.7818 9.553,29.2793 z"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:147.49169922px;line-height:0;font-family:'East Syriac Ctesiphon';-inkscape-font-specification:'East Syriac Ctesiphon';letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3.75004935" />
-  </g>
-</svg>

internal/frontend/qml/icons/export.sh

@@ -1,34 +0,0 @@
-#!/bin/bash
-
-# Copyright (c) 2021 Proton Technologies AG
-#
-# This file is part of ProtonMail Bridge.
-#
-# ProtonMail 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.
-#
-# ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
-
-# create bitmaps
-for shape in rounded rectangle
-do
-    for usage in systray syswarn app
-    do
-        group=$shape-$usage
-        inkscape --without-gui  --export-id=$group --export-png=$group.png all_icons.svg
-    done
-done
-
-# mac icon
-png2icns Bridge.icns rounded-app.png
-
-# windows icon
-convert rectangle-app.png -define icon:auto-resize=256,128,64,48,32,16 logo.ico

internal/frontend/qml/icons/ic-apple-mail.svg

@@ -0,0 +1,10 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.29416 0.0598755H27.7073C32.2688 0.0598755 35.9409 3.73205 35.9409 8.29347V27.7067C35.9409 32.2681 32.2688 35.9403 27.7073 35.9403H8.29416C3.73273 35.9403 0.0605469 32.2681 0.0605469 27.7067V8.29347C0.0605469 3.73205 3.73273 0.0598755 8.29416 0.0598755Z" fill="url(#paint0_linear)"/>
+<path d="M7.92234 10.2633C7.73329 10.2633 7.55519 10.2959 7.38662 10.363L10.7629 13.8389L14.1765 17.3771L14.2388 17.4518L14.3385 17.5515L14.4381 17.6512L14.6375 17.863L17.5652 20.8655C17.6139 20.8958 17.7552 21.0266 17.8656 21.0818C18.0077 21.1529 18.1618 21.2183 18.3207 21.224C18.492 21.2302 18.6672 21.1811 18.8215 21.106C18.937 21.0498 18.9883 20.9693 19.1225 20.8655L22.5112 17.3646L25.9373 13.8389L29.2388 10.4377C29.0268 10.3229 28.7921 10.2633 28.5411 10.2633H7.92234ZM6.88828 10.6869C6.52824 11.028 6.30273 11.5409 6.30273 12.1196V23.5316C6.30273 24.0002 6.45323 24.4258 6.70141 24.7525L7.17483 24.304L10.7006 20.8779L13.8277 17.8505L13.7654 17.7758L10.3393 14.25L6.9132 10.7118L6.88828 10.6869ZM29.6873 10.799L26.3484 14.25L22.9348 17.7758L22.8725 17.8381L26.1242 20.9901L29.6499 24.4161L29.8617 24.6155C30.0516 24.3109 30.1607 23.9357 30.1607 23.5316V12.1196C30.1607 11.6036 29.9819 11.1357 29.6873 10.799ZM14.2263 18.2617L11.1117 21.2891L7.5735 24.7151L7.12499 25.1512C7.36144 25.3035 7.63053 25.4004 7.92234 25.4004H28.5411C28.8919 25.4004 29.2101 25.2654 29.4755 25.0515L29.2513 24.8273L25.713 21.4012L22.4614 18.2617L19.5336 21.2766C19.3752 21.3817 19.2693 21.4982 19.1146 21.5697C18.8656 21.6849 18.5926 21.7823 18.3183 21.7781C18.0433 21.7739 17.7736 21.6662 17.5267 21.5448C17.4028 21.4839 17.3368 21.4233 17.1914 21.3015L14.2263 18.2617Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear" x1="18.252" y1="35.7962" x2="18.2869" y2="0.493036" gradientUnits="userSpaceOnUse">
+<stop stop-color="#70EFFF"/>
+<stop offset="1" stop-color="#5770FF"/>
+</linearGradient>
+</defs>
+</svg>

internal/frontend/qml/icons/ic-arrow-left.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic-arrow-left">
+<path id="icon" fill-rule="evenodd" clip-rule="evenodd" d="M14 8H3.20998L7.68998 3.52L6.97998 2.81L1.28998 8.5L6.97998 14.19L7.68998 13.48L3.20998 9H14V8Z" fill="#17181C"/>
+</g>
+</svg>

internal/frontend/qml/icons/ic-check.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 8.5L2.7 7.8L6.05 11.14L13.2 4L13.9 4.7L6.05 12.56L2 8.5Z" fill="#17181C"/>
+</svg>

internal/frontend/qml/icons/ic-cog-wheel.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.7166 1H9.29278L9.83484 2.72079C10.0427 2.79404 10.2448 2.87886 10.4428 2.97503L12.04 2.14318L13.8662 3.97057L13.035 5.56869C13.1312 5.7671 13.2161 5.96972 13.2894 6.178L15 6.72052V9.29956L13.2799 9.83276C13.2068 10.0403 13.1222 10.2423 13.0262 10.4401L13.8574 12.0382L12.0312 13.8656L10.434 13.0338C10.2359 13.13 10.0336 13.2149 9.82558 13.2882L9.2834 15H6.70782L6.16564 13.2882C5.95765 13.2149 5.75532 13.13 5.55718 13.0338L3.95998 13.8656L2.13382 12.0382L2.96503 10.4401C2.86877 10.2417 2.78388 10.0391 2.71059 9.83078L1 9.28826V6.71174L2.71059 6.16922C2.78388 5.96094 2.86877 5.75832 2.96503 5.55991L2.13323 3.96064L3.96989 2.13499L5.56596 2.96625C5.76409 2.87 5.96643 2.78513 6.17441 2.71184L6.7166 1ZM7.44883 2L6.97047 3.51034L6.71736 3.58632C6.40057 3.68142 6.09845 3.8085 5.80203 3.96884L5.56858 4.09511L4.15637 3.35961L3.35968 4.15152L4.09358 5.56254L3.9676 5.79574C3.80736 6.0924 3.68034 6.39477 3.58529 6.71183L3.5094 6.96496L2 7.44367V8.55633L3.5094 9.03504L3.58529 9.28817C3.68034 9.60523 3.80736 9.9076 3.9676 10.2043L4.09358 10.4375L3.35909 11.8496L4.14873 12.6398L5.5598 11.9049L5.79325 12.0312C6.08967 12.1915 6.39179 12.3186 6.70858 12.4137L6.96169 12.4897L7.44005 14H8.55117L9.02953 12.4897L9.28264 12.4137C9.59943 12.3186 9.90155 12.1915 10.198 12.0312L10.4314 11.9049L11.8425 12.6398L12.6321 11.8496L11.8976 10.4375L12.0236 10.2043C12.1839 9.9076 12.3109 9.60523 12.4059 9.28817L12.4824 9.03304L14 8.5626V7.45245L12.4906 6.97374L12.4147 6.72061C12.3197 6.40355 12.1926 6.10118 12.0324 5.80453L11.9064 5.57132L12.6409 4.15916L11.8513 3.36898L10.4402 4.1039L10.2067 3.97762C9.91033 3.81729 9.60821 3.6902 9.29142 3.5951L9.03783 3.51898L8.55935 2H7.44883ZM7.99561 5.81216C6.78861 5.81216 5.80959 6.79136 5.80959 8C5.80959 9.20864 6.78861 10.1878 7.99561 10.1878C9.20261 10.1878 10.1816 9.20864 10.1816 8C10.1816 6.79136 9.20261 5.81216 7.99561 5.81216ZM4.80959 8C4.80959 6.23972 6.23569 4.81216 7.99561 4.81216C9.75553 4.81216 11.1816 6.23972 11.1816 8C11.1816 9.76028 9.75553 11.1878 7.99561 11.1878C6.23569 11.1878 4.80959 9.76028 4.80959 8Z" fill="#17181C"/>
+</svg>

internal/frontend/qml/icons/ic-connected.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9257 5.48656C13.8921 3.271 11.0022 2 8 2C4.99776 2 2.10791 3.271 0.0743047 5.48656C-0.0273754 5.59626 -0.0246996 5.76751 0.0823321 5.87455L1.67175 7.4637C1.78146 7.57341 1.95806 7.57341 2.06777 7.4637C2.0865 7.44524 2.09988 7.42383 2.11058 7.39975C3.61705 5.74584 5.76036 4.7962 8 4.7962C10.2396 4.7962 12.3829 5.74611 13.8894 7.39975C13.9001 7.42383 13.9135 7.44524 13.9322 7.4637C13.9857 7.51989 14.058 7.54692 14.1302 7.54692C14.2025 7.54692 14.2747 7.51989 14.3282 7.4637L15.9177 5.87455C16.0247 5.76751 16.0274 5.59653 15.9257 5.48656Z" fill="#349172"/>
+<path d="M12.7547 8.56633C11.5533 7.20168 9.82473 6.41794 7.99984 6.41794C6.17495 6.41794 4.44639 7.20195 3.24228 8.56633C3.2289 8.57436 3.21285 8.58265 3.19947 8.59577C3.08976 8.70547 3.08976 8.88208 3.19947 8.99151L4.72735 10.5194C4.7541 10.5488 4.78621 10.5678 4.821 10.5809C4.83705 10.589 4.85311 10.589 4.86649 10.5916C4.88789 10.5943 4.90662 10.6023 4.92535 10.6023C4.92803 10.6023 4.93071 10.5997 4.93338 10.5997C4.93606 10.5997 4.93873 10.6023 4.94141 10.6023C4.95211 10.6023 4.96281 10.5943 4.97352 10.5916C4.9976 10.589 5.02168 10.5836 5.04309 10.5729C5.05914 10.5676 5.06985 10.5569 5.08323 10.5462C5.0966 10.5381 5.11266 10.5328 5.12336 10.5191C5.12871 10.5164 5.12871 10.5087 5.13407 10.5057C5.13674 10.5004 5.14209 10.5004 5.14477 10.495C5.83512 9.62006 6.87601 9.11969 7.99984 9.11969C9.12367 9.11969 10.1646 9.62006 10.8549 10.495C10.8576 10.5007 10.8629 10.5007 10.8656 10.5057C10.871 10.5114 10.871 10.5164 10.8763 10.5191C10.887 10.5328 10.9031 10.5379 10.9165 10.5462C10.9298 10.5569 10.9405 10.5676 10.9566 10.5729C10.978 10.5836 11.0021 10.5892 11.0262 10.5916C11.0369 10.5943 11.0476 10.6023 11.0583 10.6023H11.0743C11.1118 10.6023 11.1466 10.5943 11.1814 10.5809C11.2161 10.5676 11.2456 10.5461 11.2723 10.5194L12.8002 8.99151C12.9099 8.88208 12.9099 8.70547 12.8002 8.59577C12.7868 8.58265 12.7708 8.57436 12.7547 8.56633Z" fill="#349172"/>
+<path d="M7.99991 10.2626C7.17309 10.2626 6.50146 10.9371 6.50146 11.7637C6.50146 12.5902 7.17309 13.2621 7.99991 13.2621C8.82673 13.2621 9.49835 12.5905 9.49835 11.7637C9.49835 10.9369 8.82673 10.2626 7.99991 10.2626Z" fill="#349172"/>
+</svg>

internal/frontend/qml/icons/ic-cross-close.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.85 2.8499L13.15 2.1499L8 7.2899L2.85 2.1499L2.15 2.8499L7.29 7.9999L2.15 13.1499L2.85 13.8499L8 8.7099L13.15 13.8499L13.85 13.1499L8.71 7.9999L13.85 2.8499Z" fill="#17181C"/>
+</svg>

internal/frontend/qml/icons/ic-exclamation-circle-filled.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM7.5 5V9H8.5V5H7.5ZM7.5 10V11H8.5V10H7.5Z" fill="#17181C"/>
+</svg>

internal/frontend/qml/icons/ic-eye-slash.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic-eye-slash">
+<g id="icon">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 4.33002L13.15 2.15002L13.86 2.84002L2.85999 13.84L2.15999 13.14L4.15999 11.14C3.12487 10.3566 2.24914 9.38244 1.57999 8.27002L1.39999 8.00002L1.57999 7.70002C3.14999 5.31002 4.83999 3.70002 7.99999 3.70002C9.03578 3.66939 10.064 3.88532 11 4.33002ZM6.92814 6.91817C6.47409 7.37223 6.362 8.0661 6.64999 8.64003L8.64999 6.64003C8.07607 6.35203 7.3822 6.46412 6.92814 6.91817ZM9.36999 5.93002C8.96735 5.65139 8.48965 5.50146 7.99999 5.50002C6.61928 5.50002 5.49999 6.61931 5.49999 8.00002C5.50143 8.48968 5.65136 8.96738 5.92999 9.37002L4.86999 10.42C3.96048 9.77171 3.18887 8.94911 2.59999 8.00002C3.99999 6.00002 5.39999 4.70002 7.99999 4.70002C8.75151 4.68822 9.49833 4.82061 10.2 5.09002L9.36999 5.93002Z" fill="#17181C"/>
+<path d="M14.42 7.73002C13.8714 6.82671 13.1981 6.00529 12.42 5.29002L11.7 6.00002C12.3591 6.5822 12.9316 7.25569 13.4 8.00002C12 10 10.6 11.3 7.99999 11.3C7.51257 11.3044 7.0262 11.2541 6.54999 11.15L5.73999 12C6.47229 12.2209 7.23543 12.3222 7.99999 12.3C11.16 12.3 12.85 10.69 14.42 8.30002L14.6 8.00002L14.42 7.73002Z" fill="#17181C"/>
+<path d="M8.21999 9.48002L7.29999 10.4C7.52685 10.4689 7.76292 10.5027 7.99999 10.5C8.66304 10.5 9.29892 10.2366 9.76776 9.76779C10.2366 9.29895 10.5 8.66307 10.5 8.00002C10.5026 7.76295 10.4689 7.52688 10.4 7.30002L9.47999 8.22003C9.38822 8.87414 8.8741 9.38825 8.21999 9.48002Z" fill="#17181C"/>
+</g>
+</g>
+</svg>

internal/frontend/qml/icons/ic-eye.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic-eye">
+<g id="icon">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99999 5.49998C6.61928 5.49998 5.49999 6.61927 5.49999 7.99998C5.49999 9.38069 6.61928 10.5 7.99999 10.5C9.38071 10.5 10.5 9.38069 10.5 7.99998C10.5 7.33694 10.2366 6.70106 9.76776 6.23221C9.29892 5.76337 8.66304 5.49998 7.99999 5.49998ZM7.99999 9.49998C7.17157 9.49998 6.49999 8.82841 6.49999 7.99998C6.49999 7.17155 7.17157 6.49998 7.99999 6.49998C8.82842 6.49998 9.49999 7.17155 9.49999 7.99998C9.49999 8.82841 8.82842 9.49998 7.99999 9.49998Z" fill="#17181C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.42 7.72998C12.85 5.30998 11.16 3.72998 7.99999 3.72998C4.83999 3.72998 3.14999 5.33998 1.57999 7.72998L1.39999 7.99998L1.57999 8.26998C3.14999 10.69 4.83999 12.27 7.99999 12.27C11.16 12.27 12.85 10.66 14.42 8.26998L14.6 7.99998L14.42 7.72998ZM7.99999 11.3C5.39999 11.3 3.99999 9.99998 2.59999 7.99998C3.99999 5.99998 5.39999 4.69998 7.99999 4.69998C10.6 4.69998 12 5.99998 13.4 7.99998C12 9.99998 10.6 11.3 7.99999 11.3Z" fill="#17181C"/>
+</g>
+</g>
+</svg>

internal/frontend/qml/icons/ic-info-circle-filled.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15C11.866 15 15 11.866 15 8C15 6.14348 14.2625 4.36301 12.9497 3.05025C11.637 1.7375 9.85652 1 8 1ZM8.5 4V5H7.5V4H8.5ZM8.5 6V11H9.5V12H6.5V11H7.5V7H6.5V6H8.5Z" fill="#17181C"/>
+</svg>

internal/frontend/qml/icons/ic-microsoft-outlook.svg

@@ -0,0 +1,20 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.1672 2.25H12.8275C11.961 2.25 11.248 2.96301 11.248 3.82952V5.62489L22.1485 9.0001L33.7466 5.62489V3.82952C33.7466 2.96301 33.0336 2.25 32.1672 2.25Z" fill="#0364B8"/>
+<path d="M35.6033 19.5809C35.7681 19.0629 35.8997 18.535 35.9971 18.0002C35.9972 17.7327 35.8542 17.4847 35.6225 17.351L35.6079 17.3432L35.6033 17.3411L23.4113 10.3952C23.3588 10.3612 23.3043 10.3299 23.2483 10.3018C22.7762 10.0678 22.2208 10.0678 21.7487 10.3018C21.6928 10.3299 21.6383 10.361 21.5856 10.3952L9.39371 17.3411L9.38913 17.3432L9.3744 17.351C9.14286 17.4847 8.99984 17.7327 9 18.0002C9.09736 18.535 9.22893 19.0629 9.39371 19.5809L22.3213 29.0364L35.6033 19.5809Z" fill="#0A2767"/>
+<path d="M26.9977 5.625H19.1232L16.8496 9.00021L19.1232 12.3751L26.9977 19.125H33.7472V12.3751L26.9977 5.625Z" fill="#28A8EA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.25 5.625H19.1245V12.3749H11.25V5.625Z" fill="#0078D4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.998 5.625H33.7476V12.3749H26.998V5.625Z" fill="#50D9FF"/>
+<path d="M26.999 19.1251L19.1245 12.3752H11.25V19.1251L19.1245 25.8752L31.3097 27.8642L26.999 19.1251Z" fill="#0364B8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.123 12.3752H26.9976V19.1251H19.123V12.3752Z" fill="#0078D4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.25 19.125H19.1245V25.8749H11.25V19.125Z" fill="#064A8C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.998 19.125H33.7476V25.8749H26.998V19.125Z" fill="#0078D4"/>
+<path d="M22.7128 28.3704L9.44531 18.6955L10.001 17.7179C10.001 17.7179 22.0883 24.6028 22.2728 24.7064C22.4256 24.7678 22.5974 24.7628 22.7465 24.6928C22.9185 24.5961 35.0441 17.6841 35.0441 17.6841L35.6021 18.6618L22.7128 28.3704Z" fill="#0A2767" fill-opacity="0.498039"/>
+<path d="M35.6238 18.6492L35.6092 18.6582L35.6058 18.6605L23.4139 25.6063C22.922 25.9235 22.2989 25.9623 21.7715 25.7086L26.018 31.4022L35.3032 33.4239V33.4285C35.741 33.1118 36.0008 32.603 36.0006 32.0627V18.0002C36.0008 18.2676 35.8576 18.5157 35.6261 18.6492H35.6238Z" fill="#1490DF"/>
+<path d="M35.9976 32.0629V31.2328L24.7674 24.8337L23.4118 25.6054C22.9201 25.9226 22.2969 25.9615 21.7695 25.7077L26.0161 31.4015L35.3013 33.423V33.4276C35.739 33.1108 35.9987 32.6022 35.9987 32.0618L35.9976 32.0629Z" fill="black" fill-opacity="0.047059"/>
+<path d="M35.9414 32.4937L23.6312 25.4804L23.4118 25.6053C22.9201 25.9224 22.2969 25.9614 21.7695 25.7075L26.0161 31.4013L35.3013 33.4228V33.4274C35.6163 33.199 35.8429 32.8686 35.9424 32.4925L35.9414 32.4937Z" fill="black" fill-opacity="0.098039"/>
+<path d="M9.39373 18.6639V18.6526H9.38261L9.34873 18.6302C9.13044 18.4959 8.9979 18.2565 9.00003 18.0002V32.065C9.00003 32.9894 9.76077 33.7502 10.6853 33.7502H34.3111C34.4515 33.7487 34.5914 33.7299 34.7273 33.6939C34.7978 33.6816 34.866 33.6589 34.9298 33.6265C34.9537 33.624 34.9766 33.6163 34.9973 33.6039C35.0892 33.5663 35.1763 33.5172 35.256 33.4576L35.301 33.4239L9.39373 18.6639Z" fill="#28A8EA"/>
+<path d="M20.2493 27.7507V9.37612C20.2469 8.55429 19.5716 7.87892 18.7498 7.87646H11.2849V16.2643L9.39371 17.3421L9.38929 17.3444L9.37473 17.3523C9.14302 17.4861 9 17.7341 9 18.0013V29.2548V29.2502H18.7498C19.5716 29.2479 20.2469 28.5724 20.2493 27.7507Z" fill="black" fill-opacity="0.098039"/>
+<path d="M19.1245 28.8755V10.5009C19.1221 9.67927 18.4466 9.0039 17.6249 9.00128H11.2849V16.2643L9.39371 17.342L9.38929 17.3443L9.37473 17.3522C9.14302 17.486 9 17.734 9 18.0012V30.3798V30.3752H17.6249C18.4466 30.3727 19.1221 29.6974 19.1245 28.8755ZM19.1245 26.6255V10.5009C19.1221 9.67927 18.4466 9.0039 17.6249 9.00128H11.2849V16.2643L9.39371 17.342L9.38929 17.3443L9.37473 17.3522C9.14302 17.486 9 17.734 9 18.0012V28.1296V28.1252H17.6249C18.4466 28.1228 19.1221 27.4474 19.1245 26.6255ZM17.9995 26.6255V10.5009C17.9971 9.67927 17.3217 9.0039 16.5001 9.00128H11.2849V16.2643L9.39371 17.342L9.38929 17.3443L9.37473 17.3522C9.14302 17.486 9 17.734 9 18.0012V28.1296V28.1252H16.5001C17.3217 28.1228 17.9971 27.4474 17.9995 26.6255Z" fill="black" fill-opacity="0.2"/>
+<path d="M1.49956 9.00037H16.4981C17.3207 9.00037 17.9977 9.67721 17.9977 10.4999V25.4996C17.9977 26.3222 17.3207 26.9992 16.4981 26.9992H1.49956C0.676964 26.9992 0 26.3222 0 25.4996V10.4999C0 9.67721 0.676964 9.00037 1.49956 9.00037Z" fill="#0078D4"/>
+<path d="M4.35008 15.1517C4.74854 14.3026 5.39195 13.5919 6.19721 13.1111C7.08952 12.6002 8.10554 12.3457 9.13334 12.3753C10.0852 12.3544 11.0248 12.5957 11.8489 13.0728C12.6244 13.5346 13.249 14.2121 13.6464 15.0225C14.0794 15.9153 14.2954 16.8978 14.2764 17.89C14.2975 18.9271 14.0752 19.9548 13.6274 20.8905C13.2211 21.7295 12.5777 22.4314 11.7769 22.9088C10.9207 23.4008 9.94612 23.6488 8.9589 23.6254C7.98641 23.6484 7.02603 23.4044 6.18265 22.9199C5.40112 22.4573 4.76899 21.7791 4.36252 20.9669C3.92676 20.0868 3.7083 19.1149 3.72581 18.1331C3.7065 17.1049 3.92037 16.0857 4.35123 15.1517H4.35008ZM6.31863 19.942C6.53119 20.4789 6.89168 20.9448 7.35821 21.2852C7.83292 21.6177 8.40205 21.7892 8.98132 21.7747C9.59856 21.7991 10.2071 21.6222 10.7149 21.2707C11.1757 20.9303 11.5267 20.4619 11.724 19.924C11.9459 19.3244 12.0552 18.689 12.0469 18.0498C12.0538 17.405 11.951 16.7635 11.7432 16.1531C11.5599 15.6036 11.2215 15.1185 10.7689 14.757C10.2745 14.3878 9.66761 14.2003 9.05119 14.226C8.45932 14.2106 7.87743 14.3831 7.38963 14.7187C6.91443 15.0603 6.54592 15.5301 6.32763 16.0732C5.8449 17.3168 5.84212 18.6967 6.31977 19.942H6.31863Z" fill="white"/>
+</svg>

internal/frontend/qml/icons/ic-mozilla-thunderbird.svg

@@ -0,0 +1,112 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.429 5.15378C25.3233 3.77844 22.6304 3.33309 21.1443 3.17756C19.5536 3.0113 18.1721 3.04053 16.9571 3.2189C16.8541 3.21753 16.7518 3.21365 16.6484 3.21365C16.5693 3.21365 16.4915 3.21707 16.412 3.21799C16.4446 3.17802 16.4673 3.15335 16.4673 3.15335C16.4673 3.15335 16.4033 3.1634 16.2779 3.22027C15.8835 3.22666 15.4907 3.24037 15.104 3.26686C15.6428 2.67626 16.0843 2.36657 16.0843 2.36657C16.0843 2.36657 15.5603 2.4433 14.6043 3.3098C14.1496 3.35159 13.7008 3.40709 13.26 3.47606C14.2647 2.11671 15.3155 1.54415 15.3155 1.54415C15.3155 1.54415 14.0418 1.28494 12.0473 3.28901C11.8804 3.45688 11.7258 3.63113 11.5759 3.80768C5.76262 5.21407 1.60236 8.96803 1.60236 13.3795C1.60236 14.2446 1.33675 15.1961 1.62314 16.1464C1.50872 17.6642 1.75241 21.806 1.75241 21.806C1.75241 21.806 3.32598 30.3225 9.37727 31.8031C9.47342 31.8262 8.11293 29.6803 7.51114 27.0922C8.68275 28.2839 10.0791 29.2267 11.6465 29.39C11.8388 29.4099 10.7512 28.1352 9.79864 26.5971L23.5497 31.2301C30.7418 28.141 29.9045 28.4194 31.4486 26.7467C34.8506 23.0642 35.3268 20.9747 34.4697 14.8053C33.8903 10.641 30.8165 6.51632 27.429 5.15378Z" fill="url(#paint0_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.37873 24.2463L25.1074 31.8031L29.3227 13.8808L3.29364 9.04291L1.24023 20.7184L2.37873 24.2463Z" fill="#FBFBFB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.35905 9.44019C3.47302 9.68547 3.43945 9.74348 3.36842 9.74348C3.33644 9.74348 3.29693 9.73183 3.25993 9.71996C3.22294 9.70831 3.18822 9.69643 3.16584 9.69643C3.10303 9.69643 3.13843 9.78939 3.49449 10.2366C3.99808 10.8763 11.3936 22.0411 11.7979 22.0411C11.7999 22.0411 11.802 22.0409 11.8036 22.0402C15.2465 20.8133 29.8885 15.7877 29.8885 15.7877L28.3903 13.6055L3.35905 9.44019Z" fill="#999999"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.57227 9.16595C3.57227 9.16595 3.68258 9.73692 4.19393 10.3689C4.70209 11.0065 11.5285 21.3425 11.8711 21.2514C16.3429 20.0643 32.5671 13.7478 32.5671 13.7478L3.57227 9.16595Z" fill="#F8F8F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.2955 31.534L2.69531 24.3522L2.77159 24.857L24.536 32.0933L24.2955 31.534Z" fill="#999999"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.37825 8.6828C8.37825 8.6828 0.519063 10.9845 4.12526 18.9973C4.12526 18.9973 2.47175 17.4834 1.48719 15.5476C1.44288 15.461 3.12836 9.4737 3.12836 9.4737L8.37825 8.6828Z" fill="url(#paint1_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.12623 18.9976C3.4429 18.9857 2.3446 18.4218 1.98855 17.7392C1.54343 25.1592 4.57067 29.4924 9.3768 31.8032C7.8062 31.6232 0 27.5038 0 17.5908C0 9.16175 6.68848 1.62756 17.1554 1.28247C17.2195 1.755 11.9662 2.93986 11.7981 3.49712C11.5373 4.3643 10.9378 5.30821 10.4324 6.06508C9.74724 7.0903 11.3845 7.96707 10.1814 8.24342C8.37099 8.65885 5.95605 8.42886 4.17533 10.7438C1.49843 14.2234 3.28463 18.2042 4.12623 18.9976Z" fill="url(#paint2_radial)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9001 1.55371C13.1217 1.03345 9.63287 3.74598 7.39333 6.89975C6.57777 8.04784 6.66684 9.10206 6.94775 10.3755C7.06834 10.9191 7.19029 11.1797 7.04344 11.734C6.96237 12.0398 6.97584 12.3253 6.87512 12.5057C6.73604 12.7551 6.55858 13.0275 6.4992 13.4752C6.35075 14.5931 6.74654 14.9492 6.99388 15.3253C7.34628 14.9754 8.03441 14.1521 9.27499 13.6604C10.5158 13.1687 11.3323 12.4294 12.8874 11.636C15.012 10.5523 17.5026 12.1965 22.2244 10.6491C23.6774 10.173 27.0166 5.22637 27.8093 5.03635C25.6018 2.59538 21.8462 1.70285 19.9001 1.55371Z" fill="url(#paint3_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4217 0.00476074C15.4217 0.00476074 14.2113 0.589426 13.6844 1.64571C14.9015 1.03226 15.6079 0.696996 15.9418 0.657028C15.9418 0.657028 15.6218 0.811873 15.2251 1.65461C15.9265 1.43011 16.1679 1.28828 16.3604 1.28623C16.3604 1.28623 16.3044 1.37484 16.2533 2.21576C15.1762 1.86678 13.1034 2.27331 12.0005 2.96394C11.6267 0.969916 15.4217 0.00476074 15.4217 0.00476074Z" fill="#3F6499"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.24 1.25326C18.1622 0.983992 16.4253 1.03698 14.9486 1.32155C15.4129 0.876423 15.9503 0.657173 15.9503 0.657173C15.2539 0.718609 14.3849 1.17332 13.639 1.65453C13.2631 1.77443 12.905 1.90986 12.5658 2.06083C12.7734 1.78722 13.0151 1.49466 13.2512 1.27016C14.128 0.436325 15.4302 0.00467751 15.4302 0.00467751C14.3189 -0.0768559 10.5994 0.875281 8.36126 5.40827C7.99448 5.85522 7.65213 6.31358 7.32599 6.77309C6.48417 7.95864 6.57643 9.0469 6.86671 10.3619C6.9905 10.9235 7.01333 11.8199 6.89115 12.3991C6.86671 12.5152 6.54811 12.8148 6.46635 13.6228C6.37888 14.4802 6.68492 14.9013 6.98661 15.2496C8.05842 13.6824 9.11562 13.3718 9.11562 13.3718C10.6157 12.7572 11.2401 12.1009 12.8458 11.2816C15.0397 10.1623 22.7114 13.8156 27.5865 12.218C29.0867 11.7265 27.0089 5.34089 27.8279 5.14494C25.5481 2.62448 22.2379 1.51225 20.24 1.25326Z" fill="url(#paint4_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.4576 14.9986C34.2558 8.72034 28.4736 3.00843 23.8239 2.69189C21.7602 2.55143 22.394 3.60931 21.1027 4.01241C15.5381 5.74882 15.4531 6.76262 15.4531 6.76262C27.2517 7.31714 27.4305 18.9696 24.2708 21.9176C25.1599 21.7102 26.124 20.6231 27.0094 18.9166C26.9032 19.6326 26.8118 20.5109 26.6792 21.4909C26.2745 24.4814 26.7986 30.7284 18.2054 34.909C18.2054 34.909 22.9062 34.5249 25.2371 31.9007C24.2891 34.0807 21.688 35.2582 21.688 35.2582C23.6024 34.9782 28.6305 33.4944 31.8336 29.4888C35.4587 24.9546 36.549 20.701 35.4576 14.9986Z" fill="url(#paint5_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.9593 26.4602C23.9593 26.4602 27.7923 25.3886 29.0274 23.3188C28.8776 25.7321 26.6885 28.2069 26.6885 28.2069C26.6885 28.2069 29.8887 27.5592 31.2533 25.3073C31.0756 27.3395 28.6118 30.0858 28.6118 30.0858C31.1306 29.6339 37.4594 25.636 35.4574 14.9983C34.275 8.71609 28.4734 3.00806 23.8234 2.69152C21.7597 2.55106 22.3935 3.60894 21.1022 4.01204C15.5381 5.74868 15.4531 6.76248 15.4531 6.76248C27.2517 7.317 30.387 13.4921 24.2708 21.7525C25.1599 21.5452 25.5165 21.0564 26.1845 20.2568C26.1842 20.2568 26.4871 23.4195 23.9593 26.4602Z" fill="url(#paint6_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.80049 12.4251C8.80049 12.4251 8.11534 12.9045 7.61906 12.7823C7.03165 12.6382 6.9323 12.0691 6.9323 12.0691C6.91928 12.1856 6.90444 12.2982 6.88274 12.3991C6.85831 12.5151 6.53971 12.8148 6.45795 13.6228C6.37047 14.4802 6.6925 14.9769 6.99419 15.3252C8.066 13.758 9.10721 13.3718 9.10721 13.3718C8.69909 13.2293 8.80049 12.4251 8.80049 12.4251Z" fill="url(#paint7_linear)"/>
+<g opacity="0.6">
+<g opacity="0.6">
+<g opacity="0.2">
+<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M23.7441 2.67671C23.9046 2.63515 24.5603 2.7064 24.9906 2.89939C25.4209 3.09237 26.1629 3.43358 25.5693 3.58203C24.9757 3.73048 24.6343 3.49296 24.3376 3.24082C24.041 2.98869 23.3435 2.78063 23.7441 2.67671Z" fill="url(#paint8_linear)"/>
+</g>
+</g>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.86562 12.3314C8.86562 12.3314 12.6248 6.1365 16.0234 4.46473C16.3391 4.306 11.318 5.79941 9.29726 8.02959C8.09619 9.35513 8.73201 11.9505 8.86562 12.3314Z" fill="url(#paint9_linear)"/>
+<path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M8.86523 12.3314C8.86866 12.3292 8.87254 12.3271 8.8762 12.3248C9.8482 11.7242 11.514 11.3784 12.051 10.2897C14.1183 6.09767 16.023 4.46472 16.023 4.46472C12.6245 6.13627 8.86523 12.3314 8.86523 12.3314Z" fill="#F2F2F2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.22311 11.1985C9.22311 11.1985 8.54572 10.1591 9.52116 9.21108C10.0359 8.7116 10.8163 8.98909 10.9065 9.07884C11.2905 9.45956 11.0491 10.2632 10.7035 10.718C10.5082 10.974 9.93979 11.3727 9.22311 11.1985Z" fill="#2F4282"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.61129 11.1338C9.61129 11.1338 9.1431 10.4151 9.81775 9.76032C10.1729 9.41523 10.7123 9.60707 10.7749 9.66874C11.0401 9.93184 10.8731 10.4873 10.6345 10.8013C10.4997 10.979 10.1067 11.2544 9.61129 11.1338Z" fill="url(#paint10_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5456 10.3672C10.5351 10.6543 10.2921 10.8786 10.0028 10.8688C9.71295 10.8587 9.48594 10.6182 9.49644 10.3309C9.50672 10.0438 9.74972 9.81956 10.0398 9.82961C10.3289 9.83943 10.5555 10.0801 10.5456 10.3672Z" fill="black"/>
+<path d="M9.68961 10.5015C9.85258 10.5015 9.98469 10.3694 9.98469 10.2064C9.98469 10.0434 9.85258 9.91132 9.68961 9.91132C9.52664 9.91132 9.39453 10.0434 9.39453 10.2064C9.39453 10.3694 9.52664 10.5015 9.68961 10.5015Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.1814 9.44009C30.6082 5.52283 28.5694 4.52753 28.5694 4.52753C28.5694 4.52753 28.663 7.38097 30.0918 8.75722C30.2551 8.91435 28.3821 7.53284 28.3821 7.53284C28.3821 7.53284 27.9815 8.85085 28.8994 10.366C28.6329 10.0117 28.4564 9.87767 28.4564 9.87767C28.4564 9.87767 26.7273 10.675 26.2168 11.7813C25.9533 11.2838 25.7555 10.9906 25.7555 10.9906C25.7555 10.9906 24.5594 13.3774 24.7099 16.1448C24.9545 20.6444 23.8672 22.3023 23.8672 22.3023C23.8672 22.3023 26.7798 21.1848 28.1764 17.5875C28.7533 19.117 28.1588 20.7269 28.1588 20.7269C28.1588 20.7269 30.512 18.9685 31.0181 15.7636C31.5791 16.6682 31.4142 18.4739 31.4142 18.4739C31.4142 18.4739 32.9163 16.3825 32.9528 14.1051C33.6489 14.5904 33.7131 16.4864 33.7131 16.4864C33.7131 16.4864 35.9401 13.6392 33.1814 9.44009Z" fill="url(#paint11_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.6808 6.70268C30.0082 5.44954 28.8217 4.65087 27.7787 4.00454C25.1781 2.39192 23.5056 2.16559 23.5056 2.16559C23.5056 2.16559 21.1057 2.61185 21.5177 3.27965C21.539 3.31391 21.5883 3.3573 21.6584 3.40709C19.5532 2.43737 18.359 4.66709 18.359 4.66709C17.156 4.59401 15.6912 5.18621 15.2641 6.77257C15.2198 6.93723 15.8029 6.84451 16.103 6.90983C17.857 7.29123 19.5082 8.11799 20.2669 8.52657C22.0318 9.47733 23.0788 11.0605 23.6835 12.2481C24.4148 13.6849 24.7135 16.2129 24.7135 16.2129C24.7135 16.2129 26.6379 13.5693 26.1782 12.212C26.9403 12.6855 27.0908 14.3744 27.0908 14.3744C27.0908 14.3744 28.3736 12.365 27.9945 10.6147C28.9841 11.2179 29.0172 12.4445 29.0172 12.4445C29.0172 12.4445 30.0249 11.0461 29.5695 8.75221C30.5652 9.54402 30.7737 10.5697 30.7737 10.5697C30.7737 10.5697 31.5875 8.39228 30.6808 6.70268Z" fill="url(#paint12_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="28.9748" y1="29.3189" x2="8.19927" y2="4.09908" gradientUnits="userSpaceOnUse">
+<stop stop-color="#130036"/>
+<stop offset="0.2297" stop-color="#18023B"/>
+<stop offset="0.5122" stop-color="#26094A"/>
+<stop offset="0.8211" stop-color="#3D1563"/>
+<stop offset="1" stop-color="#4E1D75"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="1.48639" y1="13.8402" x2="8.37818" y2="13.8402" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3156A8"/>
+<stop offset="0.2474" stop-color="#3351A4"/>
+<stop offset="0.5365" stop-color="#3B4397"/>
+<stop offset="0.8453" stop-color="#472C82"/>
+<stop offset="1" stop-color="#4E1D75"/>
+</linearGradient>
+<radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(8.578 9.36353) scale(12.3786)">
+<stop offset="0.1654" stop-color="#14CDDA"/>
+<stop offset="0.5478" stop-color="#2061BD"/>
+<stop offset="0.6546" stop-color="#2658AC"/>
+<stop offset="0.864" stop-color="#373F81"/>
+<stop offset="1" stop-color="#432D62"/>
+</radialGradient>
+<linearGradient id="paint3_linear" x1="6.46705" y1="8.40727" x2="27.8094" y2="8.40727" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2061BD"/>
+<stop offset="0.1846" stop-color="#2B51AC"/>
+<stop offset="0.6826" stop-color="#442C84"/>
+<stop offset="0.9409" stop-color="#4E1D75"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="9.60982" y1="3.36979" x2="18.6751" y2="19.3209" gradientUnits="userSpaceOnUse">
+<stop offset="0.0202" stop-color="#48A8E0"/>
+<stop offset="0.3883" stop-color="#2061BD"/>
+<stop offset="0.4968" stop-color="#2B51AC"/>
+<stop offset="0.7892" stop-color="#442C84"/>
+<stop offset="0.9409" stop-color="#4E1D75"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="2.85799" y1="48.9959" x2="42.8988" y2="25.7007" gradientUnits="userSpaceOnUse">
+<stop offset="0.3787" stop-color="#3156A8"/>
+<stop offset="1" stop-color="#4E1D75"/>
+</linearGradient>
+<linearGradient id="paint6_linear" x1="14.0492" y1="40.462" x2="37.7537" y2="10.9949" gradientUnits="userSpaceOnUse">
+<stop stop-color="#29ABE2"/>
+<stop offset="0.7733" stop-color="#385AA6"/>
+<stop offset="0.8575" stop-color="#414293"/>
+<stop offset="1" stop-color="#4E1D75"/>
+</linearGradient>
+<linearGradient id="paint7_linear" x1="7.00851" y1="13.3643" x2="7.93109" y2="13.7193" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B0DCD6"/>
+<stop offset="1" stop-color="#53ACE0"/>
+</linearGradient>
+<linearGradient id="paint8_linear" x1="25.5884" y1="3.35221" x2="24.5953" y2="2.28868" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3092B9"/>
+<stop offset="0.2199" stop-color="#258DB6"/>
+<stop offset="0.6564" stop-color="#1685B1"/>
+<stop offset="1" stop-color="#1082AF"/>
+</linearGradient>
+<linearGradient id="paint9_linear" x1="11.731" y1="5.52165" x2="13.3151" y2="11.2176" gradientUnits="userSpaceOnUse">
+<stop offset="0.0074" stop-color="#1398D1" stop-opacity="0"/>
+<stop offset="0.2482" stop-color="#1187C2" stop-opacity="0.6197"/>
+<stop offset="0.6422" stop-color="#3F6499" stop-opacity="0.71"/>
+<stop offset="1" stop-color="#2F4282" stop-opacity="0.5"/>
+</linearGradient>
+<linearGradient id="paint10_linear" x1="10.5714" y1="10.6273" x2="9.7502" y2="10.22" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F9C21B"/>
+<stop offset="0.1479" stop-color="#F3BA1B"/>
+<stop offset="0.3787" stop-color="#E3A41B"/>
+<stop offset="0.6634" stop-color="#C9801C"/>
+<stop offset="0.9884" stop-color="#A44E1C"/>
+<stop offset="1" stop-color="#A34C1C"/>
+</linearGradient>
+<linearGradient id="paint11_linear" x1="29.9441" y1="18.8975" x2="20.857" y2="11.5081" gradientUnits="userSpaceOnUse">
+<stop stop-color="#409EC3"/>
+<stop offset="0.62" stop-color="#2061BD"/>
+</linearGradient>
+<linearGradient id="paint12_linear" x1="25.668" y1="14.9655" x2="22.6111" y2="2.99136" gradientUnits="userSpaceOnUse">
+<stop stop-color="#14B2DA"/>
+<stop offset="0.4028" stop-color="#297CCC"/>
+<stop offset="0.5077" stop-color="#256FC5"/>
+<stop offset="0.6492" stop-color="#2164BF"/>
+<stop offset="0.8162" stop-color="#2061BD"/>
+<stop offset="0.9835" stop-color="#2061BD"/>
+</linearGradient>
+</defs>
+</svg>

internal/frontend/qml/icons/ic-other-mail-clients.svg

@@ -0,0 +1,29 @@
+<svg width="37" height="36" viewBox="0 0 37 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.7">
+<path d="M15 14H20V36H15V14Z" fill="#626262"/>
+<path d="M3 18H32.1444C32.6127 18 33 17.6217 33 17.1444V8.88969C33 5.0801 29.9109 2 26.1103 2H9.53002C5.72043 2 3 5.0891 3 8.88969V18Z" fill="url(#paint0_linear)"/>
+<path d="M20 18H32V9C32 5.69475 29.1238 2.82001 25.8185 2.82001C22.5133 2.82001 20 5.69475 20 9V18Z" fill="url(#paint1_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.78225 11.2845L4.78225 16.4365C4.78225 16.7247 4.54809 16.9589 4.2599 16.9589L0.522355 16.9589C0.234159 16.9589 -3.19682e-07 16.7247 -3.07084e-07 16.4365L-2.28536e-08 9.93408C-1.02561e-08 9.64589 0.234159 9.41173 0.522355 9.41173L2.19946 9.41173L2.19946 9.41125L15.0401 9.41126C15.5534 9.41126 15.9767 9.83454 15.9767 10.3479C15.9767 10.8702 15.5534 11.2845 15.0401 11.2845L4.78225 11.2845Z" fill="url(#paint2_linear)"/>
+<path d="M20 17.9866H21.1618V18.509L31.9653 18.5823L34.9463 20.7258C34.9463 20.7258 35.7748 21.2165 36 22V23C36 23.3873 35.8379 23.8196 35.3966 24.2428C33.9916 25.4317 28.6562 25.8637 24.8646 23.0087C21.0821 20.1538 20 19 20 19V17.9866Z" fill="url(#paint3_linear)"/>
+<path d="M31.9997 18L34.9808 20.1435C34.9808 20.1435 37.0161 21.6385 35.4311 23.1695C34.0261 24.3583 28.6556 24.8503 24.864 21.9954C21.0724 19.1405 20.0001 18 20.0001 18H31.9997Z" fill="#E1E1E1"/>
+<path d="M14.8849 10.8636C14.6411 10.8636 14.4436 10.666 14.4436 10.4223C14.4436 10.1785 14.6411 9.98096 14.8849 9.98096C15.1286 9.98096 15.3262 10.1785 15.3262 10.4223C15.3262 10.666 15.1286 10.8636 14.8849 10.8636Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear" x1="17.3522" y1="5.73755" x2="17.3522" y2="18.094" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E1E1E1"/>
+<stop offset="1" stop-color="#BEBEBE"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="23.5" y1="5.5" x2="32" y2="25.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1F1F1F"/>
+<stop offset="1" stop-color="#6D6D6D" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="0.80402" y1="6.9834" x2="6.99556" y2="16.0441" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DFDFDF"/>
+<stop offset="0.96875" stop-color="#9E9E9E"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="32.1687" y1="18.4701" x2="24.2916" y2="24.1519" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E9E9E9"/>
+<stop offset="1" stop-color="#A5A5A5"/>
+</linearGradient>
+</defs>
+</svg>

internal/frontend/qml/icons/ic-plus.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 8H9V2H8V8H2V9H8V15H9V9H15V8Z" fill="#17181C"/>
+</svg>

internal/frontend/qml/icons/ic-question-circle.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic-question-circle">
+<g id="icon">
+<path d="M8.69 3.92C7.89347 3.70879 7.04403 3.87868 6.39 4.38C5.7528 4.88127 5.38356 5.64929 5.39 6.46H6.39C6.3828 5.95878 6.60804 5.48247 7 5.17C7.40675 4.8584 7.93577 4.75482 8.43 4.89C8.97906 5.03325 9.41216 5.45496 9.57 6C9.71599 6.49287 9.6194 7.02578 9.30972 7.43606C9.00003 7.84634 8.51401 8.0853 8 8.08H7.5V10H8.5V9C9.70091 8.76754 10.583 7.73782 10.6284 6.51546C10.6738 5.29309 9.87038 4.20082 8.69 3.88V3.92Z" fill="#17181C"/>
+<path d="M8.5 11V12H7.5V11H8.5Z" fill="#17181C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15C11.866 15 15 11.866 15 8C15 6.14348 14.2625 4.36301 12.9497 3.05025C11.637 1.7375 9.85652 1 8 1ZM8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8C14 9.5913 13.3679 11.1174 12.2426 12.2426C11.1174 13.3679 9.5913 14 8 14Z" fill="#17181C"/>
+</g>
+</g>
+</svg>

internal/frontend/qml/icons/ic-systray.svg

@@ -0,0 +1,17 @@
+<svg width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.44639C4.85487 1.86475 9 2.00042 9 2.00042C9 2.00042 13.1449 1.86558 14 6.44639V9.56692C14 9.56692 13.9645 9.90088 13.0219 10.5793C12.8583 10.697 12.6497 10.8518 12.4131 11.0272C11.2866 11.863 9.528 13.1675 9 13.1675C8.47195 13.1675 6.71341 11.863 5.58685 11.0273C5.35031 10.8518 5.14162 10.697 4.97804 10.5793C4.0354 9.90088 4 9.56692 4 9.56692V6.44639ZM6.16158 8.14758H11.8384V6.44639C11.2623 4.17122 9 4.13992 9 4.13992C9 4.13992 6.73765 4.17122 6.16158 6.44639V8.14758Z" fill="white"/>
+<path d="M7.8546 13.4606C8.35732 13.8084 8.99982 13.871 8.99982 13.871C8.99982 13.871 9.6427 13.8077 10.1454 13.4597C10.6482 13.1118 13.9998 10.7254 13.9998 10.7254V15.4504C13.9998 15.4504 13.9713 16 13.3638 16H4.636C4.02852 16 4.00024 15.4504 4.00024 15.4504V10.7262C4.00024 10.7262 7.35186 13.1129 7.8546 13.4606Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d" x="0" y="0" width="18" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

internal/frontend/qml/icons/ie.svg

@@ -1,31 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#9397CD;}
-	.st1{fill:#262A33;}
-	.st2{fill:#FFFFFF;}
-</style>
-<g>
-	<circle class="st0" cx="512.2" cy="512.1" r="512"/>
-</g>
-<g>
-	<circle class="st1" cx="850" cy="850" r="174"/>
-</g>
-<g>
-	<rect x="797" y="774" class="st2" width="34" height="128"/>
-	<polygon class="st2" points="814,717 751.6,775 876.4,775 	"/>
-</g>
-<g>
-	<rect x="865" y="798" class="st2" width="34" height="128"/>
-	<polygon class="st2" points="882,983 944.4,925 819.6,925 	"/>
-</g>
-<g>
-	<path class="st2" d="M511,263c0,0-136.3-4.5-164.4,146.7v103c0,0,1.2,11,32.2,33.4c31,22.4,111.2,85.4,132.3,85.4
-		c21,0,101.3-63,132.3-85.4c31-22.4,32.2-33.4,32.2-33.4v-103C647.3,258.5,511,263,511,263z M604.3,465.9H511h-93.3v-56.1
-		c18.9-75.1,93.3-76.1,93.3-76.1s74.4,1,93.3,76.1V465.9z"/>
-	<path class="st2" d="M511,654.7c0,0-21.1-2.1-37.7-13.5C456.8,629.7,346.6,551,346.6,551v155.9c0,0,0.9,18.1,20.9,18.1
-		s143.5,0,143.5,0s123.5,0,143.5,0s20.9-18.1,20.9-18.1V551c0,0-110.2,78.8-126.8,90.2C532.1,652.7,511,654.7,511,654.7z"/>
-</g>
-</svg>

internal/frontend/qml/icons/img-welcome.svg

@@ -0,0 +1,62 @@
+<svg width="264" height="148" viewBox="0 0 264 148" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M220.171 147H43.8555C42.1441 147 40.8047 145.661 40.8047 143.949V142.238C40.8047 140.526 42.1441 139.187 43.8555 139.187H220.171C221.882 139.187 223.221 140.526 223.221 142.238V143.949C223.221 145.661 221.808 147 220.171 147Z" fill="#B0D4E5"/>
+<path d="M140.83 143.503H122.376C119.995 143.503 118.135 141.568 118.135 139.261H145.071C145.071 141.568 143.211 143.503 140.83 143.503Z" fill="#DAF3FF"/>
+<path d="M205.035 139.187H57.502V53.9292C57.502 49.0182 61.5201 45 66.4312 45H196.105C201.017 45 205.035 49.0182 205.035 53.9292V139.187Z" fill="#38385F"/>
+<path d="M198.116 139.186H65.168V55.3426C65.168 54.152 66.1353 53.1847 67.3259 53.1847H195.884C197.075 53.1847 198.042 54.152 198.042 55.3426V139.186H198.116Z" fill="url(#paint0_linear)"/>
+<path d="M189.805 131.286H75.1797V62.518C75.1797 61.5228 76.028 60.7143 77.0721 60.7143H187.847C188.891 60.7143 189.739 61.5228 189.739 62.518V131.286H189.805Z" fill="white"/>
+<path d="M83.1558 70.7741C84.3064 70.7741 85.2392 69.8413 85.2392 68.6906C85.2392 67.5399 84.3064 66.6071 83.1558 66.6071C82.0051 66.6071 81.0723 67.5399 81.0723 68.6906C81.0723 69.8413 82.0051 70.7741 83.1558 70.7741Z" fill="#B0D4E5"/>
+<path d="M89.6304 70.7741C90.781 70.7741 91.7139 69.8413 91.7139 68.6906C91.7139 67.5399 90.781 66.6071 89.6304 66.6071C88.4797 66.6071 87.5469 67.5399 87.5469 68.6906C87.5469 69.8413 88.4797 70.7741 89.6304 70.7741Z" fill="#B0D4E5"/>
+<path d="M96.105 70.7741C97.2557 70.7741 98.1885 69.8413 98.1885 68.6906C98.1885 67.5399 97.2557 66.6071 96.105 66.6071C94.9543 66.6071 94.0215 67.5399 94.0215 68.6906C94.0215 69.8413 94.9543 70.7741 96.105 70.7741Z" fill="#B0D4E5"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="119" y="45" width="86" height="79">
+<rect x="119.07" y="45" width="85.4464" height="78.5714" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0)">
+<g opacity="0.2" filter="url(#filter0_f)">
+<path d="M171.125 21.9196L204.518 45V99.5089L200.736 97.3398C182.421 86.8356 171.125 67.3354 171.125 46.2218V21.9196Z" fill="#221548"/>
+</g>
+</g>
+<path d="M0 69C0 55.7452 10.7452 45 24 45C37.2548 45 48 55.7452 48 69V93H24C10.7452 93 0 82.2548 0 69Z" fill="url(#paint1_linear)"/>
+<path d="M241.633 76.3542H179.924C177.747 76.3542 176 74.562 176 72.3896V33.9651C176 31.7927 177.774 30.0004 179.924 30.0004H241.606C243.783 30.0004 245.53 31.7927 245.53 33.9651V72.3896C245.557 74.5891 243.783 76.3542 241.633 76.3542Z" fill="url(#paint2_linear)"/>
+<path d="M208.232 56.69C209.689 57.8922 211.822 57.8922 213.28 56.69L244.431 31.0421C243.729 30.4009 242.784 30.0001 241.758 30.0001H179.78C178.754 30.0001 177.809 30.4009 177.107 31.0421L208.232 56.69Z" fill="url(#paint3_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M159 81H103V89C108.523 89 113 93.4772 113 99V111H121V99C121 93.4772 125.477 89 131 89C136.523 89 141 93.4772 141 99V111H149V99C149 93.4772 153.477 89 159 89V81Z" fill="url(#paint4_linear)"/>
+<path d="M24.0002 56.0009C24.0002 56.0009 16.5507 55.7352 15.0005 64.2382V70.0397C15.0005 70.0397 15.0435 70.6597 16.766 71.944C18.4884 73.2283 22.8376 76.7712 24.0002 76.7712C25.1629 76.7712 29.5551 73.184 31.2345 71.944C32.9139 70.704 33 70.0397 33 70.0397V64.2382C31.4929 55.7352 24.0002 56.0009 24.0002 56.0009ZM18.919 67.4268V64.2825C19.5219 61.8467 21.5888 60.1196 24.0433 59.9867C26.4978 60.0753 28.5647 61.8467 29.1676 64.2825V67.4268H18.919Z" fill="white"/>
+<path d="M23.9998 78.0555C23.2677 77.9669 22.5788 77.7012 21.9328 77.3026C21.0286 76.6383 15 72.2097 15 72.2097V80.9784C15.0431 81.5984 15.5598 82.0412 16.1196 81.9969H31.8369C32.4397 82.0412 32.9565 81.5984 32.9995 81.0226V72.2097C32.9995 72.2097 26.971 76.6383 26.0667 77.3026C25.4638 77.7012 24.7749 77.9669 23.9998 78.0555Z" fill="white"/>
+<circle cx="238.278" cy="30.2778" r="15.2778" fill="url(#paint5_linear)"/>
+<path d="M232.504 31.1432L236.382 35.052L243.962 27.4131" stroke="white" stroke-width="2.1007" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<filter id="filter0_f" x="154.429" y="5.22319" width="66.7857" height="110.982" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="8.34821" result="effect1_foregroundBlur"/>
+</filter>
+<linearGradient id="paint0_linear" x1="62.7088" y1="144.987" x2="206.624" y2="58.7507" gradientUnits="userSpaceOnUse">
+<stop stop-color="#35168C"/>
+<stop offset="0.317708" stop-color="#FF5454"/>
+<stop offset="0.46875" stop-color="#FFDD64"/>
+<stop offset="0.677083" stop-color="#BCE6FF"/>
+<stop offset="0.942708" stop-color="#2395FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="33.965" y1="89.5033" x2="4.72061" y2="47.9504" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F6DE6"/>
+<stop offset="0.483234" stop-color="#63A1FE"/>
+<stop offset="1" stop-color="#82D2FF"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="210.765" y1="30.0004" x2="210.765" y2="66.4213" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C1DEF8"/>
+<stop offset="1" stop-color="#ECFAFF"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="210.769" y1="18.4117" x2="210.769" y2="50.4179" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DEEBF7"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="142.626" y1="108.815" x2="129.807" y2="74.8136" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F6DE6"/>
+<stop offset="0.483234" stop-color="#63A1FE"/>
+<stop offset="1" stop-color="#82D2FF"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="238.278" y1="15" x2="238.278" y2="45.5556" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5BCB6A"/>
+<stop offset="1" stop-color="#1CB78F"/>
+</linearGradient>
+</defs>
+</svg>

internal/frontend/qml/icons/logo.svg

@@ -1,31 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#9397CD;}
-	.st1{fill:#262A33;}
-	.st2{fill:#FFFFFF;}
-</style>
-<g>
-	<circle class="st0" cx="512.2" cy="512.1" r="512"/>
-</g>
-<g>
-	<circle class="st1" cx="850" cy="850" r="174"/>
-</g>
-<g>
-	<path class="st2" d="M784.4,773.1h90.7c15.1,0,26.7,3.7,34.8,11.2s12.1,16.8,12.1,27.8c0,9.3-2.9,17.2-8.7,23.8
-		c-3.8,4.4-9.5,7.9-16.9,10.5c11.3,2.7,19.5,7.4,24.9,14c5.3,6.6,8,14.9,8,24.9c0,8.1-1.9,15.4-5.7,21.9s-8.9,11.6-15.5,15.4
-		c-4.1,2.4-10.2,4.1-18.4,5.1c-10.9,1.4-18.1,2.1-21.7,2.1h-83.6L784.4,773.1L784.4,773.1z M833.3,834.6h21.1
-		c7.6,0,12.8-1.3,15.8-3.9c3-2.6,4.4-6.4,4.4-11.3c0-4.6-1.5-8.1-4.4-10.7c-3-2.6-8.1-3.8-15.5-3.8h-21.4L833.3,834.6L833.3,834.6z
-		 M833.3,896.2H858c8.3,0,14.2-1.5,17.6-4.4c3.4-3,5.1-6.9,5.1-11.9c0-4.6-1.7-8.4-5.1-11.2c-3.4-2.8-9.3-4.2-17.8-4.2h-24.6
-		L833.3,896.2L833.3,896.2z"/>
-</g>
-<g>
-	<path class="st2" d="M511,263c0,0-136.3-4.5-164.4,146.7v103c0,0,1.2,11,32.2,33.4c31,22.4,111.2,85.4,132.3,85.4
-		c21,0,101.3-63,132.3-85.4c31-22.4,32.2-33.4,32.2-33.4v-103C647.3,258.5,511,263,511,263z M604.3,465.9H511h-93.3v-56.1
-		c18.9-75.1,93.3-76.1,93.3-76.1s74.4,1,93.3,76.1V465.9z"/>
-	<path class="st2" d="M511,654.7c0,0-21.1-2.1-37.7-13.5C456.8,629.7,346.6,551,346.6,551v155.9c0,0,0.9,18.1,20.9,18.1
-		s143.5,0,143.5,0s123.5,0,143.5,0s20.9-18.1,20.9-18.1V551c0,0-110.2,78.8-126.8,90.2C532.1,652.7,511,654.7,511,654.7z"/>
-</g>
-</svg>

internal/frontend/qml/icons/product_logos.svg

@@ -0,0 +1,15 @@
+<svg width="132" height="22" viewBox="0 0 132 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6.92568C5.23102 0.304543 11.2 0.500613 11.2 0.500613C11.2 0.500613 17.1687 0.305749 18.4 6.92568V11.4353C18.4 11.4353 18.349 11.9179 16.9916 12.8983C16.756 13.0684 16.4555 13.2922 16.1148 13.5458C14.4925 14.7535 11.9603 16.6387 11.2 16.6387C10.4397 16.6387 7.90748 14.7536 6.28522 13.5458C5.94459 13.2922 5.64394 13.0684 5.40839 12.8983C4.05098 11.9179 4 11.4353 4 11.4353V6.92568ZM7.11269 6.92568V9.3841H15.2873V6.92568C14.4578 3.63774 11.2 3.59249 11.2 3.59249C11.2 3.59249 7.94222 3.63774 7.11269 6.92568Z" fill="#A4A9B5"/>
+<path d="M9.5509 17.0622C10.2749 17.5648 11.2 17.6552 11.2 17.6552C11.2 17.6552 12.1258 17.5639 12.8497 17.061C13.5737 16.5582 18.4 13.1094 18.4 13.1094V19.9378C18.4 19.9378 18.359 20.732 17.4842 20.732H4.9161C4.04133 20.732 4.00061 19.9378 4.00061 19.9378V13.1106C4.00061 13.1106 8.82695 16.5597 9.5509 17.0622Z" fill="#A4A9B5"/>
+<path d="M120.326 2.93005C119.854 2.93005 119.445 3.08477 119.125 3.40492C118.807 3.72286 118.65 4.12335 118.65 4.58455C118.65 5.04576 118.807 5.44633 119.125 5.76427L119.131 5.77016C119.452 6.07341 119.859 6.21755 120.326 6.21755C120.805 6.21755 121.22 6.07541 121.543 5.77025L121.549 5.76419C121.867 5.44625 122.024 5.04576 122.024 4.58455C122.024 4.12335 121.867 3.72286 121.549 3.40492C121.227 3.08268 120.81 2.93005 120.326 2.93005Z" fill="#A4A9B5"/>
+<path d="M127.533 17.7211V3.53705L124.955 3.84529V17.7641C124.955 18.6053 125.177 19.3033 125.659 19.8181L125.666 19.8252C126.163 20.3225 126.826 20.5581 127.62 20.5581C128.24 20.5581 128.813 20.418 129.333 20.1344L129.562 20.0097L128.847 18.1026L128.562 18.2165C128.388 18.2861 128.183 18.3241 127.942 18.3241C127.747 18.3241 127.663 18.2737 127.624 18.2288C127.579 18.1584 127.533 18.0063 127.533 17.7211Z" fill="#A4A9B5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.85 4.88655H30.0415C31.9131 4.88655 33.406 5.28066 34.4807 6.10919C35.574 6.93755 36.1035 8.17511 36.1035 9.76605C36.1035 11.4552 35.5539 12.7592 34.4145 13.6177C33.3016 14.4562 31.8415 14.8606 30.063 14.8606H28.4925V20.3001H25.85V4.88655ZM28.4925 7.07755V12.6481H29.977C31.1353 12.6481 31.9638 12.4236 32.5069 12.0194L32.5095 12.0174C33.0283 11.6401 33.332 10.9334 33.332 9.78755C33.332 8.78605 33.0368 8.12514 32.506 7.72705L32.5033 7.72506C31.9597 7.30783 31.1461 7.07755 30.02 7.07755H28.4925Z" fill="#A4A9B5"/>
+<path d="M94.5527 4.88655H91.299L90.0238 20.3001H92.5628L93.0783 13.487C93.2023 11.9223 93.2853 10.4798 93.327 9.15955L96.212 18.6231H98.5731L101.324 9.13446C101.385 10.3004 101.484 11.7024 101.618 13.3381L102.155 20.3001H104.737L103.461 4.88655H100.183L97.4375 14.8543L94.5527 4.88655Z" fill="#A4A9B5"/>
+<path d="M61.0388 5.53655V8.36955H63.7715L63.472 10.4961H61.0388V16.9471C61.0388 17.5058 61.1353 17.8554 61.276 18.0518C61.4131 18.2113 61.6597 18.3241 62.0933 18.3241C62.4713 18.3241 62.9232 18.1953 63.4561 17.9084L63.7132 17.77L64.7482 19.5738L64.5216 19.7307C63.7238 20.283 62.818 20.5581 61.8138 20.5581C60.7947 20.5581 59.9582 20.2673 59.3442 19.6532L59.3386 19.6476C58.7388 19.0154 58.4608 18.1282 58.4608 17.0331V10.4961H56.4828V8.36955H58.4608V5.84479L61.0388 5.53655Z" fill="#A4A9B5"/>
+<path d="M43.1362 8.11155C42.3799 8.11155 41.7094 8.34998 41.1381 8.82609C40.8204 9.09084 40.5448 9.42275 40.3088 9.81746L40.187 8.36955H37.9127V20.3001H40.4907V13.5619C40.7293 12.5091 41.0499 11.7707 41.4316 11.3126C41.8017 10.8685 42.2817 10.6466 42.8997 10.6466C43.1877 10.6466 43.4928 10.6858 43.8159 10.7666L44.1244 10.8437L44.6015 8.31815L44.3269 8.24951C43.9563 8.15684 43.5589 8.11155 43.1362 8.11155Z" fill="#A4A9B5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.439 8.91263C48.255 8.37423 49.2244 8.11155 50.3331 8.11155C51.9975 8.11155 53.3212 8.67031 54.2618 9.81077C55.2078 10.9404 55.6641 12.4562 55.6641 14.3241C55.6641 15.5335 55.4576 16.6155 55.0363 17.5634L55.0355 17.565C54.6126 18.5015 53.9963 19.2423 53.186 19.7774L53.1826 19.7796C52.3673 20.3026 51.406 20.5581 50.3116 20.5581C48.6467 20.5581 47.3167 19.999 46.3622 18.8597C45.4157 17.73 44.9591 16.2138 44.9591 14.3456C44.9591 13.1366 45.1655 12.0614 45.5873 11.127C46.0098 10.1767 46.6263 9.43442 47.439 8.91263ZM48.3723 11.2567C47.9306 11.9079 47.6876 12.9224 47.6876 14.3456C47.6876 15.7616 47.9289 16.7709 48.3671 17.4186C48.7912 18.0453 49.4225 18.3671 50.3116 18.3671C51.2002 18.3671 51.8314 18.044 52.2558 17.4138C52.6943 16.7624 52.9356 15.7475 52.9356 14.3241C52.9356 12.9077 52.6961 11.8981 52.261 11.2502C51.8401 10.6235 51.2142 10.3026 50.3331 10.3026C49.4365 10.3026 48.7998 10.6263 48.3723 11.2567Z" fill="#A4A9B5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.6573 8.11155C69.5486 8.11155 68.5793 8.37422 67.7633 8.91258C66.9506 9.43437 66.334 10.1767 65.9115 11.127C65.4897 12.0614 65.2834 13.1366 65.2834 14.3456C65.2834 16.2138 65.7399 17.73 66.6864 18.8597C67.641 19.999 68.9709 20.5581 70.6358 20.5581C71.7303 20.5581 72.6915 20.3026 73.5068 19.7796L73.5102 19.7774C74.3205 19.2423 74.9368 18.5015 75.3598 17.565L75.3605 17.5634C75.7818 16.6155 75.9884 15.5335 75.9884 14.3241C75.9884 12.4563 75.5321 10.9405 74.5862 9.81091C73.6456 8.67035 72.3218 8.11155 70.6573 8.11155ZM74.5862 9.81091L74.5868 9.81173L74.3554 10.0025L74.5853 9.80989L74.5862 9.81091ZM67.7633 8.91258L67.7649 8.91155L67.9269 9.16398L67.7615 8.91371L67.7633 8.91258ZM68.0119 14.3456C68.0119 12.9224 68.2549 11.9079 68.6965 11.2567C69.1241 10.6263 69.7607 10.3026 70.6573 10.3026C71.5384 10.3026 72.1643 10.6235 72.5852 11.2502C73.0203 11.8981 73.2599 12.9077 73.2599 14.3241C73.2599 15.7475 73.0186 16.7624 72.58 17.4138C72.1556 18.044 71.5244 18.3671 70.6358 18.3671C69.7467 18.3671 69.1154 18.0453 68.6913 17.4186C68.2531 16.7709 68.0119 15.7616 68.0119 14.3456Z" fill="#A4A9B5"/>
+<path d="M81.7312 8.66708C82.3801 8.29628 83.091 8.11155 83.858 8.11155C84.9523 8.11155 85.8419 8.44053 86.4843 9.13029C87.1374 9.81592 87.4475 10.7428 87.4475 11.8731V20.3001H84.8695V12.1526C84.8695 11.3709 84.7197 10.9008 84.4965 10.6563C84.2688 10.407 83.9165 10.2596 83.385 10.2596C82.8445 10.2596 82.378 10.4125 81.974 10.7156C81.5694 11.019 81.1781 11.4587 80.804 12.0456V20.3001H78.226V8.36955H80.4953L80.6187 9.57267C80.9444 9.21294 81.3143 8.91109 81.7285 8.66865L81.7312 8.66708Z" fill="#A4A9B5"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M111.384 8.11155C110.137 8.11155 108.797 8.37863 107.367 8.90395L107.091 9.00521L107.778 11.0047L108.06 10.9107C109.248 10.5147 110.231 10.3241 111.018 10.3241C111.786 10.3241 112.294 10.4898 112.603 10.7643C112.898 11.0263 113.083 11.4962 113.083 12.2601V12.7986H111.642C110.015 12.7986 108.71 13.1276 107.765 13.8246L107.764 13.8261C106.818 14.5351 106.354 15.5541 106.354 16.8396C106.354 17.9266 106.701 18.832 107.411 19.5266C108.125 20.2245 109.089 20.5581 110.266 20.5581C111.646 20.5581 112.755 20.0943 113.56 19.1604C113.737 19.5105 113.969 19.7963 114.261 20.007C114.672 20.3029 115.198 20.4801 115.819 20.5558L116.064 20.5857L116.683 18.6994L116.41 18.6001C116.138 18.5013 115.957 18.3684 115.842 18.214C115.736 18.057 115.661 17.7858 115.661 17.3556V12.1741C115.661 10.9157 115.315 9.90435 114.583 9.18721C113.847 8.45207 112.761 8.11155 111.384 8.11155ZM109.061 16.7321C109.061 16.0328 109.292 15.5511 109.724 15.2317C110.172 14.8999 110.881 14.7101 111.9 14.7101H113.083V16.9335C112.484 17.9881 111.697 18.4746 110.717 18.4746C110.124 18.4746 109.727 18.3174 109.472 18.051C109.214 17.7824 109.061 17.3605 109.061 16.7321Z" fill="#A4A9B5"/>
+<path d="M119.059 8.36955H121.637V20.3001H119.059V8.36955Z" fill="#A4A9B5"/>
+</svg>

internal/frontend/qml/icons/rounded-app.svg

@@ -1,104 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:x="adobe:ns:meta/"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   id="icon"
-   data-name="icon"
-   width="1023.9999"
-   height="1024"
-   viewBox="0 0 1023.9999 1024"
-   version="1.1"
-   sodipodi:docname="rounded-app.svg"
-   inkscape:version="0.92.2 5c3e80d, 2017-08-06">
-  <sodipodi:namedview
-     pagecolor="#f2f0dc"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1916"
-     inkscape:window-height="1041"
-     id="namedview13"
-     showgrid="false"
-     inkscape:zoom="0.08"
-     inkscape:cx="-996.40516"
-     inkscape:cy="-475.07466"
-     inkscape:window-x="0"
-     inkscape:window-y="18"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="icon_copy"
-     inkscape:snap-global="true"
-     inkscape:snap-page="true"
-     showguides="true"
-     inkscape:snap-bbox="true"
-     inkscape:bbox-nodes="true"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:guide-bbox="true">
-    <sodipodi:guide
-       position="-1674.8916,-1294.7484"
-       orientation="0,1"
-       id="guide930"
-       inkscape:locked="false" />
-  </sodipodi:namedview>
-  <defs
-     id="defs6">
-    <style
-       id="style4">
-      .cls-1 {
-        fill: #524e63;
-      }
-    </style>
-    <style
-       id="style1034">
-      .cls-1 {
-        fill: #524e63;
-      }
-
-      .cls-2 {
-        fill: #f50000;
-      }
-
-      .cls-3 {
-        font-size: 25px;
-        fill: #fff;
-        font-family: FontAwesome;
-      }
-    </style>
-    <style
-       id="style1252">
-      .cls-1 {
-        fill: #524e63;
-      }
-    </style>
-  </defs>
-  <g
-     id="rounded-app"
-     transform="translate(-3144.4905,136.43166)"
-     inkscape:label="#g1094">
-    <rect
-       style="opacity:1;fill:#524e63;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
-       id="rect1079"
-       width="1023.9999"
-       height="1024"
-       x="3144.4905"
-       y="-136.43166"
-       rx="42" />
-    <path
-       id="path1081"
-       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.43053901px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-       d="m 3656.4904,105.24957 c -96.291,0.11246 -179.6386,71.35368 -192.5081,166.78071 v 25.65195 0.0784 0.0557 102.40927 c 0,15.42041 64.1815,57.97487 96.4999,80.64666 32.3184,22.6718 75.2653,56.62643 96.0082,55.91117 20.7427,0.71526 63.6925,-33.23937 96.0109,-55.91117 32.3184,-22.67179 96.5,-65.22625 96.5,-80.64666 V 272.03022 c -12.8701,-95.43016 -96.2168,-166.67214 -192.5109,-166.78071 z m 0,84.4633 c 48.5585,-8.7e-4 97.0347,34.73428 107.3407,82.31741 v 71.11627 h -107.3407 -107.338 v -71.11627 c 11.0135,-48.17274 58.956,-82.25048 107.338,-82.31741 z M 3849.0013,442.854 c 0,0 -37.5022,25.38545 -85.1702,59.65794 -47.668,34.27255 -78.1135,60.21117 -107.3407,60.21117 -29.2273,0 -59.67,-25.93862 -107.338,-60.21117 -47.668,-34.27249 -85.1701,-59.45675 -85.1701,-59.45675 v 184.23498 c 0,10.30275 8.2942,18.59699 18.597,18.59699 h 347.8249 c 10.3028,0 18.5971,-8.29424 18.5971,-18.59699 z"
-       inkscape:connector-curvature="0" />
-  </g>
-</svg>

internal/frontend/qml/qtquickcontrols2.conf

@@ -1,2 +0,0 @@
-[Controls]
-Style=Proton

internal/frontend/qml/tests/Buttons.qml

@@ -0,0 +1,71 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Window 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+
+import Proton 4.0
+
+RowLayout {
+    property var colorScheme: parent.colorScheme
+
+    // Primary buttons
+    ButtonsColumn {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        iconLoading: "../icons/Loader_16.svg"
+    }
+
+    // Secondary buttons
+    ButtonsColumn {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        secondary: true
+        iconLoading: "../icons/Loader_16.svg"
+    }
+
+    // Secondary icons
+    ButtonsColumn {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        secondary: true
+        textNormal: ""
+        iconNormal: "../icons/ic-cross-close.svg"
+        textDisabled: ""
+        iconDisabled: "../icons/ic-cross-close.svg"
+        textLoading: ""
+        iconLoading: "../icons/Loader_16.svg"
+    }
+
+    // Icons
+    ButtonsColumn {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        textNormal: ""
+        iconNormal: "../icons/ic-cross-close.svg"
+        textDisabled: ""
+        iconDisabled: "../icons/ic-cross-close.svg"
+        textLoading: ""
+        iconLoading: "../icons/Loader_16.svg"
+    }
+}

internal/frontend/qml/tests/ButtonsColumn.qml

@@ -0,0 +1,72 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick.Layouts 1.12
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import Proton 4.0
+
+ColumnLayout {
+    id: root
+    property var colorScheme: parent.colorScheme
+
+    property string textNormal: "Button"
+    property string iconNormal: ""
+    property string textDisabled: "Disabled"
+    property string iconDisabled: ""
+    property string textLoading: "Loading"
+    property string iconLoading: ""
+    property bool secondary: false
+
+    Button {
+        Layout.fillWidth: true
+
+        Layout.minimumHeight: implicitHeight
+        Layout.minimumWidth: implicitWidth
+
+        text: root.textNormal
+        icon.source: iconNormal
+        secondary: root.secondary
+    }
+
+
+    Button {
+        Layout.fillWidth: true
+
+        Layout.minimumHeight: implicitHeight
+        Layout.minimumWidth: implicitWidth
+
+        text: root.textDisabled
+        icon.source: iconDisabled
+        secondary: root.secondary
+
+        enabled: false
+    }
+
+    Button {
+        Layout.fillWidth: true
+
+        Layout.minimumHeight: implicitHeight
+        Layout.minimumWidth: implicitWidth
+
+        text: root.textLoading
+        icon.source: iconLoading
+        secondary: root.secondary
+
+        loading: true
+    }
+}

internal/frontend/qml/tests/CheckBoxes.qml

@@ -0,0 +1,101 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Window 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+
+import Proton 4.0
+
+RowLayout {
+    property var colorScheme: parent.colorScheme
+
+    ColumnLayout {
+        Layout.fillWidth: true
+        property var colorScheme: parent.colorScheme
+
+        spacing: parent.spacing
+
+        CheckBox {
+            text: "Checkbox"
+        }
+
+        CheckBox {
+            text: "Checkbox"
+            error: true
+        }
+
+        CheckBox {
+            text: "Checkbox"
+            enabled: false
+        }
+        CheckBox {
+            text: ""
+        }
+
+        CheckBox {
+            text: ""
+            error: true
+        }
+
+        CheckBox {
+            text: ""
+            enabled: false
+        }
+    }
+
+    ColumnLayout {
+        Layout.fillWidth: true
+        property var colorScheme: parent.colorScheme
+
+        spacing: parent.spacing
+
+        CheckBox {
+            text: "Checkbox"
+            checked: true
+        }
+
+        CheckBox {
+            text: "Checkbox"
+            checked: true
+            error: true
+        }
+
+        CheckBox {
+            text: "Checkbox"
+            checked: true
+            enabled: false
+        }
+        CheckBox {
+            text: ""
+            checked: true
+        }
+
+        CheckBox {
+            text: ""
+            checked: true
+            error: true
+        }
+
+        CheckBox {
+            text: ""
+            checked: true
+            enabled: false
+        }
+    }
+}

internal/frontend/qml/tests/RadioButtons.qml

@@ -0,0 +1,101 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Window 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+
+import Proton 4.0
+
+RowLayout {
+    property var colorScheme: parent.colorScheme
+
+    ColumnLayout {
+        Layout.fillWidth: true
+        property var colorScheme: parent.colorScheme
+
+        spacing: parent.spacing
+
+        RadioButton {
+            text: "Radio"
+        }
+
+        RadioButton {
+            text: "Radio"
+            error: true
+        }
+
+        RadioButton {
+            text: "Radio"
+            enabled: false
+        }
+        RadioButton {
+            text: ""
+        }
+
+        RadioButton {
+            text: ""
+            error: true
+        }
+
+        RadioButton {
+            text: ""
+            enabled: false
+        }
+    }
+
+    ColumnLayout {
+        Layout.fillWidth: true
+        property var colorScheme: parent.colorScheme
+
+        spacing: parent.spacing
+
+        RadioButton {
+            text: "Radio"
+            checked: true
+        }
+
+        RadioButton {
+            text: "Radio"
+            checked: true
+            error: true
+        }
+
+        RadioButton {
+            text: "Radio"
+            checked: true
+            enabled: false
+        }
+        RadioButton {
+            text: ""
+            checked: true
+        }
+
+        RadioButton {
+            text: ""
+            checked: true
+            error: true
+        }
+
+        RadioButton {
+            text: ""
+            checked: true
+            enabled: false
+        }
+    }
+}

internal/frontend/qml/tests/Switches.qml

@@ -0,0 +1,103 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Window 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+
+import Proton 4.0
+
+RowLayout {
+    property var colorScheme: parent.colorScheme
+
+    ColumnLayout {
+        Layout.fillWidth: true
+        property var colorScheme: parent.colorScheme
+
+        spacing: parent.spacing
+
+        Switch {
+            text: "Toggle"
+        }
+
+        Switch {
+            text: "Toggle"
+            enabled: false
+        }
+
+        Switch {
+            text: "Toggle"
+            loading: true
+        }
+
+        Switch {
+            text: ""
+        }
+
+        Switch {
+            text: ""
+            enabled: false
+        }
+
+        Switch {
+            text: ""
+            loading: true
+        }
+    }
+
+    ColumnLayout {
+        Layout.fillWidth: true
+        property var colorScheme: parent.colorScheme
+
+        spacing: parent.spacing
+
+        Switch {
+            text: "Toggle"
+            checked: true
+        }
+
+        Switch {
+            text: "Toggle"
+            checked: true
+            enabled: false
+        }
+
+        Switch {
+            text: "Toggle"
+            checked: true
+            loading: true
+        }
+
+        Switch {
+            text: ""
+            checked: true
+        }
+
+        Switch {
+            text: ""
+            checked: true
+            enabled: false
+        }
+
+        Switch {
+            text: ""
+            checked: true
+            loading: true
+        }
+    }
+}

internal/frontend/qml/tests/TestComponents.qml

@@ -0,0 +1,65 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+
+import Proton 4.0
+
+Rectangle {
+    property var colorScheme
+    color: colorScheme.background_norm
+    clip: true
+
+    ColumnLayout {
+        anchors.fill: parent
+        property var colorScheme: parent.colorScheme
+
+        spacing: 5
+
+        Buttons {
+            Layout.fillWidth: true
+            Layout.margins: 20
+        }
+
+        TextFields {
+            Layout.fillWidth: true
+            Layout.margins: 20
+        }
+
+        TextAreas {
+            Layout.fillWidth: true
+            Layout.margins: 20
+        }
+
+        CheckBoxes {
+            Layout.fillWidth: true
+            Layout.margins: 20
+        }
+
+        RadioButtons {
+            Layout.fillWidth: true
+            Layout.margins: 20
+        }
+
+        Switches {
+            Layout.fillWidth: true
+            Layout.margins: 20
+        }
+    }
+}

internal/frontend/qml/tests/TextAreas.qml

@@ -0,0 +1,83 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Window 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+
+import Proton 4.0
+
+RowLayout {
+    property var colorScheme: parent.colorScheme
+
+    ColumnLayout {
+        Layout.fillWidth: true
+        property var colorScheme: parent.colorScheme
+
+        spacing: parent.spacing
+
+        TextArea {
+            Layout.fillWidth: true
+            Layout.preferredHeight: 100
+
+            placeholderText: "Placeholder"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Assistive text"
+        }
+
+        TextArea {
+            Layout.fillWidth: true
+            Layout.preferredHeight: 100
+
+            text: "Value"
+            placeholderText: "Placeholder"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Assistive text"
+        }
+
+
+        TextArea {
+            Layout.fillWidth: true
+            Layout.preferredHeight: 100
+
+            error: true
+
+            text: "Value"
+            placeholderText: "Placeholder"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Error message"
+        }
+
+
+        TextArea {
+            Layout.fillWidth: true
+            Layout.preferredHeight: 100
+
+            enabled: false
+
+            text: "Value"
+            placeholderText: "Placeholder"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Assistive text"
+        }
+    }
+}

internal/frontend/qml/tests/TextFields.qml

@@ -0,0 +1,181 @@
+// Copyright (c) 2021 Proton Technologies AG
+//
+// This file is part of ProtonMail Bridge.
+//
+// ProtonMail 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.
+//
+// ProtonMail 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 ProtonMail Bridge.  If not, see <https://www.gnu.org/licenses/>.
+
+import QtQuick 2.13
+import QtQuick.Window 2.13
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+
+import Proton 4.0
+
+RowLayout {
+    property var colorScheme: parent.colorScheme
+
+    // Norm
+    ColumnLayout {
+        Layout.fillWidth: true
+        property var colorScheme: parent.colorScheme
+
+        spacing: parent.spacing
+
+        TextField {
+            Layout.fillWidth: true
+
+            placeholderText: "Placeholder"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Assistive text"
+        }
+
+        TextField {
+            Layout.fillWidth: true
+
+            text: "Value"
+            placeholderText: "Placeholder"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Assistive text"
+        }
+
+
+        TextField {
+            Layout.fillWidth: true
+            error: true
+
+            text: "Value"
+            placeholderText: "Placeholder"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Error message"
+        }
+
+
+        TextField {
+            Layout.fillWidth: true
+
+            text: "Value"
+            placeholderText: "Placeholder"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Assistive text"
+
+            enabled: false
+        }
+    }
+
+    // Masked
+    ColumnLayout {
+        Layout.fillWidth: true
+        property var colorScheme: parent.colorScheme
+
+        spacing: parent.spacing
+
+        TextField {
+            Layout.fillWidth: true
+            echoMode: TextInput.Password
+            placeholderText: "Password"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Assistive text"
+        }
+
+        TextField {
+            Layout.fillWidth: true
+            text: "Password"
+
+            echoMode: TextInput.Password
+            placeholderText: "Password"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Assistive text"
+        }
+
+        TextField {
+            Layout.fillWidth: true
+            text: "Password"
+            error: true
+
+            echoMode: TextInput.Password
+            placeholderText: "Password"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Error message"
+        }
+
+        TextField {
+            Layout.fillWidth: true
+            text: "Password"
+            enabled: false
+
+            echoMode: TextInput.Password
+            placeholderText: "Password"
+            label: "Label"
+            hint: "Hint"
+            assistiveText: "Assistive text"
+        }
+    }
+
+    // Varia
+    ColumnLayout {
+        Layout.fillWidth: true
+        property var colorScheme: parent.colorScheme
+
+        spacing: parent.spacing
+
+        TextField {
+            Layout.fillWidth: true
+
+            placeholderText: "Placeholder"
+            label: "Label"
+            hint: "Hint"
+
+            Rectangle {
+                anchors.fill: parent
+                border.color: "red"
+                border.width: 1
+                z: parent.z - 1
+            }
+        }
+
+        TextField {
+            Layout.fillWidth: true
+
+            placeholderText: "Placeholder"
+            assistiveText: "Assistive text"
+
+            Rectangle {
+                anchors.fill: parent
+                border.color: "red"
+                border.width: 1
+                z: parent.z - 1
+            }
+        }
+
+        TextField {
+            Layout.fillWidth: true
+
+            placeholderText: "Placeholder"
+
+            Rectangle {
+                anchors.fill: parent
+                border.color: "red"
+                border.width: 1
+                z: parent.z - 1
+            }
+        }
+    }
+}