diff --git a/src/components/LocalePicker.js b/src/components/LocalePicker.js index aafb06ea6fd2a..ebd471ca96f8a 100644 --- a/src/components/LocalePicker.js +++ b/src/components/LocalePicker.js @@ -10,6 +10,7 @@ import CONST from '../CONST'; import Permissions from '../libs/Permissions'; import * as Localize from '../libs/Localize'; import Picker from './Picker'; +import styles from '../styles/styles'; const propTypes = { /** Indicates which locale the user currently has selected */ @@ -59,6 +60,7 @@ const LocalePicker = (props) => { items={_.values(localesToLanguages)} size={props.size} value={props.preferredLocale} + containerStyles={[props.size === 'small' && [styles.pickerContainerSmall]]} /> ); }; diff --git a/src/components/Picker/index.js b/src/components/Picker.js similarity index 93% rename from src/components/Picker/index.js rename to src/components/Picker.js index 5fa6267519847..3350e5cc92160 100644 --- a/src/components/Picker/index.js +++ b/src/components/Picker.js @@ -3,14 +3,13 @@ import React, {PureComponent} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; import RNPickerSelect from 'react-native-picker-select'; -import Icon from '../Icon'; -import * as Expensicons from '../Icon/Expensicons'; -import FormHelpMessage from '../FormHelpMessage'; -import Text from '../Text'; -import styles from '../../styles/styles'; -import themeColors from '../../styles/themes/default'; -import pickerStyles from './pickerStyles'; -import {ScrollContext} from '../ScrollViewWithContext'; +import Icon from './Icon'; +import * as Expensicons from './Icon/Expensicons'; +import FormHelpMessage from './FormHelpMessage'; +import Text from './Text'; +import styles from '../styles/styles'; +import themeColors from '../styles/themes/default'; +import {ScrollContext} from './ScrollViewWithContext'; const propTypes = { /** Picker label */ @@ -170,7 +169,7 @@ class Picker extends PureComponent { // We add a text color to prevent white text on white background dropdown items on Windows items={_.map(this.props.items, item => ({...item, color: themeColors.pickerOptionsTextColor}))} - style={this.props.size === 'normal' ? pickerStyles(this.props.isDisabled) : styles.pickerSmall} + style={this.props.size === 'normal' ? styles.picker(this.props.isDisabled) : styles.pickerSmall} useNativeAndroidPickerStyle={false} placeholder={this.placeholder} value={this.props.value} diff --git a/src/components/Picker/pickerStyles/index.android.js b/src/components/Picker/pickerStyles/index.android.js deleted file mode 100644 index d688481c0d72a..0000000000000 --- a/src/components/Picker/pickerStyles/index.android.js +++ /dev/null @@ -1,12 +0,0 @@ -// eslint-disable-next-line rulesdir/display-name-property -import styles from '../../../styles/styles'; - -const pickerStyles = isDisabled => ({ - ...styles.picker(isDisabled), - inputAndroid: { - ...styles.picker(isDisabled).inputNative, - paddingLeft: 12, - }, -}); - -export default pickerStyles; diff --git a/src/components/Picker/pickerStyles/index.ios.js b/src/components/Picker/pickerStyles/index.ios.js deleted file mode 100644 index 00a28d997b489..0000000000000 --- a/src/components/Picker/pickerStyles/index.ios.js +++ /dev/null @@ -1,9 +0,0 @@ -// eslint-disable-next-line rulesdir/display-name-property -import styles from '../../../styles/styles'; - -const pickerStyles = isDisabled => ({ - ...styles.picker(isDisabled), - inputIOS: styles.picker(isDisabled).inputNative, -}); - -export default pickerStyles; diff --git a/src/components/Picker/pickerStyles/index.js b/src/components/Picker/pickerStyles/index.js deleted file mode 100644 index 7ac87419630de..0000000000000 --- a/src/components/Picker/pickerStyles/index.js +++ /dev/null @@ -1,23 +0,0 @@ -// eslint-disable-next-line rulesdir/display-name-property -import CONST from '../../../CONST'; -import * as Browser from '../../../libs/Browser'; -import styles from '../../../styles/styles'; - -const pickerStylesWeb = () => { - if (CONST.BROWSER.FIREFOX === Browser.getBrowser()) { - return { - textIndent: -2, - }; - } - return {}; -}; - -const pickerStyles = isDisabled => ({ - ...styles.picker(isDisabled), - inputWeb: { - ...styles.picker(isDisabled).inputWeb, - ...pickerStylesWeb(), - }, -}); - -export default pickerStyles; diff --git a/src/styles/styles.js b/src/styles/styles.js index 71fed02015b45..f8b15caf9b6b8 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -26,12 +26,12 @@ const picker = { fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeNormal, lineHeight: variables.fontSizeNormalHeight, - paddingHorizontal: 11, paddingBottom: 8, paddingTop: 23, + paddingLeft: 0, + paddingRight: 25, height: variables.inputHeight, borderWidth: 0, - borderRadius: variables.componentBorderRadiusNormal, textAlign: 'left', }; @@ -560,8 +560,8 @@ const styles = { inputIOS: { fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeSmall, - paddingLeft: 9, - paddingRight: 25, + paddingLeft: 0, + paddingRight: 17, paddingTop: 6, paddingBottom: 6, borderRadius: variables.componentBorderRadius, @@ -574,8 +574,8 @@ const styles = { inputWeb: { fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeSmall, - paddingLeft: 9, - paddingRight: 25, + paddingLeft: 0, + paddingRight: 17, paddingTop: 6, paddingBottom: 6, borderWidth: 0, @@ -590,8 +590,8 @@ const styles = { inputAndroid: { fontFamily: fontFamily.EXP_NEUE, fontSize: variables.fontSizeSmall, - paddingLeft: 9, - paddingRight: 25, + paddingLeft: 0, + paddingRight: 17, paddingTop: 6, paddingBottom: 6, borderWidth: 0, @@ -602,7 +602,6 @@ const styles = { }, iconContainer: { top: 7, - right: 8, ...pointerEventsNone, }, icon: { @@ -718,24 +717,22 @@ const styles = { textInputContainer: { flex: 1, - borderRadius: variables.componentBorderRadiusNormal, justifyContent: 'center', height: '100%', - backgroundColor: themeColors.componentBG, - borderWidth: 1, + backgroundColor: 'transparent', + borderBottomWidth: 2, borderColor: themeColors.border, overflow: 'hidden', }, textInputLabel: { position: 'absolute', - left: 11, + left: 0, top: 0, fontSize: variables.fontSizeNormal, color: themeColors.textSupporting, fontFamily: fontFamily.EXP_NEUE, width: '100%', - textAlign: 'left', }, textInputLabelBackground: { @@ -744,8 +741,6 @@ const styles = { width: '100%', height: 25, backgroundColor: themeColors.componentBG, - borderTopRightRadius: variables.componentBorderRadiusNormal, - borderTopLeftRadius: variables.componentBorderRadiusNormal, }, textInputLabelDesktop: { @@ -767,7 +762,7 @@ const styles = { color: themeColors.text, paddingTop: 23, paddingBottom: 8, - paddingHorizontal: 11, + paddingLeft: 0, borderWidth: 0, }, @@ -789,8 +784,6 @@ const styles = { textInputDesktop: addOutlineWidth({}, 0), secureInputShowPasswordButton: { - borderTopRightRadius: 6, - borderBottomRightRadius: 6, paddingHorizontal: 11, justifyContent: 'center', margin: 1, @@ -802,7 +795,7 @@ const styles = { }, textInput: { - backgroundColor: themeColors.componentBG, + backgroundColor: 'transparent', borderRadius: variables.componentBorderRadiusNormal, height: variables.inputComponentSizeNormal, borderColor: themeColors.border, @@ -832,30 +825,43 @@ const styles = { }, pickerContainer: { - borderWidth: 1, + borderBottomWidth: 2, + paddingLeft: 0, borderStyle: 'solid', borderColor: themeColors.border, - borderRadius: variables.componentBorderRadiusNormal, justifyContent: 'center', - backgroundColor: themeColors.componentBG, + backgroundColor: 'transparent', + height: variables.inputHeight, }, + + pickerContainerSmall: { + height: variables.inputHeightSmall, + }, + pickerLabel: { position: 'absolute', - left: 11, + left: 0, top: 6, }, + picker: (disabled = false) => ({ iconContainer: { top: Math.round(variables.inputHeight * 0.5) - 11, - right: 10, + right: 0, zIndex: -1, }, + inputWeb: { appearance: 'none', cursor: disabled ? 'not-allowed' : 'pointer', ...picker, }, - inputNative: { + + inputIOS: { + ...picker, + }, + + inputAndroid: { ...picker, }, }), @@ -869,16 +875,6 @@ const styles = { color: themeColors.icon, }, - textInputReversed: addOutlineWidth({ - backgroundColor: themeColors.heading, - borderColor: themeColors.text, - color: themeColors.textReversed, - }, 0), - - textInputReversedFocus: { - borderColor: themeColors.icon, - }, - noOutline: addOutlineWidth({}, 0), errorOutline: { @@ -1403,7 +1399,6 @@ const styles = { fontFamily: fontFamily.EMOJI_TEXT_FONT, fontSize: variables.fontSizeNormal, borderWidth: 0, - borderRadius: variables.componentBorderRadiusRounded, height: 'auto', lineHeight: variables.lineHeightXLarge, ...overflowXHidden, @@ -1426,6 +1421,7 @@ const styles = { }, editInputComposeSpacing: { + backgroundColor: themeColors.transparent, marginVertical: 6, }, @@ -1813,6 +1809,7 @@ const styles = { borderNone: { borderWidth: 0, + borderBottomWidth: 0, }, borderRight: { diff --git a/src/styles/variables.js b/src/styles/variables.js index 9698c29ca8ce9..0b794ada41a98 100644 --- a/src/styles/variables.js +++ b/src/styles/variables.js @@ -77,7 +77,8 @@ export default { lineHeightNormal: getValueUsingPixelRatio(16, 21), lineHeightLarge: getValueUsingPixelRatio(18, 24), lineHeightXLarge: getValueUsingPixelRatio(20, 24), - inputHeight: getValueUsingPixelRatio(50, 72), + inputHeight: getValueUsingPixelRatio(52, 72), + inputHeightSmall: 28, formErrorLineHeight: getValueUsingPixelRatio(18, 23), communicationsLinkHeight: getValueUsingPixelRatio(20, 30), alternateTextHeight: getValueUsingPixelRatio(20, 24),