Adjust styling

1 files changed, 24 insertions, 10 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index b229d010..24ff830a 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -24,10 +24,15 @@ import {MentionInputControlled} from './MentionInputControlled';
 export interface AddCommentProps {
   momentId: string;
   placeholderText: string;
+  theme?: 'dark' | 'white';
 }
 
-const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
-  const {setShouldUpdateAllComments, commentTapped} =
+const AddComment: React.FC<AddCommentProps> = ({
+  momentId,
+  placeholderText,
+  theme = 'white',
+}) => {
+  const {setShouldUpdateAllComments = () => null, commentTapped} =
     useContext(CommentContext);
   const [inReplyToMention, setInReplyToMention] = useState('');
   const [comment, setComment] = useState('');
@@ -106,13 +111,14 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
       keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}>
       <View
         style={[
-          styles.container,
-          keyboardVisible ? styles.whiteBackround : {},
+          theme === 'white' ? styles.containerWhite : styles.containerDark,
+          keyboardVisible && theme !== 'dark' ? styles.whiteBackround : {},
         ]}>
         <View style={styles.textContainer}>
           <Avatar style={styles.avatar} uri={avatar} />
           <MentionInputControlled
             containerStyle={styles.text}
+            placeholderTextColor={theme === 'dark' ? '#828282' : undefined}
             placeholder={placeholderText}
             value={inReplyToMention + comment}
             onChange={(newText: string) => {
@@ -124,11 +130,15 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
             inputRef={ref}
             partTypes={mentionPartTypes('blue')}
           />
-          <View style={styles.submitButton}>
-            <TouchableOpacity style={styles.submitButton} onPress={addComment}>
-              <UpArrowIcon width={35} height={35} color={'white'} />
-            </TouchableOpacity>
-          </View>
+          {(theme === 'white' || (theme === 'dark' && keyboardVisible)) && (
+            <View style={styles.submitButton}>
+              <TouchableOpacity
+                style={styles.submitButton}
+                onPress={addComment}>
+                <UpArrowIcon width={35} height={35} color={'white'} />
+              </TouchableOpacity>
+            </View>
+          )}
         </View>
       </View>
     </KeyboardAvoidingView>
@@ -136,7 +146,11 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
 };
 
 const styles = StyleSheet.create({
-  container: {
+  containerDark: {
+    alignItems: 'center',
+    width: SCREEN_WIDTH,
+  },
+  containerWhite: {
     backgroundColor: '#f7f7f7',
     alignItems: 'center',
     width: SCREEN_WIDTH,