diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index a594052e0..45bf13b71 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -1095,6 +1095,7 @@ input { flex-direction: column; margin: $session-margin-sm; align-items: flex-start; + min-width: 10vw; position: relative; .onion__node { diff --git a/ts/components/dialog/OnionStatusPathDialog.tsx b/ts/components/dialog/OnionStatusPathDialog.tsx index 9a84f5589..8b3624a2e 100644 --- a/ts/components/dialog/OnionStatusPathDialog.tsx +++ b/ts/components/dialog/OnionStatusPathDialog.tsx @@ -19,6 +19,8 @@ import { Flex } from '../basic/Flex'; import { SessionIcon, SessionIconButton } from '../session/icon'; import { SessionSpinner } from '../session/SessionSpinner'; import { SessionWrapperModal } from '../session/SessionWrapperModal'; +// tslint:disable-next-line: no-submodule-imports +import useHover from 'react-use/lib/useHover'; export type StatusLightType = { glowStartDelay: number; @@ -26,6 +28,25 @@ export type StatusLightType = { color?: string; }; +const OnionCountryDisplay = ({ + index, + labelText, + snodeIp, +}: { + snodeIp?: string; + labelText: string; + index: number; +}) => { + const element = (hovered: boolean) => ( +
+ {hovered && snodeIp ? snodeIp : labelText} +
+ ); + const [hoverable] = useHover(element); + + return hoverable; +}; + const OnionPathModalInner = () => { const onionPath = useSelector(getFirstOnionPath); const isOnline = useSelector(getIsOnline); @@ -69,14 +90,12 @@ const OnionPathModalInner = () => { {nodes.map((snode: Snode | any, index: number) => { let labelText = snode.label ? snode.label - : `${countryLookup.byIso(ip2country(snode.ip))?.country} [${snode.ip}]`; + : `${countryLookup.byIso(ip2country(snode.ip))?.country}`; if (!labelText) { labelText = window.i18n('unknownCountry'); } return labelText ? ( -
- {labelText} -
+ ) : null; })}