fix(Wallet/BridgeModal): Some small UI fixes to be more accurate to the new design and better UX

- Network item hover color, selected item border and background changed to have a better UX and being more accurate to the new design.
- Disabled option of unchecking networks. At least, always one should be selected.
This commit is contained in:
Noelia 2024-07-17 13:54:38 +02:00 committed by Noelia
parent 480a3ed182
commit 34730eb9ff
2 changed files with 13 additions and 9 deletions

View File

@ -79,7 +79,8 @@ ColumnLayout {
Layout.fillWidth: true
font.pixelSize: 15
color: Theme.palette.baseColor1
text: qsTr("The networks where the recipient will receive tokens. Amounts calculated automatically for the lowest cost.")
text: isBridgeTx ? qsTr("Routes will be automatically calculated to give you the lowest cost.") :
qsTr("The networks where the recipient will receive tokens. Amounts calculated automatically for the lowest cost.")
wrapMode: Text.WordWrap
}
Loader {

View File

@ -54,7 +54,7 @@ RowLayout {
Layout.maximumWidth: parent.width
font.pixelSize: 15
color: Theme.palette.baseColor1
text: isBridgeTx ? qsTr("Choose the network to bridge token to") :
text: isBridgeTx ? qsTr("Routes will be automatically calculated to give you the lowest cost.") :
qsTr("The networks where the recipient will receive tokens. Amounts calculated automatically for the lowest cost.")
wrapMode: Text.WordWrap
}
@ -134,8 +134,8 @@ RowLayout {
contentItem: StatusListItem {
id: card
objectName: chainName
leftPadding: 5
rightPadding: 5
leftPadding: 16
rightPadding: 6
implicitWidth: 410
title: chainName
subTitle: root.formatCurrencyAmount(tokenBalance.amount, root.selectedSymbol)
@ -144,14 +144,17 @@ RowLayout {
asset.height: 32
asset.name: Style.svg("tiny/" + iconUrl)
asset.isImage: true
border.color: gasRectangle.checked ? Theme.palette.primaryColor2 : "transparent"
border.color: gasRectangle.checked ? Theme.palette.primaryColor1 : Theme.palette.primaryColor2
color: {
if (sensor.containsMouse || highlighted || gasRectangle.checked) {
return Theme.palette.statusListItem.backgroundColor
if (sensor.containsMouse) {
return Theme.palette.baseColor2
}
return Theme.palette.baseColor2
Theme.palette.statusListItem.backgroundColor
}
onClicked: {
if(!gasRectangle.checked)
gasRectangle.toggle()
}
onClicked: gasRectangle.toggle()
}
onCheckedChanged: {
store.setRouteDisabledChains(chainId, !gasRectangle.checked)