ROFL App details card

Author: kaja-osojnik

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/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/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/index.tsx

@@ -3,7 +3,6 @@ import { useHref, useLoaderData } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
 import Tooltip from '@mui/material/Tooltip'
-import Typography from '@mui/material/Typography'
 import InfoIcon from '@mui/icons-material/Info'
 import { RoflApp, RoflAppPolicy, RuntimeTransaction, useGetRuntimeRoflAppsId } from '../../../oasis-nexus/api'
 import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
@@ -125,17 +124,15 @@ export const RoflAppDetailsView: FC<{
       <TeeRow policy={app.policy} />
       <DetailsRow title={t('rofl.appId')}>
         <WithHoverHighlighting address={app.id}>
-          <Typography variant="mono" component="span">
-            {app.id}
-          </Typography>
+          <span className="font-medium">{app.id}</span>
         </WithHoverHighlighting>
         <CopyToClipboard value={app.id} />
       </DetailsRow>
       <DetailsRow title={t('rofl.enclaveId')}>
         <Enclaves policy={app.policy} />
       </DetailsRow>
       <DetailsRow title={t('rofl.sekPublicKey')}>
-        <Typography variant="mono">{app.sek}</Typography> <CopyToClipboard value={app.sek} />
+        <span className="font-medium">{app.sek}</span> <CopyToClipboard value={app.sek} />
       </DetailsRow>
       <AdminAccountRow
         address={app.admin_eth ?? app.admin}