Added new button and resytles existing buttons

5 files changed, 138 insertions, 20 deletions

diff --git a/src/components/common/BasicButton.tsx b/src/components/common/BasicButton.tsx
new file mode 100644
index 00000000..0822c66e
--- /dev/null
+++ b/src/components/common/BasicButton.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {normalize} from '../../utils';
+
+interface BasicButtonProps {
+  title: string;
+  onPress: () => void;
+  solid?: boolean;
+  externalStyles?: Record<string, StyleProp<ViewStyle>>;
+}
+const BasicButton: React.FC<BasicButtonProps> = ({
+  title,
+  onPress,
+  solid,
+  externalStyles,
+}) => {
+  return (
+    <View style={[styles.container, externalStyles?.container]}>
+      <TouchableOpacity
+        style={[
+          styles.genericButtonStyle,
+          solid ? styles.solidButton : styles.outlineButton,
+        ]}
+        onPress={onPress}>
+        <Text
+          style={[
+            styles.buttonTitle,
+            solid
+              ? styles.solidButtonTitleColor
+              : styles.outlineButtonTitleColor,
+          ]}>
+          {title}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+    flexDirection: 'column',
+    justifyContent: 'space-around',
+  },
+  genericButtonStyle: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 2,
+    padding: 0,
+    width: '100%',
+    height: '100%',
+  },
+  solidButton: {
+    padding: 0,
+    backgroundColor: TAGG_LIGHT_BLUE,
+  },
+  outlineButton: {
+    borderWidth: 1,
+    backgroundColor: 'white',
+    borderColor: TAGG_LIGHT_BLUE,
+  },
+  solidButtonTitleColor: {
+    color: 'white',
+  },
+  outlineButtonTitleColor: {
+    color: TAGG_LIGHT_BLUE,
+  },
+  buttonTitle: {
+    fontSize: normalize(15),
+    fontWeight: '700',
+    letterSpacing: 1,
+  },
+});
+
+export default BasicButton;
diff --git a/src/components/common/FriendsButton.tsx b/src/components/common/FriendsButton.tsx
index 46421bd1..1bb39e57 100644
--- a/src/components/common/FriendsButton.tsx
+++ b/src/components/common/FriendsButton.tsx
@@ -100,11 +100,11 @@ const styles = StyleSheet.create({
   button: {
     justifyContent: 'center',
     alignItems: 'center',
-    width: SCREEN_WIDTH * 0.4,
+    width: SCREEN_WIDTH * 0.42,
     aspectRatio: 154 / 33,
     borderWidth: 2,
     borderColor: TAGG_LIGHT_BLUE,
-    borderRadius: 3,
+    borderRadius: 2,
     marginRight: '2%',
     marginLeft: '1%',
   },
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 8499dbfa..b5fd0542 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -23,3 +23,4 @@ export {default as AcceptDeclineButtons} from './AcceptDeclineButtons';
 export {default as FriendsButton} from './FriendsButton';
 export {default as TaggSquareButton} from './TaggSquareButton';
 export {default as GradientBorderButton} from './GradientBorderButton';
+export {default as BasicButton} from './BasicButton';
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,