From 84d281181b34335b85c6cf1e7a3b58e27e362e62 Mon Sep 17 00:00:00 2001
From: Wander Siemers <wandersiemers@users.noreply.github.com>
Date: Thu, 10 Mar 2022 03:48:22 +0100
Subject: [PATCH] Fix time zone settings search bar (MM-23644) (#6033)

* 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
---
 .../select_timezone.test.js.snap              | 20 ++++-----
 .../select_timezone/select_timezone.js        | 42 +++++++------------
 2 files changed, 25 insertions(+), 37 deletions(-)

diff --git a/app/screens/settings/timezone/select_timezone/__snapshots__/select_timezone.test.js.snap b/app/screens/settings/timezone/select_timezone/__snapshots__/select_timezone.test.js.snap
index 19c22fa45..a11503c81 100644
--- a/app/screens/settings/timezone/select_timezone/__snapshots__/select_timezone.test.js.snap
+++ b/app/screens/settings/timezone/select_timezone/__snapshots__/select_timezone.test.js.snap
@@ -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>
diff --git a/app/screens/settings/timezone/select_timezone/select_timezone.js b/app/screens/settings/timezone/select_timezone/select_timezone.js
index 04ba8d6fa..e304fa08d 100644
--- a/app/screens/settings/timezone/select_timezone/select_timezone.js
+++ b/app/screens/settings/timezone/select_timezone/select_timezone.js
@@ -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,
         },
     };
 });