feat(core): LW-9037 add new styling for outgoing txs

packages/core/src/ui/components/Activity/AssetActivityItem.module.scss

@@ -123,3 +123,11 @@
     line-height: size_unit(3);
   }
 }
+
+.negativeBalance {
+  color: var(--data-orange);
+}
+
+.positiveBalance {
+  color: var(--data-green);
+}

packages/core/src/ui/components/Activity/AssetActivityItem.tsx

@@ -2,6 +2,7 @@
 import React, { useMemo, useRef, useEffect, useCallback } from 'react';
 import debounce from 'lodash/debounce';
 import { Image, Tooltip } from 'antd';
+import cn from 'classnames';
 import Icon from '@ant-design/icons';
 import { getTextWidth } from '@lace/common';
 import { ReactComponent as PendingIcon } from '../../assets/icons/pending.component.svg';
@@ -96,6 +97,8 @@ const translationTypes = {
   self: 'package.core.assetActivityItem.entry.name.self'
 };
 
+const negativeBalanceStyling: Set<ActivityType> = new Set(['outgoing', 'delegationRegistration', 'self', 'delegation']);
+
 // TODO: Handle pluralization and i18n of assetsNumber when we will have more than Ada.
 export const AssetActivityItem = ({
   amount,
@@ -176,6 +179,8 @@ export const AssetActivityItem = ({
     assetAmountContent
   );
 
+  const isNegativeBalance = negativeBalanceStyling.has(type);
+
   return (
     <div data-testid="asset-activity-item" onClick={onClick} className={styles.assetActivityItem}>
       <div className={styles.leftSide}>
@@ -196,9 +201,19 @@ export const AssetActivityItem = ({
         </div>
       </div>
       <div data-testid="asset-amount" className={styles.rightSide}>
-        <h6 data-testid="total-amount" className={styles.title} ref={ref}>
+        <h6
+          data-testid="total-amount"
+          className={cn(styles.title, {
+            [styles.negativeBalance]: isNegativeBalance,
+            [styles.positiveBalance]: !isNegativeBalance
+          })}
+          ref={ref}
+        >
           <span>
-            {assetsText.text}
+            <span data-testid="balance">
+              {isNegativeBalance ? '-' : ''}
+              {assetsText.text}
+            </span>
             {assetsText.suffix && (
               <Tooltip
                 overlayClassName={styles.tooltip}

packages/core/src/ui/components/Activity/__tests__/AssetActivityItem.test.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { render, within, fireEvent, queryByTestId } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { AssetActivityItem, AssetActivityItemProps, ActivityStatus } from '../AssetActivityItem';
+import { ActivityType } from '../../ActivityDetail';
 
 const assetsAmountTestId = 'asset-amount';
 
@@ -21,8 +22,8 @@ describe('Testing AssetActivityItem component', () => {
 
   const assetActivityItemId = 'asset-activity-item';
 
-  test('should render an asset activity item', async () => {
-    const { findByTestId } = render(<AssetActivityItem {...props} />);
+  test('should render an asset activity item with type incoming', async () => {
+    const { findByTestId } = render(<AssetActivityItem {...props} type="incoming" />);
     const activityItem = await findByTestId(assetActivityItemId);
 
     const activityIcon = await findByTestId('asset-icon');
@@ -43,6 +44,16 @@ describe('Testing AssetActivityItem component', () => {
     expect(activityFiatAmountText).toBeVisible();
   });
 
+  ['outgoing', 'delegationRegistration', 'self', 'delegation'].forEach((type) => {
+    test(`should apply negative balance for: ${type} activity`, async () => {
+      const { findByTestId } = render(<AssetActivityItem {...props} type={type as ActivityType} />);
+
+      const totalAmount = await findByTestId('balance');
+
+      expect(totalAmount).toHaveTextContent(`-${props.amount}`);
+    });
+  });
+
   test('should render an asset activity item with proper assets text when there is enough space to show assets info', async () => {
     const elWidth = 100;
     Object.defineProperties(window.HTMLElement.prototype, {
@@ -53,7 +64,7 @@ describe('Testing AssetActivityItem component', () => {
     const { findByTestId } = render(<AssetActivityItem {...props} />);
 
     const activityAmount = await findByTestId(assetsAmountTestId);
-    const tickerText = `${props.amount}, ${props.assets[0].val} ${props.assets[0].info.ticker}`;
+    const tickerText = `-${props.amount}, ${props.assets[0].val} ${props.assets[0].info.ticker}`;
     const activityAssetTickerText = await within(activityAmount).findByText(tickerText);
 
     expect(activityAssetTickerText).toBeVisible();