Feat/533 update balance styles (#820)

* feat(console-lit): change balance styles

* feat(console-lit): add tests for deal ticket balance

* fix(console-lit): fix typo with wrong library name

apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-balance.spec.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import type {
+  PartyBalanceQuery_party_accounts,
+  PartyBalanceQuery_party_accounts_asset,
+} from './__generated__/PartyBalanceQuery';
+import { DealTicketBalance } from './deal-ticket-balance';
+
+const tDAI: PartyBalanceQuery_party_accounts_asset = {
+  __typename: 'Asset',
+  id: '1',
+  symbol: 'tDAI',
+  name: 'TDAI',
+  decimals: 2,
+};
+
+const accounts: PartyBalanceQuery_party_accounts[] = [
+  {
+    __typename: 'Account',
+    balance: '1000000',
+    asset: tDAI,
+  },
+];
+
+describe('DealTicketBalance', function () {
+  it('should render the balance', () => {
+    const { getByText, getByRole } = render(
+      <DealTicketBalance
+        settlementAsset={tDAI}
+        accounts={accounts}
+        isWalletConnected
+      />
+    );
+
+    expect(getByRole('complementary')).toHaveAccessibleName('tDAI Balance');
+    expect(getByText('10,000.00')).toBeInTheDocument();
+    expect(getByText('tDAI')).toBeInTheDocument();
+  });
+
+  it('should prompt to connect wallet', () => {
+    const { getByText } = render(
+      <DealTicketBalance
+        settlementAsset={tDAI}
+        accounts={accounts}
+        isWalletConnected={false}
+      />
+    );
+
+    expect(
+      getByText('Please connect your Vega wallet to see your balance')
+    ).toBeInTheDocument();
+  });
+
+  it('should display zero balance', () => {
+    const { getByText } = render(
+      <DealTicketBalance
+        settlementAsset={tDAI}
+        accounts={[]}
+        isWalletConnected={true}
+      />
+    );
+
+    expect(getByText('No tDAI left to trade')).toBeInTheDocument();
+  });
+});

apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-balance.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import classNames from 'classnames';
 import type { DealTicketQuery_market_tradableInstrument_instrument_product_settlementAsset } from '@vegaprotocol/deal-ticket';
 import type { PartyBalanceQuery_party_accounts } from './__generated__/PartyBalanceQuery';
 import { useSettlementAccount } from '../../hooks/use-settlement-account';
@@ -8,12 +9,14 @@ interface DealTicketBalanceProps {
   settlementAsset: DealTicketQuery_market_tradableInstrument_instrument_product_settlementAsset;
   accounts: PartyBalanceQuery_party_accounts[];
   isWalletConnected: boolean;
+  className?: string;
 }
 
 export const DealTicketBalance = ({
   settlementAsset,
   accounts,
   isWalletConnected,
+  className = '',
 }: DealTicketBalanceProps) => {
   const settlementAssetId = settlementAsset?.id;
   const settlementAssetSymbol = settlementAsset?.symbol;
@@ -26,30 +29,29 @@ export const DealTicketBalance = ({
       settlementAccount.asset.decimals
     );
 
-  const balance = settlementAccount ? (
+  const balance = (
-    <p>
+    <p className="text-blue text-lg font-semibold">
-      {t(
+      {settlementAccount
-        `${formatedNumber} ${settlementAccount.asset.symbol} available to trade`
+        ? t(`${formatedNumber}`)
-      )}
+        : `No ${settlementAssetSymbol} left to trade`}
     </p>
-  ) : (
-    <p>{t(`You have no ${settlementAssetSymbol} available to trade`)}</p>
   );
 
   const connectWallet = (
-    <p>
+    <p>{t('Please connect your Vega wallet to see your balance')}</p>
-      {t(
-        "Please connect your Vega wallet to see your balance for this market's settlement asset"
-      )}
-    </p>
   );
 
+  const ariaLabel = t(`${settlementAssetSymbol} Balance`);
+
   return (
-    <div className="text-right">
+    <aside
-      <div className="border border-current p-16 inline-block">
+      aria-label={ariaLabel}
-        <small className="text-text">{t('Balance')}</small>
+      className={classNames('text-right', className)}
+    >
+      <div className="inline-block">
+        <span className="text-blue">{settlementAssetSymbol}</span>
         {isWalletConnected ? balance : connectWallet}
       </div>
-    </div>
+    </aside>
   );
 };

apps/simple-trading-app/src/app/components/deal-ticket/deal-ticket-container.tsx

@@ -52,6 +52,7 @@ export const DealTicketContainer = () => {
                   'Loading...'
                 ) : (
                   <DealTicketBalance
+                    className="mb-16"
                     settlementAsset={
                       data.market.tradableInstrument.instrument.product
                         ?.settlementAsset