From 34730eb9ffaea5f718e110c0390596c094fc7332 Mon Sep 17 00:00:00 2001
From: Noelia <noelia@status.im>
Date: Wed, 17 Jul 2024 13:54:38 +0200
Subject: [PATCH] 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.
---
 .../NetworksAdvancedCustomRoutingView.qml     |  3 ++-
 .../send/views/NetworksSimpleRoutingView.qml  | 19 +++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/ui/imports/shared/popups/send/views/NetworksAdvancedCustomRoutingView.qml b/ui/imports/shared/popups/send/views/NetworksAdvancedCustomRoutingView.qml
index 59379e6bec..47d5e9b84d 100644
--- a/ui/imports/shared/popups/send/views/NetworksAdvancedCustomRoutingView.qml
+++ b/ui/imports/shared/popups/send/views/NetworksAdvancedCustomRoutingView.qml
@@ -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 {
diff --git a/ui/imports/shared/popups/send/views/NetworksSimpleRoutingView.qml b/ui/imports/shared/popups/send/views/NetworksSimpleRoutingView.qml
index c092522eb1..ee0f08a110 100644
--- a/ui/imports/shared/popups/send/views/NetworksSimpleRoutingView.qml
+++ b/ui/imports/shared/popups/send/views/NetworksSimpleRoutingView.qml
@@ -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)