toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Fix time zone settings search bar (MM-23644) (#6033)

Browse source 
* Fix time zone settings search bar (MM-23644)
Some code improvements:
- renamed header to searchBar
- moved searchBarInput to getStyleSheet
Both of which are logical to me and are more consistent with e.g. screens/channel_members

* Fix trailing space

* Update snapshot
This commit is contained in:
Wander Siemers 2022-03-10 03:48:22 +01:00 committed by GitHub
parent 2349aa0441
commit 84d281181b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
app/screens/settings/timezone/select_timezone/__snapshots__/select_timezone.test.js.snap
View file

@ -20,10 +20,8 @@ exports[`Settings SelectTimezone should match snapshot 1`] = `
<View
style={
Object {
"backgroundColor": "#192a4d",
"height": 44,
"paddingLeft": 8,
"width": "100%",
"height": 38,
"marginVertical": 5,
}
}
>
@ -39,8 +37,8 @@ exports[`Settings SelectTimezone should match snapshot 1`] = `
inputHeight={33}
inputStyle={
Object {
"backgroundColor": "rgba(255,255,255,0.2)",
"color": "#ffffff",
"backgroundColor": "rgba(63,67,80,0.2)",
"color": "#3f4350",
"fontSize": 15,
}
}
@ -51,17 +49,17 @@ exports[`Settings SelectTimezone should match snapshot 1`] = `
onChangeText={[Function]}
onSelectionChange={[Function]}
placeholder="Search"
placeholderTextColor="rgba(255,255,255,0.5)"
placeholderTextColor="rgba(63,67,80,0.5)"
returnKeyType="search"
searchBarRightMargin={0}
searchIconSize={24}
selectionColor="rgba(255,255,255,0.5)"
selectionColor="rgba(63,67,80,0.5)"
showArrow={false}
showCancel={true}
testID="settings.select_timezone.search_bar"
tintColorDelete="rgba(255,255,255,0.5)"
tintColorSearch="rgba(255,255,255,0.5)"
titleCancelColor="#ffffff"
tintColorDelete="rgba(63,67,80,0.5)"
tintColorSearch="rgba(63,67,80,0.5)"
titleCancelColor="#3f4350"
value=""
/>
</View>

42
app/screens/settings/timezone/select_timezone/select_timezone.js
View file

@ -100,12 +100,6 @@ export default class Timezone extends PureComponent {
const {intl} = this.context;
const style = getStyleSheet(theme);
const searchBarInput = {
backgroundColor: changeOpacity(theme.sidebarHeaderTextColor, 0.2),
color: theme.sidebarHeaderTextColor,
fontSize: 15,
};
return (
<SafeAreaView
testID='settings.select_timezone.screen'
@ -113,7 +107,7 @@ export default class Timezone extends PureComponent {
style={style.container}
>
<StatusBar/>
<View style={style.header}>
<View style={style.searchBar}>
<SearchBar
testID='settings.select_timezone.search_bar'
ref={this.setSearchBarRef}
@ -121,12 +115,12 @@ export default class Timezone extends PureComponent {
cancelTitle={intl.formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
backgroundColor='transparent'
inputHeight={Platform.OS === 'ios' ? 33 : 46}
inputStyle={searchBarInput}
placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
selectionColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorDelete={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
titleCancelColor={theme.sidebarHeaderTextColor}
inputStyle={style.searchBarInput}
placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.5)}
selectionColor={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorSearch={changeOpacity(theme.centerChannelColor, 0.5)}
tintColorDelete={changeOpacity(theme.centerChannelColor, 0.5)}
titleCancelColor={theme.centerChannelColor}
onChangeText={this.handleTextChanged}
autoCapitalize='none'
value={value}
@ -158,20 +152,16 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
flex: 1,
backgroundColor: theme.centerChannelBg,
},
header: {
backgroundColor: theme.sidebarHeaderBg,
searchBarInput: {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
color: theme.centerChannelColor,
fontSize: 15,
},
searchBar: {
height: 38,
width: '100%',
...Platform.select({
android: {
height: 46,
justifyContent: 'center',
},
ios: {
height: 44,
paddingLeft: 8,
},
}),
marginVertical: 5,
},
};
});