From bc5004f36e90975b93050e40eb3b0d3270baebc4 Mon Sep 17 00:00:00 2001
From: Clement Mwimo <clement.mwimo@mx.com>
Date: Tue, 11 Aug 2026 23:47:45 -0600
Subject: [PATCH] converted kyper/icon/edit

---
 src/components/DetailReviewItem.js | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/components/DetailReviewItem.js b/src/components/DetailReviewItem.js
index 514d387de1..f94f72e1d2 100644
--- a/src/components/DetailReviewItem.js
+++ b/src/components/DetailReviewItem.js
@@ -2,9 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { useTokens } from '@kyper/tokenprovider'
-import { Text } from '@mxenabled/mxui'
+import { Icon, Text } from '@mxenabled/mxui'
 import { Text as ProtectedText } from 'src/privacy/components'
-import { Edit } from '@kyper/icon/Edit'
 import { IconButton } from '@mui/material'
 
 export const DetailReviewItem = (props) => {
@@ -34,16 +33,12 @@ export const DetailReviewItem = (props) => {
       </div>
       <IconButton
         aria-label={props.ariaButtonLabel}
+        data-test={`${props.label.replace(/\s+/g, '-')}-edit-button`}
         disabled={props.isEditable}
         onClick={props.onEditClick}
         style={{ backgroundColor: 'transparent' }}
       >
-        <Edit
-          color={props.isEditable ? tokens.TextColor.ButtonPrimaryDisabled : tokens.Color.Brand300}
-          data-test={`${props.label.replace(/\s+/g, '-')}-edit-button`}
-          size={16}
-          style={styles.editIcon}
-        />
+        <Icon color={props.isEditable ? 'disabled' : 'primary'} name="edit" size={16} />
       </IconButton>
     </div>
   )
@@ -68,9 +63,6 @@ const getStyles = (tokens) => ({
   rowValue: {
     overflowWrap: 'anywhere',
   },
-  editIcon: {
-    cursor: 'pointer',
-  },
 })
 
 DetailReviewItem.propTypes = {