fix extra padding emi schedule (#320)

* add pressable chip style TP-27535

* match according to design TP-27535

* fix padding between loan and tabs tp-27535

src/screens/emiSchedule/EmiScheduleTab.tsx

@@ -1,4 +1,4 @@
-import { View, FlatList } from 'react-native';
+import { View, FlatList, StyleProp, ViewStyle } from 'react-native';
 import React, { useState } from 'react';
 import EmiScheduleItem from './EmiScheduleItem';
 import PressableChip from '../../../RN-UI-LIB/src/components/PressableChip';
@@ -15,6 +15,10 @@ export enum EmiSelectedTab {
   ALL = 'ALL',
 }
 
+const pressableChipStyle: StyleProp<ViewStyle> = {
+  marginTop: 0,
+};
+
 interface IEmiScheduleTab {
   loanAccountNumber: string;
 }
@@ -28,7 +32,7 @@ const EmiScheduleTab: React.FC<IEmiScheduleTab> = (props) => {
   return (
     <View
       style={{
-        paddingBottom: 100,
+        paddingBottom: 50,
       }}
     >
       <View style={[GenericStyles.row, GenericStyles.alignCenter, GenericStyles.mb8]}>
@@ -37,18 +41,21 @@ const EmiScheduleTab: React.FC<IEmiScheduleTab> = (props) => {
           checked={selectedTab === EmiSelectedTab.UNPAID}
           label="Unpaid"
           key={1}
+          containerStyles={pressableChipStyle}
         />
         <PressableChip
           onSelectionChange={() => setSelectedTab(EmiSelectedTab.PAID)}
           checked={selectedTab === EmiSelectedTab.PAID}
           label="Paid"
           key={2}
+          containerStyles={pressableChipStyle}
         />
         <PressableChip
           onSelectionChange={() => setSelectedTab(EmiSelectedTab.ALL)}
           checked={selectedTab === EmiSelectedTab.ALL}
           label="All"
           key={3}
+          containerStyles={pressableChipStyle}
         />
       </View>
       {filteredData?.length > 0 ? (

src/screens/emiSchedule/index.tsx

@@ -98,8 +98,9 @@ const EmiSchedule: React.FC<IEmiSchedule> = (props) => {
           refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
           style={[
             GenericStyles.p16,
+            GenericStyles.columnDirection,
             {
-              minHeight: 220,
+              minHeight: 190,
             },
           ]}
         >
@@ -128,7 +129,7 @@ const EmiSchedule: React.FC<IEmiSchedule> = (props) => {
           </View>
 
           <View style={[styles.tabContainer]}>
-            <View style={[GenericStyles.row, GenericStyles.alignCenter, GenericStyles.mb12]}>
+            <View style={[GenericStyles.row, GenericStyles.alignCenter]}>
               <Pressable
                 onPress={() => onTabChange(EmiTab.Schedule)}
                 style={{
@@ -202,11 +203,12 @@ const styles = StyleSheet.create({
     backgroundColor: COLORS.BORDER.PRIMARY,
   },
   tabContainer: {
-    paddingTop: 56,
+    paddingTop: 31,
     backgroundColor: 'white',
   },
   tabItemContainer: {
     padding: 16,
+    paddingTop: 24,
     height: '82%',
     marginBottom: 10,
     paddingBottom: 100,