4e849bf · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

Change eject symbol to logout text

4e849bfLiam Fitzgerald7 years ago

src/components/NavHeader.jsnew file+9

compare with master

unifiedsplit

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

1+import React from 'react';

2+import { createTeleporter } from 'react-teleporter';

4+const NavHeaderTeleporter = createTeleporter();

6+const NavHeader = NavHeaderTeleporter.Source;

7+NavHeader.Target = props => <NavHeaderTeleporter.Target as="div" {...props} />;

9+export default NavHeader;

src/components/View.js+21−2

@@ -6,6 +6,7 @@ import Footer from './Footer';

6import useBreakpoints from 'lib/useBreakpoints';

7import MiniBackButton from './MiniBackButton';

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

9+import NavHeader from './NavHeader';

10const EXPECT_LOGOUT_WHEN_POPPING_AT_DEPTH = 2;

11const EXPECT_LOGOUT_WHEN_POPPING_AT_DEPTH = 2;

@@ -32,6 +33,21 @@ function View({

32 const showBackButton = size > 1 && !!pop;

33 const showBackButton = size > 1 && !!pop;

33 const backIsLogout = size === EXPECT_LOGOUT_WHEN_POPPING_AT_DEPTH;

34 const backIsLogout = size === EXPECT_LOGOUT_WHEN_POPPING_AT_DEPTH;

36+ const Header = useCallback(({ logout }) => {

37+ return backIsLogout ? (

38+ <Flex.Item

39+ as={Flex}

40+ className={cn(insetPadding, 'flex-row-r justify-between pb5')}>

41+ <Flex.Item onClick={logout} as="a" className="f5 gray4 underline mr2">

42+ Logout

43+ </Flex.Item>

44+ <Flex.Item as={NavHeader.Target} />

45+ </Flex.Item>

46+ ) : (

47+ <Flex.Item className={insetPadding} as={NavHeader.Target} />

48+ );

49+ });

50+

35 return (

51 return (

36 <Flex

52 <Flex

37 row={!isMobile}

53 row={!isMobile}

@@ -51,7 +67,7 @@ function View({

51 col

67 col

52 style={{ width: '48px' }}

68 style={{ width: '48px' }}

53 className={cn(insetPadding)}>

69 className={cn(insetPadding)}>

54− {showBackButton && (

70+ {showBackButton && !backIsLogout && (

55 <MiniBackButton

71 <MiniBackButton

56 hpadding={!isMobile}

72 hpadding={!isMobile}

57 vpadding={isMobile}

73 vpadding={isMobile}

@@ -62,7 +78,10 @@ function View({

62 </Flex.Item>

78 </Flex.Item>

64 <Flex.Item flex={1} as={Flex} col justify="between">

80 <Flex.Item flex={1} as={Flex} col justify="between">

65− <Flex.Item className={cn('pb5', insetPadding)}>{children}</Flex.Item>

81+ <Flex.Item className="pb5 ">

82+ <Header logout={goBack} />

83+ {children}

84+ </Flex.Item>

66 <Flex.Item as={Footer.Target} />

85 <Flex.Item as={Footer.Target} />

67 </Flex.Item>

86 </Flex.Item>

src/views/Points.js+8−6

@@ -21,6 +21,7 @@ import Passport from 'components/Passport';

21import Footer from 'components/Footer';

22import { ForwardButton } from 'components/Buttons';

23import CopiableAddress from 'components/CopiableAddress';

24+import NavHeader from 'components/NavHeader';

25const maybeGetResult = (obj, key, defaultValue) =>

26const maybeGetResult = (obj, key, defaultValue) =>

26 obj.matchWith({

27 obj.matchWith({

@@ -227,13 +228,14 @@ export default function Points() {

227

228

228 return (

229 return (

229 <View pop={pop} inset>

230 <View pop={pop} inset>

231+ <NavHeader>

232+ <CopiableAddress

233+ text={address}

234+ className="f6 mono gray4 mb4 us-none pointer">

235+ {abbreviateAddress(address)}

236+ </CopiableAddress>

237+ </NavHeader>

230 <Grid>

238 <Grid>

231− <Grid.Item full as={H1} className="f6 mono gray4 mb4 us-none pointer">

232− <CopiableAddress text={address}>

233− {abbreviateAddress(address)}

234− </CopiableAddress>

235− </Grid.Item>

236−

237 {displayEmptyState && (

239 {displayEmptyState && (

238 <Grid.Item full as={HelpText} className="mt8 t-center">

240 <Grid.Item full as={HelpText} className="mt8 t-center">

239 No points to display. This wallet is not the owner or proxy for any

241 No points to display. This wallet is not the owner or proxy for any