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

@@ -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) => {

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')}
         >

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'];
   }
 }