diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index ebe0c2459..6a3f36333 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -470,6 +470,7 @@ label { } &__close > div { float: left; + padding: $session-margin-xs; margin: 0px; } &__icons > div { @@ -1211,19 +1212,12 @@ input { align-items: center; margin: $session-margin-xs; - &__country { - margin: $session-margin-sm; + &:nth-child(2) { + margin-top: 0; } - &__growing-icon { - position: relative; - width: 20px; - height: 20px svg { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - } + &:nth-last-child(2) { + margin-bottom: 0; } .session-icon-button { @@ -1231,13 +1225,27 @@ input { } } + .onion__node-list-lights { + position: relative; + } + .onion__node__country { + margin: $session-margin-sm; + } + + .onion__growing-icon { + flex-grow: 1; + display: flex; + align-items: center; + } + .onion__vertical-line { - border-left: 2px solid $onionPathLineColor; - height: 182px; + background: $onionPathLineColor; position: absolute; - left: 11px; - top: 22px; - z-index: -1; + height: calc(100% - 2 * 15px); + margin: 15px calc(100% / 2 - 1px); + + width: 1px; + // z-index: -1; } } diff --git a/ts/components/OnionStatusPathDialog.tsx b/ts/components/OnionStatusPathDialog.tsx index aabdf6758..72c386aed 100644 --- a/ts/components/OnionStatusPathDialog.tsx +++ b/ts/components/OnionStatusPathDialog.tsx @@ -8,12 +8,7 @@ import Electron from 'electron'; const { shell } = Electron; import { useDispatch, useSelector } from 'react-redux'; -import { - SessionIcon, - SessionIconButton, - SessionIconSize, - SessionIconType, -} from './session/icon'; +import { SessionIcon, SessionIconButton, SessionIconSize, SessionIconType } from './session/icon'; import { SessionWrapperModal } from './session/SessionWrapperModal'; @@ -31,6 +26,7 @@ import { // tslint:disable-next-line: no-submodule-imports import useNetworkState from 'react-use/lib/useNetworkState'; import { SessionSpinner } from './session/SessionSpinner'; +import { Flex } from './basic/Flex'; export type StatusLightType = { glowStartDelay: number; @@ -60,56 +56,57 @@ const OnionPathModalInner = () => { <>
{window.i18n('onionPathIndicatorDescription')}