Reimplement mono fonts

Author: kaja-osojnik

src/app/components/Account/AccountLink.tsx

@@ -128,12 +128,12 @@ const TrimmedAccountLink: FC<
     <WithTypographyAndLink scope={scope} address={address} labelOnly={labelOnly}>
       <MaybeWithTooltip title={tooltipTitle}>
         {showAccountName ? (
-          <span className="flex items-center gap-1">
+          <span className="flex items-center gap-1 font-mono font-medium">
             <AccountMetadataSourceIndicator source={accountMetadata!.source} />{' '}
             {trimLongString(accountName, 12, 0)}
           </span>
         ) : (
-          trimLongString(address, 6, 6)
+          <span className="font-mono font-medium">{trimLongString(address, 6, 6)}</span>
         )}
       </MaybeWithTooltip>
     </WithTypographyAndLink>
@@ -155,15 +155,15 @@ const DesktopAccountLink: FC<
     <WithTypographyAndLink scope={scope} address={address} labelOnly={labelOnly}>
       <MaybeWithTooltip title={tooltipTitle}>
         {showAccountName ? (
-          <div className="flex items-center flex-wrap gap-1">
+          <div className="flex items-center flex-wrap gap-1 font-mono font-medium">
             <span className="inline-flex items-center gap-1">
               <AccountMetadataSourceIndicator source={accountMetadata!.source} />
               <HighlightedText text={accountName} />
             </span>
             ({address})
           </div>
         ) : (
-          address
+          <span className="font-mono font-medium">{address}</span>
         )}
       </MaybeWithTooltip>
     </WithTypographyAndLink>

src/app/components/Blocks/BlockLink.tsx

@@ -27,10 +27,8 @@ export const BlockHashLink: FC<{
     // Table view
     return (
       <MaybeWithTooltip title={hash}>
-        <Link asChild>
-          <RouterLink to={to} className="text-primary font-medium">
-            {trimLongString(hash)}
-          </RouterLink>
+        <Link asChild className="font-mono font-medium">
+          <RouterLink to={to}>{trimLongString(hash)}</RouterLink>
         </Link>
       </MaybeWithTooltip>
     )
@@ -39,7 +37,7 @@ export const BlockHashLink: FC<{
   if (!isTablet) {
     // Desktop view
     return (
-      <Link asChild className="font-medium">
+      <Link asChild className="font-mono font-medium">
         <RouterLink to={to}>{hash}</RouterLink>
       </Link>
     )
@@ -48,8 +46,8 @@ export const BlockHashLink: FC<{
   // Mobile view
   return (
     <span className="max-w-full overflow-x-hidden">
-      <Link asChild>
-        <RouterLink to={to} className="text-primary font-medium">
+      <Link asChild className="font-mono font-medium">
+        <RouterLink to={to}>
           <AdaptiveTrimmer text={hash} strategy="middle" minLength={13} />
         </RouterLink>
       </Link>

src/app/components/Link/index.tsx

@@ -22,6 +22,7 @@ type LinkProps = {
   to: string
   withSourceIndicator?: boolean
   labelOnly?: boolean
+  mono?: boolean
 }
 
 export const Link: FC<LinkProps> = ({
@@ -60,7 +61,7 @@ export const Link: FC<LinkProps> = ({
     <MaybeWithTooltip title={tooltipTitle}>
       <div className="inline-flex items-center gap-1">
         {hasName && withSourceIndicator && <AccountMetadataSourceIndicator source={'SelfProfessed'} />}
-        <span className={cn('font-medium', !labelOnly && 'text-primary')}>
+        <span className={cn('font-mono font-medium', !labelOnly && 'text-primary')}>
           {isTablet ? (
             <TabletLink address={address} name={name} to={to} labelOnly={labelOnly} trimMode={trimMode} />
           ) : (

src/app/components/LongDataDisplay/index.tsx

@@ -37,6 +37,7 @@ export const LongDataDisplay: FC<{ data: string; fontWeight?: number; collapsedL
       <span
         ref={textRef}
         className="
+        font-mono
     font-medium
     overflow-hidden
     whitespace-pre-wrap

src/app/components/Rofl/RoflAppInstanceLink.tsx

@@ -8,10 +8,11 @@ type RoflAppInstanceLinkProps = {
   id: string
   network: Network
   rak: string
+  mono?: boolean
 }
 
-export const RoflAppInstanceLink: FC<RoflAppInstanceLinkProps> = ({ alwaysTrim, id, network, rak }) => {
+export const RoflAppInstanceLink: FC<RoflAppInstanceLinkProps> = ({ alwaysTrim, id, network, rak, mono }) => {
   const to = RouteUtils.getRoflAppInstanceRoute(network, id, rak)
 
-  return <Link address={rak} to={to} alwaysTrim={alwaysTrim} withSourceIndicator={false} />
+  return <Link address={rak} to={to} alwaysTrim={alwaysTrim} withSourceIndicator={false} mono={mono} />
 }

src/app/components/Rofl/RoflAppLink.tsx

@@ -11,6 +11,7 @@ type RoflAppLinkProps = {
   trimMode?: TrimMode
   withSourceIndicator?: boolean
   labelOnly?: boolean
+  mono?: boolean
 }
 
 export const RoflAppLink: FC<RoflAppLinkProps> = ({

src/app/components/TableCellNode/index.tsx

@@ -23,5 +23,5 @@ export const TableCellNode: FC<TableCellNodeProps> = ({ id, scope }) => {
     return <AccountLink alwaysTrimOnTablet scope={scope} address={getOasisAddressFromBase64PublicKey(id)} />
   }
 
-  return <span className="font-medium">{isTablet ? trimLongString(id) : id}</span>
+  return <span className="font-mono font-medium">{isTablet ? trimLongString(id) : id}</span>
 }

src/app/components/Transactions/TransactionLink.tsx

@@ -15,7 +15,7 @@ const WithTypographyAndLink: FC<{ children: ReactNode; mobile?: boolean; to: str
   mobile,
   to,
 }) => (
-  <Link asChild className={cn('font-medium', mobile && 'max-w-[85%]')}>
+  <Link asChild className={cn('font-mono font-medium', mobile && 'max-w-[85%]')}>
     <RouterLink to={to}>{children}</RouterLink>
   </Link>
 )

src/app/pages/RoflAppDetailsPage/Enclaves.tsx

@@ -20,7 +20,7 @@ export const Enclaves: FC<EnclavesProps> = ({ policy }) => {
         {policy.enclaves.map((enclave: string) => (
           <tr key={enclave}>
             <td>
-              <span className="font-medium">{enclave}</span>
+              <span className="font-mono font-medium">{enclave}</span>
             </td>
             <td>
               <CopyToClipboard value={enclave} />

src/app/pages/RoflAppDetailsPage/InstancesList.tsx

@@ -55,7 +55,7 @@ export const InstancesList: FC<InstancesListProps> = ({
             data: [
               {
                 key: 'rak',
-                content: <RoflAppInstanceLink id={appId} network={scope.network} rak={instance.rak} />,
+                content: <RoflAppInstanceLink id={appId} network={scope.network} rak={instance.rak} mono />,
               },
               {
                 key: 'node',