diff --git a/nym-vpn/ui/index.html b/nym-vpn/ui/index.html index a548f6417f..eaeca159bd 100644 --- a/nym-vpn/ui/index.html +++ b/nym-vpn/ui/index.html @@ -1,5 +1,5 @@ - + diff --git a/nym-vpn/ui/src-tauri/icons/128x128.png b/nym-vpn/ui/src-tauri/icons/128x128.png index 6be5e50e9b..2f8c35c828 100644 Binary files a/nym-vpn/ui/src-tauri/icons/128x128.png and b/nym-vpn/ui/src-tauri/icons/128x128.png differ diff --git a/nym-vpn/ui/src-tauri/icons/128x128@2x.png b/nym-vpn/ui/src-tauri/icons/128x128@2x.png index e81becee57..32de9d1f0e 100644 Binary files a/nym-vpn/ui/src-tauri/icons/128x128@2x.png and b/nym-vpn/ui/src-tauri/icons/128x128@2x.png differ diff --git a/nym-vpn/ui/src-tauri/icons/32x32.png b/nym-vpn/ui/src-tauri/icons/32x32.png index a437dd5174..32722d4b2c 100644 Binary files a/nym-vpn/ui/src-tauri/icons/32x32.png and b/nym-vpn/ui/src-tauri/icons/32x32.png differ diff --git a/nym-vpn/ui/src-tauri/icons/Square107x107Logo.png b/nym-vpn/ui/src-tauri/icons/Square107x107Logo.png index 0ca4f27198..9a6a7d50cb 100644 Binary files a/nym-vpn/ui/src-tauri/icons/Square107x107Logo.png and b/nym-vpn/ui/src-tauri/icons/Square107x107Logo.png differ diff --git a/nym-vpn/ui/src-tauri/icons/Square142x142Logo.png b/nym-vpn/ui/src-tauri/icons/Square142x142Logo.png index b81f820394..987134e92b 100644 Binary files a/nym-vpn/ui/src-tauri/icons/Square142x142Logo.png and b/nym-vpn/ui/src-tauri/icons/Square142x142Logo.png differ diff --git a/nym-vpn/ui/src-tauri/icons/Square150x150Logo.png b/nym-vpn/ui/src-tauri/icons/Square150x150Logo.png index 624c7bfba0..bb84ee90c9 100644 Binary files a/nym-vpn/ui/src-tauri/icons/Square150x150Logo.png and b/nym-vpn/ui/src-tauri/icons/Square150x150Logo.png differ diff --git a/nym-vpn/ui/src-tauri/icons/Square284x284Logo.png b/nym-vpn/ui/src-tauri/icons/Square284x284Logo.png index c021d2ba76..8b936410d9 100644 Binary files a/nym-vpn/ui/src-tauri/icons/Square284x284Logo.png and b/nym-vpn/ui/src-tauri/icons/Square284x284Logo.png differ diff --git a/nym-vpn/ui/src-tauri/icons/Square30x30Logo.png b/nym-vpn/ui/src-tauri/icons/Square30x30Logo.png index 6219700230..ebf441338e 100644 Binary files a/nym-vpn/ui/src-tauri/icons/Square30x30Logo.png and b/nym-vpn/ui/src-tauri/icons/Square30x30Logo.png differ diff --git a/nym-vpn/ui/src-tauri/icons/Square310x310Logo.png b/nym-vpn/ui/src-tauri/icons/Square310x310Logo.png index f9bc048394..4793ed5cd9 100644 Binary files a/nym-vpn/ui/src-tauri/icons/Square310x310Logo.png and b/nym-vpn/ui/src-tauri/icons/Square310x310Logo.png differ diff --git a/nym-vpn/ui/src-tauri/icons/Square44x44Logo.png b/nym-vpn/ui/src-tauri/icons/Square44x44Logo.png index d5fbfb2ab4..966966252a 100644 Binary files a/nym-vpn/ui/src-tauri/icons/Square44x44Logo.png and b/nym-vpn/ui/src-tauri/icons/Square44x44Logo.png differ diff --git a/nym-vpn/ui/src-tauri/icons/Square71x71Logo.png b/nym-vpn/ui/src-tauri/icons/Square71x71Logo.png index 63440d7984..b161cd4833 100644 Binary files a/nym-vpn/ui/src-tauri/icons/Square71x71Logo.png and b/nym-vpn/ui/src-tauri/icons/Square71x71Logo.png differ diff --git a/nym-vpn/ui/src-tauri/icons/Square89x89Logo.png b/nym-vpn/ui/src-tauri/icons/Square89x89Logo.png index f3f705af2f..5304954324 100644 Binary files a/nym-vpn/ui/src-tauri/icons/Square89x89Logo.png and b/nym-vpn/ui/src-tauri/icons/Square89x89Logo.png differ diff --git a/nym-vpn/ui/src-tauri/icons/StoreLogo.png b/nym-vpn/ui/src-tauri/icons/StoreLogo.png index 4556388261..28ddc2eb28 100644 Binary files a/nym-vpn/ui/src-tauri/icons/StoreLogo.png and b/nym-vpn/ui/src-tauri/icons/StoreLogo.png differ diff --git a/nym-vpn/ui/src-tauri/icons/icon.icns b/nym-vpn/ui/src-tauri/icons/icon.icns index 12a5bcee26..66d61665db 100644 Binary files a/nym-vpn/ui/src-tauri/icons/icon.icns and b/nym-vpn/ui/src-tauri/icons/icon.icns differ diff --git a/nym-vpn/ui/src-tauri/icons/icon.ico b/nym-vpn/ui/src-tauri/icons/icon.ico index b3636e4b22..c9a3c54620 100644 Binary files a/nym-vpn/ui/src-tauri/icons/icon.ico and b/nym-vpn/ui/src-tauri/icons/icon.ico differ diff --git a/nym-vpn/ui/src-tauri/icons/icon.png b/nym-vpn/ui/src-tauri/icons/icon.png index e1cd2619e0..0a6a4c715c 100644 Binary files a/nym-vpn/ui/src-tauri/icons/icon.png and b/nym-vpn/ui/src-tauri/icons/icon.png differ diff --git a/nym-vpn/ui/src/pages/home/ConnectionStatus.tsx b/nym-vpn/ui/src/pages/home/ConnectionStatus.tsx index deb8718fd4..de3c6c92f9 100644 --- a/nym-vpn/ui/src/pages/home/ConnectionStatus.tsx +++ b/nym-vpn/ui/src/pages/home/ConnectionStatus.tsx @@ -66,22 +66,26 @@ function ConnectionStatus() { {getStatusText(state.state)} -
+
{state.loading && state.progressMessages.length > 0 && !state.error && ( -

- {t( - `connection-progress.${ - state.progressMessages[state.progressMessages.length - 1] - }`, - { - ns: 'backendMessages', - }, - )} -

+
+

+ {t( + `connection-progress.${ + state.progressMessages[state.progressMessages.length - 1] + }`, + { + ns: 'backendMessages', + }, + )} +

+
)} {state.state === 'Connected' && } {state.error && ( -

{state.error}

+
+

{state.error}

+
)}
diff --git a/nym-vpn/ui/src/pages/home/Home.tsx b/nym-vpn/ui/src/pages/home/Home.tsx index 64af96a8ec..b96fd9b06f 100644 --- a/nym-vpn/ui/src/pages/home/Home.tsx +++ b/nym-vpn/ui/src/pages/home/Home.tsx @@ -71,9 +71,8 @@ function Home() {
-
+
-
{t('select-node-title')} diff --git a/nym-vpn/ui/src/pages/home/HopSelect.tsx b/nym-vpn/ui/src/pages/home/HopSelect.tsx index b55d0b2410..7d84217f55 100644 --- a/nym-vpn/ui/src/pages/home/HopSelect.tsx +++ b/nym-vpn/ui/src/pages/home/HopSelect.tsx @@ -1,6 +1,7 @@ import { useTranslation } from 'react-i18next'; +import clsx from 'clsx'; import { Country, NodeHop } from '../../types'; -import { QuickConnectPrefix } from '../../constants'; +import { useMainState } from '../../contexts'; interface HopSelectProps { country: Country; @@ -13,44 +14,41 @@ export default function HopSelect({ country, onClick, }: HopSelectProps) { + const { state } = useMainState(); const { t } = useTranslation('home'); - return ( - <> -
- -
- {country.name.includes(QuickConnectPrefix) ? ( - bolt - ) : ( - {country.code} - )} -
- - arrow_right - - + return ( +
+
+ {nodeHop === 'entry' ? t('first-hop') : t('last-hop')}
- +
+ {country.code} +
{country.name}
+
+ + arrow_right + +
); } diff --git a/nym-vpn/ui/src/pages/home/NetworkModeSelect.tsx b/nym-vpn/ui/src/pages/home/NetworkModeSelect.tsx index 01ad8b48a4..1cdb3dfa8c 100644 --- a/nym-vpn/ui/src/pages/home/NetworkModeSelect.tsx +++ b/nym-vpn/ui/src/pages/home/NetworkModeSelect.tsx @@ -102,7 +102,7 @@ function NetworkModeSelect() { {mode.desc} diff --git a/nym-vpn/ui/src/pages/location/CountryList.tsx b/nym-vpn/ui/src/pages/location/CountryList.tsx index b6bd61200a..d3bc814fa4 100644 --- a/nym-vpn/ui/src/pages/location/CountryList.tsx +++ b/nym-vpn/ui/src/pages/location/CountryList.tsx @@ -12,14 +12,14 @@ export default function CountryList({ }: CountryListProps) { const { t } = useTranslation('nodeLocation'); return ( -
    +
      {countries && countries.length > 0 ? ( countries.map((country) => (
    • onClick(country.name, country.code)} - className="flex flex-row justify-between dark:hover:bg-baltic-sea-jaguar hover:bg-coal-mine-light rounded-lg cursor-pointer" + className="flex flex-row justify-between dark:hover:bg-gun-powder hover:dark:bg-opacity-80 hover:bg-cement-feet hover:bg-opacity-20 rounded-lg cursor-pointer px-3" onClick={() => onClick(country.name, country.code)} >
      @@ -32,7 +32,7 @@ export default function CountryList({ {country.name}
      -
      +
      {isSelected(country.code) ? t('selected') : ''}
      diff --git a/nym-vpn/ui/src/pages/location/NodeLocation.tsx b/nym-vpn/ui/src/pages/location/NodeLocation.tsx index bdfb1f08a9..880678ee1d 100644 --- a/nym-vpn/ui/src/pages/location/NodeLocation.tsx +++ b/nym-vpn/ui/src/pages/location/NodeLocation.tsx @@ -66,22 +66,20 @@ function NodeLocation({ node }: { node: NodeHop }) { }; return ( -
      -
      -
      - - - - -
      +
      +
      + + + +
      ); diff --git a/nym-vpn/ui/src/pages/location/QuickConnect.tsx b/nym-vpn/ui/src/pages/location/QuickConnect.tsx index 07e4b3dbe5..abb6213c18 100644 --- a/nym-vpn/ui/src/pages/location/QuickConnect.tsx +++ b/nym-vpn/ui/src/pages/location/QuickConnect.tsx @@ -14,12 +14,12 @@ export default function QuickConnect({ onClick }: QuickConnectProps) { onKeyDown={() => onClick(defaultNodeLocation.name, defaultNodeLocation.code) } - className="flex px-5 flex-row w-full py-8 cursor-pointer" + className="flex px-1 flex-row items-center w-full py-8 cursor-pointer" onClick={() => onClick(defaultNodeLocation.name, defaultNodeLocation.code) } > - bolt + bolt
      {`${QuickConnectPrefix} ${defaultNodeLocation.name}`}
      ); diff --git a/nym-vpn/ui/src/pages/location/SearchBox.tsx b/nym-vpn/ui/src/pages/location/SearchBox.tsx index d506787199..89291fafcd 100644 --- a/nym-vpn/ui/src/pages/location/SearchBox.tsx +++ b/nym-vpn/ui/src/pages/location/SearchBox.tsx @@ -1,3 +1,4 @@ +import clsx from 'clsx'; import { InputEvent } from '../../types'; interface SearchProps { @@ -12,24 +13,30 @@ export default function SearchBox({ placeholder, }: SearchProps) { return ( -
      +
      - + search -
      ); } diff --git a/nym-vpn/ui/src/pages/settings/Settings.tsx b/nym-vpn/ui/src/pages/settings/Settings.tsx index 862716010f..19fa07937d 100644 --- a/nym-vpn/ui/src/pages/settings/Settings.tsx +++ b/nym-vpn/ui/src/pages/settings/Settings.tsx @@ -50,7 +50,7 @@ function Settings() { diff --git a/nym-vpn/ui/tailwind.config.ts b/nym-vpn/ui/tailwind.config.ts index 1c07f2b97c..87fbcce01e 100644 --- a/nym-vpn/ui/tailwind.config.ts +++ b/nym-vpn/ui/tailwind.config.ts @@ -62,7 +62,7 @@ export default { 'dim-gray': '#696571', // [L] network mode desc text // [L] node location select outline - 'ciment-feet': '#79747E', + 'cement-feet': '#79747E', // [D] node location select outline 'gun-powder': '#49454F', // [D] top-bar icon