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 Layout.fillWidth: true
font.pixelSize: 15 font.pixelSize: 15
color: Theme.palette.baseColor1 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 wrapMode: Text.WordWrap
} }
Loader { Loader {

View File

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