Skip to content
Permalink
Browse files

(Feature) #807 navigating back from rewards market should be replaced…

… with exit icon (#840)

* add: update svg for marketplace icon

* fix: remove back button from rewards tab, add back to wallet button to rewards tab

* fix: remove back button from market tab, add back to wallet button to market tab

* fix: implement rewards/marketplace page titles with Section.Text component to be adaptive across diferent screen sizes

* fix: fix positioning of elements in navbar for marketplace/reward tabs

* fix: update snapshots

* fix: fix the fontWeight of market/rewards tab title

* fix: wallet svg

* fix: remove default true value for market prop in config file

* fix: update snapshots

* fix: add new tests to pass build
  • Loading branch information...
yaroslav-fedyshyn-nordwhale committed Nov 8, 2019
1 parent 2e4d3d3 commit af8ba8cfc11903109a8e61cdea450dc5d5828c0d
@@ -0,0 +1,55 @@
import React from 'react'

const Icon = () => (
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
height="55"
width="51.7"
viewBox="0 0 51.7 55"
style={{
enableBackground: 'new 0 0 51.7 55',
}}
xmlSpace="preserve"
fill="#fff"
>
<g transform="translate(80 -24)">
<g transform="translate(239 39)">
<g transform="translate(-979.031 -579.088)">
<path
d="M686.7,583.6l1.7-1.7h-1.8l-0.6,0.6c-2-1-4.4-0.2-5.4,1.8c-0.6,1.2-0.6,2.5,0,3.7l-1.6,1.6h1.8l0.6-0.6
c1.6,1.6,4.1,1.6,5.7,0c0.8-0.8,1.2-1.8,1.2-2.9c0-0.2,0-0.4,0-0.6H687h-2.1l-1.2,1.2h3.3c-0.3,1.5-1.8,2.4-3.3,2.1
c-1.5-0.3-2.4-1.8-2.1-3.3c0.3-1.5,1.8-2.4,3.3-2.1c0.5,0.1,1,0.4,1.3,0.7L686.7,583.6z M694.7,579.9v2.7c-1.7,0-3.1,1.5-3.1,3.2
s1.4,3.1,3.1,3.1v2.7h-17.8v-11.8L694.7,579.9L694.7,579.9z M691.9,577.9h-9.1l9.1-1.3V577.9z M694.7,586.9
c-0.6,0-1.1-0.5-1.1-1.2c0-0.6,0.5-1.1,1.1-1.1V586.9z M696.7,592.6v-13.7c0-0.6-0.5-1-1-1h-1.8v-2.5l0,0l0,0
c0-0.5-0.4-0.9-0.9-0.9h-0.1l-17.2,2.4c-0.5,0.1-0.8,0.6-0.7,1.1v0.9v13.7c0,0.6,0.5,1,1,1h19.8
C696.3,593.6,696.7,593.2,696.7,592.6"
/>
</g>
</g>
<g>
<path d="M-62,64l1.1-5.5h1.3l-1.7,7.3h-1.2l-1.4-5.4l-1.5,5.4h-1.2l-1.7-7.3h1.3l1.1,5.5l1.4-5.5h1L-62,64z" />
<path
d="M-55.7,65.8c-0.1-0.1-0.1-0.3-0.2-0.5c-0.4,0.4-0.9,0.6-1.5,0.6c-0.5,0-1-0.2-1.4-0.4c-0.3-0.3-0.5-0.7-0.5-1.1
c0-0.6,0.3-1,0.7-1.4c0.4-0.3,1-0.4,1.9-0.4h0.8v-0.3c0-0.3-0.1-0.5-0.3-0.7c-0.2-0.2-0.4-0.3-0.7-0.3s-0.5,0.1-0.7,0.2
s-0.3,0.3-0.3,0.5H-59c0-0.3,0.1-0.6,0.3-0.9c0.2-0.3,0.4-0.4,0.8-0.6c0.3-0.2,0.7-0.3,1.1-0.3c0.6,0,1.1,0.2,1.6,0.5
s0.6,0.8,0.6,1.4v2.5c0,0.5,0.1,0.9,0.2,1.2v0.1L-55.7,65.8L-55.7,65.8z M-57,64.8c0.3,0,0.4-0.1,0.7-0.2c0.3-0.1,0.3-0.3,0.5-0.5
v-1h-0.8c-0.4,0-0.8,0.1-1,0.3s-0.3,0.3-0.3,0.7c0,0.3,0.1,0.4,0.3,0.6S-57.3,64.8-57,64.8z"
/>
<path d="M-52.1,65.8h-1.2V58h1.2V65.8z" />
<path d="M-49.4,65.8h-1.2V58h1.2V65.8z" />
<path
d="M-45.7,65.9c-0.8,0-1.4-0.3-1.9-0.8c-0.5-0.5-0.7-1.1-0.7-2v-0.2c0-0.5,0.1-1,0.3-1.5s0.5-0.8,0.9-1
c0.3-0.3,0.8-0.3,1.3-0.3c0.8,0,1.3,0.3,1.7,0.7s0.6,1.1,0.6,2v0.5h-3.6c0,0.4,0.2,0.8,0.4,1c0.3,0.3,0.6,0.4,1,0.4
c0.6,0,1-0.3,1.4-0.7l0.7,0.6c-0.3,0.3-0.5,0.6-0.9,0.8C-44.7,65.6-45.2,65.9-45.7,65.9z M-45.8,61.2c-0.3,0-0.6,0.1-0.8,0.3
c-0.2,0.3-0.3,0.6-0.4,1h2.3v-0.1c0-0.4-0.2-0.7-0.3-1S-45.4,61.2-45.8,61.2z"
/>
<path d="M-40.9,59v1.3h1v1h-1v3c0,0.2,0,0.3,0.1,0.4c0.1,0.1,0.3,0.2,0.4,0.2s0.3,0,0.4-0.1v1c-0.3,0.1-0.5,0.1-0.8,0.1c-1,0-1.4-0.5-1.4-1.6v-3.1H-43v-0.9h0.9V59H-40.9z" />
</g>
</g>
</svg>
)

export default Icon
@@ -1,10 +1,14 @@
import React, { useEffect, useState } from 'react'
import { TouchableOpacity } from 'react-native'
import { Appbar } from 'react-native-paper'
import IframeResizer from 'iframe-resizer-react'
import { isIOS } from 'mobile-device-detect'
import userStorage from '../../lib/gundb/UserStorage'
import Config from '../../config/config'
import logger from '../../lib/logger/pino-logger'
import SimpleStore from '../../lib/undux/SimpleStore'
import WalletSVG from '../common/view/WalletSvg'
import Section from '../common/layout/Section'

const log = logger.child({ from: 'MarketTab' })

@@ -49,7 +53,37 @@ const MarketTab = props => {
)
}

MarketTab.navigationOptions = {
title: 'GoodMarket',
const navBarStyles = {
wrapper: {
position: 'relative',
},
title: {
position: 'absolute',
left: 0,
right: 0,
},
walletIcon: {
position: 'absolute',
right: 5,
bottom: -5,
},
}

const NavigationBar = navigate => (
<Appbar.Header dark style={navBarStyles.wrapper}>
<Section.Text color="white" fontWeight="medium" style={navBarStyles.title}>
{'GOODMARKET'}
</Section.Text>
<TouchableOpacity onPress={() => navigate('Home')} style={navBarStyles.walletIcon}>
<WalletSVG />
</TouchableOpacity>
</Appbar.Header>
)

MarketTab.navigationOptions = ({ navigation }) => {
return {
navigationBar: () => NavigationBar(navigation.navigate),
}
}

export default MarketTab
@@ -1,10 +1,14 @@
import React, { useEffect, useState } from 'react'
import { TouchableOpacity, View } from 'react-native'
import IframeResizer from 'iframe-resizer-react'
import { isIOS } from 'mobile-device-detect'
import { Appbar } from 'react-native-paper'
import userStorage from '../../lib/gundb/UserStorage'
import Config from '../../config/config'
import logger from '../../lib/logger/pino-logger'
import SimpleStore from '../../lib/undux/SimpleStore'
import WalletSVG from '../common/view/WalletSvg'
import Section from '../common/layout/Section'

const log = logger.child({ from: 'RewardsTab' })

@@ -49,7 +53,40 @@ const RewardsTab = props => {
)
}

RewardsTab.navigationOptions = {
title: 'Rewards',
const navBarStyles = {
wrapper: {
position: 'relative',
},
title: {
position: 'absolute',
left: 0,
right: 0,
},
walletIcon: {
position: 'absolute',
right: 5,
bottom: -5,
},
}

const NavigationBar = navigate => (
<Appbar.Header dark style={navBarStyles.wrapper}>
<View style={{ width: 48 }} />
<Appbar.Content />
<Section.Text color="white" fontWeight="medium" style={navBarStyles.title}>
{'REWARDS'}
</Section.Text>
<Appbar.Content />
<TouchableOpacity onPress={() => navigate('Home')} style={navBarStyles.walletIcon}>
<WalletSVG />
</TouchableOpacity>
</Appbar.Header>
)

RewardsTab.navigationOptions = ({ navigation }) => {
return {
navigationBar: () => NavigationBar(navigation.navigate),
}
}

export default RewardsTab
@@ -0,0 +1,19 @@
import React from 'react'
import renderer from 'react-test-renderer'
import { withThemeProvider } from '../../../__tests__/__util__'
import Marketplace from '../Marketplace.web'

describe('Rewards', () => {
const WrappedMarketplace = withThemeProvider(Marketplace)

it('renders without errors', () => {
const tree = renderer.create(<WrappedMarketplace />)
expect(tree.toJSON()).toBeTruthy()
})

it('matches snapshot', () => {
const component = renderer.create(<WrappedMarketplace />)
const tree = component.toJSON()
expect(tree).toMatchSnapshot()
})
})
@@ -0,0 +1,21 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Rewards matches snapshot 1`] = `
<div
className="css-view-1dbjc4n"
style={
Object {
"WebkitBoxFlex": 1,
"WebkitFlexBasis": "0%",
"WebkitFlexGrow": 1,
"WebkitFlexShrink": 1,
"flexBasis": "0%",
"flexGrow": 1,
"flexShrink": 1,
"msFlexNegative": 1,
"msFlexPositive": 1,
"msFlexPreferredSize": "0%",
}
}
/>
`;

0 comments on commit af8ba8c

Please sign in to comment.
You can’t perform that action at this time.