Added 'Highlighted Link' component for shared styling for links in light and dark themes

apps/explorer/src/app/components/highlighted-link/index.tsx

@@ -0,0 +1,22 @@
+import { Link } from 'react-router-dom';
+
+interface HighlightedLinkProps {
+  to: string;
+  text: string | undefined;
+}
+
+export const HighlightedLink = ({
+  to,
+  text,
+  ...props
+}: HighlightedLinkProps) => {
+  return (
+    <Link
+      className="font-bold underline dark:text-vega-yellow dark:font-normal dark:no-underline"
+      to={to}
+      {...props}
+    >
+      {text}
+    </Link>
+  );
+};

apps/explorer/src/app/components/table/index.tsx

@@ -55,7 +55,7 @@ export const TableHeader = ({
   className,
   ...props
 }: TableHeaderProps) => {
-  const cellClasses = classnames(className, 'pl-4 dark:pl-0', {
+  const cellClasses = classnames(className, {
     'text-left font-normal': props?.scope === 'row',
   });
   return (

apps/explorer/src/app/routes/blocks/id/block.tsx

@@ -15,6 +15,7 @@ import { TxsPerBlock } from '../../../components/txs/txs-per-block';
 import { Button } from '@vegaprotocol/ui-toolkit';
 import { Routes } from '../../router-config';
 import { RenderFetched } from '../../../components/render-fetched';
+import { HighlightedLink } from '../../../components/highlighted-link';
 
 const Block = () => {
   const { block } = useParams<{ block: string }>();
@@ -60,13 +61,11 @@ const Block = () => {
             <TableRow modifier="bordered">
               <TableHeader scope="row">Mined by</TableHeader>
               <TableCell modifier="bordered">
-                <Link
+                <HighlightedLink
-                  data-testid="block-validator"
-                  className="font-mono font-bold underline dark:text-vega-yellow dark:font-normal dark:no-underline"
                   to={`/${Routes.VALIDATORS}`}
-                >
+                  text={header.proposer_address}
-                  {header.proposer_address}
+                  data-testid="block-validator"
-                </Link>
+                />
               </TableCell>
             </TableRow>
             <TableRow modifier="bordered">

apps/explorer/src/app/routes/txs/id/tx-details.tsx

@@ -1,4 +1,5 @@
-import { Link } from 'react-router-dom';
+import { Routes } from '../../router-config';
+import { Result } from '../tendermint-transaction-response.d';
 import {
   TableWithTbody,
   TableCell,
@@ -6,8 +7,7 @@ import {
   TableRow,
 } from '../../../components/table';
 import { TruncateInline } from '../../../components/truncate/truncate';
-import { Routes } from '../../router-config';
+import { HighlightedLink } from '../../../components/highlighted-link';
-import { Result } from '../tendermint-transaction-response.d';
 
 interface TxDetailsProps {
   txData: Result | undefined;
@@ -35,23 +35,16 @@ export const TxDetails = ({ txData, pubKey, className }: TxDetailsProps) => {
           Submitted by
         </TableHeader>
         <TableCell modifier="bordered" data-testid="submitted-by">
-          <Link
+          <HighlightedLink to={`/${Routes.PARTIES}/${pubKey}`} text={pubKey} />
-            className="text-vega-yellow"
-            to={`/${Routes.PARTIES}/${pubKey}`}
-          >
-            {pubKey}
-          </Link>
         </TableCell>
       </TableRow>
       <TableRow modifier="bordered">
         <TableCell>Block</TableCell>
         <TableCell modifier="bordered" data-testid="block">
-          <Link
+          <HighlightedLink
-            className="text-vega-yellow"
             to={`/${Routes.BLOCKS}/${txData.height}`}
-          >
+            text={txData.height}
-            {txData.height}
+          />
-          </Link>
         </TableCell>
       </TableRow>
       <TableRow modifier="bordered">