diff --git a/CHANGELOG.md b/CHANGELOG.md index aa2f41a25a..f1119911a6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ * Now users see an error message when MP returns an error on the Registration and Confirm bid screens - yuki24 * Update credit card form to have more sophisticated keyboard behavior - sweir27 * Add registration result screens - maxim +* Add a back button to the Billing address form screen and the Credit card form screen - yuki24 ### 1.5.7 diff --git a/images/angle-left.png b/images/angle-left.png new file mode 100755 index 0000000000..d3fadf2f36 Binary files /dev/null and b/images/angle-left.png differ diff --git a/images/angle-left@2x.png b/images/angle-left@2x.png new file mode 100755 index 0000000000..f68f63447a Binary files /dev/null and b/images/angle-left@2x.png differ diff --git a/images/angle-left@3x.png b/images/angle-left@3x.png new file mode 100755 index 0000000000..b2b7db0891 Binary files /dev/null and b/images/angle-left@3x.png differ diff --git a/src/lib/Components/Bidding/Components/BackButton.tsx b/src/lib/Components/Bidding/Components/BackButton.tsx new file mode 100644 index 0000000000..b925b9ce03 --- /dev/null +++ b/src/lib/Components/Bidding/Components/BackButton.tsx @@ -0,0 +1,29 @@ +import React from "react" +import { NavigatorIOS, TouchableWithoutFeedback, ViewProperties } from "react-native" + +import { Image } from "../Elements/Image" +import { theme } from "../Elements/Theme" + +interface ContainerWithBackButtonProps extends ViewProperties { + navigator: NavigatorIOS +} + +export class BackButton extends React.Component { + goBack() { + this.props.navigator.pop() + } + + render() { + return ( + this.goBack()}> + + + ) + } +} diff --git a/src/lib/Components/Bidding/Elements/Image.tsx b/src/lib/Components/Bidding/Elements/Image.tsx new file mode 100644 index 0000000000..4422770ec4 --- /dev/null +++ b/src/lib/Components/Bidding/Elements/Image.tsx @@ -0,0 +1,16 @@ +import React from "react" +import styled from "styled-components/native" +import { height, position, space, textAlign, width } from "styled-system" +import { HeightProps, SpaceProps, TextAlignProps, WidthProps } from "./types" + +interface IconProps extends SpaceProps, WidthProps, HeightProps, SpaceProps, TextAlignProps {} + +const StyledImage = styled.Image.attrs({})` + ${height}; + ${position}; + ${space}; + ${textAlign}; + ${width}; +` + +export const Image = props => diff --git a/src/lib/Components/Bidding/Screens/BillingAddress.tsx b/src/lib/Components/Bidding/Screens/BillingAddress.tsx index 0320261ca8..df4a6e570d 100644 --- a/src/lib/Components/Bidding/Screens/BillingAddress.tsx +++ b/src/lib/Components/Bidding/Screens/BillingAddress.tsx @@ -2,13 +2,14 @@ import React from "react" import { Schema, screenTrack, track } from "../../../utils/track" -import { NavigatorIOS, ScrollView } from "react-native" +import { NavigatorIOS, ScrollView, View } from "react-native" import { Flex } from "../Elements/Flex" import { Sans12, Serif16 } from "../Elements/Typography" import { validatePresence } from "../Validators" +import { BackButton } from "../Components/BackButton" import { BiddingThemeProvider } from "../Components/BiddingThemeProvider" import { Button } from "../Components/Button" import { Container } from "../Components/Containers" @@ -88,52 +89,56 @@ export class BillingAddress extends React.Component - - - - Your billing address - - - - - - - - - - - - - - -