dhre-ui-kit 0.0.8 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "main": "src/index.ts",
   "files": [
     "src",
@@ -22,6 +22,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@react-native-community/blur": "^4.4.1",
     "@testing-library/react-native": "^12.5.1",
     "lint-staged": "^15.2.7",
     "react": "18.2.0",

package/src/App.tsx

@@ -1,43 +1,11 @@
 import React from 'react';
 import {ThemeProvider} from './theme/ThemeContext';
-import {
-  Badge,
-  Button,
-  CustomDropdown,
-  CustomTextInput,
-  FileUpload,
-  StarRating,
-  Tabs,
-  Tags,
-} from './index';
-import {CalenderDots} from './assets';
+import {Badge} from './index';
+import {ArrowLeft, CalenderDots} from './assets';
 import {View} from 'react-native';
-import {BUTTON_TYPES} from './utils/constants';
-import Checkbox from './components/checkBox';
-import {Text} from 'react-native-svg';
+import CustomButton from './components/button/Button';
 
-import {DHRE_COLORS_PRIMARY, DHRE_COLORS_TEXT} from './theme/colors';
-import {moderateScale} from './utils/stylehelper';
-import CustomTooltip from './components/customTooltip';
 const App = () => {
-  const options = [
-    {id: '1', value: 'user1', label: 'User 1'},
-    {id: '2', value: 'user2', label: 'User 2'},
-    {id: '3', value: 'user3', label: 'User 3'},
-  ];
-  const handleTabPress = (index: number) => {
-    console.log('Tab pressed:', index);
-  };
-
-  const handleSetSelectedTagsOptions = (tags: string[]) => {
-    console.log('Selected tags:', tags);
-  };
-  const handleTagsChange = (tag: string) => {
-    console.log('Tag removed:', tag);
-  };
-  const handleSelect = (option: {id: string; value: string; label: string}) => {
-    console.log('Selected:', option);
-  };
   return (
     <ThemeProvider>
       <View style={{marginTop: 50}}>
@@ -50,94 +18,23 @@ const App = () => {
           iconStyle={{}}
         />
 
-        <Button
-          onPress={function (): void {
-            throw new Error('Function not implemented.');
-          }}
-          title={'dfghj'}
-          buttonType={BUTTON_TYPES.PRIMARY}
-          variant={'H6bold'}
-          iconShown={true}
-          iconName={<CalenderDots width={20} height={20} />}
-        />
-
-        <Checkbox
-          isChecked={false}
-          labelName={'circle'}
-          checkedIcon={<CalenderDots width={20} height={20} />}
-          uncheckedIcon={<CalenderDots width={20} height={20} />}
-        />
-        <CustomDropdown
-          label="Select User"
-          placeholder="Choose Option"
-          options={options}
-          oneSelect={handleSelect}
-          selectedValue={options[0]} // Initially selected value
-          iconName={<CalenderDots />} // Dynamic icon for the dropdown
-          upArrowIcon={<CalenderDots />} // Up arrow icon
-          downArrowIcon={<CalenderDots />} // Down arrow icon
-          testId="CUSTOM-DROPDOWN"
-          iconStyle={{marginRight: 10}}
-        />
-        <CustomTextInput
-          label="Search"
-          placeholder="Type here"
-          isSearchBar={true}
-          searchIcon={<CalenderDots />}
-          rightIcon1={<CalenderDots />}
-          rightIcon2={<CalenderDots />}
-          secureTextEntry={true}
-          errorMessage="This field is required."
-          handleOnChangeText={text => console.log(text)}
-        />
-        <FileUpload
-          onUpload={() => console.log('Upload clicked')}
-          title="Upload Files"
-          btnText="Browse"
-          containerStyle={{width: 200}}
-          uploadImageStyling={{width: 10, height: 10}} // Example styling
-          icon={<CalenderDots />} // Pass your icon here
-          iconStyle={{}} // Optional styling for the icon
-        />
-        <Tags
-          tags={['Tag1', 'Tag2', 'Tag3']}
-          handleSetSelectedTagsOptions={handleSetSelectedTagsOptions}
-          handleTagsChange={handleTagsChange}
-          testID="tags-component"
-          icon={<CalenderDots />} // Pass your icon here
-          iconStyle={{backgroundColor: DHRE_COLORS_TEXT.DH_WHITE}} // Optional styling for the icon
-        />
+        <CustomButton
+          title="Yes"
+          onPress={() => console.log('Yes Button Pressed')}
+          leftIcon={<ArrowLeft />}
+          // titleColor={color.CONTENT_SECONDRY[currentTheme]}
+          titleVariant="L2_REGULAR"
+          containerStyle={[
+            {
+              borderWidth: 1,
+              borderRadius: 20,
 
-        <Tabs
-          tabs={[{label: 'Tab 1'}, {label: 'Tab 2'}, {label: 'Tab 3'}]}
-          onTabPress={handleTabPress}
-          testID="tabs-component"
-          icon={<CalenderDots />}
-          iconStyle={{width: 24, height: 24}}
-        />
-        <StarRating
-          rating={3.5}
-          count={5}
-          size={24}
-          fullStarIcon={<CalenderDots />}
-          halfStarIcon={<CalenderDots />}
-          fullStarColor="gold"
-          emptyStarColor="gray"
-          starStyle={{marginHorizontal: 2}}
+              height: 40,
+            },
+          ]}
+          // iconStyle={styles.iconStyle}
+          imagePosition="left"
         />
-        <CustomTooltip
-          message="This is a tooltip"
-          icon={
-            <CalenderDots
-              width={moderateScale(16)}
-              height={moderateScale(16)}
-            />
-          }
-          iconStyle={{width: moderateScale(16), height: moderateScale(16)}} // Optional styling for the icon
-          iconColor={DHRE_COLORS_PRIMARY.DH_RED_100} // Example icon color
-        >
-          <Text>Hover over me</Text>
-        </CustomTooltip>
       </View>
     </ThemeProvider>
   );

package/src/components/accordion/Accordion.styles.ts

@@ -15,6 +15,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
+    paddingHorizontal: horizontalScale(16),
   },
   title: {flex: 1, color: '#FFFFFF'},
   iconStyle: {marginLeft: horizontalScale(20)},

package/src/components/bottomDrawer/BottomDrawer.interface.ts

@@ -9,6 +9,8 @@ export interface BottomDrawerProps {
   testID?: string;
   style?: ViewStyle;
   modalContainerStyle?: ViewStyle;
+  blurAmount?: number;
+  blurViewStyle?: ViewStyle;
   leftIcon?: React.ReactElement;
   rightIcon?: React.ReactElement;
   showLeftIcon?: boolean;

package/src/components/bottomDrawer/BottomDrawer.styles.ts

@@ -10,6 +10,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'flex-end',
   },
+  blurView: {...StyleSheet.absoluteFillObject},
   modalContainer: {
     flex: 0.5,
     backgroundColor: '#000',

package/src/components/bottomDrawer/BottomDrawer.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {View, Modal} from 'react-native';
+import {BlurView} from '@react-native-community/blur';
 import {BottomDrawerProps} from './BottomDrawer.interface';
 import styles from './BottomDrawer.styles';
 import CustomTypography from '../customTypography/CustomTypography';
@@ -14,6 +15,8 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
   testID = 'BOTTOM-DRAWER',
   style,
   modalContainerStyle,
+  blurAmount = 10,
+  blurViewStyle,
   showLeftIcon = false,
   showRightIcon = true,
   leftIcon = <ArrowLeft />,
@@ -27,6 +30,11 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
       visible={isModalVisible}
       onRequestClose={toggleModal}>
       <View style={[styles.mainContainer, style]} testID={testID}>
+        <BlurView
+          style={[styles.blurView, blurViewStyle]}
+          blurType="light"
+          blurAmount={blurAmount}
+        />
         <View style={[styles.modalContainer, modalContainerStyle]}>
           <View style={styles.separator} />
           <View style={styles.headerContainer}>

package/src/components/button/Button.tsx

@@ -1,53 +1,75 @@
-import React from 'react';
-import {Pressable, View} from 'react-native';
-import styles from './Button.styles';
-import {BUTTON_TYPES} from '../../utils/constants';
-import {ButtonProps} from './Button.interface';
-import {DHRE_COLORS_TEXT} from '../../theme/colors';
-import CustomTypography from '../customTypography/CustomTypography';
+import React, {ReactElement} from 'react';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  View,
+  ViewStyle,
+  StyleProp,
+} from 'react-native';
+import {SvgProps} from 'react-native-svg';
+import CustomText from '../customText';
 
-const Button: React.FC<ButtonProps> = ({
-  onPress,
-  title = '',
-  buttonType = BUTTON_TYPES.PRIMARY,
-  buttonStyle,
-  titleStyle,
-  variant,
-  iconStyles,
-  testID,
-  titleShown = true,
-  iconShown = false,
-  iconName,
-}) => {
-  const buttonStyles = [styles.button, styles[buttonType], buttonStyle];
-  const textStyle = [styles[buttonType + BUTTON_TYPES.TEXT], titleStyle];
-  const iconStyle = [styles.iconStyle, iconStyles];
+interface CustomButtonProps {
+  title: string;
+  onPress: () => void;
+  containerStyle?: StyleProp<ViewStyle>;
+  textStyle?: ViewStyle;
+  leftIcon?: ReactElement<SvgProps>;
+  rightIcon?: ReactElement<SvgProps>;
+  iconStyle?: ViewStyle;
+  titleColor?: string;
+  titleVariant?: string;
+  imagePosition?: 'left' | 'right';
+  testID?:string
+}
 
+const CustomButton = ({
+  title,
+  testID,
+  onPress,
+  containerStyle,
+  textStyle,
+  leftIcon,
+  rightIcon,
+  iconStyle,
+  titleColor,
+  titleVariant = 'L2_REGULAR',
+  imagePosition = 'right',
+}: CustomButtonProps) => {
   return (
-    <View testID={testID} style={styles.mainContainer}>
-      <Pressable
-        disabled={buttonType === BUTTON_TYPES.DISABLE}
-        onPress={onPress}
-        style={buttonStyles}>
-        <View style={styles.directionStyle}>
-          {titleShown ? (
-            <CustomTypography
-              variant={variant}
-              style={textStyle}
-              text={title}
-            />
-          ) : null}
-          {iconShown && iconName && (
-            <View style={iconStyle}>
-              {React.cloneElement(iconName, {
-                fill: DHRE_COLORS_TEXT.DH_WHITE,
-              })}
-            </View>
-          )}
+    <TouchableOpacity testID={testID}
+      style={[styles.buttonContainer, containerStyle]}
+      onPress={onPress}>
+      {imagePosition === 'left' && leftIcon && (
+        <View style={iconStyle}>
+          {React.cloneElement(leftIcon, {width: 20, height: 20})}
         </View>
-      </Pressable>
-    </View>
+      )}
+      <CustomText
+        text={title}
+        variant={titleVariant}
+        style={[textStyle, {color: '#A7A7A7'}]}
+        textColor={titleColor}
+      />
+
+      {imagePosition === 'right' && rightIcon && (
+        <View style={iconStyle}>
+          {React.cloneElement(rightIcon, {width: 20, height: 20})}
+        </View>
+      )}
+    </TouchableOpacity>
   );
 };
 
-export default Button;
+const styles = StyleSheet.create({
+  buttonContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 10,
+    backgroundColor: '#000000',
+    borderRadius: 8,
+    justifyContent: 'center',
+  },
+});
+
+export default CustomButton;

package/src/components/customIcon/CustomIcon.styles.ts

@@ -4,7 +4,6 @@ const styles = StyleSheet.create({
   container: {
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#fff',
   },
   title: {
     color: '#000',

package/src/components/customText/CustomText.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {TextProps, TextStyle} from 'react-native';
+import {StyleProp, TextProps, TextStyle} from 'react-native';
 import {useTheme} from '../../theme/ThemeContext';
 import {withThemeProvider} from '../../theme/withThemeProvider';
 import {FONT_STYLES} from '../../theme/fonts';
@@ -8,7 +8,7 @@ import CustomTypography from '../customTypography/CustomTypography';
 interface CustomTextProps extends TextProps {
   text: string;
   variant: keyof typeof FONT_STYLES | string;
-  style?: TextStyle;
+  style?: StyleProp<TextStyle>;
   textColor?: string;
 }
 

package/src/components/swipableList/SwipableList.interface.ts

@@ -3,14 +3,25 @@ import {TextStyle, ViewStyle} from 'react-native';
 
 export interface ListItem {
   id: string;
+  templateId: number;
   title: string;
-  isPinned: boolean;
+  subTitle: string;
+  icon: string;
   isRead: boolean;
+  isPinned: boolean;
+  isDeleted: boolean;
+  isActionable: boolean;
+  category: string;
+  url: string;
+  channel: string;
+  status: string;
+  createdBy: string;
+  createdDateTime: string;
 }
 
 export interface ActionButtonProps {
   icon: ReactNode;
-  title: string;
+  title?: string;
   onPress: () => void;
   style?: object;
   testID: string;
@@ -20,17 +31,21 @@ export interface SwipableListProps {
   data: ListItem[];
   testId?: string;
   renderItem: (item: ListItem) => ReactNode;
-  leftPrimaryActionIcon?: ReactNode;
-  leftPrimaryActionTitle?: string;
-  leftPrimaryActionHandler?: (id: string) => void;
+  leftPrimaryActionActiveIcon?: ReactNode;
+  leftPrimaryActionActiveTitle?: string;
+  leftPrimaryActionInActiveIcon?: ReactNode;
+  leftPrimaryActionInActiveTitle?: string;
+  leftPrimaryActionHandler?: (item: ListItem) => void;
   leftPrimaryActionStyle?: ViewStyle;
-  leftSecondaryActionIcon?: ReactNode;
-  leftSecondaryActionTitle?: string;
-  leftSecondaryActionHandler?: (id: string) => void;
+  leftSecondaryActionActiveIcon?: ReactNode;
+  leftSecondaryActionActiveTitle?: string;
+  leftSecondaryActionInActiveIcon?: ReactNode;
+  leftSecondaryActionInActiveTitle?: string;
+  leftSecondaryActionHandler?: (item: ListItem) => void;
   leftSecondaryActionStyle?: ViewStyle;
   rightPrimaryActionIcon?: ReactNode;
   rightPrimaryActionTitle?: string;
-  rightPrimaryActionHandler?: (id: string) => void;
+  rightPrimaryActionHandler?: (item: ListItem) => void;
   rightPrimaryActionStyle?: ViewStyle;
   itemStyle?: ViewStyle;
   titleStyle?: TextStyle;

package/src/components/swipableList/SwipableList.styles.ts

@@ -1,4 +1,4 @@
-import {moderateScale, verticalScale} from '../../utils/stylehelper';
+import {horizontalScale, verticalScale} from '../../utils/stylehelper';
 import {StyleSheet} from 'react-native';
 
 export const styles = StyleSheet.create({
@@ -9,19 +9,20 @@ export const styles = StyleSheet.create({
   actionButton: {
     justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: moderateScale(24),
-    paddingVertical: moderateScale(8),
   },
   titleStyle: {
     color: '#fff',
   },
   leftActions: {
     flexDirection: 'row',
-    justifyContent: 'flex-start',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: horizontalScale(150),
+    gap: horizontalScale(24),
   },
   rightActions: {
     flexDirection: 'row',
-    justifyContent: 'flex-end',
+    paddingHorizontal: horizontalScale(24),
   },
   seprator: {
     height: verticalScale(16),

package/src/components/swipableList/SwipableList.test.tsx

@@ -35,18 +35,114 @@ const customStyle = {backgroundColor: 'red', padding: 20};
 
 describe('Notification Component', () => {
   const notifications = [
-    {id: '1', title: 'Notification 1', isPinned: false, isRead: true},
-    {id: '2', title: 'Notification 2', isPinned: true, isRead: false},
+    {
+      id: '1',
+      title: 'Notification 1',
+      isPinned: false,
+      isRead: true,
+      templateId: 1,
+      subTitle: 'Welcome Albus',
+      icon: 'https://svgshare.com/i/U7z.svg',
+      isDeleted: false,
+      isActionable: false,
+      category: 'general',
+      url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPg==',
+      channel: 'push',
+      status: 'sent',
+      createdBy: 'system',
+      createdDateTime: '2024-09-02T12:00:00+05:30',
+    },
+    {
+      id: '2',
+      title: 'Notification 2',
+      isPinned: true,
+      isRead: false,
+      templateId: 1,
+      subTitle: 'Welcome Albus',
+      icon: 'https://svgshare.com/i/U7z.svg',
+      isDeleted: false,
+      isActionable: false,
+      category: 'general',
+      url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPg==',
+      channel: 'push',
+      status: 'sent',
+      createdBy: 'system',
+      createdDateTime: '2024-09-02T12:00:00+05:30',
+    },
   ];
 
   const notificationsPinned = [
-    {id: '1', title: 'Notification 1', isPinned: true, isRead: true},
-    {id: '2', title: 'Notification 2', isPinned: false, isRead: false},
+    {
+      id: '1',
+      title: 'Notification 1',
+      isPinned: true,
+      isRead: true,
+      templateId: 1,
+      subTitle: 'Welcome Albus',
+      icon: 'https://svgshare.com/i/U7z.svg',
+      isDeleted: false,
+      isActionable: false,
+      category: 'general',
+      url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPg==',
+      channel: 'push',
+      status: 'sent',
+      createdBy: 'system',
+      createdDateTime: '2024-09-02T12:00:00+05:30',
+    },
+    {
+      id: '2',
+      title: 'Notification 2',
+      isPinned: false,
+      isRead: false,
+      templateId: 1,
+      subTitle: 'Welcome Albus',
+      icon: 'https://svgshare.com/i/U7z.svg',
+      isDeleted: false,
+      isActionable: false,
+      category: 'general',
+      url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPg==',
+      channel: 'push',
+      status: 'sent',
+      createdBy: 'system',
+      createdDateTime: '2024-09-02T12:00:00+05:30',
+    },
   ];
 
   const notificationsUnPinned = [
-    {id: '1', title: 'Notification 1', isPinned: false, isRead: false},
-    {id: '2', title: 'Notification 2', isPinned: false, isRead: false},
+    {
+      id: '1',
+      title: 'Notification 1',
+      isPinned: false,
+      isRead: false,
+      templateId: 1,
+      subTitle: 'Welcome Albus',
+      icon: 'https://svgshare.com/i/U7z.svg',
+      isDeleted: false,
+      isActionable: false,
+      category: 'general',
+      url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPg==',
+      channel: 'push',
+      status: 'sent',
+      createdBy: 'system',
+      createdDateTime: '2024-09-02T12:00:00+05:30',
+    },
+    {
+      id: '2',
+      title: 'Notification 2',
+      isPinned: false,
+      isRead: false,
+      templateId: 1,
+      subTitle: 'Welcome Albus',
+      icon: 'https://svgshare.com/i/U7z.svg',
+      isDeleted: false,
+      isActionable: false,
+      category: 'general',
+      url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJyZWQiIC8+Cjwvc3ZnPg==',
+      channel: 'push',
+      status: 'sent',
+      createdBy: 'system',
+      createdDateTime: '2024-09-02T12:00:00+05:30',
+    },
   ];
 
   const mockLeftPrimaryActionHandler = jest.fn();
@@ -95,8 +191,6 @@ describe('Notification Component', () => {
       <SwipableList {...props} renderItem={() => <Text>Title</Text>} />,
     );
     expect(getByTestId('SWIPABLE-LIST')).toBeTruthy();
-    fireEvent.press(getByTestId('SWIPABLE-LIST-LEFT-PRIMARY-1'));
-    fireEvent.press(getByTestId('SWIPABLE-LIST-LEFT-SECONDARY-1'));
     fireEvent.press(getByTestId('SWIPABLE-LIST-RIGHT-PRIMARY-1'));
   });
 

package/src/components/swipableList/SwipableList.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {ReactNode} from 'react';
 import {FlatList, View, Pressable} from 'react-native';
 import {GestureHandlerRootView, Swipeable} from 'react-native-gesture-handler';
 import {
@@ -13,12 +13,16 @@ const SwipableList = (props: SwipableListProps) => {
   const {
     data,
     testId = 'SWIPABLE-LIST',
-    leftPrimaryActionIcon,
-    leftPrimaryActionTitle,
+    leftPrimaryActionActiveIcon,
+    leftPrimaryActionInActiveIcon,
+    leftPrimaryActionActiveTitle,
+    leftPrimaryActionInActiveTitle,
+    leftSecondaryActionActiveIcon,
+    leftSecondaryActionInActiveIcon,
+    leftSecondaryActionActiveTitle,
+    leftSecondaryActionInActiveTitle,
     leftPrimaryActionHandler,
     leftPrimaryActionStyle,
-    leftSecondaryActionIcon,
-    leftSecondaryActionTitle,
     leftSecondaryActionHandler,
     leftSecondaryActionStyle,
     rightPrimaryActionIcon,
@@ -48,13 +52,19 @@ const SwipableList = (props: SwipableListProps) => {
     </Pressable>
   );
 
-  const leftActionHandle = (item: ListItem) => (
+  const leftActionHandle = (
+    item: ListItem,
+    leftPrimaryActionIcon: ReactNode,
+    leftPrimaryActionTitle: string | undefined,
+    leftSecondaryActionIcon: ReactNode,
+    leftSecondaryActionTitle: string | undefined,
+  ) => (
     <View style={[styles.leftActions, leftPrimaryActionStyle]}>
       {leftPrimaryActionIcon && (
         <ActionButton
           icon={leftPrimaryActionIcon}
-          title={leftPrimaryActionTitle || ''}
-          onPress={() => leftPrimaryActionHandler?.(item.id)}
+          title={leftPrimaryActionTitle}
+          onPress={() => leftPrimaryActionHandler?.(item)}
           style={leftPrimaryActionStyle}
           testID={`${testId}-LEFT-PRIMARY-${item.id}`}
         />
@@ -62,8 +72,8 @@ const SwipableList = (props: SwipableListProps) => {
       {leftSecondaryActionIcon && (
         <ActionButton
           icon={leftSecondaryActionIcon}
-          title={leftSecondaryActionTitle || ''}
-          onPress={() => leftSecondaryActionHandler?.(item.id)}
+          title={leftSecondaryActionTitle}
+          onPress={() => leftSecondaryActionHandler?.(item)}
           style={leftSecondaryActionStyle}
           testID={`${testId}-LEFT-SECONDARY-${item.id}`}
         />
@@ -77,7 +87,7 @@ const SwipableList = (props: SwipableListProps) => {
         <ActionButton
           icon={rightPrimaryActionIcon}
           title={rightPrimaryActionTitle || ''}
-          onPress={() => rightPrimaryActionHandler?.(item.id)}
+          onPress={() => rightPrimaryActionHandler?.(item)}
           style={rightPrimaryActionStyle}
           testID={`${testId}-RIGHT-PRIMARY-${item.id}`}
         />
@@ -88,7 +98,23 @@ const SwipableList = (props: SwipableListProps) => {
   const renderItem = ({item}: {item: ListItem}) => (
     <GestureHandlerRootView testID={`${testId}-LIST`} style={styles.container}>
       <Swipeable
-        renderLeftActions={() => leftActionHandle(item)}
+        renderLeftActions={() =>
+          leftActionHandle(
+            item,
+            item.isPinned
+              ? leftPrimaryActionInActiveIcon
+              : leftPrimaryActionActiveIcon,
+            item.isPinned
+              ? leftPrimaryActionInActiveTitle
+              : leftPrimaryActionActiveTitle,
+            item.isRead
+              ? leftSecondaryActionInActiveIcon
+              : leftSecondaryActionActiveIcon,
+            item.isRead
+              ? leftSecondaryActionInActiveTitle
+              : leftSecondaryActionActiveTitle,
+          )
+        }
         renderRightActions={() => rightActionHandle(item)}
         containerStyle={styles.swippableContainer}>
         {props?.renderItem(item)}

package/src/theme/colors.ts

@@ -143,6 +143,31 @@ export const DHRE_COLORS_BG = {
   DH_BG_GREY_900: '#6F7387',
   DH_BG_GREY: '#F2F3F8',
 };
+export const DHRE_DEFAULT = {
+  DH_LINE_GREY_0: '#FAFAFA',
+  DH_LINE_GREY_100: '#F6F6F6',
+  DH_LINE_GREY_200: '#F1F1F1',
+  DH_LINE_GREY_300: '#EDEDED',
+  DH_LINE_GREY_400: '#EDEDED',
+  DH_LINE_GREY_500: '#CCCACA',
+  DH_LINE_GREY_600: '#B4B2B2',
+  DH_LINE_GREY_700: '#959494',
+  DH_LINE_GREY_800: '#727171',
+  DH_LINE_GREY_900: '#4D4C4C',
+  DH_BLUE: '#007AFF',
+
+  DH_BG_GREY_0: '#F5F7FF',
+  DH_BG_GREY_100: '#F2F4FD',
+  DH_BG_GREY_200: '#EDEFF9',
+  DH_BG_GREY_300: '#E5E7F2',
+  DH_BG_GREY_400: '#D9DCE9',
+  DH_BG_GREY_500: '#CACDDD',
+  DH_BG_GREY_600: '#B7BBCD',
+  DH_BG_GREY_700: '#A0A4B8',
+  DH_BG_GREY_800: '#878BA0',
+  DH_BG_GREY_900: '#6F7387',
+  DH_BG_GREY: '#F2F3F8',
+};
 
 export const DHRE_COLORS_TEXT = {
   //Black

package/src/theme/themes.ts

@@ -50,7 +50,7 @@ const theme = {
   },
   CONTENT_SECONDRY_STATIC: {
     light: '#CECECE',
-    dark: '##CECECE',
+    dark: '#CECECE',
   },
 
   BORDER_PRIMARY: {