From 95a342fad69f952e11341535498341ebe0af062b Mon Sep 17 00:00:00 2001 From: LanesGood Date: Tue, 18 Jun 2019 12:24:01 +0200 Subject: [PATCH 01/14] Add FeatureDetailHeader to Add + View feature detail screens --- app/screens/Features/AddFeatureDetail.js | 12 ++++++++++-- app/screens/Features/ViewFeatureDetail.js | 7 +++++++ 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/app/screens/Features/AddFeatureDetail.js b/app/screens/Features/AddFeatureDetail.js index 091dcb234..25033d4a8 100644 --- a/app/screens/Features/AddFeatureDetail.js +++ b/app/screens/Features/AddFeatureDetail.js @@ -10,6 +10,7 @@ import Picker from 'react-native-picker-select' import Container from '../../components/Container' import Header from '../../components/Header' import PageWrapper from '../../components/PageWrapper' +import FeatureDetailHeader from '../../components/FeatureDetailHeader' import { addFeature, uploadEdits } from '../../actions/edit' import getFields from '../../utils/get-fields' @@ -375,6 +376,8 @@ class EditFeatureDetail extends React.Component { render () { const { properties } = this.state const { navigation } = this.props + const { state: { params: { feature } } } = navigation + const { preset } = this.state if (!properties) return null let headerActions = [] @@ -395,11 +398,16 @@ class EditFeatureDetail extends React.Component { navigation={navigation} actions={headerActions} /> - + - {this.renderAddField()} {this.renderFields()} + {this.renderAddField()} + ) diff --git a/app/screens/Features/ViewFeatureDetail.js b/app/screens/Features/ViewFeatureDetail.js index 95201fb3e..9dd3db400 100644 --- a/app/screens/Features/ViewFeatureDetail.js +++ b/app/screens/Features/ViewFeatureDetail.js @@ -6,6 +6,7 @@ import { View, Keyboard } from 'react-native' import Container from '../../components/Container' import Header from '../../components/Header' import PageWrapper from '../../components/PageWrapper' +import FeatureDetailHeader from '../../components/FeatureDetailHeader' import getFeatureFields from '../../utils/get-feature-fields' import { metaKeys } from '../../utils/uninterestingKeys' @@ -96,6 +97,7 @@ class ViewFeatureDetail extends React.Component { render () { const { navigation, deleteFeature, uploadEdits } = this.props const { state: { params: { feature } } } = navigation + const { preset } = this.state const title = feature.properties.name || feature.id const fields = getFeatureFields(feature) @@ -139,6 +141,11 @@ class ViewFeatureDetail extends React.Component { return (
+ {this.renderFields([presetSection, metaSection])} From 62c3c41326e59e7809793885024d67ed0a8d1c06 Mon Sep 17 00:00:00 2001 From: LanesGood Date: Tue, 18 Jun 2019 12:24:51 +0200 Subject: [PATCH 02/14] Reorder feature detail screens: tag editor + add custom fields at bottom --- app/screens/Features/EditFeatureDetail.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/screens/Features/EditFeatureDetail.js b/app/screens/Features/EditFeatureDetail.js index b77b43773..f6e73a61f 100644 --- a/app/screens/Features/EditFeatureDetail.js +++ b/app/screens/Features/EditFeatureDetail.js @@ -456,11 +456,11 @@ class EditFeatureDetail extends React.Component { feature={feature} navigation={navigation} /> - (this._tageditor = ref)} properties={this.createTagEditorProperties()} onUpdate={this.onTagEditorUpdate} /> - {this.renderAddField()} {this.renderFields()} + {this.renderAddField()} + (this._tageditor = ref)} properties={this.createTagEditorProperties()} onUpdate={this.onTagEditorUpdate} /> ) From 273a81e812e38199b91bbb4f1e88b76f23e086bb Mon Sep 17 00:00:00 2001 From: LanesGood Date: Tue, 18 Jun 2019 12:26:17 +0200 Subject: [PATCH 03/14] Mute color of trash bin icons to decrease prominence --- app/components/Input.js | 10 +++++----- app/components/TagEditor.js | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/components/Input.js b/app/components/Input.js index 675811f3e..956d19187 100644 --- a/app/components/Input.js +++ b/app/components/Input.js @@ -104,7 +104,7 @@ export class CheckField extends Field { /> this.removeField(key)}> - + @@ -183,7 +183,7 @@ export class PickerField extends Field { this.removeField(key)}> - + @@ -236,7 +236,7 @@ export class NumberField extends Field { /> this.removeField(key)}> - + @@ -272,7 +272,7 @@ export class TextField extends Field { /> this.removeField(key)}> - + @@ -324,7 +324,7 @@ export class DateField extends Field { /> this.removeField(key)}> - + diff --git a/app/components/TagEditor.js b/app/components/TagEditor.js index ca18ee9d8..6afa585f6 100644 --- a/app/components/TagEditor.js +++ b/app/components/TagEditor.js @@ -201,7 +201,7 @@ export default class TagEditor extends React.Component { value={value} /> this.removeTag(index)}> - + ) From fe60e8d5baeac3cad526155152ed00dbdb518798 Mon Sep 17 00:00:00 2001 From: LanesGood Date: Tue, 18 Jun 2019 16:46:44 +0200 Subject: [PATCH 04/14] Match text styles to mockup Added base font color with opacity variations. Implemented throughout with letter spacing. This is a WIP - this should be centralized rather than continuously repeated. I've been unable to get react-native-global-props to function. --- app/components/FeatureDetailHeader.js | 9 +++-- app/components/Input.js | 37 ++++++++++--------- app/components/OfflineItem.js | 4 +- app/components/UserContributionsItem.js | 6 ++- app/components/UserContributionsList.js | 7 +++- app/screens/Account.js | 1 + app/screens/Features/AddFeatureDetail.js | 7 +++- app/screens/Features/ChangeCoordinates.js | 7 +++- app/screens/Features/EditFeatureDetail.js | 7 +++- app/screens/Features/SelectFeatureType.js | 1 + app/screens/Features/ViewFeatureDetail.js | 14 +++++-- .../OfflineMaps/ViewOfflineAreaDetail.js | 7 +++- app/screens/Settings.js | 6 ++- .../UserContributionsItemScreen.js | 7 +++- app/style/variables.js | 8 +++- 15 files changed, 92 insertions(+), 36 deletions(-) diff --git a/app/components/FeatureDetailHeader.js b/app/components/FeatureDetailHeader.js index 357119f8d..604e0d0f0 100644 --- a/app/components/FeatureDetailHeader.js +++ b/app/components/FeatureDetailHeader.js @@ -16,7 +16,9 @@ const Header = styled.View` const PresetName = styled.Text` font-size: 16; - font-weight: 700; + font-weight: 500; + letter-spacing: 0.5; + color: ${colors.base}; margin-top: 4; ` @@ -38,12 +40,13 @@ const PresetIcon = styled.Image` const Button = styled.TouchableHighlight`` const Coordinates = styled.Text` - color: ${colors.muted} + color: ${colors.baseMuted}; padding-right: 4; ` const Edit = styled.Text` - color: ${colors.primary} + color: ${colors.primary}; + text-align: right; ` export default class FeatureDetailHeader extends React.Component { diff --git a/app/components/Input.js b/app/components/Input.js index 956d19187..9a596dcab 100644 --- a/app/components/Input.js +++ b/app/components/Input.js @@ -9,7 +9,7 @@ import Picker from 'react-native-picker-select' const FieldWrapper = styled.View` border-width: 1; - border-color: ${colors.muted}; + border-color: ${colors.baseMuted}; border-radius: 4; margin-top: 12; flex: 1; @@ -27,7 +27,8 @@ const LabelWrapper = styled.View` ` const Label = styled.Text` - color: ${colors.muted} + color: ${colors.base}; + letter-spacing: 0.4; ` const InputWrapper = styled.View` @@ -40,7 +41,7 @@ const InputWrapper = styled.View` const FieldDeleteWrapper = styled.TouchableHighlight` flex: 0.1; border-width: 0; - border-color: ${colors.muted}; + border-color: ${colors.baseMuted}; border-left-width: 1; align-items: center; justify-content: center; @@ -48,7 +49,7 @@ const FieldDeleteWrapper = styled.TouchableHighlight` ` class Field extends Component { - state = { color: colors.muted } + state = { color: colors.baseMuted } onFocus () { this.setState({ @@ -58,7 +59,7 @@ class Field extends Component { onBlur () { this.setState({ - color: colors.muted + color: colors.baseMuted }) } @@ -104,7 +105,7 @@ export class CheckField extends Field { /> this.removeField(key)}> - + @@ -183,7 +184,7 @@ export class PickerField extends Field { this.removeField(key)}> - + @@ -229,14 +230,14 @@ export class NumberField extends Field { onBlur={() => this.onBlur()} keyboardType='numeric' placeholder={placeholder} - placeholderTextColor={color.muted} - style={{ flex: 1 }} + placeholderTextColor={color.baseMuted} + style={{ flex: 1, color: colors.base, fontSize: 16, letterSpacing: 0.5 }} underlineColorAndroid='transparent' value={value} /> this.removeField(key)}> - + @@ -254,7 +255,7 @@ export class TextField extends Field { (this._root = x)} style={{ flex: 1 }}> - + @@ -264,15 +265,15 @@ export class TextField extends Field { onChangeText={(value) => this.onValueChange(value)} onFocus={() => this.onFocus()} onBlur={() => this.onBlur()} - style={{ flex: 1 }} + style={{ flex: 1, color: colors.base, fontSize: 16, letterSpacing: 0.5 }} placeholder={placeholder} - placeholderTextColor={color.muted} + placeholderTextColor={color.baseMuted} underlineColorAndroid='transparent' value={value} /> this.removeField(key)}> - + @@ -303,7 +304,7 @@ export class DateField extends Field { date={value} mode='date' placeholder='select date' - placeholderTextColor={color.muted} + placeholderTextColor={color.baseMuted} format='YYYY-MM-DD' confirmBtnText='Confirm' cancelBtnText='Cancel' @@ -324,7 +325,7 @@ export class DateField extends Field { /> this.removeField(key)}> - + @@ -378,9 +379,9 @@ export class ReadOnlyField extends Component { return ( - + - + diff --git a/app/components/OfflineItem.js b/app/components/OfflineItem.js index 3b9b24197..dc6f16f00 100644 --- a/app/components/OfflineItem.js +++ b/app/components/OfflineItem.js @@ -29,11 +29,13 @@ const TextContainer = styled.View` const TitleText = styled.Text` font-size: 16; + letter-spacing: 0.5; + color: ${colors.base}; ` const SubtitleText = styled.Text` font-size: 12; - color: #aaa; + color: ${colors.baseMuted}; ` const StatusContainer = styled.View` diff --git a/app/components/UserContributionsItem.js b/app/components/UserContributionsItem.js index 889dd15d7..e0d69abba 100644 --- a/app/components/UserContributionsItem.js +++ b/app/components/UserContributionsItem.js @@ -11,7 +11,7 @@ import { colors } from '../style/variables' const ItemContainer = styled.TouchableOpacity` border-bottom-width: 1; - border-bottom-color: #ccc; + border-bottom-color: ${colors.baseMuted}; flex: 1; flex-direction: row; align-items: center; @@ -32,11 +32,13 @@ const TextContainer = styled.View` const TitleText = styled.Text` font-size: 16; + letter-spacing: 0.5; + color: ${colors.base}; ` const SubtitleText = styled.Text` font-size: 12; - color: #aaa; + color: ${colors.baseMuted}; ` const StatusContainer = styled.View` diff --git a/app/components/UserContributionsList.js b/app/components/UserContributionsList.js index 8b5cf70d5..e39d50fb9 100644 --- a/app/components/UserContributionsList.js +++ b/app/components/UserContributionsList.js @@ -2,8 +2,13 @@ import React from 'react' import styled from 'styled-components/native' import UserContributionsItem from './UserContributionsItem' +import { colors } from '../style/variables' -const StyledFlatList = styled.FlatList`` +const StyledFlatList = styled.FlatList` + font-size: 16; + letter-spacing: 0.5; + color: ${colors.base} +` export default class UserContributionsList extends React.Component { render () { diff --git a/app/screens/Account.js b/app/screens/Account.js index eae039ccf..e966406ac 100644 --- a/app/screens/Account.js +++ b/app/screens/Account.js @@ -13,6 +13,7 @@ import { colors } from '../style/variables' const Text = styled.Text` font-size: 16; letter-spacing: 0.5; + color: ${colors.base} ` const ImageView = styled.View` diff --git a/app/screens/Features/AddFeatureDetail.js b/app/screens/Features/AddFeatureDetail.js index 25033d4a8..54dd41ede 100644 --- a/app/screens/Features/AddFeatureDetail.js +++ b/app/screens/Features/AddFeatureDetail.js @@ -20,10 +20,15 @@ import { metaKeys } from '../../utils/uninterestingKeys' import nextTick from '../../utils/next-tick' import SaveEditDialog from '../../components/SaveEditDialog' import TagEditor from '../../components/TagEditor' +import { colors } from '../../style/variables' import { getParentPreset } from '../../utils/get-parent-preset' -const FieldsList = styled.FlatList`` +const FieldsList = styled.FlatList` + font-size: 16; + letter-spacing: 0.5; + color: ${colors.base}; +` class EditFeatureDetail extends React.Component { static navigationOptions = ({ navigation }) => { diff --git a/app/screens/Features/ChangeCoordinates.js b/app/screens/Features/ChangeCoordinates.js index 01a902c4b..33ff96887 100644 --- a/app/screens/Features/ChangeCoordinates.js +++ b/app/screens/Features/ChangeCoordinates.js @@ -4,8 +4,13 @@ import styled from 'styled-components/native' import Header from '../../components/Header' import Container from '../../components/Container' +import { colors } from '../../style/variables' -const Text = styled.Text`` +const Text = styled.Text` + font-size: 16; + letter-spacing: 0.5; + color: ${colors.base} +` class ChangeCoordinates extends React.Component { static navigationOptions = ({ navigation }) => { diff --git a/app/screens/Features/EditFeatureDetail.js b/app/screens/Features/EditFeatureDetail.js index f6e73a61f..ae0c56d27 100644 --- a/app/screens/Features/EditFeatureDetail.js +++ b/app/screens/Features/EditFeatureDetail.js @@ -20,13 +20,18 @@ import nextTick from '../../utils/next-tick' import SaveEditDialog from '../../components/SaveEditDialog' import getFields from '../../utils/get-fields' import { getParentPreset } from '../../utils/get-parent-preset' +import { colors } from '../../style/variables' import _uniq from 'lodash.uniq' import _pick from 'lodash.pick' import _omitBy from 'lodash.omitby' import _omit from 'lodash.omit' import _isEqual from 'lodash.isequal' -const FieldsList = styled.FlatList`` +const FieldsList = styled.FlatList` + font-size: 16; + letter-spacing: 0.5; + color: ${colors.base}; +` class EditFeatureDetail extends React.Component { static navigationOptions = ({ navigation }) => { diff --git a/app/screens/Features/SelectFeatureType.js b/app/screens/Features/SelectFeatureType.js index a62f19812..13857703b 100644 --- a/app/screens/Features/SelectFeatureType.js +++ b/app/screens/Features/SelectFeatureType.js @@ -17,6 +17,7 @@ const win = Dimensions.get('window') const Text = styled.Text` font-size: 16; letter-spacing: 0.5; + color: ${colors.base}; ` const PresetWrapper = styled.TouchableOpacity` diff --git a/app/screens/Features/ViewFeatureDetail.js b/app/screens/Features/ViewFeatureDetail.js index 9dd3db400..c59bfbfb0 100644 --- a/app/screens/Features/ViewFeatureDetail.js +++ b/app/screens/Features/ViewFeatureDetail.js @@ -15,9 +15,12 @@ import _partition from 'lodash.partition' import orderPresets from '../../utils/order-presets' import SaveEditDialog from '../../components/SaveEditDialog' import { deleteFeature, uploadEdits } from '../../actions/edit' +import { colors } from '../../style/variables' const FieldsList = styled.SectionList` - + font-size: 16; + letter-spacing: 0.5; + color: ${colors.base}; ` const Field = styled.View` @@ -30,12 +33,15 @@ const Field = styled.View` const FieldKey = styled.Text` font-weight: 500; font-size: 12; + color: ${colors.base}; ` const FieldValue = styled.Text` font-weight: 300; font-size: 16; + letter-spacing: 0.5; padding-top: 2; + color: ${colors.base}; ` const SectionHeaderField = styled.View` @@ -43,13 +49,13 @@ const SectionHeaderField = styled.View` padding-bottom: 8; align-content: stretch; ` - +// TODO: Text transform is not rendering correctly in React Native 0.58 - upgrade to 0.59 to use text-transform property const SectionHeader = styled.Text` font-weight: 400; - font-size 20; padding-top: 5; padding-bottom: 5; - text-transform: uppercase; + color: ${colors.primary}; + /* text-transform: uppercase; */ ` class ViewFeatureDetail extends React.Component { diff --git a/app/screens/OfflineMaps/ViewOfflineAreaDetail.js b/app/screens/OfflineMaps/ViewOfflineAreaDetail.js index 805df287d..c87448c9d 100644 --- a/app/screens/OfflineMaps/ViewOfflineAreaDetail.js +++ b/app/screens/OfflineMaps/ViewOfflineAreaDetail.js @@ -17,8 +17,13 @@ import { renameOfflineResource } from '../../actions/map' import { getOfflineResourceStatus } from '../../selectors' +import { colors } from '../../style/variables' -const Text = styled.Text`` +const Text = styled.Text` + font-size: 16; + letter-spacing: 0.5; + color: ${colors.base} +` const Bold = styled.Text` font-weight: bold; ` diff --git a/app/screens/Settings.js b/app/screens/Settings.js index 8461589a5..cb822c087 100644 --- a/app/screens/Settings.js +++ b/app/screens/Settings.js @@ -28,7 +28,11 @@ const SettingsHeader = styled.Text` margin-top: 16; margin-bottom: 16; ` -const Text = styled.Text`` +const Text = styled.Text` + font-size: 16; + letter-spacing: 0.5; + color: ${colors.base} +` class Settings extends React.Component { static navigationOptions = ({ navigation }) => { diff --git a/app/screens/UserContributions/UserContributionsItemScreen.js b/app/screens/UserContributions/UserContributionsItemScreen.js index 04f6ee0a2..4d7aeebe4 100644 --- a/app/screens/UserContributions/UserContributionsItemScreen.js +++ b/app/screens/UserContributions/UserContributionsItemScreen.js @@ -21,8 +21,13 @@ import { getFeature } from '../../services/api' import Config from 'react-native-config' import getTaginfo from '../../utils/get-taginfo' import Icon from '../../components/Collecticons' +import { colors } from '../../style/variables' -const Text = styled.Text`` +const Text = styled.Text` + font-size: 16; + letter-spacing: 0.5; + color: ${colors.base} +` const ChangesetText = styled.Text` font-weight: 500; font-size: 18; diff --git a/app/style/variables.js b/app/style/variables.js index 7dac8e81a..5868bc3bf 100644 --- a/app/style/variables.js +++ b/app/style/variables.js @@ -1,7 +1,13 @@ +import styled from 'styled-components/native' + export const colors = { primary: '#6579FC', muted: '#c3c8cb', - secondary: '#CE1042' + secondary: '#CE1042', + base: 'rgba(19,60,85,1)', + baseMed: 'rgba(19,60,85,0.8)', + baseAlpha: 'rgba(19,60,85,0.64)', + baseMuted: 'rgba(19,60,85,0.48)' } export const notificationColors = { From e092b03ea75f27f104f7b2e34760730f3f780fc6 Mon Sep 17 00:00:00 2001 From: LanesGood Date: Tue, 18 Jun 2019 17:06:33 +0200 Subject: [PATCH 05/14] Update search and tag editor text styling --- app/components/TagEditor.js | 38 ++++++++++++++++------- app/screens/Features/SelectFeatureType.js | 3 +- 2 files changed, 28 insertions(+), 13 deletions(-) diff --git a/app/components/TagEditor.js b/app/components/TagEditor.js index 6afa585f6..945879a00 100644 --- a/app/components/TagEditor.js +++ b/app/components/TagEditor.js @@ -1,4 +1,3 @@ -import { Text } from 'react-native' import React from 'react' import styled from 'styled-components/native' @@ -15,6 +14,7 @@ const EditorWrapper = styled.View` const ToggleButton = styled.TouchableOpacity` flex-direction: row; + align-items: center; padding-top: 16; padding-right: 16; padding-bottom: 16; @@ -27,7 +27,17 @@ const TagListWrapper = styled.View` margin-right: 16; ` -const TagList = styled.FlatList`` +const Text = styled.Text` + font-size: 16; + letter-spacing: 0.5; + color: ${colors.baseAlpha} +` + +const TagList = styled.FlatList` + font-size: 16; + color: ${colors.baseAlpha}; + letter-spacing: 0.5; +` const Tag = styled.View` flex: 1; @@ -38,9 +48,12 @@ const Tag = styled.View` const TagKeyInput = styled.TextInput` flex: 0.45; + font-size: 16; + color: ${colors.base}; + letter-spacing: 0.5; padding-left: 12; border-width: 1; - border-color: ${colors.muted}; + border-color: ${colors.baseMuted}; border-top-left-radius: 4; border-top-right-radius: 0; border-bottom-left-radius: 4; @@ -51,9 +64,12 @@ const TagKeyInput = styled.TextInput` const TagValueInput = styled.TextInput` flex: 0.45; + font-size: 16; + color: ${colors.base}; + letter-spacing: 0.5; padding-left: 12; border-width: 1; - border-color: ${colors.muted}; + border-color: ${colors.baseMuted}; border-left-width: 0; border-radius: 0; border-bottom-right-radius: 4; @@ -65,7 +81,7 @@ const TagValueInput = styled.TextInput` const TagDeleteWrapper = styled.TouchableHighlight` flex: 0.1; border-width: 1; - border-color: ${colors.muted}; + border-color: ${colors.baseMuted}; border-left-width: 0; border-top-right-radius: 4; border-top-start-radius: 0; @@ -129,12 +145,12 @@ export default class TagEditor extends React.Component { if (open) { return ( - + ) } return ( - + ) } @@ -159,7 +175,7 @@ export default class TagEditor extends React.Component { { this.addTag() }}> - + Add tag ) @@ -189,19 +205,19 @@ export default class TagEditor extends React.Component { this.onUpdateKey(key, val)} - placeholderTextColor={colors.muted} + placeholderTextColor={colors.baseMuted} placeholder='key' value={key} /> this.onUpdateValue(value, val, key)} - placeholderTextColor={colors.muted} + placeholderTextColor={colors.baseMuted} placeholder='value' value={value} /> this.removeTag(index)}> - + ) diff --git a/app/screens/Features/SelectFeatureType.js b/app/screens/Features/SelectFeatureType.js index 13857703b..05611ccd7 100644 --- a/app/screens/Features/SelectFeatureType.js +++ b/app/screens/Features/SelectFeatureType.js @@ -162,11 +162,10 @@ class SelectFeatureType extends React.Component { this.onSearch(text)} onChangeText={(text) => this.onSearch(text)} - fontSize={16} backgroundColor='#ffffff' titleCancelColor='#333333' contentWidth={win.width - 32} - inputStyle={{ paddingBottom: 6 }} + inputStyle={{ paddingBottom: 6, fontSize: 16, paddingLeft: 2 }} keyboardShouldPersist={false} placeholder='Search for presets' searchIconCollapsedMargin={55} From 97651ad7730295caa0ceae6c64136bedd2b01cc4 Mon Sep 17 00:00:00 2001 From: LanesGood Date: Tue, 18 Jun 2019 17:14:05 +0200 Subject: [PATCH 06/14] Adjust tag editor icon alignment --- app/components/TagEditor.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/components/TagEditor.js b/app/components/TagEditor.js index 945879a00..c7a709e83 100644 --- a/app/components/TagEditor.js +++ b/app/components/TagEditor.js @@ -30,7 +30,8 @@ const TagListWrapper = styled.View` const Text = styled.Text` font-size: 16; letter-spacing: 0.5; - color: ${colors.baseAlpha} + color: ${colors.baseAlpha}; + padding-left: 4; ` const TagList = styled.FlatList` @@ -95,6 +96,7 @@ const TagDeleteWrapper = styled.TouchableHighlight` const AddTagWrapper = styled.TouchableOpacity` margin-top: 4; flex-direction: row; + align-items: center; ` export default class TagEditor extends React.Component { From 8dfbe37ee49ca35b3fd6ad87e3557b3c15ac2234 Mon Sep 17 00:00:00 2001 From: LanesGood Date: Tue, 18 Jun 2019 17:24:26 +0200 Subject: [PATCH 07/14] Adjust field margins and switch colors --- app/components/Input.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/app/components/Input.js b/app/components/Input.js index 9a596dcab..8bc46e5cf 100644 --- a/app/components/Input.js +++ b/app/components/Input.js @@ -11,7 +11,7 @@ const FieldWrapper = styled.View` border-width: 1; border-color: ${colors.baseMuted}; border-radius: 4; - margin-top: 12; + margin-top: 16; flex: 1; flex-direction: row; ` @@ -27,7 +27,7 @@ const LabelWrapper = styled.View` ` const Label = styled.Text` - color: ${colors.base}; + color: ${colors.baseMuted}; letter-spacing: 0.4; ` @@ -96,12 +96,14 @@ export class CheckField extends Field { - + this.onValueChange(value)} onFocus={() => this.onFocus()} onBlur={() => this.onBlur()} value={value} + trackColor={{ false: colors.baseMuted, true: colors.primary }} + thumbColor={colors.primary} /> this.removeField(key)}> From 3c376b7d76e4d7993eeafbd5347908c14ee6252b Mon Sep 17 00:00:00 2001 From: LanesGood Date: Tue, 18 Jun 2019 17:29:02 +0200 Subject: [PATCH 08/14] lint --- app/style/variables.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/style/variables.js b/app/style/variables.js index 5868bc3bf..666c9e296 100644 --- a/app/style/variables.js +++ b/app/style/variables.js @@ -24,3 +24,9 @@ export const notificationColors = { color: 'black' } } + +export const StyledText = styled.Text` + font-size: 16; + letter-spacing: 0.5; + color: ${colors.base} +` From 47d7aa02576ad03b232ab99eb2a167b743b7d44a Mon Sep 17 00:00:00 2001 From: LanesGood Date: Wed, 19 Jun 2019 13:28:37 +0200 Subject: [PATCH 09/14] Add react-native-global-props --- package.json | 1 + yarn.lock | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/package.json b/package.json index 055559c4f..7aa1901b3 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "react-native-dialog": "^5.6.0", "react-native-geolocation-service": "^2.0.0", "react-native-gesture-handler": "^1.0.15", + "react-native-global-props": "^1.1.5", "react-native-iphone-x-helper": "^1.2.1", "react-native-keychain": "^3.1.1", "react-native-modal-selector": "^1.0.3", diff --git a/yarn.lock b/yarn.lock index fafd4374a..6e1b52edb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7419,6 +7419,11 @@ react-native-gesture-handler@^1.0.15: invariant "^2.2.2" prop-types "^15.5.10" +react-native-global-props@^1.1.5: + version "1.1.5" + resolved "https://registry.yarnpkg.com/react-native-global-props/-/react-native-global-props-1.1.5.tgz#443e0ffc89d5402fa20ebedf37bcbca6d861c34d" + integrity sha512-QDeAdRel6zyJfbgyFxZi9QXZe78OdlANxJae0rJn76uTqdt/A+iWBVjJy3NmaN/fpKy0uV0HhW6Hu4xM0QCisQ== + react-native-iphone-x-helper@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz#645e2ffbbb49e80844bb4cbbe34a126fda1e6772" From d0136a72127416aff1fa3ff69b6bb6e36228d0ca Mon Sep 17 00:00:00 2001 From: LanesGood Date: Wed, 19 Jun 2019 13:29:34 +0200 Subject: [PATCH 10/14] Set global Text and TextInput styles from highest level --- index.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/index.js b/index.js index 5a492a7eb..78afa791c 100644 --- a/index.js +++ b/index.js @@ -6,10 +6,27 @@ import { AppRegistry } from 'react-native' import Config from 'react-native-config' import MapboxGL from '@mapbox/react-native-mapbox-gl' +import { setCustomText, setCustomTextInput } from 'react-native-global-props' import App from './App' import { name as appName } from './app.json' MapboxGL.setAccessToken(Config.MAPBOX_ACCESS_TOKEN) +const customTextProps = { + style: { + fontSize: 16, + letterSpacing: 0.5, + color: 'rgba(19,60,85,1)' + } +} +const customTextInputProps = { + style: { + fontSize: 16, + letterSpacing: 0.5, + color: 'rgba(19,60,85,1)' + } +} +setCustomText(customTextProps) +setCustomTextInput(customTextInputProps) AppRegistry.registerComponent(appName, () => App) From 5c556e2afc340fc783019867d4b063dd4eeff72d Mon Sep 17 00:00:00 2001 From: LanesGood Date: Wed, 19 Jun 2019 17:58:03 +0200 Subject: [PATCH 11/14] Remove styled Text from individual components: now globally declared Also remove StyledText component from Variables. Investigate - remove styled.Text RN component from components where declared with no styles? Can also then remove styled-components import --- app/components/FeatureDetailHeader.js | 6 ++---- app/components/Input.js | 4 +--- app/components/OfflineItem.js | 3 --- app/components/TagEditor.js | 10 ---------- app/components/UserContributionsItem.js | 3 --- app/components/UserContributionsList.js | 4 ---- app/screens/Account.js | 3 --- app/screens/Features/AddFeatureDetail.js | 4 ---- app/screens/Features/ChangeCoordinates.js | 4 ---- app/screens/Features/EditFeatureDetail.js | 4 ---- app/screens/Features/SelectFeatureType.js | 3 --- app/screens/Features/ViewFeatureDetail.js | 7 ------- app/screens/OfflineMaps/ViewOfflineAreaDetail.js | 4 ---- app/screens/Settings.js | 3 --- .../UserContributions/UserContributionsItemScreen.js | 7 ------- app/style/variables.js | 8 -------- 16 files changed, 3 insertions(+), 74 deletions(-) diff --git a/app/components/FeatureDetailHeader.js b/app/components/FeatureDetailHeader.js index 604e0d0f0..21bfd46a3 100644 --- a/app/components/FeatureDetailHeader.js +++ b/app/components/FeatureDetailHeader.js @@ -15,10 +15,7 @@ const Header = styled.View` ` const PresetName = styled.Text` - font-size: 16; font-weight: 500; - letter-spacing: 0.5; - color: ${colors.base}; margin-top: 4; ` @@ -41,12 +38,13 @@ const Button = styled.TouchableHighlight`` const Coordinates = styled.Text` color: ${colors.baseMuted}; + font-size: 14; padding-right: 4; ` const Edit = styled.Text` color: ${colors.primary}; - text-align: right; + font-size: 14; ` export default class FeatureDetailHeader extends React.Component { diff --git a/app/components/Input.js b/app/components/Input.js index 8bc46e5cf..14ca57557 100644 --- a/app/components/Input.js +++ b/app/components/Input.js @@ -233,7 +233,6 @@ export class NumberField extends Field { keyboardType='numeric' placeholder={placeholder} placeholderTextColor={color.baseMuted} - style={{ flex: 1, color: colors.base, fontSize: 16, letterSpacing: 0.5 }} underlineColorAndroid='transparent' value={value} /> @@ -267,7 +266,6 @@ export class TextField extends Field { onChangeText={(value) => this.onValueChange(value)} onFocus={() => this.onFocus()} onBlur={() => this.onBlur()} - style={{ flex: 1, color: colors.base, fontSize: 16, letterSpacing: 0.5 }} placeholder={placeholder} placeholderTextColor={color.baseMuted} underlineColorAndroid='transparent' @@ -383,7 +381,7 @@ export class ReadOnlyField extends Component { - + diff --git a/app/components/OfflineItem.js b/app/components/OfflineItem.js index dc6f16f00..eb96300eb 100644 --- a/app/components/OfflineItem.js +++ b/app/components/OfflineItem.js @@ -28,9 +28,6 @@ const TextContainer = styled.View` ` const TitleText = styled.Text` - font-size: 16; - letter-spacing: 0.5; - color: ${colors.base}; ` const SubtitleText = styled.Text` diff --git a/app/components/TagEditor.js b/app/components/TagEditor.js index c7a709e83..36f1d2cf7 100644 --- a/app/components/TagEditor.js +++ b/app/components/TagEditor.js @@ -28,16 +28,12 @@ const TagListWrapper = styled.View` ` const Text = styled.Text` - font-size: 16; - letter-spacing: 0.5; color: ${colors.baseAlpha}; padding-left: 4; ` const TagList = styled.FlatList` - font-size: 16; color: ${colors.baseAlpha}; - letter-spacing: 0.5; ` const Tag = styled.View` @@ -49,9 +45,6 @@ const Tag = styled.View` const TagKeyInput = styled.TextInput` flex: 0.45; - font-size: 16; - color: ${colors.base}; - letter-spacing: 0.5; padding-left: 12; border-width: 1; border-color: ${colors.baseMuted}; @@ -65,9 +58,6 @@ const TagKeyInput = styled.TextInput` const TagValueInput = styled.TextInput` flex: 0.45; - font-size: 16; - color: ${colors.base}; - letter-spacing: 0.5; padding-left: 12; border-width: 1; border-color: ${colors.baseMuted}; diff --git a/app/components/UserContributionsItem.js b/app/components/UserContributionsItem.js index e0d69abba..27cd2bba7 100644 --- a/app/components/UserContributionsItem.js +++ b/app/components/UserContributionsItem.js @@ -31,9 +31,6 @@ const TextContainer = styled.View` ` const TitleText = styled.Text` - font-size: 16; - letter-spacing: 0.5; - color: ${colors.base}; ` const SubtitleText = styled.Text` diff --git a/app/components/UserContributionsList.js b/app/components/UserContributionsList.js index e39d50fb9..9594f27ec 100644 --- a/app/components/UserContributionsList.js +++ b/app/components/UserContributionsList.js @@ -2,12 +2,8 @@ import React from 'react' import styled from 'styled-components/native' import UserContributionsItem from './UserContributionsItem' -import { colors } from '../style/variables' const StyledFlatList = styled.FlatList` - font-size: 16; - letter-spacing: 0.5; - color: ${colors.base} ` export default class UserContributionsList extends React.Component { diff --git a/app/screens/Account.js b/app/screens/Account.js index e966406ac..1d28b2e8d 100644 --- a/app/screens/Account.js +++ b/app/screens/Account.js @@ -11,9 +11,6 @@ import LoadingOverlay from '../components/LoadingOverlay' import { colors } from '../style/variables' const Text = styled.Text` - font-size: 16; - letter-spacing: 0.5; - color: ${colors.base} ` const ImageView = styled.View` diff --git a/app/screens/Features/AddFeatureDetail.js b/app/screens/Features/AddFeatureDetail.js index 45b69f28b..7eb0b7b63 100644 --- a/app/screens/Features/AddFeatureDetail.js +++ b/app/screens/Features/AddFeatureDetail.js @@ -20,14 +20,10 @@ import { metaKeys } from '../../utils/uninterestingKeys' import nextTick from '../../utils/next-tick' import SaveEditDialog from '../../components/SaveEditDialog' import TagEditor from '../../components/TagEditor' -import { colors } from '../../style/variables' import { getParentPreset } from '../../utils/get-parent-preset' const FieldsList = styled.FlatList` - font-size: 16; - letter-spacing: 0.5; - color: ${colors.base}; ` class EditFeatureDetail extends React.Component { diff --git a/app/screens/Features/ChangeCoordinates.js b/app/screens/Features/ChangeCoordinates.js index 33ff96887..a892436bb 100644 --- a/app/screens/Features/ChangeCoordinates.js +++ b/app/screens/Features/ChangeCoordinates.js @@ -4,12 +4,8 @@ import styled from 'styled-components/native' import Header from '../../components/Header' import Container from '../../components/Container' -import { colors } from '../../style/variables' const Text = styled.Text` - font-size: 16; - letter-spacing: 0.5; - color: ${colors.base} ` class ChangeCoordinates extends React.Component { diff --git a/app/screens/Features/EditFeatureDetail.js b/app/screens/Features/EditFeatureDetail.js index 8ec1f3152..3cee9f39f 100644 --- a/app/screens/Features/EditFeatureDetail.js +++ b/app/screens/Features/EditFeatureDetail.js @@ -20,7 +20,6 @@ import nextTick from '../../utils/next-tick' import SaveEditDialog from '../../components/SaveEditDialog' import getFields from '../../utils/get-fields' import { getParentPreset } from '../../utils/get-parent-preset' -import { colors } from '../../style/variables' import _uniq from 'lodash.uniq' import _pick from 'lodash.pick' import _omitBy from 'lodash.omitby' @@ -28,9 +27,6 @@ import _omit from 'lodash.omit' import _isEqual from 'lodash.isequal' const FieldsList = styled.FlatList` - font-size: 16; - letter-spacing: 0.5; - color: ${colors.base}; ` class EditFeatureDetail extends React.Component { diff --git a/app/screens/Features/SelectFeatureType.js b/app/screens/Features/SelectFeatureType.js index 05611ccd7..5fc4ff25f 100644 --- a/app/screens/Features/SelectFeatureType.js +++ b/app/screens/Features/SelectFeatureType.js @@ -15,9 +15,6 @@ import { presets as starterPresets } from '../../presets/starter-presets.json' const win = Dimensions.get('window') const Text = styled.Text` - font-size: 16; - letter-spacing: 0.5; - color: ${colors.base}; ` const PresetWrapper = styled.TouchableOpacity` diff --git a/app/screens/Features/ViewFeatureDetail.js b/app/screens/Features/ViewFeatureDetail.js index c59bfbfb0..1388b337a 100644 --- a/app/screens/Features/ViewFeatureDetail.js +++ b/app/screens/Features/ViewFeatureDetail.js @@ -18,9 +18,6 @@ import { deleteFeature, uploadEdits } from '../../actions/edit' import { colors } from '../../style/variables' const FieldsList = styled.SectionList` - font-size: 16; - letter-spacing: 0.5; - color: ${colors.base}; ` const Field = styled.View` @@ -33,15 +30,11 @@ const Field = styled.View` const FieldKey = styled.Text` font-weight: 500; font-size: 12; - color: ${colors.base}; ` const FieldValue = styled.Text` font-weight: 300; - font-size: 16; - letter-spacing: 0.5; padding-top: 2; - color: ${colors.base}; ` const SectionHeaderField = styled.View` diff --git a/app/screens/OfflineMaps/ViewOfflineAreaDetail.js b/app/screens/OfflineMaps/ViewOfflineAreaDetail.js index c87448c9d..9804af53f 100644 --- a/app/screens/OfflineMaps/ViewOfflineAreaDetail.js +++ b/app/screens/OfflineMaps/ViewOfflineAreaDetail.js @@ -17,12 +17,8 @@ import { renameOfflineResource } from '../../actions/map' import { getOfflineResourceStatus } from '../../selectors' -import { colors } from '../../style/variables' const Text = styled.Text` - font-size: 16; - letter-spacing: 0.5; - color: ${colors.base} ` const Bold = styled.Text` font-weight: bold; diff --git a/app/screens/Settings.js b/app/screens/Settings.js index cb822c087..f2d4d082c 100644 --- a/app/screens/Settings.js +++ b/app/screens/Settings.js @@ -29,9 +29,6 @@ const SettingsHeader = styled.Text` margin-bottom: 16; ` const Text = styled.Text` - font-size: 16; - letter-spacing: 0.5; - color: ${colors.base} ` class Settings extends React.Component { diff --git a/app/screens/UserContributions/UserContributionsItemScreen.js b/app/screens/UserContributions/UserContributionsItemScreen.js index 4d7aeebe4..37fdd536c 100644 --- a/app/screens/UserContributions/UserContributionsItemScreen.js +++ b/app/screens/UserContributions/UserContributionsItemScreen.js @@ -21,13 +21,7 @@ import { getFeature } from '../../services/api' import Config from 'react-native-config' import getTaginfo from '../../utils/get-taginfo' import Icon from '../../components/Collecticons' -import { colors } from '../../style/variables' -const Text = styled.Text` - font-size: 16; - letter-spacing: 0.5; - color: ${colors.base} -` const ChangesetText = styled.Text` font-weight: 500; font-size: 18; @@ -40,7 +34,6 @@ const FeatureInfoText = styled.Text` ` const UploadStatusText = styled.Text` - font-size: 16; ` const ErrorText = styled.Text` diff --git a/app/style/variables.js b/app/style/variables.js index 666c9e296..9f9e55205 100644 --- a/app/style/variables.js +++ b/app/style/variables.js @@ -1,5 +1,3 @@ -import styled from 'styled-components/native' - export const colors = { primary: '#6579FC', muted: '#c3c8cb', @@ -24,9 +22,3 @@ export const notificationColors = { color: 'black' } } - -export const StyledText = styled.Text` - font-size: 16; - letter-spacing: 0.5; - color: ${colors.base} -` From 875a71a23c503ebc1a7856b1ffe374dac36fa9f4 Mon Sep 17 00:00:00 2001 From: LanesGood Date: Wed, 19 Jun 2019 18:01:42 +0200 Subject: [PATCH 12/14] Readd undefined component --- app/screens/UserContributions/UserContributionsItemScreen.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/screens/UserContributions/UserContributionsItemScreen.js b/app/screens/UserContributions/UserContributionsItemScreen.js index 37fdd536c..24ba93a7c 100644 --- a/app/screens/UserContributions/UserContributionsItemScreen.js +++ b/app/screens/UserContributions/UserContributionsItemScreen.js @@ -22,6 +22,7 @@ import Config from 'react-native-config' import getTaginfo from '../../utils/get-taginfo' import Icon from '../../components/Collecticons' +const Text = styled.Text`` const ChangesetText = styled.Text` font-weight: 500; font-size: 18; From a8e3459b88c35d3c759dbe7b59aee89e8a7de524 Mon Sep 17 00:00:00 2001 From: sethvincent Date: Wed, 19 Jun 2019 09:32:10 -0700 Subject: [PATCH 13/14] protect against not choosing a field with `add a field` input --- app/screens/Features/EditFeatureDetail.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/screens/Features/EditFeatureDetail.js b/app/screens/Features/EditFeatureDetail.js index 8ec1f3152..33f879786 100644 --- a/app/screens/Features/EditFeatureDetail.js +++ b/app/screens/Features/EditFeatureDetail.js @@ -301,8 +301,9 @@ class EditFeatureDetail extends React.Component { onValueChange={(value, i) => { if (i !== 0) { const field = fields.find((f) => { - return f.key === value + return f.key && f.key === value }) + if (!field) return this.setState({ addFieldValue: field }) if (Platform.OS === 'android') { this.addField(field) From 4554178915eecb15a9d23cfe15f1ff096219a3c3 Mon Sep 17 00:00:00 2001 From: sethvincent Date: Wed, 19 Jun 2019 10:52:39 -0700 Subject: [PATCH 14/14] improve platform-specific styles in tag editor and add/edit feature forms --- app/components/TagEditor.js | 14 ++++++++ app/screens/Features/AddFeatureDetail.js | 32 +++++++++++++++++-- app/screens/Features/EditFeatureDetail.js | 39 +++++++++++++++++++---- 3 files changed, 77 insertions(+), 8 deletions(-) diff --git a/app/components/TagEditor.js b/app/components/TagEditor.js index 36f1d2cf7..555fe4aec 100644 --- a/app/components/TagEditor.js +++ b/app/components/TagEditor.js @@ -3,6 +3,19 @@ import styled from 'styled-components/native' import Icon from './Collecticons' import { colors } from '../style/variables' +import getPlatformStyles from '../utils/get-platform-styles' + +const styles = getPlatformStyles({ + ios: { + editorPaddingBottom: 0 + }, + iphoneX: { + editorPaddingBottom: 48 + }, + android: { + editorPaddingBottom: 0 + } +}) const EditorWrapper = styled.View` background-color: #fafafa; @@ -10,6 +23,7 @@ const EditorWrapper = styled.View` border-top-color: ${colors.muted}; border-bottom-width: 0.5; border-bottom-color: ${colors.muted}; + padding-bottom: ${styles.editorPaddingBottom}; ` const ToggleButton = styled.TouchableOpacity` diff --git a/app/screens/Features/AddFeatureDetail.js b/app/screens/Features/AddFeatureDetail.js index 7eb0b7b63..7a7cf1f64 100644 --- a/app/screens/Features/AddFeatureDetail.js +++ b/app/screens/Features/AddFeatureDetail.js @@ -11,6 +11,7 @@ import Container from '../../components/Container' import Header from '../../components/Header' import PageWrapper from '../../components/PageWrapper' import FeatureDetailHeader from '../../components/FeatureDetailHeader' +import Icon from '../../components/Collecticons' import { addFeature, uploadEdits } from '../../actions/edit' import getFields from '../../utils/get-fields' @@ -22,6 +23,7 @@ import SaveEditDialog from '../../components/SaveEditDialog' import TagEditor from '../../components/TagEditor' import { getParentPreset } from '../../utils/get-parent-preset' +import { colors } from '../../style/variables' const FieldsList = styled.FlatList` ` @@ -239,8 +241,9 @@ class EditFeatureDetail extends React.Component { onValueChange={(val, i) => { if (val) { const field = fields.find((f) => { - return f && f.key === val + return f && f.key && f.key === val }) + if (!field) return value = { label: field.key, value: field.key } this.setState({ addFieldValue: value }) if (Platform.OS === 'android') { @@ -249,13 +252,38 @@ class EditFeatureDetail extends React.Component { } }} onDonePress={() => { - if (Platform.OS === 'ios') { + if (Platform.OS === 'ios' && this.state.addFieldValue) { const field = fields.find((f) => { return f && f.key === this.state.addFieldValue.value }) this.addField(field) } }} + Icon={() => { + return + }} + useNativeAndroidPickerStyle={false} + style={{ + inputIOS: { + paddingVertical: 12, + paddingHorizontal: 10, + color: colors.base, + paddingRight: 30, + marginTop: 10 + }, + inputAndroid: { + paddingTop: 10, + paddingBottom: 5, + paddingHorizontal: 10, + color: colors.base, + paddingRight: 30, + marginTop: 10 + }, + iconContainer: { + top: 25, + right: 15 + } + }} /> ) } diff --git a/app/screens/Features/EditFeatureDetail.js b/app/screens/Features/EditFeatureDetail.js index f231fd5f2..2f192f1ea 100644 --- a/app/screens/Features/EditFeatureDetail.js +++ b/app/screens/Features/EditFeatureDetail.js @@ -3,11 +3,17 @@ import { Platform, Keyboard } from 'react-native' import { connect } from 'react-redux' import styled from 'styled-components/native' import Picker from 'react-native-picker-select' +import _uniq from 'lodash.uniq' +import _pick from 'lodash.pick' +import _omitBy from 'lodash.omitby' +import _omit from 'lodash.omit' +import _isEqual from 'lodash.isequal' import Container from '../../components/Container' import Header from '../../components/Header' import PageWrapper from '../../components/PageWrapper' import TagEditor from '../../components/TagEditor' +import Icon from '../../components/Collecticons' import { editFeature, uploadEdits } from '../../actions/edit' @@ -20,11 +26,7 @@ import nextTick from '../../utils/next-tick' import SaveEditDialog from '../../components/SaveEditDialog' import getFields from '../../utils/get-fields' import { getParentPreset } from '../../utils/get-parent-preset' -import _uniq from 'lodash.uniq' -import _pick from 'lodash.pick' -import _omitBy from 'lodash.omitby' -import _omit from 'lodash.omit' -import _isEqual from 'lodash.isequal' +import { colors } from '../../style/variables' const FieldsList = styled.FlatList` ` @@ -297,7 +299,7 @@ class EditFeatureDetail extends React.Component { onValueChange={(value, i) => { if (i !== 0) { const field = fields.find((f) => { - return f.key && f.key === value + return f && f.key && f.key === value }) if (!field) return this.setState({ addFieldValue: field }) @@ -312,6 +314,31 @@ class EditFeatureDetail extends React.Component { this.setState({ addFieldValue: null }) } }} + Icon={() => { + return + }} + useNativeAndroidPickerStyle={false} + style={{ + inputIOS: { + paddingVertical: 12, + paddingHorizontal: 10, + color: colors.base, + paddingRight: 30, + marginTop: 10 + }, + inputAndroid: { + paddingTop: 10, + paddingBottom: 5, + paddingHorizontal: 10, + color: colors.base, + paddingRight: 30, + marginTop: 10 + }, + iconContainer: { + top: 25, + right: 15 + } + }} /> ) }