From 9998030a1fbdea3e41f0de4dfd6cbdb58233d9db Mon Sep 17 00:00:00 2001
From: Pierre <dommerc.pierre@gmail.com>
Date: Wed, 26 Feb 2025 11:12:08 +0100
Subject: [PATCH] chore(tauri): minor ui changes (#2275)

* go back to main screen on node select

* fix country name ellipsis on text overflow
---
 nym-vpn-app/src/screens/node/Node.tsx             | 5 ++++-
 nym-vpn-app/src/screens/node/list/CountryInfo.tsx | 2 +-
 nym-vpn-app/src/screens/node/list/util.ts         | 8 ++++----
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/nym-vpn-app/src/screens/node/Node.tsx b/nym-vpn-app/src/screens/node/Node.tsx
index 73365ee5c9..39b328e231 100644
--- a/nym-vpn-app/src/screens/node/Node.tsx
+++ b/nym-vpn-app/src/screens/node/Node.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import {
   UiCountry,
@@ -14,6 +15,7 @@ import { PageAnim, TextInput } from '../../ui';
 import { kvSet } from '../../kvStore';
 import { uiNodeToRaw } from '../../contexts/nodes/util';
 import { useI18nError } from '../../hooks';
+import { routes } from '../../router';
 import LocationDetailsDialog from './LocationDetailsDialog';
 import { NodeList } from './list';
 import NodeDetailsDialog from './NodeDetailsDialog';
@@ -32,7 +34,7 @@ function Node({ node }: { node: NodeHop }) {
   const [uiGateways, setUiGateways] = useState<UiGateway[]>(gateways);
   const [search, setSearch] = useState('');
 
-  // const navigate = useNavigate();
+  const navigate = useNavigate();
   const { t } = useTranslation('nodeLocation');
 
   // refresh the UI list whenever the backend gateway data changes
@@ -80,6 +82,7 @@ function Node({ node }: { node: NodeHop }) {
     } catch (e) {
       console.warn(e);
     }
+    navigate(routes.root);
   };
 
   const handleNodeDetails = (node: UiGateway | UiCountry) => {
diff --git a/nym-vpn-app/src/screens/node/list/CountryInfo.tsx b/nym-vpn-app/src/screens/node/list/CountryInfo.tsx
index 565baad242..7cd11fdce3 100644
--- a/nym-vpn-app/src/screens/node/list/CountryInfo.tsx
+++ b/nym-vpn-app/src/screens/node/list/CountryInfo.tsx
@@ -24,7 +24,7 @@ const CountryInfo = ({ country, name, gwCount }: CountryInfoProps) => {
         alt={country.code}
         className="h-6"
       />
-      <div className="flex flex-col justify-center items-start">
+      <div className="flex flex-col justify-center overflow-hidden pr-4">
         <div
           className={clsx('text-baltic-sea dark:text-white text-base truncate')}
         >
diff --git a/nym-vpn-app/src/screens/node/list/util.ts b/nym-vpn-app/src/screens/node/list/util.ts
index d506bc5bd3..848ef394f0 100644
--- a/nym-vpn-app/src/screens/node/list/util.ts
+++ b/nym-vpn-app/src/screens/node/list/util.ts
@@ -4,12 +4,12 @@ export function getScoreIcon(gw: Gateway, vpnMode: VpnMode) {
   const score = vpnMode === 'mixnet' ? gw.mxScore : gw.wgScore;
   switch (score) {
     case 'none':
-      return ['signal_cellular_null', 'text-cement-feet'];
+      return ['signal_cellular_alt_1_bar', 'text-cement-feet'];
     case 'low':
-      return ['signal_cellular_1_bar', 'text-aphrodisiac'];
+      return ['signal_cellular_alt_1_bar', 'text-aphrodisiac'];
     case 'medium':
-      return ['signal_cellular_3_bar', 'text-king-nacho'];
+      return ['signal_cellular_alt_2_bar', 'text-king-nacho'];
     case 'high':
-      return ['signal_cellular_4_bar', 'text-malachite'];
+      return ['signal_cellular_alt', 'text-malachite'];
   }
 }