vertical line wip.

pull/1733/head
Warrick Corfe-Tan 4 years ago
parent fe474425ba
commit 00c7c8b969

@ -1211,25 +1211,34 @@ input {
align-items: center;
margin: $session-margin-xs;
* {
&__country {
margin: $session-margin-sm;
}
&__growing-icon {
position: relative;
width: 20px;
height: 20px svg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
.session-icon-button {
margin: $session-margin-sm !important;
}
}
.onion__vertical-line {
border-left: 2px solid rgba($color: #585858, $alpha: 1.0);
height: 185px;
position: absolute;
left: 22px;
// node item padding (i.e. one destination) + icon padding + half sessionIcon.small height
top: 23.35px;
z-index: -1;
}
.onion__vertical-line {
border-left: 2px solid $onionPathLineColor;
height: 182px;
position: absolute;
left: 11px;
top: 22px;
z-index: -1;
}
}
.session-nickname-wrapper {

@ -11,6 +11,8 @@ $borderLightTheme: #f1f1f1; // search for references on ts TODO: make this expos
$borderDarkTheme: rgba($white, 0.06);
$inputBackgroundColor: #8e8e93;
$onionPathLineColor: rgba(#7a7a7a, 0.6);
$borderAvatarColor: unquote(
'#00000059'
); // search for references on ts TODO: make this exposed on ts

@ -8,8 +8,12 @@ import Electron from 'electron';
const { shell } = Electron;
import { useDispatch, useSelector } from 'react-redux';
import { StateType } from '../state/reducer';
import { SessionIcon, SessionIconButton, SessionIconSize, SessionIconType } from './session/icon';
import {
SessionIcon,
SessionIconButton,
SessionIconSize,
SessionIconType,
} from './session/icon';
import { SessionWrapperModal } from './session/SessionWrapperModal';
@ -56,7 +60,7 @@ const OnionPathModalInner = () => {
<>
<p className="onion__description">{window.i18n('onionPathIndicatorDescription')}</p>
<div className="onion__node-list">
<div className="onion__vertical-line" />
<div className="onion__vertical-line" />
{nodes.map((snode: Snode | any, index: number) => {
return (
<>
@ -102,7 +106,7 @@ export const OnionNodeStatusLight = (props: OnionNodeStatusLightType): JSX.Eleme
/>
{labelText ? (
<>
<div className="onion-node__country">{labelText}</div>
<div className="onion__node__country">{labelText}</div>
</>
) : null}
</div>
@ -117,15 +121,17 @@ export const ModalStatusLight = (props: StatusLightType) => {
const theme = useSelector(getTheme);
return (
<SessionIcon
borderRadius={50}
iconColor={color}
glowDuration={glowDuration}
glowStartDelay={glowStartDelay}
iconType={SessionIconType.Circle}
iconSize={SessionIconSize.Small}
theme={theme}
/>
<div className="onion__growing-icon">
<SessionIcon
borderRadius={50}
iconColor={color}
glowDuration={glowDuration}
glowStartDelay={glowStartDelay}
iconType={SessionIconType.Circle}
iconSize={SessionIconSize.Small}
theme={theme}
/>
</div>
);
};

Loading…
Cancel
Save