git.iko.soy/bridge
on master help sign in
Change eject symbol to logout text

Introduces a NavHeader component which renders the logout text.

commit4e849bffa5fbb03bcd10261ed5a5ab83c5b72190 authorLiam Fitzgerald <liam@urizen.co> dateMon 4 Nov 2019, 12:39 (7 years ago) parentc31b9a7
3 files changed+38−8
compare with master
unifiedsplit
src/components/NavHeader.js+9 src/components/View.js+21−2 src/views/Points.js+8−6
src/components/NavHeader.jsnew file+9
@@ -0,0 +1,9 @@
1+import React from 'react';
2+import { createTeleporter } from 'react-teleporter';
3+
4+const NavHeaderTeleporter = createTeleporter();
5+
6+const NavHeader = NavHeaderTeleporter.Source;
7+NavHeader.Target = props => <NavHeaderTeleporter.Target as="div" {...props} />;
8+
9+export default NavHeader;
src/components/View.js+21−2
@@ -6,6 +6,7 @@ import Footer from './Footer';
66import useBreakpoints from 'lib/useBreakpoints';
77import MiniBackButton from './MiniBackButton';
88import { useHistory } from 'store/history';
9+import NavHeader from './NavHeader';
910
1011const EXPECT_LOGOUT_WHEN_POPPING_AT_DEPTH = 2;
1112
@@ -32,6 +33,21 @@ function View({
3233 const showBackButton = size > 1 && !!pop;
3334 const backIsLogout = size === EXPECT_LOGOUT_WHEN_POPPING_AT_DEPTH;
3435
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+
3551 return (
3652 <Flex
3753 row={!isMobile}
@@ -51,7 +67,7 @@ function View({
5167 col
5268 style={{ width: '48px' }}
5369 className={cn(insetPadding)}>
54− {showBackButton && (
70+ {showBackButton && !backIsLogout && (
5571 <MiniBackButton
5672 hpadding={!isMobile}
5773 vpadding={isMobile}
@@ -62,7 +78,10 @@ function View({
6278 </Flex.Item>
6379
6480 <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>
6685 <Flex.Item as={Footer.Target} />
6786 </Flex.Item>
6887
src/views/Points.js+8−6
@@ -21,6 +21,7 @@ import Passport from 'components/Passport';
2121import Footer from 'components/Footer';
2222import { ForwardButton } from 'components/Buttons';
2323import CopiableAddress from 'components/CopiableAddress';
24+import NavHeader from 'components/NavHeader';
2425
2526const maybeGetResult = (obj, key, defaultValue) =>
2627 obj.matchWith({
@@ -227,13 +228,14 @@ export default function Points() {
227228
228229 return (
229230 <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>
230238 <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−
237239 {displayEmptyState && (
238240 <Grid.Item full as={HelpText} className="mt8 t-center">
239241 No points to display. This wallet is not the owner or proxy for any