Remove moment post button, Update to use square button

1 files changed, 46 insertions, 15 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 86628d16..86e30bdc 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -22,10 +22,11 @@ import {
   MentionInputControlled,
   MomentPostButton,
   SearchBackground,
+  TaggSquareButton,
 } from '../../components';
 import {CaptionScreenHeader} from '../../components/';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
-import {TAGG_LIGHT_BLUE_2} from '../../constants';
+import {TAGG_LIGHT_BLUE, TAGG_LIGHT_BLUE_2} from '../../constants';
 import {
   ERROR_NO_MOMENT_CATEGORY,
   ERROR_SOMETHING_WENT_WRONG_REFRESH,
@@ -46,7 +47,7 @@ import {
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {MomentTagType} from '../../types';
-import {normalize, StatusBarHeight} from '../../utils';
+import {normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 
 /**
@@ -268,12 +269,6 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 buttonStyle={styles.button}
                 onPress={() => navigation.goBack()}
               />
-              <Button
-                title={moment ? 'Done' : 'Share'}
-                titleStyle={styles.shareButtonTitle}
-                buttonStyle={styles.button}
-                onPress={moment ? handleDoneEditing : handleShare}
-              />
             </View>
             <CaptionScreenHeader style={styles.header} title={'Moments'} />
             <View style={styles.captionContainer}>
@@ -292,7 +287,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               )}
               <MentionInputControlled
                 style={styles.text}
-                containerStyle={styles.textContainer}
+                containerStyle={styles.flex}
                 placeholder="Write something....."
                 placeholderTextColor="white"
                 value={caption}
@@ -318,7 +313,28 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 })
               }
             />
-            <MomentPostButton enabled={true} onPress={() => null} />
+            {momentCategory ? (
+              <TaggSquareButton
+                onPress={moment ? handleDoneEditing : handleShare}
+                title={'Post'}
+                buttonStyle={'large'}
+                buttonColor={'blue'}
+                labelColor={'white'}
+                style={styles.postButton}
+                labelStyle={styles.postText}
+              />
+            ) : (
+              <TaggSquareButton
+                disabled={true}
+                onPress={moment ? handleDoneEditing : handleShare}
+                title={'Post'}
+                buttonStyle={'large'}
+                buttonColor={'blue'}
+                labelColor={'white'}
+                style={[styles.postButton, styles.greyBackground]}
+                labelStyle={styles.postText}
+              />
+            )}
           </View>
         </KeyboardAvoidingView>
       </TouchableWithoutFeedback>
@@ -364,12 +380,8 @@ const styles = StyleSheet.create({
     fontSize: normalize(12),
     lineHeight: 14,
     fontWeight: '500',
-  },
-  textContainer: {
-    flex: 1,
     height: normalize(150),
     marginLeft: normalize(15),
-    color: 'white',
   },
   flex: {
     flex: 1,
@@ -386,7 +398,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    marginBottom: normalize(20),
+    marginBottom: normalize(42),
   },
   asteriskText: {
     color: TAGG_LIGHT_BLUE_2,
@@ -413,6 +425,25 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
   },
+  greyBackground: {
+    backgroundColor: '#C4C4C4',
+  },
+  postButton: {
+    width: SCREEN_WIDTH * 0.8,
+    height: normalize(37),
+    backgroundColor: TAGG_LIGHT_BLUE,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 6,
+    alignSelf: 'center',
+  },
+  postText: {
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: normalize(15),
+    lineHeight: 18,
+    letterSpacing: 2,
+  },
 });
 
 export default CaptionScreen;