added show diff button

src/components/basicHeader/view/basicHeaderView.js

@@ -40,6 +40,9 @@ const BasicHeaderView = ({
   quickTitle,
   rightButtonText,
   rightIconName,
+  iconType,
+  rightIconBtnStyle,
+  rightIconStyle,
   title,
   handleOnSubmit,
   handleOnSearch,
@@ -206,8 +209,10 @@ const BasicHeaderView = ({
             <IconButton
               size={25}
               onPress={() => handleRightIconPress()}
-              iconStyle={styles.rightIcon}
+              iconStyle={[styles.rightIcon, rightIconStyle]}
+              style={rightIconBtnStyle}
               name={rightIconName}
+              iconType={iconType}
             />
           )}
 

src/screens/editHistoryScreen/editHistoryScreen.tsx

@@ -37,6 +37,7 @@ const EditHistoryScreen = ({ navigation }) => {
   const intl = useIntl();
   const [editHistory, setEditHistory] = useState<CommentHistoryItem[]>([]);
   const [versionSelected, setVersionSelected] = useState(1);
+  const [showDiff, setShowDiff] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   useEffect(() => {
     _getCommentHistory();
@@ -151,11 +152,7 @@ const EditHistoryScreen = ({ navigation }) => {
         <View style={styles.postHeaderContainer}>
           <Text style={styles.postHeaderTitle}>{selectedItem.title}</Text>
           <View style={styles.tagsContainer}>
-            <Icon
+            <Icon style={styles.tagIcon} iconType="AntDesign" name={'tag'} />
-              style={styles.tagIcon}
-              iconType="AntDesign"
-              name={'tag'}
-            />
             <Text style={styles.tags}>{selectedItem.tags}</Text>
           </View>
         </View>
@@ -172,6 +169,22 @@ const EditHistoryScreen = ({ navigation }) => {
         title={intl.formatMessage({
           id: 'history.edit',
         })}
+        iconType="Ionicons"
+        rightIconName="git-compare-sharp"
+        rightIconBtnStyle={[
+          styles.rightIcon,
+          {
+            backgroundColor: showDiff
+              ? EStyleSheet.value('$primaryBlue')
+              : EStyleSheet.value('$primaryDarkGray'),
+          },
+        ]}
+        rightIconStyle={{
+          color: showDiff
+            ? EStyleSheet.value('white')
+            : EStyleSheet.value('$iconColor'),
+        }}
+        handleRightIconPress={() => setShowDiff(!showDiff)}
       />
       <View style={styles.mainContainer}>
         {editHistory.length > 0 && _renderVersionsList()}

src/screens/editHistoryScreen/editHistoryScreenStyles.ts

@@ -56,5 +56,13 @@ export default EStyleSheet.create({
   },
   tagIcon: {
     color: '$primaryDarkGray'
+  },
+  rightIcon: {
+    backgroundColor: '$primaryDarkGray',
+    width: 40,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 8,
   }
 });