changed blue arrow color and show pointer only when the tx is spent

Author: MicahMaphet

packages/insight/src/assets/images/arrow-blue.svg

@@ -158,16 +158,19 @@ export const TransactionChip = styled.div<TransactionChipProps>`
 
 interface ArrowDivProps {
   margin: string;
+  pointer?: boolean;
 }
 
 export const ArrowDiv = styled.div<ArrowDivProps>`
   width: 25px;
   position: relative;
   margin: ${({margin}) => margin};
 
-  img {
-    cursor: pointer;
-  }
+  ${({pointer}) => pointer &&
+   `img {
+      cursor: pointer;
+    }
+  `}
 `;
 
 export const ScriptText = styled.p`

packages/insight/src/assets/styles/transaction.ts

@@ -175,7 +175,7 @@ const TransactionDetails: FC<TransactionDetailsProps> = ({
                           marginTop: '1rem', 
                           ...(showDetails && {borderBottom: '2px solid', paddingBottom: '0.25rem'})
                         }}>
-                          <ArrowDiv margin='auto .5rem auto 0'>
+                          <ArrowDiv margin='auto .5rem auto 0' pointer>
                             <img
                               src={BlueArrowSvg}
                               width={17}
@@ -274,7 +274,7 @@ const TransactionDetails: FC<TransactionDetailsProps> = ({
                   )}
                   <div style={{minInlineSize: 'fit-content', display: 'flex'}}>
                     {getConvertedValue(vo.value, currency)} {currency}{' '}
-                    <ArrowDiv margin='auto 0 auto .5rem'>
+                    <ArrowDiv margin='auto 0 auto .5rem' pointer={vo.spentTxid}>
                       <img
                         src={vo.spentTxid ? BlueArrowSvg : (isOpReturn(vo) ? CircleSvg : ArrowSvg)}
                         width={17}