fix(Onboarding): align the 'Before you get started' popup with design

correct sizing, fonts, spacings, margins, etc

Fixes #6020
This commit is contained in:
Lukáš Tinkl 2022-07-14 15:09:56 +02:00 committed by Lukáš Tinkl
parent 280e29ad23
commit 47818346e3
1 changed files with 23 additions and 16 deletions

View File

@ -12,33 +12,36 @@ import StatusQ.Popups 0.1
StatusModal { StatusModal {
id: popup id: popup
width: 480
height: 318
anchors.centerIn: parent anchors.centerIn: parent
header.title: qsTr("Before you get started") header.title: qsTr("Before you get started...")
hasCloseButton: false hasCloseButton: false
closePolicy: Popup.NoAutoClose closePolicy: Popup.NoAutoClose
contentItem: Item { contentItem: Item {
implicitHeight: childrenRect.height
width: popup.width
Column { Column {
spacing: 12 spacing: 12
anchors.left: parent.left anchors.fill: parent
anchors.right: parent.right
anchors.leftMargin: 32 anchors.leftMargin: 32
anchors.rightMargin: 32 anchors.rightMargin: 32
anchors.topMargin: 24
Item { height: 12; width: parent.width } anchors.bottomMargin: 24
StatusCheckBox { StatusCheckBox {
id: acknowledge id: acknowledge
objectName: "acknowledgeCheckBox" objectName: "acknowledgeCheckBox"
spacing: 8
font.pixelSize: 15
width: parent.width width: parent.width
text: qsTr("I acknowledge that status desktop is in beta and by using it I take the full responsibility for all risks concerning my data and funds") text: qsTr("I acknowledge that Status Desktop is in Beta and by using it I take the full responsibility for all risks concerning my data and funds.")
} }
StatusCheckBox { StatusCheckBox {
id: termsOfUse id: termsOfUse
objectName: "termsOfUseCheckBox" objectName: "termsOfUseCheckBox"
width: parent.width
font.pixelSize: 15
contentItem: Row { contentItem: Row {
spacing: 4 spacing: 4
@ -46,13 +49,15 @@ StatusModal {
StatusBaseText { StatusBaseText {
text: qsTr("I accept Status") text: qsTr("I accept Status")
color: Theme.palette.directColor1 font.pixelSize: 15
} }
StatusBaseText { StatusBaseText {
objectName: "termsOfUseLink" objectName: "termsOfUseLink"
text: qsTr("Terms of service") text: qsTr("Terms of Use")
color: Theme.palette.primaryColor1 color: Theme.palette.primaryColor1
font.pixelSize: 15
font.weight: Font.Medium
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
@ -65,20 +70,22 @@ StatusModal {
parent.font.underline = false parent.font.underline = false
} }
onClicked: { onClicked: {
Qt.openUrlExternally("https://status.im/terms-of-service/") Qt.openUrlExternally("https://status.im/terms-of-use/")
} }
} }
} }
StatusBaseText { StatusBaseText {
text: " & " text: "&"
color: Theme.palette.directColor1 font.pixelSize: 15
} }
StatusBaseText { StatusBaseText {
objectName: "privacyPolicyLink" objectName: "privacyPolicyLink"
text: qsTr("Privacy Policy") text: qsTr("Privacy Policy")
color: Theme.palette.primaryColor1 color: Theme.palette.primaryColor1
font.pixelSize: 15
font.weight: Font.Medium
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
@ -97,8 +104,6 @@ StatusModal {
} }
} }
} }
Item { height: 12; width: parent.width }
} }
} }
@ -107,7 +112,9 @@ StatusModal {
id: getStartedButton id: getStartedButton
objectName: "getStartedStatusButton" objectName: "getStartedStatusButton"
enabled: acknowledge.checked && termsOfUse.checked enabled: acknowledge.checked && termsOfUse.checked
text: qsTr("Get started") size: StatusBaseButton.Size.Large
font.weight: Font.Medium
text: qsTr("Get Started")
onClicked: { onClicked: {
popup.close() popup.close()
} }