UI Fixes

src/components/molecules/Cards/NotificationCard.js

@@ -21,8 +21,9 @@ const NotificationCard = ({ navigation, profileImage, tagline, headline, timesta
       alignItems: 'center',
       padding: 8,
       height: 88,
-      backgroundColor: colors().dominant,
-      borderRadius: 16
+      backgroundColor: colors().dominant_variant,
+      borderRadius: 16,
+      elevation: moderateScale(4)
     },
     profileIcon: {
       height: PROFILE_IMAGE,
@@ -37,7 +38,7 @@ const NotificationCard = ({ navigation, profileImage, tagline, headline, timesta
     },
     headline: {
       fontFamily: fonts.type.bold,
-      color: colors().grayShade_100,
+      color: colors().recessive_variant,
       fontSize: moderateScale(12)
     },
     tagline: {

src/components/organisms/Sections/NotificationSection.js

@@ -5,26 +5,29 @@ import colors from '../../../constants/colors'
 import images from '../../../assets/images/images'
 import { getDate } from '../../../constants/functions'
 import NotificationCard from '../../molecules/Cards/NotificationCard'
+import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics'
 
 
-const NotificationSection = ({ navigation }) => {
+const NotificationSection = ({ navigation, timestamp, notifications }) => {
 
 
   const styles = StyleSheet.create({
     timestampText: {
-      padding: 8,
+      paddingHorizontal: horizontalScale(16),
+      paddingVertical: verticalScale(8),
       fontFamily: fonts.type.light,
-      color: colors().grayShade_100
+      color: colors().grayShade_400
     },
     notificationContainer: {
-
+      backgroundColor: colors().dominant,
+      minHeight: '100%'
     }
   })
 
   return (
-    <View >
+    <View style={styles.notificationContainer}>
       <Text style={styles.timestampText}>{getDate("2023-06-16T11:57:52.458032Z")}</Text>
-      <View style={{ paddingHorizontal: 8, gap: 8 }}>
+      <View style={{ paddingHorizontal: horizontalScale(16), gap: moderateScale(8) }}>
         <NotificationCard
           image={images.imageCard}
           profileImage={images.horizontalCard}

src/screens/Bookmarks/BookmarkPage.js

@@ -9,7 +9,7 @@ import HorizontalNewsCardVariant from '../../components/molecules/Cards/Horizont
 import { horizontalScale, verticalScale } from '../../constants/metrics'
 const BookmarkPage = props => {
 
-  const [bookmarks, setBookmarks] = React.useState([0, 0, 0, 0, 0])
+  const [bookmarks, setBookmarks] = React.useState([0,0,0])
 
   const { navigation, route } = props
 
@@ -19,12 +19,14 @@ const BookmarkPage = props => {
       paddingVertical: verticalScale(16),
       paddingHorizontal: horizontalScale(16),
       gap: verticalScale(8),
-      flexDirection:'row'
+      flexDirection:'row',
+      flexWrap: 'wrap',
+      minHeight: '100%'
     }
   })
 
   return (
-    <View style={{ backgroundColor: colors().dominant }}>
+    <View style={{ backgroundColor: colors().dominant, }}>
       <NewscoutTitleHeader title={"My Bookmarks"} backButtonShown={true}>
         <TouchableWithoutFeedback onPress={() => { navigation.toggleDrawer() }}>
           <OctiIcon name='three-bars' size={24} color={colors().primaryColor} />

src/screens/Help/ContactPage.js

@@ -25,9 +25,9 @@ const ContactPage = props => {
                 <SafeAreaView style={{ padding: 16, gap: 8 }}>
                     {Object.keys(contactDetails).map(key => <FormTextInput
                         title={capitalize(key)}
-                        multiline
                         placeholder={capitalize(key)}
                         value={contactDetails[key]}
+                        multiline={key === "message" ? true : false}
                         onChange={text =>
                             setProfileData(prev => ({ ...prev, [key]: text }))
                         }

src/screens/Notifications/NotificationPage.js

@@ -4,6 +4,7 @@ import { SafeAreaView } from 'react-native-safe-area-context'
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
 import NewscoutCenteredTitleHeader from '../../components/molecules/Header/NewscoutCenteredTitleHeader'
 import colors from '../../constants/colors'
+import NotificationSection from '../../components/organisms/Sections/NotificationSection'
 
 
 const NotificationPage = props => {
@@ -16,6 +17,7 @@ const NotificationPage = props => {
                     <MaterialIcon name='list' color={colors().primaryColor} size={30} />
                 </TouchableWithoutFeedback>
             </NewscoutCenteredTitleHeader>
+            <NotificationSection/>
         </SafeAreaView>
     )
 }

src/screens/Profile/ProfilePage.js

@@ -161,7 +161,6 @@ const ProfilePage = props => {
               );
             })}
           </ToggleButton.Group>
-          {/* </ScrollView> */}
         </View>
         <View style={styles.profileCardContainer}>
           <FlatList

src/screens/Sidebar/SidebarPage.js

@@ -111,7 +111,8 @@ const SidebarPage = ({ navigation, route }) => {
 
 
   return (
-    <View style={{backgroundColor: colors().dominant}}>
+    <View >
+       <ScrollView style={{backgroundColor: colors().dominant, minHeight: '100%'}} showsVerticalScrollIndicator={false}>
       <NewscoutHomeHeader />
       <View style={styles.sideBarContainer}>
 
@@ -119,7 +120,7 @@ const SidebarPage = ({ navigation, route }) => {
           <CircularPrimaryBackButton onPress={() => navigation.toggleDrawer()} />
         </View>
 
-        <ScrollView showsVerticalScrollIndicator={false}>
+       
           <View style={styles.accordionContainer}>
             <List.AccordionGroup
               expandedId={expandedId}
@@ -194,8 +195,9 @@ const SidebarPage = ({ navigation, route }) => {
               })}
             </List.AccordionGroup>
           </View>
-        </ScrollView>
+        
       </View>
+      </ScrollView>
     </View>
   );
 };