git.iko.soy/bridge
on master help sign in
- Add styles to InviteLogin page
26724ffChris Johnson
src/bridge/Bridge.js+11−2
compare with master
unifiedsplit
@@ -264,11 +264,20 @@ class Bridge extends React.Component {
264
264
265 const View = router(routeCrumbs.peek())
265 const View = router(routeCrumbs.peek())
266
266
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+
267 return (
277 return (
268 <Container>
278 <Container>
269 <Row>
279 <Row>
270− <Col className='col-md-1' />
280+ <Col className={colClass} style={colStyle}>
271− <Col className='col-md-10' style={{maxWidth: '620px'}}>
272 <Header
281 <Header
273 routeCrumbs={ routeCrumbs }
282 routeCrumbs={ routeCrumbs }
274 skipRoute={ this.skipRoute }
283 skipRoute={ this.skipRoute }
src/bridge/style/button.css+6
@@ -64,6 +64,12 @@ button[prop-type='solid'][prop-color='yellow']:focus {
64 box-shadow: 0 0 0 3px #FFEFC5;
64 box-shadow: 0 0 0 3px #FFEFC5;
65}
65}
66
66
67+button[prop-type='solid'][prop-color='black'] {
68+ background-color: black;
69+ border-color: black;
70+ color: white;
71+}
72+
67button[prop-type='solid'][prop-size*='sm'] {
73button[prop-type='solid'][prop-size*='sm'] {
68 height: 6rem;
74 height: 6rem;
69 padding: 0 2rem 0 2rem;
75 padding: 0 2rem 0 2rem;
src/bridge/style/extend.css+4
@@ -477,3 +477,7 @@ code {
477 padding: 1rem 2rem;
477 padding: 1rem 2rem;
478 margin-bottom: 4rem;
478 margin-bottom: 4rem;
479}
479}
480+
481+.block {
482+ display: block;
483+}
src/bridge/views/InviteLogin.js+21−11
@@ -33,6 +33,12 @@ class InviteLogin extends React.Component {
33 this.ticketPlaceholder = placeholder(12)
33 this.ticketPlaceholder = placeholder(12)
34
34
35 this.handleTicketInput = this.handleTicketInput.bind(this)
35 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)
36 }
42 }
37
43
38 handleTicketInput(ticket) {
44 handleTicketInput(ticket) {
@@ -60,17 +66,13 @@ class InviteLogin extends React.Component {
60 const phTick = this.ticketPlaceholder
66 const phTick = this.ticketPlaceholder
61
67
62 return (
68 return (
63− <Row>
69+ <Row>
64− <Col>
70+ <Col className="col-md-4">
65− <H1>{ 'Onboard' }</H1>
71+ <H1>{ 'Welcome' }</H1>
66−
67− <P>
68− { `Please enter your invite code.` }
69− </P>
70
72
71 <TicketInput
73 <TicketInput
72 className='mono mt-8'
74 className='mono mt-8'
73− prop-size='lg'
75+ prop-size='md'
74 prop-format='innerLabel'
76 prop-format='innerLabel'
75 type='text'
77 type='text'
76 autoFocus
78 autoFocus
@@ -78,14 +80,14 @@ class InviteLogin extends React.Component {
78 placeholder={ `e.g. ${phTick}` }
80 placeholder={ `e.g. ${phTick}` }
79 value={ ticket }
81 value={ ticket }
80 onChange={ this.handleTicketInput }>
82 onChange={ this.handleTicketInput }>
81− <InnerLabel>{ 'Invite code' }</InnerLabel>
83+ <InnerLabel>{ 'Activation code' }</InnerLabel>
82 </TicketInput>
84 </TicketInput>
83
85
84 <Button
86 <Button
85 className={'mt-8'}
87 className={'mt-8'}
86− prop-size={'lg wide'}
88+ prop-size={'lg'}
87 disabled={this.state.isUnlocking}
89 disabled={this.state.isUnlocking}
88− // prop-color={this.buttonTriState(wallet)}
90+ prop-color={'black'}
89 onClick={() => this.walletFromTicket(ticket, pointName)}>
91 onClick={() => this.walletFromTicket(ticket, pointName)}>
90
92
91 <span className="relative">
93 <span className="relative">
@@ -96,6 +98,14 @@ class InviteLogin extends React.Component {
96 </span>
98 </span>
97 </Button>
99 </Button>
98
100
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+
99 </Col>
109 </Col>
100 </Row>
110 </Row>
101 )
111 )