git.iko.soy/bridge
on master help sign in
- Add styles to InviteLogin page
commit26724ffd38d3d54c8234b2c727f5b84ac0e11c72 authorChris Johnson <chris@cjohnson.io> dateWed 17 Apr 2019, 15:18 (8 years ago) parent58241ec
4 files changed+42−13
compare with master
unifiedsplit
src/bridge/Bridge.js+11−2 src/bridge/style/button.css+6 src/bridge/style/extend.css+4 src/bridge/views/InviteLogin.js+21−11
src/bridge/Bridge.js+11−2
@@ -264,11 +264,20 @@ class Bridge extends React.Component {
264264
265265 const View = router(routeCrumbs.peek())
266266
267+ let colClass
268+ let colStyle
269+
270+ if (routeCrumbs.contains(ROUTE_NAMES.INVITE_LOGIN)) {
271+ colClass = 'col-md-12'
272+ } else {
273+ colClass = 'col-md-offset-1 col-md-10'
274+ colStyle = {maxWidth: '620px'}
275+ }
276+
267277 return (
268278 <Container>
269279 <Row>
270− <Col className='col-md-1' />
271− <Col className='col-md-10' style={{maxWidth: '620px'}}>
280+ <Col className={colClass} style={colStyle}>
272281 <Header
273282 routeCrumbs={ routeCrumbs }
274283 skipRoute={ this.skipRoute }
src/bridge/style/button.css+6
@@ -64,6 +64,12 @@ button[prop-type='solid'][prop-color='yellow']:focus {
6464 box-shadow: 0 0 0 3px #FFEFC5;
6565}
6666
67+button[prop-type='solid'][prop-color='black'] {
68+ background-color: black;
69+ border-color: black;
70+ color: white;
71+}
72+
6773button[prop-type='solid'][prop-size*='sm'] {
6874 height: 6rem;
6975 padding: 0 2rem 0 2rem;
src/bridge/style/extend.css+4
@@ -477,3 +477,7 @@ code {
477477 padding: 1rem 2rem;
478478 margin-bottom: 4rem;
479479}
480+
481+.block {
482+ display: block;
483+}
src/bridge/views/InviteLogin.js+21−11
@@ -33,6 +33,12 @@ class InviteLogin extends React.Component {
3333 this.ticketPlaceholder = placeholder(12)
3434
3535 this.handleTicketInput = this.handleTicketInput.bind(this)
36+ this.navigateLogin = this.navigateLogin.bind(this)
37+ }
38+
39+ navigateLogin() {
40+ this.props.popRoute()
41+ this.props.pushRoute(ROUTE_NAMES.NETWORK)
3642 }
3743
3844 handleTicketInput(ticket) {
@@ -60,17 +66,13 @@ class InviteLogin extends React.Component {
6066 const phTick = this.ticketPlaceholder
6167
6268 return (
63− <Row>
64− <Col>
65− <H1>{ 'Onboard' }</H1>
66−
67− <P>
68− { `Please enter your invite code.` }
69− </P>
69+ <Row>
70+ <Col className="col-md-4">
71+ <H1>{ 'Welcome' }</H1>
7072
7173 <TicketInput
7274 className='mono mt-8'
73− prop-size='lg'
75+ prop-size='md'
7476 prop-format='innerLabel'
7577 type='text'
7678 autoFocus
@@ -78,14 +80,14 @@ class InviteLogin extends React.Component {
7880 placeholder={ `e.g. ${phTick}` }
7981 value={ ticket }
8082 onChange={ this.handleTicketInput }>
81− <InnerLabel>{ 'Invite code' }</InnerLabel>
83+ <InnerLabel>{ 'Activation code' }</InnerLabel>
8284 </TicketInput>
8385
8486 <Button
8587 className={'mt-8'}
86− prop-size={'lg wide'}
88+ prop-size={'lg'}
8789 disabled={this.state.isUnlocking}
88− // prop-color={this.buttonTriState(wallet)}
90+ prop-color={'black'}
8991 onClick={() => this.walletFromTicket(ticket, pointName)}>
9092
9193 <span className="relative">
@@ -96,6 +98,14 @@ class InviteLogin extends React.Component {
9698 </span>
9799 </Button>
98100
101+ <Button
102+ prop-type={`link`}
103+ prop-size={`sm`}
104+ className={`block mt-4`}
105+ onClick={this.navigateLogin} >
106+ {`Log in`}
107+ </Button>
108+
99109 </Col>
100110 </Row>
101111 )