@messenger-box/property-ext-browser 10.0.3-alpha.40 → 10.0.3-alpha.42

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.0.3-alpha.42](https://github.com/CDEBase/messenger-box/compare/v10.0.3-alpha.41...v10.0.3-alpha.42) (2025-05-15)
+
+**Note:** Version bump only for package @messenger-box/property-ext-browser
+
 ## [10.0.3-alpha.40](https://github.com/cdmbase/messenger-box/compare/v10.0.3-alpha.39...v10.0.3-alpha.40) (2025-05-14)
 
 **Note:** Version bump only for package @messenger-box/property-ext-browser

package/lib/components/InboxMessage/MessageWidgets/MessageAlert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageAlert.d.ts","sourceRoot":"","sources":["../../../../src/components/InboxMessage/MessageWidgets/MessageAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAG/B,MAAM,WAAW,2BAA2B;IACxC,OAAO,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,YAAY,UAAW,2BAA2B,sBA0C9D,CAAC"}
+{"version":3,"file":"MessageAlert.d.ts","sourceRoot":"","sources":["../../../../src/components/InboxMessage/MessageWidgets/MessageAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAG/B,MAAM,WAAW,2BAA2B;IACxC,OAAO,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,YAAY,UAAW,2BAA2B,sBAyC9D,CAAC"}

package/lib/components/InboxMessage/MessageWidgets/MessageAlert.js

@@ -1,4 +1,4 @@
-import React from'react';import*as Icons from'@chakra-ui/icons';import parse from'html-react-parser';import {useColorModeValue,Stack,Text,Link}from'@chakra-ui/react';const MessageAlert = props => {
+import React from'react';import {FiAlertCircle}from'@react-icons/all-files/fi/FiAlertCircle.js';import {FiExternalLink}from'@react-icons/all-files/fi/FiExternalLink.js';import parse from'html-react-parser';import {useColorModeValue,Stack,Text,Link}from'@chakra-ui/react';const MessageAlert = props => {
   const {
     message,
     index,
@@ -7,7 +7,6 @@ import React from'react';import*as Icons from'@chakra-ui/icons';import parse fro
   const {
     attachment
   } = message.propsConfiguration.contents;
-  const Icon = Icons[attachment.icon];
   const color = useColorModeValue('white', 'gray.800');
   const bgColor = useColorModeValue('gray.800', 'white');
   return React.createElement(Stack, {
@@ -22,10 +21,12 @@ import React from'react';import*as Icons from'@chakra-ui/icons';import parse fro
     direction: ['column', 'row'],
     cursor: 'pointer',
     onClick: () => onMessageClick(message)
-  }, React.createElement(Icon, {
-    w: 6,
-    h: 6,
-    color: color
+  }, React.createElement(FiAlertCircle, {
+    style: {
+      color,
+      width: '24px',
+      height: '24px'
+    }
   }), React.createElement(Text, {
     fontSize: "14px",
     mt: "5px",
@@ -40,7 +41,10 @@ import React from'react';import*as Icons from'@chakra-ui/icons';import parse fro
     },
     href: attachment.callToAction.link,
     isExternal: true
-  }, attachment.callToAction.title, " ", React.createElement(Icons.ExternalLinkIcon, {
-    mx: "2px"
+  }, attachment.callToAction.title, " ", React.createElement(FiExternalLink, {
+    style: {
+      display: 'inline',
+      marginLeft: '2px'
+    }
   })));
 };export{MessageAlert};//# sourceMappingURL=MessageAlert.js.map

package/lib/components/InboxMessage/MessageWidgets/MessageAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageAlert.js","sources":["../../../../src/components/InboxMessage/MessageWidgets/MessageAlert.tsx"],"sourcesContent":[null],"names":[],"mappings":"sKAaa,MAAA,YAAY,GAAG,KAAC,IAAsC;QACzD;IACN,OAAM;IAGN,KAAM;IACN;MACM,KAAA;QAEC;AAcC,IAAA;AACA,GAAA,GAAA,OAAA,CAAA,kBAAK,CAAC,QAAA;AAGL,EAAA,MAAA,IAAA,GAAA,KAAuB,CAAA,UAAA,CAAA,IACpB,CAAA;AAIQ,EAAA,MAAA,KAAA,GAAA,iBAA2B,CAAA,OAAA,EAAA,UAAA,CAAA;eAE/B,GAAA,4BAA8B,EAAA,OACpB,CAAA;cAEC,CAAA,aAAa,CAAA,KAAA,EAAC;;AAAO,IAAA,EAAA,EAAA,GAAA;AAKpD,IAAE,EAAA,EAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MessageAlert.js","sources":["../../../../src/components/InboxMessage/MessageWidgets/MessageAlert.tsx"],"sourcesContent":[null],"names":[],"mappings":"+QAca,MAAA,YAAY,GAAG,KAAC,IAAsC;QACzD;IACN,OAAM;IAGN,KAAM;IACN;MAEO,KAAA;AAcC,EAAA,MAAA;AACA,IAAA;AAGC,GAAA,GAAA,OAAA,CAAA,kBAAuB,CAAA,QACpB;AAIQ,EAAA,MAAA,KAAA,GAAA,iBAA2B,CAAA,OAAA,EAAA,UAAA,CAAA;eAE/B,GAAA,4BAA8B,EAAA,OACpB,CAAA;cAEC,CAAA,aAAa,CAAA,KAAA,EAAC;;AAAO,IAAA,EAAA,EAAA,GAAA;AAKpD,IAAE,EAAA,EAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/InboxMessage/MessageWidgets/MessageCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageCard.d.ts","sourceRoot":"","sources":["../../../../src/components/InboxMessage/MessageWidgets/MessageCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAG/B,MAAM,WAAW,kBAAkB;IAC/B,OAAO,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,UAAW,kBAAkB,sBAqGpD,CAAC"}
+{"version":3,"file":"MessageCard.d.ts","sourceRoot":"","sources":["../../../../src/components/InboxMessage/MessageWidgets/MessageCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAG/B,MAAM,WAAW,kBAAkB;IAC/B,OAAO,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,UAAW,kBAAkB,sBA6GpD,CAAC"}

package/lib/components/InboxMessage/MessageWidgets/MessageCard.js

@@ -1,4 +1,4 @@
-import React from'react';import {startCase}from'lodash-es';import parse from'html-react-parser';import {useColorModeValue,Box,Image,Heading,Badge,Spacer,Text,Link}from'@chakra-ui/react';import {StarIcon,ExternalLinkIcon}from'@chakra-ui/icons';const MessageCard = props => {
+import React from'react';import {startCase}from'lodash-es';import parse from'html-react-parser';import {useColorModeValue,Box,Image,Heading,Badge,Spacer,Text,Link}from'@chakra-ui/react';import {FiExternalLink}from'@react-icons/all-files/fi/FiExternalLink.js';import {FiStar}from'@react-icons/all-files/fi/FiStar.js';const MessageCard = props => {
   const {
     message,
     index
@@ -74,9 +74,13 @@ import React from'react';import {startCase}from'lodash-es';import parse from'htm
     color: "gray.600",
     fontSize: "sm",
     mr: "2"
-  }, property.totalReview, " reviews"), property?.totalStar && Array(5).fill('').map((_, i) => React.createElement(StarIcon, {
+  }, property.totalReview, " reviews"), property?.totalStar && Array(5).fill('').map((_, i) => React.createElement(FiStar, {
     key: i,
-    color: i < property.totalStar ? 'teal.500' : 'gray.300'
+    style: {
+      display: 'inline',
+      color: i < property.totalStar ? 'teal' : 'gray',
+      marginLeft: '1px'
+    }
   })))), attachment.callToAction && React.createElement(Link, {
     href: attachment.callToAction.link,
     style: {
@@ -86,7 +90,10 @@ import React from'react';import {startCase}from'lodash-es';import parse from'htm
       cursor: 'pointer'
     },
     isExternal: true
-  }, attachment.callToAction.title, " ", React.createElement(ExternalLinkIcon, {
-    mx: "2px"
+  }, attachment.callToAction.title, ' ', React.createElement(FiExternalLink, {
+    style: {
+      display: 'inline',
+      marginLeft: '2px'
+    }
   }))));
 };export{MessageCard};//# sourceMappingURL=MessageCard.js.map

package/lib/components/InboxMessage/MessageWidgets/MessageCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageCard.js","sources":["../../../../src/components/InboxMessage/MessageWidgets/MessageCard.tsx"],"sourcesContent":[null],"names":[],"mappings":"mPAaa,MAAA,WAAW,GAAG,KAAC,IAA6B;AACrD,EAAA,MAAA;IACA,OAAM;IACN;AAIA,GAAA,GAAA,KAAQ;AACR,EAAA,MAAA,KACI,GAAA,iBAAI,CAAA,YACQ,OAAA,CAAA;AACJ,EAAA,MAAA;;AASJ,GAAA,GAAA,OAAA,CAAA,oBAAO,QAAK;AACZ,EAAA,MAAA;AACI,IAAA;AACI,GAAA,GAAA,UAAA;cAIK,CAAA,aACL,CAAA,GAAA,EAAA;AACK,IAAA,MAAA,EAAA;;AAOD,KAAA;AACC,IAAA,MAAA,EAAA,CAAA;AASQ,IAAA,IAAA,EAAA,IAAA;AACC,IAAA,WAAA,EAAA,KAAA;gBAIjB,EAAA,IAAA;YAOA,EAAQ,QAAA;iBAEQ,CAAA;AAEA,GAAA,EAAA,KAAA,CAAA,aAAA,CAAA,KAAc,EAAA;AACf,IAAA,KAAA,EAAA,MAAA;;AACa,IAAA,GAAA,EAAA,UAAA,CAAA;AAIrB,GAAA,CAAA,EAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;gBACA;;AAGa,IAAA,CAAA,EAAA;;AAGR,IAAA,EAAA,EAAA,GAAA;;;AAGQ,GAAA,EAAA,KAAA,CAAA,aAAA,CAAA,OAAG,EAAE;AAMzB,IAAA,KAAA,EAAA,KAAA;AAIW,IAAA,QAAA,EAAA,MAAA;AACH,IAAA,UAAA,EAAA,UACO;AACJ,IAAA,EAAA,EAAA;AACH,GAAA,EAAA,UAAA,CAAA,WACS,GAAA,KAAA,CAAA,UAAA,CAAA,KAAA,CAAA,GAAA,UAAA,CAAA,KAAA,CAAA,CAAA,EAAA,QAAA,IAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;;;mBAEuB,IAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAgB,EAAC,KAAG,CAAA,aAKxE,CAAC,KAAA,EAAA;AACN,IAAE,YAAA,EAAA,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MessageCard.js","sources":["../../../../src/components/InboxMessage/MessageWidgets/MessageCard.tsx"],"sourcesContent":[null],"names":[],"mappings":"4TAca,MAAA,WAAW,GAAG,KAAC,IAA6B;AACrD,EAAA,MAAA;IACA,OAAM;IACN;AAIA,GAAA,GAAA,KAAQ;AACR,EAAA,MAAA,KACI,GAAA,iBAAI,CAAA,YACQ,OAAA,CAAA;AACJ,EAAA,MAAA;;AASJ,GAAA,GAAA,OAAA,CAAA,oBAAO,QAAK;AACZ,EAAA,MAAA;AACI,IAAA;AACI,GAAA,GAAA,UAAA;cAIK,CAAA,aACL,CAAA,GAAA,EAAA;AACK,IAAA,MAAA,EAAA;;AAOD,KAAA;AACC,IAAA,MAAA,EAAA,CAAA;AASQ,IAAA,IAAA,EAAA,IAAA;AACC,IAAA,WAAA,EAAA,KAAA;gBAIjB,EAAA,IAAA;YAOA,EAAQ,QAAA;iBAEQ,CAAA;AAEA,GAAA,EAAA,KAAA,CAAA,aAAA,CAAA,KAAc,EAAA;AACf,IAAA,KAAA,EAAA,MAAA;;AACa,IAAA,GAAA,EAAA,UAAA,CAAA;AAIrB,GAAA,CAAA,EAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;gBACA;;AAGa,IAAA,CAAA,EAAA;;AAGR,IAAA,EAAA,EAAA,GAAA;;;AAGQ,GAAA,EAAA,KAAA,CAAA,aAAA,CAAA,OAAG,EAAE;AAIM,IAAA,KAAA,EAAA,KAAA;AACA,IAAA,QAAA,EAAA,MAAA;AACA,IAAA,UAAA,EAAA,UAAA;AACH,IAAA,EAAA,EAAA;AAM5B,GAAA,EAAA,UAAA,CAAA,WAAuB,GAAA,KAAA,CAAA,UACpB,CAAA,KAAA,CAAA,GAAA,UACI,CAAA,KAAI,CAAE,CAAA,EAAA,QAAU,IAAa,KAAA,CAAA,iBACtB,EAAA;AACH,IAAA,EAAA,EAAA,GAAA;AACH,IAAA,OAAA,EAAA;AAEG,GAAA,EAAA,QAAA,EAAA,IAAA,IAAA,KAAQ,CAAS,aAAA,CAAA,GAAA,EAAA,IAAA,EAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACpB,IAAA,YAAA,EAAA,MACS;;iBAEyB;AACnC,GAAA,EAAA,SAAA,CAAA,QAAA,CAAA,IAAA,CAAA,CAAA,CAAA,EAAA,mBAAgB,CAAA,MAAK,EAAE,IAAE,CAAA,EAAA,QAAiB,EAAA,kBAAc,CAAA,aAK1E,CAAA,GAAA,EAAA;AACN,IAAE,KAAA,EAAA,UAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/slot-fill/message-alert-fill.js

@@ -1,4 +1,4 @@
-import React from'react';import {Fill}from'@common-stack/components-pro';import {PostTypeEnum}from'common';import'lodash-es';import'html-react-parser';import'@chakra-ui/react';import'@chakra-ui/icons';import {MessageAlert}from'../components/InboxMessage/MessageWidgets/MessageAlert.js';const MessageAlertFill = () => {
+import React from'react';import {Fill}from'@common-stack/components-pro';import {PostTypeEnum}from'common';import'lodash-es';import'html-react-parser';import'@chakra-ui/react';import'@react-icons/all-files/fi/FiExternalLink.js';import'@react-icons/all-files/fi/FiStar.js';import {MessageAlert}from'../components/InboxMessage/MessageWidgets/MessageAlert.js';const MessageAlertFill = () => {
   return React.createElement(Fill, {
     name: PostTypeEnum.Alert.toLowerCase()
   }, props => {

package/lib/slot-fill/message-alert-fill.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-alert-fill.js","sources":["../../src/slot-fill/message-alert-fill.tsx"],"sourcesContent":[null],"names":[],"mappings":"8RAMO,MAAM,gBAAgB,GAAG,MAAK;AACjC,EAAA,OAAA,KACK,CAAA,aAAA,CAAA,IAAA,EAAA;AAEO,IAAA,IAAA,EAAA,YAAgB,CAAA,KAAG,CAAA,WAAA;AACf,GAAA,EAAA,KAAA,IAAA;QACJ,KAAC,CAAA,MAAA,EAAA;AACD,MAAA,OAAA,MAAW,aAAC,CAAA,YAAA,EAAA;QAGtB,GAAA;AACN,OAAE,CAAA;;;;"}
+{"version":3,"file":"message-alert-fill.js","sources":["../../src/slot-fill/message-alert-fill.tsx"],"sourcesContent":[null],"names":[],"mappings":"qWAMO,MAAM,gBAAgB,GAAG,MAAK;AACjC,EAAA,OAAA,KACK,CAAA,aAAA,CAAA,IAAA,EAAA;AAEO,IAAA,IAAA,EAAA,YAAgB,CAAA,KAAG,CAAA,WAAA;AACf,GAAA,EAAA,KAAA,IAAA;QACJ,KAAC,CAAA,MAAA,EAAA;AACD,MAAA,OAAA,MAAW,aAAC,CAAA,YAAA,EAAA;QAGtB,GAAA;AACN,OAAE,CAAA;;;;"}

package/lib/slot-fill/message-card-fill.js

@@ -1,4 +1,4 @@
-import React from'react';import {Fill}from'@common-stack/components-pro';import {PostTypeEnum}from'common';import {MessageCard}from'../components/InboxMessage/MessageWidgets/MessageCard.js';import'@chakra-ui/icons';import'html-react-parser';import'@chakra-ui/react';const MessageCardFill = () => {
+import React from'react';import {Fill}from'@common-stack/components-pro';import {PostTypeEnum}from'common';import {MessageCard}from'../components/InboxMessage/MessageWidgets/MessageCard.js';import'@react-icons/all-files/fi/FiAlertCircle.js';import'@react-icons/all-files/fi/FiExternalLink.js';import'html-react-parser';import'@chakra-ui/react';const MessageCardFill = () => {
   return React.createElement(Fill, {
     name: PostTypeEnum.Card.toLowerCase()
   }, props => {

package/lib/slot-fill/message-card-fill.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-card-fill.js","sources":["../../src/slot-fill/message-card-fill.tsx"],"sourcesContent":[null],"names":[],"mappings":"0QAMO,MAAM,eAAe,GAAG,MAAK;AAChC,EAAA,OAAA,KACK,CAAA,aAAA,CAAA,IAAA,EAAA;AAEO,IAAA,IAAA,EAAA,YAAgB,CAAA,IAAG,CAAA,WAAA;AACf,GAAA,EAAA,KAAA,IAAA;QACJ,KAAC,CAAA,MAAA,EAAA;AACD,MAAA,OAAA,MAAW,aAAC,CAAA,WAAA,EAAA;QAGtB,GAAA;AACN,OAAE,CAAA;;;;"}
+{"version":3,"file":"message-card-fill.js","sources":["../../src/slot-fill/message-card-fill.tsx"],"sourcesContent":[null],"names":[],"mappings":"wVAMO,MAAM,eAAe,GAAG,MAAK;AAChC,EAAA,OAAA,KACK,CAAA,aAAA,CAAA,IAAA,EAAA;AAEO,IAAA,IAAA,EAAA,YAAgB,CAAA,IAAG,CAAA,WAAA;AACf,GAAA,EAAA,KAAA,IAAA;QACJ,KAAC,CAAA,MAAA,EAAA;AACD,MAAA,OAAA,MAAW,aAAC,CAAA,WAAA,EAAA;QAGtB,GAAA;AACN,OAAE,CAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@messenger-box/property-ext-browser",
-    "version": "10.0.3-alpha.40",
+    "version": "10.0.3-alpha.42",
     "description": "Extention to Messenger to support property on browser",
     "license": "ISC",
     "author": "CDMBase LLC",
@@ -21,7 +21,7 @@
         "watch": "npm run build:lib:watch"
     },
     "dependencies": {
-        "@messenger-box/chakra-ui-inbox": "10.0.3-alpha.40",
+        "@messenger-box/chakra-ui-inbox": "10.0.3-alpha.42",
         "@messenger-box/core": "10.0.3-alpha.40",
         "@messenger-box/property-ext-core": "link:../core",
         "date-fns": "^4.1.0",
@@ -55,5 +55,5 @@
     "typescript": {
         "definition": "lib/index.d.ts"
     },
-    "gitHead": "9bcf95cbd1dfac789e71d3031fd44b8cf7add6ce"
+    "gitHead": "275ec7e6b91f0ecd83dfab2fd59fb908238c3a49"
 }

package/src/components/InboxMessage/MessageWidgets/MessageAlert.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import * as Icons from '@chakra-ui/icons';
+import { FiAlertCircle } from '@react-icons/all-files/fi/FiAlertCircle';
+import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink';
 import parse from 'html-react-parser';
 import { Link, Stack, Text, useColorModeValue } from '@chakra-ui/react';
 import { IPost } from 'common';
@@ -16,7 +17,6 @@ export const MessageAlert = (props: IPropertyMessageWidgetProps) => {
     const { attachment } = message.propsConfiguration.contents as {
         attachment: AlertMessageAttachmentsInterface;
     };
-    const Icon = Icons[attachment.icon];
     const color = useColorModeValue('white', 'gray.800');
     const bgColor = useColorModeValue('gray.800', 'white');
 
@@ -34,7 +34,7 @@ export const MessageAlert = (props: IPropertyMessageWidgetProps) => {
             cursor={'pointer'}
             onClick={() => onMessageClick(message)}
         >
-            <Icon w={6} h={6} color={color} />
+            <FiAlertCircle style={{ color, width: '24px', height: '24px' }} />
             <Text fontSize="14px" mt="5px" mb="5px" whiteSpace={'pre-line'} color={color}>
                 {attachment.isTitleHtml ? parse(attachment.title) : attachment?.title}
             </Text>
@@ -48,7 +48,7 @@ export const MessageAlert = (props: IPropertyMessageWidgetProps) => {
                     href={attachment.callToAction.link}
                     isExternal
                 >
-                    {attachment.callToAction.title} <Icons.ExternalLinkIcon mx="2px" />
+                    {attachment.callToAction.title} <FiExternalLink style={{ display: 'inline', marginLeft: '2px' }} />
                 </Link>
             )}
         </Stack>

package/src/components/InboxMessage/MessageWidgets/MessageCard.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { startCase } from 'lodash-es';
 import parse from 'html-react-parser';
 import { Badge, Box, Heading, Image, Link, Spacer, Text, useColorModeValue } from '@chakra-ui/react';
-import { ExternalLinkIcon, StarIcon } from '@chakra-ui/icons';
+import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink';
+import { FiStar } from '@react-icons/all-files/fi/FiStar';
 import { IPost } from 'common';
 import { CardMessageAttachmentsInterface } from '../../../interfaces';
 
@@ -90,7 +91,14 @@ export const MessageCard = (props: IPropertyCardProps) => {
                                 Array(5)
                                     .fill('')
                                     .map((_, i) => (
-                                        <StarIcon key={i} color={i < property.totalStar ? 'teal.500' : 'gray.300'} />
+                                        <FiStar
+                                            key={i}
+                                            style={{
+                                                display: 'inline',
+                                                color: i < property.totalStar ? 'teal' : 'gray',
+                                                marginLeft: '1px',
+                                            }}
+                                        />
                                     ))}
                         </Box>
                     </Box>
@@ -106,7 +114,8 @@ export const MessageCard = (props: IPropertyCardProps) => {
                         }}
                         isExternal
                     >
-                        {attachment.callToAction.title} <ExternalLinkIcon mx="2px" />
+                        {attachment.callToAction.title}{' '}
+                        <FiExternalLink style={{ display: 'inline', marginLeft: '2px' }} />
                     </Link>
                 )}
             </Box>