Issue 675 UI Fixes

src/components/atoms/Header/Header.js

@@ -23,10 +23,10 @@ const Header = ({ headerStyle, children, backButtonShown, onBackClick, backIconT
   return (
     <View style={[styles.headerContainer, headerStyle]}>
 
-      <View style={{ flexDirection: 'row', gap: horizontalScale(4), alignItems:'center' }}>
-        <TouchableOpacity onPress={onBackClick}>
-          {backButtonShown === true && backButtonShown !== undefined ? <FeatherIcon name='chevron-left' size={24} color={colors().recessive} /> : <></>}
-        </TouchableOpacity>
+      <View style={{ flexDirection: 'row', gap: horizontalScale(4), alignItems: 'center' }}>
+        {backButtonShown === true && backButtonShown !== undefined ? <TouchableOpacity style={{ paddingHorizontal: 8 }} onPress={onBackClick}>
+          <FeatherIcon name='chevron-left' size={24} color={colors().recessive} />
+        </TouchableOpacity> : <></>}
         {backIconTextComponent}
       </View>
       {children}

src/components/molecules/Cards/HorizontalNewsCardVariant.js

@@ -100,21 +100,16 @@ const HorizontalNewsCardVariant = ({ headline, image, category, timestamp, tagli
       padding: moderateScale(8),
       width: 64,
       justifyContent: 'space-between'
-      //  padding:0
-      // alignItems: 'flex-start',
-      // justifyContent: 'flex-end',
-      // backgroundColor: colors.black
     }
   })
 
 
   return (
-    // <TouchableWithoutFeedback onPress={onPress}>
       <View style={styles.cardContainer}>
         <View style={styles.topSection}>
           <View style={styles.textContainer}>
             <TouchableWithoutFeedback onPress={onPress}>
-              <Text style={styles.headline}>{headline ?? "Battlegrounds Mobile India iOS release date"}</Text>
+              <Text numberOfLines={4} style={styles.headline}>{headline ?? "Battlegrounds Mobile India iOS release date"}</Text>
             </TouchableWithoutFeedback>
           </View>
           <View style={styles.imageContainer}>
@@ -133,7 +128,6 @@ const HorizontalNewsCardVariant = ({ headline, image, category, timestamp, tagli
           </View>
         </View>
       </View>
-    // </TouchableWithoutFeedback>
   )
 }
 

src/components/molecules/Cards/ImageBGCard.js

@@ -1,4 +1,4 @@
-import { StyleSheet, Text, ImageBackground, TouchableOpacity } from 'react-native'
+import { StyleSheet, Text, ImageBackground, Pressable } from 'react-native'
 import React from 'react'
 import LinearGradient from 'react-native-linear-gradient'
 import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics'
@@ -34,7 +34,7 @@ const ImageBGCard = ({image, author, headline, onPress, }) => {
   })
 
   return (
-    <TouchableOpacity onPress={onPress}>
+    <Pressable onPress={onPress}>
       <ImageBackground source={image}
         imageStyle={{ borderRadius: moderateScale(8), }}
         style={styles.cardImage}
@@ -52,7 +52,7 @@ const ImageBGCard = ({image, author, headline, onPress, }) => {
         </LinearGradient>
       </ImageBackground>
 
-    </TouchableOpacity>
+    </Pressable>
   )
 }
 

src/components/molecules/Cards/VerticalNewsCard.js

@@ -45,22 +45,10 @@ const VerticalNewsCard = ({ image, headline, tagline, style, timestamp, onPress
             fontSize: moderateScale(13),
             color: colors().recessive,
             paddingBottom: 4,
-            // width: '100%'
         },
-        // tagline: {
-        //     fontSize: 12,
-        //     fontFamily: fonts.type.regular,
-        //     height: 'auto',
-        //     maxHeight: '25%',
-        //     overflow: 'hidden',
-        //     color: colors().recessive
-
-        // },
         descriptorContainer: {
             flexDirection: 'row',
-            // padding: moderateScale(16),
             justifyContent: 'space-between',
-            // alignItems: 'baseline'
         },
         timeDescriptor: {
             color: colors().recessive_variant,
@@ -90,8 +78,8 @@ const VerticalNewsCard = ({ image, headline, tagline, style, timestamp, onPress
                 </View>
                 <View style={styles.detailsContainer}>
 
-                    <Text style={styles.headline}> {headline}</Text>
-                    {/* <Text style={styles.tagline}>{tagline}</Text> */}
+                    <Text numberOfLines={4} style={styles.headline}> {headline}</Text>
+                  
 
                     <View style={styles.descriptorContainer}>
                         <Text style={styles.timeDescriptor}>{getTimestamp(timestamp)}</Text>

src/components/molecules/Header/NewscoutHomeHeader.js

@@ -14,7 +14,6 @@ const NewscoutHomeHeader = ({ children, backButtonShown, onBackClick, headerStyl
     headerLogo: {
       height: moderateScale(64),
       width: moderateScale(64),
-      marginLeft: backButtonShown ? horizontalScale(16) : 0 
     },
     header:{
       backgroundColor: colors().dominant,

src/components/organisms/Sections/NotificationSection.js

@@ -15,8 +15,8 @@ const NotificationSection = ({ navigation, timestamp, notifications }) => {
     timestampText: {
       paddingHorizontal: horizontalScale(16),
       paddingVertical: verticalScale(8),
-      fontFamily: fonts.type.light,
-      color: colors().grayShade_400
+      fontFamily: fonts.type.regular,
+      color: colors().grayShade_200
     },
     notificationContainer: {
       backgroundColor: colors().dominant,

src/components/organisms/Sections/TrendingSection.js

@@ -32,8 +32,8 @@ const TrendingSection = props => {
 
   const [currentCardIndex, setCurrentCardIndex] = React.useState(0);
   const updateCurrentIndex = index => {
-    console.log('current index:', index);
     setCurrentCardIndex(index);
+    console.log('current index:', index);
   };
 
   const [posts, setPosts] = React.useState([]);
@@ -91,7 +91,7 @@ const TrendingSection = props => {
 
   return (
     <View>
-      <SectionHeader label={'Trending'} onPress={() => navigateToListViewPage(navigation,"normal","Trending")}/>
+      <SectionHeader label={'Trending'} onPress={() => navigateToListViewPage(navigation, "normal", "Trending")} />
       <View style={styles.recentCardContainer}>
         {isLoading === true ? (
           <LoadingScreen containerHeight={ITEM_HEIGHT} containerWidth={ITEM_WIDTH} />
@@ -103,12 +103,16 @@ const TrendingSection = props => {
             style={styles.recentCardContainer}
             autoPlay={true}
             data={posts}
-            scrollAnimationDuration={2000}
+            scrollAnimationDuration={1500}
             mode="parallax"
             modeConfig={{
               parallaxScrollingScale: 1,
               parallaxScrollingOffset: 1,
             }}
+            panGestureHandlerProps={{
+              activeOffsetX: [-50, 1050],
+            }}
+            pagingEnabled
             onSnapToItem={index => updateCurrentIndex(index)}
             renderItem={({ index, item }) => (
               <View style={{ paddingHorizontal: 16 }}>

src/constants/metrics.js

@@ -16,13 +16,11 @@ Use ModerateScale for font-size, borderRadius , likewise
 
 */
 
+const screenWidth =  width < height ? width : height
+const screenHeight = width < height ? height: width
 
-const screenDimensions = Dimensions.get("window")
-const screenWidth = screenDimensions.width
-const screenHeight = screenDimensions.height
-
-const horizontalScale = (size) => (width / guidelineBaseWidth) * size;
-const verticalScale = (size) => (height / guidelineBaseHeight) * size;
+const horizontalScale = (size) => (screenWidth / guidelineBaseWidth) * size;
+const verticalScale = (size) => (screenHeight / guidelineBaseHeight) * size;
 const moderateScale = (size, factor = 0.5) => size + (horizontalScale(size) - size) * factor;
 
 export { horizontalScale, verticalScale, moderateScale, screenHeight,screenWidth};

src/screens/News/NewsDetailPage.js

@@ -14,6 +14,7 @@ import colors from '../../constants/colors';
 import {
   horizontalScale,
   moderateScale,
+  screenWidth,
   verticalScale,
 } from '../../constants/metrics';
 import {
@@ -172,9 +173,10 @@ const NewsDetailPage = props => {
     },
     commentInput: {
       marginVertical: verticalScale(16),
-      alignItems: 'stretch',
+      alignItems: 'flex-start',
+      justifyContent:'space-between',
       flexDirection: 'row',
-      flex: 1
+      maxWidth: '100%',
     },
     utilButtons: {
       flexDirection: 'row',
@@ -332,7 +334,7 @@ const NewsDetailPage = props => {
                         </ButtonWrapper>
                       
                     </BottomSheetView>
-                    <BottomSheetView style={styles.commentInput}>
+                    <View style={styles.commentInput}>
                       <Image
                         source={images.imageCard}
                         style={[styles.profileImage]}
@@ -346,15 +348,16 @@ const NewsDetailPage = props => {
                         dense
                         style={{
                           backgroundColor: colors().dominant,
-                          height: verticalScale(64),
-                        
-                          flexGrow: 1
+                          minHeight: verticalScale(64),
+                          flex: 1,
+                          paddingVertical: verticalScale(8)
 
                         }}
                         contentStyle={{
                           color: colors().recessive,
                           fontFamily: fonts.type.regular,
                           fontSize: moderateScale(16),
+                         
 
                         }}
                         outlineStyle={{
@@ -363,7 +366,7 @@ const NewsDetailPage = props => {
                         }}
                         cursorColor={colors().primaryColor}
                       />
-                    </BottomSheetView>
+                    </View>
                     <>
                       <Text
                         style={{
@@ -393,14 +396,14 @@ const NewsDetailPage = props => {
           contentContainerStyle={styles.recommendationContainer}
           style={{ flexDirection: 'row' }}
           showsHorizontalScrollIndicator={false}>
-          {recommendations.map(item => (
+          { recommendations.length > 0 ? recommendations.map(item => (
             <VerticalNewsCard
               image={{ uri: item.cover_image }}
               headline={item.title}
               timestamp={item.published_on}
               onPress={() => navigateToArticle(navigation, item.id, item.slug)}
             />
-          ))}
+          )) : <LoadingScreen containerHeight={verticalScale(240)} containerWidth={screenWidth}/>}
         </ScrollView>
       </ScrollView>
     </BottomSheetModalProvider>

src/screens/Notifications/NotificationPage.js

@@ -1,7 +1,7 @@
 import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
 import React from 'react'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
+import OctiIcon from 'react-native-vector-icons/Octicons'
 import NewscoutCenteredTitleHeader from '../../components/molecules/Header/NewscoutCenteredTitleHeader'
 import colors from '../../constants/colors'
 import NotificationSection from '../../components/organisms/Sections/NotificationSection'
@@ -14,7 +14,7 @@ const NotificationPage = props => {
         <SafeAreaView>
             <NewscoutCenteredTitleHeader title={"Notifications"} backButtonShown={true} onBackClick={() => navigation.goBack()}>
                 <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
-                    <MaterialIcon name='list' color={colors().primaryColor} size={30} />
+                    <OctiIcon name='three-bars' color={colors().primaryColor} size={24} />
                 </TouchableWithoutFeedback>
             </NewscoutCenteredTitleHeader>
             <NotificationSection/>

src/screens/Sidebar/SidebarPage.js

@@ -102,11 +102,6 @@ const SidebarPage = ({ navigation, route }) => {
         <NewscoutHomeHeader backButtonShown={true} onBackClick={() => navigation.toggleDrawer()} />
         <View style={styles.sideBarContainer}>
 
-          {/* <View style={styles.buttonContainer}>
-            <CircularPrimaryBackButton onPress={() => navigation.toggleDrawer()} />
-          </View> */}
-
-
           <View style={styles.accordionContainer}>
             <List.AccordionGroup
               expandedId={expandedId}