status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: Support dark mode for onboarding screens 

Related to #599.

![Imgur](https://imgur.com/vKTadPM.png)
![Imgur](https://imgur.com/PHMzGxC.png)

This PR is based off of #1036, which supports system colors at app startup, meaning the onboarding screens may be in dark mode, if the user has their system set to dark mode. This PR fixes the onboarding screens so they support dark mode.

It also:
1. Adds radio buttons to the `AccountList` component, as per the design
2. Adds `qsTr` where missing on the onboarding screens
3. Fixes some minor design issues
4. Updates the modals titles to match the design
5.  Uses reusable Status components where possible. `EnterSeedPhraseModal` and `GenKeyModal` could have used the `StatusRoundButton` component, but there were some limitations that preventing this from being possible.
This commit is contained in:
emizzle 2020-09-29 16:39:29 +10:00 committed by Iuri Matias
parent c236e01fc8
commit 2c9d042152
7 changed files with 79 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/onboarding/CreatePasswordModal.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Controls 2.13
import QtQuick.Dialogs 1.3
import "../imports"
import "../shared"
import "../shared/status"
ModalPopup {
property bool loading: false
@ -83,7 +84,7 @@ ModalPopup {
horizontalAlignment: Text.AlignHCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
color: Style.current.darkGrey
color: Style.current.secondaryText
font.pixelSize: 12
}
@ -114,19 +115,18 @@ ModalPopup {
}
}
StyledButton {
StatusButton {
id: submitBtn
anchors.bottom: parent.bottom
anchors.topMargin: Style.current.padding
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
label: loading ?
text: loading ?
//% "Logging in..."
qsTrId("logging-in...") :
//% "Create password"
qsTrId("create-password")
disabled: firstPasswordField.text === "" || repeatPasswordField.text === "" || loading
enabled: firstPasswordField.text !== "" && repeatPasswordField.text !== "" && !loading
MessageDialog {
id: importError

23
ui/onboarding/EnterSeedPhraseModal.qml
View File

@ -1,13 +1,13 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import "../imports"
import "../shared"
ModalPopup {
property var onConfirmSeedClick: function () {}
id: popup
//% "Add key"
title: qsTrId("add-key")
title: qsTr("Enter seed phrase")
height: 400
onOpened: {
@ -21,12 +21,14 @@ ModalPopup {
wrapMode: Text.WordWrap
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 15
placeholderText: "Enter your seed phrase here..."
placeholderText: qsTr("Start with the first word")
placeholderTextColor: Style.current.secondaryText
anchors.left: parent.left
anchors.leftMargin: 76
anchors.right: parent.right
anchors.rightMargin: 76
anchors.verticalCenter: parent.verticalCenter
color: Style.current.textColor
Keys.onReturnPressed: {
submitBtn.clicked()
@ -39,7 +41,7 @@ ModalPopup {
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
color: Style.current.darkGrey
color: Style.current.secondaryText
font.pixelSize: 12
}
@ -48,12 +50,11 @@ ModalPopup {
anchors.bottom: parent.bottom
anchors.topMargin: Style.current.padding
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
width: 44
height: 44
background: Rectangle {
radius: 50
color: Style.current.lightBlue
color: Style.current.buttonBackgroundColor
}
SVGImage {
@ -61,9 +62,15 @@ ModalPopup {
sourceSize.width: 20
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
source: "../app/img/leave_chat.svg"
rotation: 180
source: "../app/img/arrow-right.svg"
fillMode: Image.PreserveAspectFit
ColorOverlay {
anchors.fill: parent
source: parent
color: Style.current.buttonForegroundColor
antialiasing: true
}
}
onClicked : {

16
ui/onboarding/GenKeyModal.qml
View File

@ -1,7 +1,9 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import "../imports"
import "../shared"
import "../shared/status"
import "./Login"
ModalPopup {
@ -25,18 +27,16 @@ ModalPopup {
selectedIndex = index
}
}
footer: Button {
id: submitBtn
anchors.bottom: parent.bottom
anchors.topMargin: Style.current.padding
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
width: 44
height: 44
background: Rectangle {
radius: 50
color: Style.current.lightBlue
color: Style.current.buttonBackgroundColor
}
SVGImage {
@ -44,9 +44,15 @@ ModalPopup {
sourceSize.width: 20
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
source: "../app/img/leave_chat.svg"
rotation: 180
source: "../app/img/arrow-right.svg"
fillMode: Image.PreserveAspectFit
ColorOverlay {
anchors.fill: parent
source: parent
color: Style.current.buttonForegroundColor
antialiasing: true
}
}
onClicked : {

64
ui/onboarding/Login.qml
View File

@ -76,7 +76,7 @@ Item {
anchors.leftMargin: 4
anchors.verticalCenter: usernameText.verticalCenter
color: isHovered ? Style.current.grey : Style.current.transparent
color: isHovered ? Style.current.backgroundHover : Style.current.transparent
radius: 4
@ -92,7 +92,7 @@ Item {
ColorOverlay {
anchors.fill: caretImg
source: caretImg
color: Style.current.darkGrey
color: Style.current.secondaryText
}
MouseArea {
hoverEnabled: true
@ -136,15 +136,16 @@ Item {
submitBtn.clicked()
}
}
Button {
id: submitBtn
visible: !loading && txtPassword.text.length > 0
width: 40
height: 40
StatusRoundButton {
size: "medium"
icon.name: "arrow-right"
icon.width: 18
icon.height: 14
visible: txtPassword.text.length > 0
anchors.left: txtPassword.right
anchors.leftMargin: Style.current.padding
anchors.verticalCenter: txtPassword.verticalCenter
state: loading ? "pending" : "default"
onClicked: {
if (loading) {
return;
@ -153,53 +154,12 @@ Item {
loading = true
loginModel.login(txtPassword.textField.text)
}
SVGImage {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
source: "../app/img/arrowUp.svg"
width: 13.5
height: 17.5
fillMode: Image.PreserveAspectFit
rotation: 90
}
background: Rectangle {
color: Style.current.blue
radius: 50
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
submitBtn.onClicked()
}
}
}
SVGImage {
id: loadingImg
visible: loading
anchors.left: txtPassword.right
anchors.leftMargin: Style.current.padding
anchors.verticalCenter: txtPassword.verticalCenter
source: "../app/img/loading.svg"
width: 30
height: 30
fillMode: Image.Stretch
RotationAnimator {
target: loadingImg;
from: 0;
to: 360;
duration: 1200
running: true
loops: Animation.Infinite
}
}
MessageDialog {
id: loginError
title: "Login failed"
text: "Login failed. Please re-enter your password and try again."
title: qsTr("Login failed")
text: qsTr("Login failed. Please re-enter your password and try again.")
icon: StandardIcon.Critical
standardButtons: StandardButton.Ok
onAccepted: {
@ -235,7 +195,7 @@ Item {
StyledText {
id: generateKeysLinkText
color: Style.current.blue
color: Style.current.buttonForegroundColor
//% "Generate new keys"
text: qsTrId("generate-new-keys")
font.pixelSize: 13

25
ui/onboarding/Login/AddressView.qml
View File

@ -15,14 +15,20 @@ Rectangle {
}
property bool isHovered: false
id: addressViewDelegate
id: root
height: 64
anchors.right: parent.right
anchors.left: parent.left
border.width: 0
color: selected || isHovered ? Style.current.grey : Style.current.transparent
color: getBgColor()
radius: Style.current.radius
function getBgColor() {
if (selected) return Style.current.secondaryBackground
if (isHovered) return Style.current.backgroundHover
return Style.current.transparent
}
StatusImageIdenticon {
id: accountImage
anchors.left: parent.left
@ -35,7 +41,7 @@ Rectangle {
text: username
elide: Text.ElideRight
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
anchors.rightMargin: Style.current.padding + radio.width
font.pixelSize: 17
anchors.top: accountImage.top
anchors.left: accountImage.right
@ -56,6 +62,15 @@ Rectangle {
color: Style.current.darkGrey
}
StatusRadioButton {
id: radio
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
anchors.verticalCenter: parent.verticalCenter
checked: root.selected
isHovered: root.isHovered
}
MouseArea {
hoverEnabled: true
anchors.fill: parent
@ -64,10 +79,10 @@ Rectangle {
onAccountSelect(index)
}
onEntered: {
addressViewDelegate.isHovered = true
root.isHovered = true
}
onExited: {
addressViewDelegate.isHovered = false
root.isHovered = false
}
}
}

6
ui/onboarding/Login/SelectAnotherAccountModal.qml
View File

@ -7,8 +7,7 @@ ModalPopup {
property var onAccountSelect: function () {}
property var onOpenModalClick: function () {}
id: popup
//% "Your accounts"
title: qsTrId("your-accounts")
title: qsTr("Your keys")
AccountList {
id: accountList
@ -29,8 +28,7 @@ ModalPopup {
anchors.bottom: parent.bottom
anchors.topMargin: Style.current.padding
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
label: "Add another existing key"
label: qsTr("Add another existing key")
onClicked : {
onOpenModalClick()

15
ui/shared/status/StatusRadioButton.qml
View File

@ -6,13 +6,26 @@ import "../../shared"
RadioButton {
id: control
property bool isHovered: false
width: indicator.implicitWidth
function getColor() {
if (checked) {
return Style.current.blue
}
if (hovered || isHovered) {
return Style.current.secondaryHover
}
return Style.current.grey
}
indicator: Rectangle {
implicitWidth: 20
implicitHeight: 20
x: 0
y: 6
radius: 10
color: control.checked ? Style.current.blue : Style.current.grey
color: control.getColor()
Rectangle {
width: 12