feat(explorer): do not colourise votes in tx list (#3988)

apps/explorer/src/app/components/txs/tx-order-type.tsx

@@ -160,6 +160,7 @@ export const TxOrderType = ({ orderType, command }: TxOrderTypeProps) => {
         vote={command?.voteSubmission?.value === 'VALUE_YES'}
         yesText="Proposal vote"
         noText="Proposal vote"
+        useVoteColour={false}
       />
     );
   }

apps/explorer/src/app/components/vote-icon/vote-icon.spec.tsx

@@ -34,4 +34,17 @@ describe('Vote TX icon', () => {
     const no = render(<VoteIcon vote={false} />);
     expect(no.getByRole('img')).toHaveAttribute('aria-label', 'delete icon');
   });
+
+  it('useVoteColour prop can be used to override coloured background', () => {
+    const no = render(<VoteIcon vote={false} />);
+    expect(no.container.children[0]).toHaveClass('bg-vega-pink-550');
+
+    const monochromeNo = render(
+      <VoteIcon vote={false} useVoteColour={false} />
+    );
+    expect(monochromeNo.container.children[0]).not.toHaveClass(
+      'bg-vega-pink-550'
+    );
+    expect(monochromeNo.container.children[0]).toHaveClass('bg-vega-dark-200');
+  });
 });

apps/explorer/src/app/components/vote-icon/vote-icon.tsx

@@ -8,6 +8,32 @@ export interface VoteIconProps {
   yesText?: string;
   // Defaults to 'Against', but can be any text
   noText?: string;
+  // If set to false the background will not be coloured
+  useVoteColour?: boolean;
+}
+
+function getBgColour(useVoteColour: boolean, vote: boolean) {
+  if (useVoteColour === false) {
+    return 'bg-vega-dark-200';
+  }
+
+  return vote ? 'bg-vega-green-550' : 'bg-vega-pink-550';
+}
+
+function getFillColour(useVoteColour: boolean, vote: boolean) {
+  if (useVoteColour === false) {
+    return 'white';
+  }
+
+  return vote ? 'vega-green-300' : 'vega-pink-300';
+}
+
+function getTextColour(useVoteColour: boolean, vote: boolean) {
+  if (useVoteColour === false) {
+    return 'white';
+  }
+
+  return vote ? 'vega-green-200' : 'vega-pink-200';
 }
 
 /**
@@ -18,14 +44,15 @@ export interface VoteIconProps {
  */
 export function VoteIcon({
   vote,
+  useVoteColour = true,
   yesText = 'For',
   noText = 'Against',
 }: VoteIconProps) {
   const label = vote ? yesText : noText;
-  const bg = vote ? 'bg-vega-green-550' : 'bg-vega-pink-550';
   const icon: IconName = vote ? 'tick-circle' : 'delete';
-  const fill = vote ? 'vega-green-300' : 'vega-pink-300';
-  const text = vote ? 'vega-green-200' : 'vega-pink-200';
+  const bg = getBgColour(useVoteColour, vote);
+  const fill = getFillColour(useVoteColour, vote);
+  const text = getTextColour(useVoteColour, vote);
 
   return (
     <div