Merge pull request #2210 from oasisprotocol/kaja/uil-rofl-mono-typography

Kaja/uil rofl mono typography

Author: kaja-osojnik

.changelog/2210.trivial.md

@@ -0,0 +1 @@
+Update mono fonts on ROFL app details page.

src/app/components/Account/AccountLink.tsx

@@ -1,6 +1,7 @@
 import { FC, ReactNode } from 'react'
 import { Link as RouterLink } from 'react-router-dom'
 import { useScreenSize } from '../../hooks/useScreensize'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
 import { RouteUtils } from '../../utils/route-utils'
 import InfoIcon from '@mui/icons-material/Info'
 import { SearchScope } from '../../../types/searchScope'
@@ -13,7 +14,6 @@ import { AdaptiveHighlightedText } from '../HighlightedText/AdaptiveHighlightedT
 import { AdaptiveTrimmer } from '../AdaptiveTrimmer/AdaptiveTrimmer'
 import { AccountMetadataSourceIndicator } from './AccountMetadataSourceIndicator'
 import { WithHoverHighlighting } from '../HoverHighlightingContext/WithHoverHighlighting'
-import { Link } from '@oasisprotocol/ui-library/src/components/link'
 
 const WithTypographyAndLink: FC<{
   scope: SearchScope

src/app/components/AdaptiveTrimmer/AdaptiveDynamicTrimmer.tsx

@@ -3,6 +3,7 @@ import Box from '@mui/material/Box'
 import InfoIcon from '@mui/icons-material/Info'
 import { MaybeWithTooltip } from '../Tooltip/MaybeWithTooltip'
 import { getAdaptiveId, ShorteningResult, useAdaptiveSizing } from './hooks'
+import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
 
 type AdaptiveDynamicTrimmerProps = {
   /**
@@ -92,7 +93,7 @@ export const AdaptiveDynamicTrimmer: FC<AdaptiveDynamicTrimmerProps> = ({
     <Box component="span" ref={textRef} sx={{ maxWidth: '100%', overflowX: 'hidden' }}>
       <MaybeWithTooltip
         title={title}
-        spanSx={{ textWrap: 'nowrap', whiteSpace: 'nowrap', opacity: isFinal ? 1 : 0 }}
+        spanClassName={cn('whitespace-nowrap', isFinal ? 'opacity-100' : 'opacity-0')}
       >
         {currentContent}
       </MaybeWithTooltip>

src/app/components/Blocks/BlockLink.tsx

@@ -39,10 +39,8 @@ export const BlockHashLink: FC<{
   if (!isTablet) {
     // Desktop view
     return (
-      <Link asChild>
-        <RouterLink to={to} className="text-primary font-medium">
-          {hash}
-        </RouterLink>
+      <Link asChild className="font-medium">
+        <RouterLink to={to}>{hash}</RouterLink>
       </Link>
     )
   }

src/app/components/StyledDescriptionList/index.tsx

@@ -59,7 +59,6 @@ export const StyledDescriptionList = styled(InlineDescriptionList, {
     alignItems: 'start',
   },
   dd: {
-    color: COLORS.brandExtraDark,
     overflowWrap: 'anywhere',
     alignItems: 'center',
     maxWidth: '100%',

src/app/components/TableCellNode/index.tsx

@@ -1,5 +1,4 @@
 import { FC } from 'react'
-import Typography from '@mui/material/Typography'
 import { NodeDisplayType } from '../../../types/node-display-type'
 import { SearchScope } from '../../../types/searchScope'
 import { useScreenSize } from '../../hooks/useScreensize'
@@ -24,5 +23,5 @@ export const TableCellNode: FC<TableCellNodeProps> = ({ id, scope }) => {
     return <AccountLink alwaysTrimOnTablet scope={scope} address={getOasisAddressFromBase64PublicKey(id)} />
   }
 
-  return <Typography variant="mono">{isTablet ? trimLongString(id) : id}</Typography>
+  return <span className="font-medium">{isTablet ? trimLongString(id) : id}</span>
 }

src/app/components/Tooltip/MaybeWithTooltip.tsx

@@ -1,7 +1,6 @@
 import { FC, ReactNode } from 'react'
 import Tooltip from '@mui/material/Tooltip'
 import Box from '@mui/material/Box'
-import { SxProps } from '@mui/material/styles'
 import { useScreenSize } from '../../hooks/useScreensize'
 
 type MaybeWithTooltipProps = {
@@ -15,7 +14,7 @@ type MaybeWithTooltipProps = {
   /**
    * Any extra styles to apply to the span
    */
-  spanSx?: SxProps
+  spanClassName?: string
 
   /**
    * The content to show
@@ -26,8 +25,9 @@ type MaybeWithTooltipProps = {
 /**
  * A component to display some content with or without a tooltip
  */
-export const MaybeWithTooltip: FC<MaybeWithTooltipProps> = ({ title, children, spanSx }) => {
+export const MaybeWithTooltip: FC<MaybeWithTooltipProps> = ({ title, children, spanClassName }) => {
   const { isMobile } = useScreenSize()
+
   return (
     <Tooltip
       placement="top"
@@ -49,9 +49,7 @@ export const MaybeWithTooltip: FC<MaybeWithTooltipProps> = ({ title, children, s
       disableHoverListener={!title}
       disableTouchListener={!title}
     >
-      <Box component="span" sx={{ display: 'inline-flex', ...spanSx }}>
-        {children}
-      </Box>
+      <span className={spanClassName}>{children}</span>
     </Tooltip>
   )
 }

src/app/components/Transactions/TransactionLink.tsx

@@ -1,5 +1,6 @@
 import { FC, ReactNode } from 'react'
 import { Link as RouterLink } from 'react-router-dom'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
 import InfoIcon from '@mui/icons-material/Info'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { RouteUtils } from '../../utils/route-utils'
@@ -9,7 +10,6 @@ import { MaybeWithTooltip } from '../Tooltip/MaybeWithTooltip'
 import { trimLongString } from '../../utils/trimLongString'
 import Box from '@mui/material/Box'
 import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
-import { Link } from '@oasisprotocol/ui-library/src/components/link'
 
 const WithTypographyAndLink: FC<{ children: ReactNode; mobile?: boolean; to: string }> = ({
   children,

src/app/pages/RoflAppDetailsPage/Enclaves.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Typography from '@mui/material/Typography'
 import { RoflAppPolicy } from '../../../oasis-nexus/api'
 import { CopyToClipboard } from 'app/components/CopyToClipboard'
 
@@ -21,9 +20,7 @@ export const Enclaves: FC<EnclavesProps> = ({ policy }) => {
         {policy.enclaves.map((enclave: string) => (
           <tr key={enclave}>
             <td>
-              <Typography variant="mono" component="span">
-                {enclave}
-              </Typography>
+              <span className="font-medium">{enclave}</span>
             </td>
             <td>
               <CopyToClipboard value={enclave} />

src/app/pages/RoflAppDetailsPage/GridRow.tsx

@@ -25,7 +25,7 @@ export const GridRow: FC<GridRowProps> = ({ label, children, tooltip }) => {
       </div>
 
       <div className="col-span-2 border-b border-gray-100 p-2 md:p-4">
-        {children ? <strong>{children}</strong> : t('common.missing')}
+        {children ? <span className="font-medium">{children}</span> : t('common.missing')}
       </div>
     </>
   )