d2ad64e · bridge · git.iko.soy

src/components/Buttons.js+3−3

compare with master

unifiedsplit

@@ -1,9 +1,9 @@

1import React from 'react';

2import { Button } from 'indigo-react';

3

4−// TODO: use svg icons

4+// NOTE: the -> is correct because inter recognizes the pair

5−export const ForwardButton = props => <Button accessory="→" {...props} />;

5+export const ForwardButton = props => <Button accessory="->" {...props} />;

6−export const DownloadButton = props => <Button accessory="⬇" {...props} />;

6+export const DownloadButton = props => <Button accessory="↓" {...props} />;

7export const OutButton = props => (

8 <Button as="a" target="_blank" accessory="↗" {...props} />

9);

src/components/UploadButton.js+1−1

@@ -6,7 +6,7 @@ export default function UploadButton({ children, onChange, ...rest }) {

6

7 return (

8 <label htmlFor="file" {...rest}>

9− <Button accessory="⬆">{children}</Button>

9+ <Button accessory="↑">{children}</Button>

10 <input

11 id="file"

12 ref={button}

src/indigo-react/components/AccessoryIcon.js+1−1

@@ -4,7 +4,7 @@ import Flex from './Flex';

4

5const PENDING_ACCESSORY = '⋯';

6const SUCCESS_ACCESSORY = '✓';

7−const FAILURE_ACCESSORY = '×';

7+const FAILURE_ACCESSORY = '✗';

8

9function AccessoryIcon({ ...props }) {

10 return (

src/indigo-react/components/CheckboxInput.js+21−21

@@ -2,6 +2,7 @@ import React from 'react';

2import cn from 'classnames';

3

4import Flex from './Flex';

5+import AspectRatio from 'components/AspectRatio';

5

6

6// TODO: make this look like screens

7// TODO: make this look like screens

7export default function CheckboxInput({

8export default function CheckboxInput({

@@ -35,7 +36,7 @@ export default function CheckboxInput({

35}) {

36}) {

36 return (

37 return (

37 <Flex

38 <Flex

38− className={className}

39+ className={cn(className, 'mv2')}

39 row

40 row

40 align="center"

41 align="center"

41 style={{

42 style={{

@@ -44,35 +45,34 @@ export default function CheckboxInput({

44 cursor: 'not-allowed',

45 cursor: 'not-allowed',

45 }),

46 }),

46 }}>

47 }}>

48+ {/* we totally hide the checkbox itself */}

47 <Flex.Item

49 <Flex.Item

48 as="input"

50 as="input"

49 {...rest}

51 {...rest}

50− className={cn(

52+ className={cn('super-hidden')}

51− 'b b1 p3 outline-none',

52− {

53− 'bg-white': !disabled,

54− 'bg-gray1': disabled,

55− },

56− {

57− gray4: !focused,

58− black: focused,

59− },

60− {

61− 'b-green3': visiblyPassed,

62− 'b-black': focused && !visiblyPassed,

63− 'b-yellow3': !focused && hintError,

64− 'b-gray3': !focused && !hintError && !visiblyPassed,

65− }

66− )}

67 id={name}

53 id={name}

68 name={name}

54 name={name}

69 {...bind}

55 {...bind}

70 />

56 />

57+ {/* and then display a prettier one in its stead */}

71 <Flex.Item

58 <Flex.Item

59+ flex

72 as="label"

60 as="label"

73− className="f6 ph3 lh-tall us-none"

61+ className="f6 mr3 lh-tall us-none clickable flex-row align-center"

74− htmlFor={name}

62+ htmlFor={name}>

75− flex>

63+ <Flex

64+ justify="center"

65+ align="center"

66+ className={cn('b-black b1 p1 mr3', {

67+ 'bg-black white': data,

68+ 'bg-white black': !data,

69+ })}

70+ style={{

71+ height: '14px',

72+ width: '14px',

73+ }}>

74+ {data && '✓'}

75+ </Flex>

76 {label}

77 </Flex.Item>

78 </Flex>

src/indigo-react/components/SelectInput.js+3−1

@@ -58,7 +58,9 @@ export default function SelectInput({

58 };

59

60 // redefine accessory because we still want to ignore it from the ..rest above

61+ accessory = (

61− accessory = <AccessoryIcon>{isOpen ? '⬆' : '⬇'}</AccessoryIcon>;

62+ <AccessoryIcon className="gray4">{isOpen ? '▲' : '▼'}</AccessoryIcon>

63+ );

62

64

63 const text = options.find(o => o.value === data).text;

65 const text = options.find(o => o.value === data).text;

64

66

src/views/Login.js+1−1

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

123 full

124 as={ForwardButton}

125 solid

126− className="mt3"

126+ className="mt2"

127 disabled={Maybe.Nothing.hasInstance(wallet)}

128 onClick={doContinue}>

129 Continue

src/views/Login/Ledger.js+4−3

@@ -1,4 +1,5 @@

1import React, { useCallback, useEffect } from 'react';

2+import cn from 'classnames';

2import Maybe from 'folktale/maybe';

3import Maybe from 'folktale/maybe';

3import { P, Text, Input, Grid, H5, CheckboxInput } from 'indigo-react';

4import { P, Text, Input, Grid, H5, CheckboxInput } from 'indigo-react';

4import { times } from 'lodash';

5import { times } from 'lodash';

@@ -169,14 +170,14 @@ export default function Ledger({ className }) {

169 full={full}

170 full={full}

170 half={half && 1}

171 half={half && 1}

171 as={SelectInput}

172 as={SelectInput}

172− className="pr1"

173+ className={cn({ pr1: half })}

173 {...derivationPathInput}

174 {...derivationPathInput}

174 />

175 />

175 <Grid.Item

176 <Grid.Item

176 full={full}

177 full={full}

177 half={half && 2}

178 half={half && 2}

178 as={SelectInput}

179 as={SelectInput}

179− className="pl1"

180+ className={cn({ pl1: half })}

180 {...accountInput}

181 {...accountInput}

181 />

182 />

182 </>

183 </>

@@ -188,7 +189,7 @@ export default function Ledger({ className }) {

188 full

189 full

189 as={ForwardButton}

190 as={ForwardButton}

190 solid

191 solid

191− className="mt3"

192+ className="mt2"

192 onClick={pollDevice}>

193 onClick={pollDevice}>

193 Authenticate

194 Authenticate

194 </Grid.Item>

195 </Grid.Item>

src/views/Login/Trezor.js+1−1

@@ -110,7 +110,7 @@ export default function Trezor({ className }) {

110 full

111 as={ForwardButton}

112 solid

113− className="mt3"

113+ className="mt2"

114 onClick={pollDevice}>

115 Authenticate

116 </Grid.Item>