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> = ({
@@ -32,6 +33,7 @@ export const Link: FC<LinkProps> = ({
   to,
   withSourceIndicator = true,
   labelOnly,
+  mono,
 }) => {
   const { isTablet } = useScreenSize()
   const hasName = name?.toLowerCase() !== address.toLowerCase()
@@ -60,7 +62,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(mono && 'font-mono', 'font-medium', !labelOnly && 'text-primary')}>
           {isTablet ? (
             <TabletLink address={address} name={name} to={to} labelOnly={labelOnly} trimMode={trimMode} />
           ) : (

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> = ({
@@ -21,6 +22,7 @@ export const RoflAppLink: FC<RoflAppLinkProps> = ({
   trimMode,
   withSourceIndicator,
   labelOnly,
+  mono,
 }) => {
   const to = RouteUtils.getRoflAppRoute(network, id)
 
@@ -33,6 +35,7 @@ export const RoflAppLink: FC<RoflAppLinkProps> = ({
       trimMode={trimMode}
       withSourceIndicator={withSourceIndicator}
       labelOnly={labelOnly}
+      mono={mono}
     />
   )
 }

src/app/components/Rofl/RoflAppsList.tsx

@@ -63,7 +63,7 @@ export const RoflAppsList: FC<RoflAppsListProps> = ({ isLoading, limit, paginati
           key: 'status',
         },
         {
-          content: <RoflAppLink id={app.id} network={app.network} withSourceIndicator={false} />,
+          content: <RoflAppLink id={app.id} network={app.network} withSourceIndicator={false} mono />,
           key: 'id',
         },
         {

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/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',

src/app/pages/RoflAppInstanceDetailsPage/index.tsx

@@ -70,7 +70,7 @@ export const RoflAppInstanceDetailsView: FC<{
         </div>
       </dt>
       <dd>
-        <span>
+        <span className="font-mono font-medium text-primary">
           {instance.rak} <CopyToClipboard value={instance.rak} />
         </span>
       </dd>
@@ -91,7 +91,7 @@ export const RoflAppInstanceDetailsView: FC<{
       <dd>{instance.expiration_epoch.toLocaleString()}</dd>
       <dt>{t('rofl.roflAppId')}</dt>
       <dd>
-        <RoflAppLink id={appId} network={scope.network} withSourceIndicator={false} />
+        <RoflAppLink id={appId} network={scope.network} withSourceIndicator={false} mono />
         <CopyToClipboard value={appId} />
       </dd>
       <dt>{t('rofl.endorsingNodeId')}</dt>

src/styles/tailwind.css

@@ -1,6 +1,7 @@
 @import '@oasisprotocol/ui-library/src/styles/global.css';
 
 @theme {
+  --font-mono: 'Roboto Mono Variable', monospace;
   --color-theme-surface: var(--color-theme-surface);
   --color-theme-accent: var(--color-theme-accent);
   --color-theme-accent-light: var(--color-theme-accent-light);
@@ -18,7 +19,7 @@
   --color-theme-contrast-main: #ffffff;
 }
 
-.testnet {
+.testnet {  
   --color-theme-surface: #fff0e4;
   --color-theme-accent: #ffa800;
   --color-theme-accent-light: #fff0e4;
@@ -42,11 +43,6 @@
 
 /* Specific fixes needed during migration to Oasis UI Library */
 
-/* Override MUI styles that are applied globally */
-[class*=' text-'] {
-  font-family: 'Inter Variable', sans-serif;
-}
-
 /* Override Tailwind's vertical-align reset for MUI SVG components */
 [class*='Mui'] img,
 [class*='Mui'] svg,