From 3ca4283077507f5cee319afd9cd39cb50871f486 Mon Sep 17 00:00:00 2001
From: minhloi <jimmyloi92@yahoo.com>
Date: Wed, 12 Aug 2020 11:56:04 -0700
Subject: [PATCH] fix: add tip on how to add images

---
 .../src/views/image/SearchInput.tsx           |  2 +-
 .../AddEditVocabularyScreen.style.ts          | 32 +++++++++++++++++--
 .../vocabulary/AddEditVocabularyScreen.tsx    | 18 ++++++++++-
 .../vocabulary/ExtraFieldsPickerContent.tsx   |  2 +-
 4 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/packages/ulangi-mobile/src/views/image/SearchInput.tsx b/packages/ulangi-mobile/src/views/image/SearchInput.tsx
index d82b0846..84935900 100644
--- a/packages/ulangi-mobile/src/views/image/SearchInput.tsx
+++ b/packages/ulangi-mobile/src/views/image/SearchInput.tsx
@@ -66,7 +66,7 @@ export class SearchInput extends React.Component<SearchInputProps> {
     return (
       <View style={this.styles.input_container}>
         <DefaultTextInput
-          placeholder="Type topics to search..."
+          placeholder="Type to search images..."
           ref={(ref): void => {
             this.textInputRef = ref;
           }}
diff --git a/packages/ulangi-mobile/src/views/vocabulary/AddEditVocabularyScreen.style.ts b/packages/ulangi-mobile/src/views/vocabulary/AddEditVocabularyScreen.style.ts
index e1648498..1f1e4879 100644
--- a/packages/ulangi-mobile/src/views/vocabulary/AddEditVocabularyScreen.style.ts
+++ b/packages/ulangi-mobile/src/views/vocabulary/AddEditVocabularyScreen.style.ts
@@ -5,14 +5,18 @@
  * See LICENSE or go to https://www.gnu.org/licenses/gpl-3.0.txt
  */
 
-import { ViewStyle } from 'react-native';
+import { TextStyle, ViewStyle } from 'react-native';
 
+import { config } from '../../constants/config';
 import { ResponsiveStyleSheet, ScaleByFactor } from '../../utils/responsive';
 
 export interface AddEditVocabularyScreenStyles {
   screen: ViewStyle;
   scrollview: ViewStyle;
   preview_container: ViewStyle;
+  tip_container: ViewStyle;
+  tip: TextStyle;
+  bold: TextStyle;
 }
 
 export class AddEditVocabularyScreenResponsiveStyles extends ResponsiveStyleSheet<
@@ -36,15 +40,37 @@ export class AddEditVocabularyScreenResponsiveStyles extends ResponsiveStyleShee
         alignSelf: 'stretch',
         justifyContent: 'center',
       },
+
+      tip_container: {
+        paddingHorizontal: scaleByFactor(16),
+        paddingVertical: scaleByFactor(14),
+      },
+
+      tip: {
+        textAlign: 'center',
+        fontSize: scaleByFactor(13),
+      },
+
+      bold: {
+        fontWeight: 'bold',
+      },
     };
   }
 
   public lightStyles(): Partial<AddEditVocabularyScreenStyles> {
-    return {};
+    return {
+      tip: {
+        color: config.styles.light.secondaryTextColor,
+      },
+    };
   }
 
   public darkStyles(): Partial<AddEditVocabularyScreenStyles> {
-    return {};
+    return {
+      tip: {
+        color: config.styles.dark.secondaryTextColor,
+      },
+    };
   }
 }
 
diff --git a/packages/ulangi-mobile/src/views/vocabulary/AddEditVocabularyScreen.tsx b/packages/ulangi-mobile/src/views/vocabulary/AddEditVocabularyScreen.tsx
index df85ddd5..803267a0 100644
--- a/packages/ulangi-mobile/src/views/vocabulary/AddEditVocabularyScreen.tsx
+++ b/packages/ulangi-mobile/src/views/vocabulary/AddEditVocabularyScreen.tsx
@@ -12,9 +12,10 @@ import {
 } from '@ulangi/ulangi-observable';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { ScrollView } from 'react-native';
+import { ScrollView, View } from 'react-native';
 
 import { AddEditVocabularyScreenDelegate } from '../../delegates/vocabulary/AddEditVocabularyScreenDelegate';
+import { DefaultText } from '../common/DefaultText';
 import { DismissKeyboardView } from '../common/DismissKeyboardView';
 import { Screen } from '../common/Screen';
 import { SmartScrollView } from '../common/SmartScrollView';
@@ -93,6 +94,7 @@ export class AddEditVocabularyScreen extends React.Component<
               addDefinitionSlot={this.props.screenDelegate.addDefinitionSlot}
               deleteDefinition={this.props.screenDelegate.deleteDefinition}
             />
+            {this.renderTip()}
           </DismissKeyboardView>
         </SmartScrollView>
       </React.Fragment>
@@ -111,4 +113,18 @@ export class AddEditVocabularyScreen extends React.Component<
       </ScrollView>
     );
   }
+
+  private renderTip(): React.ReactElement<any> {
+    return (
+      <View style={this.styles.tip_container}>
+        <DefaultText style={this.styles.tip}>
+          <DefaultText style={this.styles.bold}>Tip: </DefaultText>
+          <DefaultText>To add images, tap on </DefaultText>
+          <DefaultText style={this.styles.bold}>Extra fields</DefaultText>
+          <DefaultText> button for definitions then press </DefaultText>
+          <DefaultText style={this.styles.bold}>Search images</DefaultText>.
+        </DefaultText>
+      </View>
+    );
+  }
 }
diff --git a/packages/ulangi-mobile/src/views/vocabulary/ExtraFieldsPickerContent.tsx b/packages/ulangi-mobile/src/views/vocabulary/ExtraFieldsPickerContent.tsx
index 905fd014..9b6eb046 100644
--- a/packages/ulangi-mobile/src/views/vocabulary/ExtraFieldsPickerContent.tsx
+++ b/packages/ulangi-mobile/src/views/vocabulary/ExtraFieldsPickerContent.tsx
@@ -113,7 +113,7 @@ export class ExtraFieldsPickerContent extends React.Component<
       <View style={this.styles.btn_container}>
         {detail.templateName === 'image'
           ? this.renderButton(
-              'Select images',
+              'Search images',
               (): void => {
                 this.props.selectImages();
               },