restyles accept/reject buttons and headings

3 files changed, 31 insertions, 21 deletions

diff --git a/src/components/common/AcceptDeclineButtons.tsx b/src/components/common/AcceptDeclineButtons.tsx
index 9caaffca..167148f0 100644
--- a/src/components/common/AcceptDeclineButtons.tsx
+++ b/src/components/common/AcceptDeclineButtons.tsx
@@ -4,6 +4,7 @@ import {TAGG_LIGHT_BLUE} from '../../constants';
 import {ProfilePreviewType} from '../../types';
 import {SCREEN_WIDTH} from '../../utils';
 import {TouchableOpacity} from 'react-native-gesture-handler';
+import {normalize} from '../../utils';
 
 interface AcceptDeclineButtonsProps {
   requester: ProfilePreviewType;
@@ -40,18 +41,17 @@ const AcceptDeclineButtons: React.FC<AcceptDeclineButtonsProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    height: '100%',
     flexDirection: 'column',
+    justifyContent: 'space-around',
   },
   genericButtonStyle: {
     justifyContent: 'center',
     alignItems: 'center',
-    width: SCREEN_WIDTH * 0.14,
-    height: SCREEN_WIDTH * 0.06,
-    borderRadius: 5,
+    width: SCREEN_WIDTH * 0.16,
+    height: SCREEN_WIDTH * 0.0525,
+    borderRadius: 3,
     padding: 0,
-    marginTop: 8,
-    marginRight: '3%',
   },
   acceptButton: {
     padding: 0,
@@ -70,8 +70,10 @@ const styles = StyleSheet.create({
   },
   buttonTitle: {
     padding: 0,
-    fontSize: 14,
-    fontWeight: '800',
+    fontWeight: '700',
+    fontSize: normalize(11),
+    lineHeight: normalize(13),
+    letterSpacing: normalize(0.1),
   },
 });
 
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index 1073a479..f83abcbc 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -24,7 +24,12 @@ import {
   ThreadNotificationType,
   UserType,
 } from '../../types';
-import {fetchUserX, SCREEN_HEIGHT, userXInStore} from '../../utils';
+import {
+  fetchUserX,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+  userXInStore,
+} from '../../utils';
 import AcceptDeclineButtons from '../common/AcceptDeclineButtons';
 
 interface NotificationProps {
@@ -251,12 +256,14 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     height: Math.round(SCREEN_HEIGHT / 10),
+    width: SCREEN_WIDTH * 0.9,
     flex: 1,
+    alignSelf: 'center',
     alignItems: 'center',
   },
   avatarContainer: {
-    marginLeft: '8%',
-    flex: 1,
+    height: 42,
+    width: 42,
     justifyContent: 'center',
   },
   avatar: {
@@ -270,7 +277,6 @@ const styles = StyleSheet.create({
     height: '80%',
     flexDirection: 'column',
     justifyContent: 'space-around',
-    marginRight: '15%',
   },
   actorName: {
     fontSize: 15,
@@ -282,7 +288,9 @@ const styles = StyleSheet.create({
     width: 42,
     right: '5%',
   },
-  buttonsContainer: {},
+  buttonsContainer: {
+    height: '80%',
+  },
 });
 
 export default Notification;
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index ca921f75..511680ea 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -21,6 +21,7 @@ import {
 import {RootState} from '../../store/rootReducer';
 import {NotificationType, ScreenType} from '../../types';
 import {getDateAge, SCREEN_HEIGHT} from '../../utils';
+import {normalize} from '../../utils';
 
 const NotificationsScreen: React.FC = () => {
   const {moments: loggedInUserMoments} = useSelector(
@@ -155,7 +156,6 @@ const NotificationsScreen: React.FC = () => {
       <StatusBar barStyle={'dark-content'} />
       <View style={styles.header}>
         <Text style={styles.headerText}>Notifications</Text>
-        <View style={styles.underline} />
       </View>
       {noNotification && (
         <View style={styles.emptyViewContainer}>
@@ -187,12 +187,9 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
   },
   headerText: {
-    fontWeight: 'bold',
-    fontSize: 16,
-  },
-  underline: {
-    borderWidth: 2,
-    borderColor: '#8F01FF',
+    fontWeight: '700',
+    fontSize: normalize(18),
+    lineHeight: normalize(21),
   },
   container: {
     paddingBottom: '20%',
@@ -206,7 +203,10 @@ const styles = StyleSheet.create({
     marginLeft: '8%',
     marginTop: '5%',
     marginBottom: '2%',
-    fontSize: 15,
+    fontWeight: '600',
+    fontSize: normalize(12),
+    lineHeight: normalize(14),
+    color: '#828282',
   },
   emptyViewContainer: {
     marginTop: '22%',