mirror of
https://github.com/oxen-io/session-desktop.git
synced 2023-12-14 02:12:57 +01:00
Add CSS for Nodes and Lines
This commit is contained in:
parent
9cfb39bb97
commit
07b434ccc8
|
@ -328,5 +328,52 @@
|
|||
margin-top: 0;
|
||||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
.onionPath {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin: 2em auto;
|
||||
|
||||
.dotContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.nodeText {
|
||||
margin-bottom: 0 !important;
|
||||
margin-top: 0;
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
.dot {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
background-color: $color-loki-green;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 2em;
|
||||
@include themify($themes) {
|
||||
border-left: 1px solid themed('textColor');
|
||||
}
|
||||
display: flex;
|
||||
align-self: flex-start;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
// .dot:after {
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// top: 0;
|
||||
// content: '';
|
||||
// border-left: 2px solid black;
|
||||
// margin-left: 5px;
|
||||
// height: 100%;
|
||||
// }
|
||||
}
|
||||
}
|
|
@ -14,7 +14,7 @@ import { DefaultTheme } from 'styled-components';
|
|||
import { MAX_USERNAME_LENGTH } from './session/registration/RegistrationTabs';
|
||||
import { SessionSpinner } from './session/SessionSpinner';
|
||||
import electron from 'electron';
|
||||
const {shell} = electron;
|
||||
const { shell } = electron;
|
||||
interface State {
|
||||
profileName: string;
|
||||
setProfileName: string;
|
||||
|
@ -47,6 +47,41 @@ export const OnionStatusDialog = (props: Props) => {
|
|||
<div className="spacer-sm" />
|
||||
<p>{window.i18n('onionPathIndicatorDescription')}</p>
|
||||
|
||||
<div className='onionPath'>
|
||||
<div className='dotContainer'>
|
||||
<div className='dot'></div>
|
||||
<div className='nodeText'>You</div>
|
||||
</div>
|
||||
|
||||
<div className='line'></div>
|
||||
|
||||
<div className='dotContainer'>
|
||||
<div className='dot'></div>
|
||||
<div className='nodeText'>Entry Node<br/>Malaysia</div>
|
||||
</div>
|
||||
|
||||
<div className='line'></div>
|
||||
|
||||
<div className='dotContainer'>
|
||||
<div className='dot'></div>
|
||||
<div className='nodeText'>START</div>
|
||||
</div>
|
||||
|
||||
<div className='line'></div>
|
||||
|
||||
<div className='dotContainer'>
|
||||
<div className='dot'></div>
|
||||
<div className='nodeText'>START</div>
|
||||
</div>
|
||||
|
||||
<div className='line'></div>
|
||||
|
||||
<div className='dotContainer'>
|
||||
<div className='dot'></div>
|
||||
<div className='nodeText'>START</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SessionButton
|
||||
text={window.i18n('learnMore')}
|
||||
buttonType={SessionButtonType.BrandOutline}
|
||||
|
|
Loading…
Reference in a new issue