From 68c33a12c867ab328e7e1899d4fcbfcdb6f7f119 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Wed, 19 May 2021 16:43:32 -0700
Subject: Modify to reuse existing search bar

---
 src/screens/chat/ChatSearchBar.tsx | 14 ++++++++++----
 src/screens/chat/NewChatModal.tsx  |  1 +
 2 files changed, 11 insertions(+), 4 deletions(-)

(limited to 'src/screens/chat')

diff --git a/src/screens/chat/ChatSearchBar.tsx b/src/screens/chat/ChatSearchBar.tsx
index 91018d4c..1c91f493 100644
--- a/src/screens/chat/ChatSearchBar.tsx
+++ b/src/screens/chat/ChatSearchBar.tsx
@@ -17,6 +17,7 @@ interface SearchBarProps extends TextInputProps {
   onCancel: () => void;
   searching: boolean;
   placeholder: string;
+  label?: string;
 }
 const ChatSearchBar: React.FC<SearchBarProps> = ({
   onFocus,
@@ -26,6 +27,7 @@ const ChatSearchBar: React.FC<SearchBarProps> = ({
   onCancel,
   onLayout,
   placeholder,
+  label,
 }) => {
   const handleSubmit = (
     e: NativeSyntheticEvent<TextInputSubmitEditingEventData>,
@@ -34,14 +36,18 @@ const ChatSearchBar: React.FC<SearchBarProps> = ({
     Keyboard.dismiss();
   };
 
+  const extraLabelStyle = {paddingLeft: label ? 0 : 10};
+
   return (
     <View style={styles.container} onLayout={onLayout}>
       <Animated.View style={styles.inputContainer}>
-        <Animated.View style={styles.searchTextContainer}>
-          <Text style={styles.searchTextStyes}>To:</Text>
-        </Animated.View>
+        {label && (
+          <Animated.View style={styles.searchTextContainer}>
+            <Text style={styles.searchTextStyes}>{label}</Text>
+          </Animated.View>
+        )}
         <TextInput
-          style={styles.input}
+          style={[extraLabelStyle, styles.input]}
           placeholderTextColor={'#828282'}
           onSubmitEditing={handleSubmit}
           clearButtonMode="always"
diff --git a/src/screens/chat/NewChatModal.tsx b/src/screens/chat/NewChatModal.tsx
index 9872dd6f..e57e7f7a 100644
--- a/src/screens/chat/NewChatModal.tsx
+++ b/src/screens/chat/NewChatModal.tsx
@@ -98,6 +98,7 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
           value={query}
           searching={searching}
           placeholder={''}
+          label={'To:'}
         />
         {results.length > 0 && (
           <View style={styles.headerContainerStyles}>
-- 
cgit v1.2.3-70-g09d2


From 5b57d5c82a0d8b30a58fd66acd79f083e3019cfc Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Fri, 21 May 2021 14:07:19 -0700
Subject: Add colors through types

---
 src/components/common/TaggRadioButton.tsx      | 5 +++--
 src/constants/constants.ts                     | 1 +
 src/screens/chat/ChatScreen.tsx                | 3 ++-
 src/screens/onboarding/BasicInfoOnboarding.tsx | 8 ++++----
 4 files changed, 10 insertions(+), 7 deletions(-)

(limited to 'src/screens/chat')

diff --git a/src/components/common/TaggRadioButton.tsx b/src/components/common/TaggRadioButton.tsx
index fc4008e5..25d00ec9 100644
--- a/src/components/common/TaggRadioButton.tsx
+++ b/src/components/common/TaggRadioButton.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
+import {RADIO_BUTTON_GREY, TAGG_LIGHT_BLUE_2} from '../../constants/constants';
 
 interface TaggRadioButtonProps {
   pressed: boolean;
@@ -10,11 +11,11 @@ const TaggRadioButton: React.FC<TaggRadioButtonProps> = ({
   onPress,
 }) => {
   const activeOuterStyle = {
-    borderColor: pressed ? '#6EE7E7' : '#BEBEBE',
+    borderColor: pressed ? TAGG_LIGHT_BLUE_2 : RADIO_BUTTON_GREY,
   };
 
   const activeInnerStyle = {
-    backgroundColor: pressed ? '#6EE7E7' : 'white',
+    backgroundColor: pressed ? TAGG_LIGHT_BLUE_2 : 'white',
   };
   return (
     <TouchableOpacity
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index f533563d..99d3901b 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -65,6 +65,7 @@ export const TAGG_DARK_BLUE = '#4E699C';
 export const TAGG_LIGHT_BLUE: string = '#698DD3';
 export const TAGG_LIGHT_BLUE_2: string = '#6EE7E7';
 export const TAGG_LIGHT_PURPLE = '#F4DDFF';
+export const RADIO_BUTTON_GREY: string = '#BEBEBE';
 
 export const TAGGS_GRADIENT = {
   start: '#9F00FF',
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index 17618867..8991d65b 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -21,6 +21,7 @@ import {
   MessageFooter,
   TypingIndicator,
 } from '../../components';
+import {TAGG_LIGHT_BLUE_2} from '../../constants/constants';
 import {MainStackParams} from '../../routes';
 import {ScreenType} from '../../types';
 import {HeaderHeight, normalize, SCREEN_WIDTH} from '../../utils';
@@ -38,7 +39,7 @@ const ChatScreen: React.FC<ChatScreenProps> = ({navigation}) => {
   const insets = useSafeAreaInsets();
   const chatTheme: DeepPartial<Theme> = {
     colors: {
-      accent_blue: '#6EE7E7',
+      accent_blue: TAGG_LIGHT_BLUE_2,
     },
     messageList: {
       container: {
diff --git a/src/screens/onboarding/BasicInfoOnboarding.tsx b/src/screens/onboarding/BasicInfoOnboarding.tsx
index 3058a04e..e5e6f59b 100644
--- a/src/screens/onboarding/BasicInfoOnboarding.tsx
+++ b/src/screens/onboarding/BasicInfoOnboarding.tsx
@@ -27,6 +27,7 @@ import {
   nameRegex,
   passwordRegex,
   phoneRegex,
+  TAGG_LIGHT_BLUE_2,
   usernameRegex,
 } from '../../constants';
 import {
@@ -70,9 +71,8 @@ const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
   const [invalidWithError, setInvalidWithError] = useState(
     'Please enter a valid ',
   );
-  const [autoCapitalize, setAutoCap] = useState<
-    'none' | 'sentences' | 'words' | 'characters' | undefined
-  >('none');
+  const [autoCapitalize, setAutoCap] =
+    useState<'none' | 'sentences' | 'words' | 'characters' | undefined>('none');
   const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
     new Animated.Value(0),
   );
@@ -565,7 +565,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   arrow: {
-    color: '#6EE7E7',
+    color: TAGG_LIGHT_BLUE_2,
   },
   showPassContainer: {
     marginVertical: '1%',
-- 
cgit v1.2.3-70-g09d2