chore: fix tx tags background

Author: codingknite

pages/_document.tsx

@@ -42,6 +42,11 @@ class MyDocument extends Document {
             href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
             rel="stylesheet"
           />
+          { /* eslint-disable-next-line max-len */ }
+          <link
+            href="https://fonts.googleapis.com/css2?family=Spline+Sans+Mono:ital,wght@0,300..700;1,300..700&family=Spline+Sans:wght@300..700&display=swap"
+            rel="stylesheet"
+          />
 
           { /* eslint-disable-next-line @next/next/no-sync-scripts */ }
           <script src="/assets/envs.js"/>

theme/foundations/typography.ts

@@ -2,12 +2,15 @@ import { theme } from '@chakra-ui/react';
 
 export const BODY_TYPEFACE = 'Spline Sans';
 export const HEADING_TYPEFACE = 'Spline Sans';
+export const MONO_TYPEFACE = 'Spline Sans Mono';
 
 const typography = {
   fonts: {
     heading: `${ HEADING_TYPEFACE }, ${ theme.fonts.heading }`,
     body: `${ BODY_TYPEFACE }, ${ theme.fonts.body }`,
+    mono: `${ MONO_TYPEFACE }, ${ theme.fonts.mono }`,
   },
+
   textStyles: {
     h2: {
       fontSize: [ '32px' ],

ui/tx/details/TxInfo.tsx

@@ -530,7 +530,18 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
                 <Box minWidth="120px" flexShrink={ 0 }>
                   <WvmTxTag tag={ tag[0] }/>
                 </Box>
-                <Text flexGrow={ 1 } wordBreak="break-word">{ tag[1] }</Text>
+                <Text
+                  color="#fff"
+                  fontSize="14px"
+                  padding="2px 5px"
+                  width="fit-content"
+                  fontWeight="normal"
+                  wordBreak="break-word"
+                  backgroundColor="#161625"
+                  fontFamily="Spline Sans Mono"
+                >
+                  { tag[1] }
+                </Text>
               </Box>
             )) }
           </Box>