2 files changed, 58 insertions, 18 deletions

diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index b49e71a3..3785cb16 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -9,11 +9,16 @@ import {
   updateUserXFriends,
   updateUserXProfileAllScreens,
 } from '../../store/actions';
+import {canViewProfile} from '../../utils/users';
 import {NO_PROFILE} from '../../store/initialStates';
 import {RootState} from '../../store/rootReducer';
 import {ScreenType} from '../../types';
-import {getUserAsProfilePreviewType} from '../../utils';
-import {FriendsButton} from '../common';
+import {
+  getUserAsProfilePreviewType,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+} from '../../utils';
+import {FriendsButton, BasicButton} from '../common';
 import ToggleButton from './ToggleButton';
 
 interface ProfileBodyProps {
@@ -60,6 +65,19 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
     dispatch(updateUserXProfileAllScreens(id, state));
   };
 
+  const canMessage = () => {
+    if (
+      userXId &&
+      !isBlocked &&
+      (friendship_status === 'no_record' || friendship_status === 'friends') &&
+      canViewProfile(state, userXId, screenType)
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
   return (
     <View onLayout={onLayout} style={styles.container}>
       <Text style={styles.username}>{`@${username}`}</Text>
@@ -85,17 +103,33 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
           />
         </View>
       )}
-      {userXId && !isBlocked && (
-        <View style={styles.buttonsContainer}>
-          <FriendsButton
-            userXId={userXId}
-            screenType={screenType}
-            friendship_requester_id={friendship_requester_id}
-            onAcceptRequest={handleAcceptRequest}
-            onRejectRequest={handleDeclineFriendRequest}
-          />
-        </View>
-      )}
+      <View style={styles.simpleRowContainer}>
+        {userXId && !isBlocked && (
+          <View style={styles.buttonsContainer}>
+            <FriendsButton
+              userXId={userXId}
+              screenType={screenType}
+              friendship_requester_id={friendship_requester_id}
+              onAcceptRequest={handleAcceptRequest}
+              onRejectRequest={handleDeclineFriendRequest}
+            />
+            {canMessage() && (
+              <BasicButton
+                title={'Message'}
+                onPress={() => {
+                  console.log('Navigate to the individual chat screen');
+                }}
+                externalStyles={{
+                  container: {
+                    width: SCREEN_WIDTH * 0.42,
+                    aspectRatio: 154 / 33,
+                  },
+                }}
+              />
+            )}
+          </View>
+        )}
+      </View>
     </View>
   );
 };
@@ -107,11 +141,15 @@ const styles = StyleSheet.create({
     paddingTop: '3.5%',
     paddingBottom: '2%',
   },
+  simpleRowContainer: {flexDirection: 'row'},
   buttonsContainer: {
     flex: 1,
     paddingTop: '3.5%',
     paddingBottom: '2%',
     width: '50%',
+    height: SCREEN_HEIGHT * 0.1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
   },
   container: {
     paddingVertical: '1%',
diff --git a/src/components/profile/ToggleButton.tsx b/src/components/profile/ToggleButton.tsx
index 236d811c..ad05c1c4 100644
--- a/src/components/profile/ToggleButton.tsx
+++ b/src/components/profile/ToggleButton.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import {TAGG_LIGHT_BLUE} from '../../constants';
-import {getToggleButtonText, SCREEN_WIDTH} from '../../utils';
+import {getToggleButtonText, normalize, SCREEN_WIDTH} from '../../utils';
 
 type ToggleButtonProps = {
   toggleState: boolean;
@@ -34,15 +34,17 @@ const styles = StyleSheet.create({
   button: {
     justifyContent: 'center',
     alignItems: 'center',
-    width: SCREEN_WIDTH * 0.4,
+    width: SCREEN_WIDTH * 0.42,
     height: SCREEN_WIDTH * 0.08,
     borderColor: TAGG_LIGHT_BLUE,
-    borderWidth: 3,
-    borderRadius: 5,
+    borderWidth: 1,
+    borderRadius: 2,
     marginRight: '2%',
   },
   text: {
-    fontWeight: 'bold',
+    fontWeight: '700',
+    fontSize: normalize(15),
+    letterSpacing: 1,
   },
   buttonColor: {
     backgroundColor: TAGG_LIGHT_BLUE,