SceneHeader. Tiles paddings.

EdgeApp · Apr 23, 2021 · dd016d0 · dd016d0
1 parent f6fa053
commit dd016d0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 14 deletions.
diff --git a/src/components/Main.ui.js b/src/components/Main.ui.js
@@ -233,7 +233,7 @@ export class MainComponent extends React.Component<Props> {
                 key={Constants.CREATE_WALLET_REVIEW}
                 navTransparent
                 component={ifLoggedIn(CreateWalletReviewScene)}
-                renderLeftButton={<BackButton withArrow onPress={this.handleBack} label={s.strings.title_back} />}
+                renderLeftButton={<BackButton withArrow onPress={this.handleBack} />}
                 renderRightButton={this.renderEmptyButton()}
               />
 

diff --git a/src/components/scenes/CreateWalletReviewScene.js b/src/components/scenes/CreateWalletReviewScene.js
@@ -16,9 +16,9 @@ import { FullScreenTransitionComponent } from '../common/FullScreenTransition.js
 import { SceneWrapper } from '../common/SceneWrapper'
 import { type Theme, type ThemeProps, cacheStyles, withTheme } from '../services/ThemeContext.js'
 import { EdgeText } from '../themed/EdgeText'
+import { SceneHeader } from '../themed/SceneHeader'
 import { SecondaryButton } from '../themed/ThemedButtons'
 import { Tile } from '../themed/Tile'
-import { UnderlinedHeader } from '../themed/UnderlinedHeader'
 
 type OwnProps = {
   walletName: string,
@@ -63,10 +63,6 @@ class CreateWalletReviewComponent extends React.Component<Props, State> {
     }
   }
 
-  onBack = () => {
-    Actions.pop()
-  }
-
   render() {
     const { isCreatingWallet, theme } = this.props
     const { isAnimationVisible } = this.state
@@ -76,17 +72,18 @@ class CreateWalletReviewComponent extends React.Component<Props, State> {
       <SceneWrapper background="theme">
         {!isAnimationVisible ? (
           <View style={styles.view}>
-            <UnderlinedHeader title={s.strings.title_create_wallet} />
+            <SceneHeader withTopMargin title={s.strings.title_create_wallet} />
             <EdgeText style={styles.instructionalText} numberOfLines={2}>
               {s.strings.create_wallet_top_instructions}
             </EdgeText>
             <Tile
               type="static"
               title={s.strings.create_wallet_crypto_type_label}
               body={`${this.props.selectedWalletType.currencyName} - ${this.props.selectedWalletType.currencyCode}`}
+              contentPadding={false}
             />
-            <Tile type="static" title={s.strings.create_wallet_fiat_type_label} body={this.props.selectedFiat.label} />
-            <Tile type="static" title={s.strings.create_wallet_name_label} body={this.props.walletName} />
+            <Tile type="static" title={s.strings.create_wallet_fiat_type_label} body={this.props.selectedFiat.label} contentPadding={false} />
+            <Tile type="static" title={s.strings.create_wallet_name_label} body={this.props.walletName} contentPadding={false} />
 
             <SecondaryButton style={styles.create} onPress={this.onSubmit} disabled={isCreatingWallet} marginRem={[2, 5, 1]}>
               {isCreatingWallet ? (

diff --git a/src/components/themed/Tile.js b/src/components/themed/Tile.js
@@ -16,7 +16,8 @@ type OwnProps = {
   error?: boolean,
   onPress?: () => void,
   title: string,
-  type: 'editable' | 'static' | 'touchable' | 'copy' | 'loading'
+  type: 'editable' | 'static' | 'touchable' | 'copy' | 'loading',
+  contentPadding?: boolean
 }
 type Props = OwnProps & ThemeProps
 
@@ -28,14 +29,14 @@ class TileComponent extends React.PureComponent<Props> {
   }
 
   render() {
-    const { body, title, children, theme, type, error } = this.props
+    const { body, title, contentPadding = true, children, theme, type, error } = this.props
     const styles = getStyles(theme)
     const onPress = type === 'copy' ? () => this.copy() : this.props.onPress
     if (type === 'loading') {
       return (
         <View>
           <View style={styles.container}>
-            <View style={styles.content}>
+            <View style={[styles.content, contentPadding ? styles.contentPadding : null]}>
               <EdgeText style={styles.textHeader}>{title}</EdgeText>
               <ActivityIndicator style={styles.loader} color={theme.primaryText} size="large" />
             </View>
@@ -48,7 +49,7 @@ class TileComponent extends React.PureComponent<Props> {
       <TouchableWithoutFeedback onPress={onPress} disabled={type === 'static'}>
         <View>
           <View style={styles.container}>
-            <View style={styles.content}>
+            <View style={[styles.content, contentPadding ? styles.contentPadding : null]}>
               {type === 'editable' && <FontAwesomeIcon name="edit" style={styles.editIcon} />}
               {type === 'copy' && <FontAwesomeIcon name="copy" style={styles.editIcon} />}
               <EdgeText style={error ? styles.textHeaderError : styles.textHeader}>{title}</EdgeText>
@@ -82,7 +83,9 @@ const getStyles = cacheStyles((theme: Theme) => ({
     alignItems: 'center'
   },
   content: {
-    flex: 1,
+    flex: 1
+  },
+  contentPadding: {
     paddingLeft: theme.rem(0.25)
   },
   iconContainer: {