oxen-io/session-desktop
1
0
Fork 0
mirror of https://github.com/oxen-io/session-desktop.git synced 2023-12-14 02:12:57 +01:00
Code Issues Projects Releases Wiki Activity

Add CSS for Nodes and Lines

Browse source
This commit is contained in:
Lucas Phang 2021-05-13 16:34:21 +10:00
parent 9cfb39bb97
commit 07b434ccc8
2 changed files with 84 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
stylesheets/_modal.scss
View file

@ -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%;
// }
}
}
}

37
ts/components/OnionStatusDialog.tsx
View file

@ -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}