15dd385 · bridge · git.iko.soy

src/components/Tabs.js+28−26

compare with master

unifiedsplit

@@ -14,33 +14,35 @@ export default function Tabs({

14

15 return (

16 <Grid className={className}>

17− <Grid.Item full as={Flex} wrap className="b-gray3 bb1">

17+ <Grid.Item full as={Flex} className="b-gray3 bb1 scroll-x hidden-y">

18+ <Flex.Item as={Flex}>

18− {options.map((option, i) => {

19+ {options.map((option, i) => {

19− const isActive = option.value === currentTab;

20+ const isActive = option.value === currentTab;

20− const isFirst = i === 0;

21+ const isFirst = i === 0;

21

22

22− return (

23+ return (

23− <Flex.Item

24+ <Flex.Item

24− key={option.value}

25+ key={option.value}

25− onClick={() => onTabChange(option.value)}

26+ onClick={() => onTabChange(option.value)}

26− className={cn(

27+ className={cn(

27− 'f5 pv3 clickable',

28+ 'f5 pv3 clickable nowrap',

28− {

29+ {

29− 'black b-black bb1': isActive,

30+ 'black b-black bb1': isActive,

30− gray3: !isActive,

31+ gray3: !isActive,

31− },

32+ },

32− {

33+ {

33− // all items have right margin/padding

34+ // all items have right margin/padding

34− 'mr2 pr2': true,

35+ 'mr2 pr2': true,

35− // the first one is flush to the left

36+ // the first one is flush to the left

36− 'ml2 pl2': !isFirst,

37+ 'ml2 pl2': !isFirst,

37− }

38+ }

38− )}

39+ )}

39− style={{ marginBottom: '-1px' }}>

40+ style={{ marginBottom: '-1px' }}>

40− {option.text}

41+ {option.text}

41− </Flex.Item>

42+ </Flex.Item>

42− );

43+ );

43− })}

44+ })}

45+ </Flex.Item>

44 </Grid.Item>

46 </Grid.Item>

45 <Grid.Item full as={Tab} {...rest} />

47 <Grid.Item full as={Tab} {...rest} />

46 </Grid>

48 </Grid>

src/style/bridge.scss+1−17

@@ -1,20 +1,4 @@

1−$handle-extent: 24px;

1+$handle-extent: 24px; // $lh-regular

2−

3−@keyframes autofill {

4− to {

5− color: #000;

6− background: transparent;

7− }

8−}

9−

10−/* avoid yellow autofill highlight on browsers that respect this attribute */

11−input:-webkit-autofill {

12− animation-name: autofill;

13− animation-fill-mode: both;

14−

15− -webkit-animation-name: autofill;

16− -webkit-animation-fill-mode: both;

17−}

18

2

19// min-height the top elements so footer behavior works correctly

3// min-height the top elements so footer behavior works correctly

20html {

4html {

src/style/form-reset.scss+16−20

@@ -1,7 +1,12 @@

1$form-padding: 24px; // indigo pv3

2−$form-line-height: 1.5rem;

2+$form-line-height: 1.5rem; // $lh-regular

3

4−// inspired by: https://gist.github.com/anthonyshort/552543

4+@keyframes autofill {

5+ to {

6+ color: #000;

7+ background: transparent;

8+ }

9+}

5

10

6input,

11input,

7button,

12button,

@@ -24,28 +29,19 @@ select {

24}

29}

25

30

26input {

31input {

32+ // enforce border-box

27 box-sizing: border-box;

33 box-sizing: border-box;

28− -webkit-box-sizing: border-box;

29

34

35+ // enforce height & line-height for accessories

30 height: calc(#{$form-line-height} + #{$form-padding});

36 height: calc(#{$form-line-height} + #{$form-padding});

31 line-height: $form-line-height;

37 line-height: $form-line-height;

32−}

33

38

34−textarea {

39+ // avoid yellow autofill highlight on browsers that respect this attribute

35− /* Move the label to the top */

40+ &:-webkit-autofill {

36− vertical-align: top;

41+ animation-name: autofill;

37−

42+ animation-fill-mode: both;

38− /* Turn off scroll bars in IE unless needed */

39− overflow: auto;

40−}

41

43

42−::-webkit-file-upload-button {

44+ -webkit-animation-name: autofill;

43− padding: 0;

45+ -webkit-animation-fill-mode: both;

44− border: 0;

45− background: none;

46−}

46+ }

47−

48−/* Turn off the recent search for webkit. It adds about 15px padding on the left */

49−::-webkit-search-decoration {

50− display: none;

51}

47}

src/style/indigo-proposals.scss+8

@@ -48,3 +48,11 @@

48.arial {

49 font-family: Arial, monospace;

50}

51+

52+.scroll-x {

53+ overflow-x: auto;

54+}

55+

56+.hidden-y {

57+ overflow-y: hidden;

58+}

src/views/Login.js+18−2

@@ -1,7 +1,8 @@

1−import React, { useCallback, useState } from 'react';

1+import React, { useCallback, useState, useMemo } from 'react';

2import { Just, Nothing } from 'folktale/maybe';

3import * as azimuth from 'azimuth-js';

4import { H4, Grid } from 'indigo-react';

5+import { filter } from 'lodash';

5

6

6import { useHistory } from 'store/history';

7import { useHistory } from 'store/history';

7import { useNetwork } from 'store/network';

8import { useNetwork } from 'store/network';

@@ -21,6 +22,7 @@ import Ticket from './Login/Ticket';

21import Mnemonic from './Login/Mnemonic';

22import Mnemonic from './Login/Mnemonic';

22import Advanced from './Login/Advanced';

23import Advanced from './Login/Advanced';

23import Hardware from './Login/Hardware';

24import Hardware from './Login/Hardware';

25+import useBreakpoints from 'lib/useBreakpoints';

24

26

25const NAMES = {

27const NAMES = {

26 TICKET: 'TICKET',

28 TICKET: 'TICKET',

@@ -70,6 +72,20 @@ export default function Login() {

70

72

71 const [deducing, setDeducing] = useState(false);

73 const [deducing, setDeducing] = useState(false);

72

74

75+ // again, using breakpoint to decide if we're on mobile or not

76+ // see ActivateCode for more details

77+ const hardwareAllowed = useBreakpoints([false, true, true]);

78+

79+ // filter out hardware if mobile

80+ const options = useMemo(

81+ () =>

82+ filter(

83+ OPTIONS,

84+ ({ value }) => hardwareAllowed || value !== NAMES.HARDWARE

85+ ),

86+ [hardwareAllowed]

87+ );

88+

73 // inputs

89 // inputs

74 const [currentTab, setCurrentTab] = useState(

90 const [currentTab, setCurrentTab] = useState(

75 walletTypeToViewName(walletType)

91 walletTypeToViewName(walletType)

@@ -132,7 +148,7 @@ export default function Login() {

132 as={Tabs}

148 as={Tabs}

133 className="mt1"

149 className="mt1"

134 views={VIEWS}

150 views={VIEWS}

135− options={OPTIONS}

151+ options={options}

136 currentTab={currentTab}

152 currentTab={currentTab}

137 onTabChange={setCurrentTab}

153 onTabChange={setCurrentTab}

138 />

154 />