fix: mark ui bugs

leather-io · Nov 28, 2023 · e9da651 · e9da651
1 parent 8dbfefe
commit e9da651
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 20 deletions.
diff --git a/src/app/components/inscription-preview-card/components/inscription-text.tsx b/src/app/components/inscription-preview-card/components/inscription-text.tsx
@@ -1,6 +1,7 @@
 import { sanitize } from 'dompurify';
 import { Box } from 'leather-styles/jsx';
 
+import { parseJson } from '@app/components/json';
 import { LoadingSpinner } from '@app/components/loading-spinner';
 import { useInscriptionTextContentQuery } from '@app/query/bitcoin/ordinals/inscription-text-content.query';
 
@@ -16,12 +17,6 @@ export function InscriptionText(props: InscriptionTextProps) {
 
   return (
     <Box
-      height="100%"
-      color="white"
-      p="20px"
-      position="relative"
-      overflow="hidden"
-      textAlign="left"
       _after={{
         content: '""',
         position: 'absolute',
@@ -31,8 +26,16 @@ export function InscriptionText(props: InscriptionTextProps) {
         width: '100%',
         backgroundImage: 'linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1))',
       }}
+      color="white"
+      fontSize="9px"
+      height="100%"
+      p="space.03"
+      position="relative"
+      overflow="hidden"
+      textAlign="left"
+      width="100%"
     >
-      {sanitize(query.data)}
+      <pre>{sanitize(parseJson(query.data))}</pre>
     </Box>
   );
 }
diff --git a/src/app/components/json.tsx b/src/app/components/json.tsx
@@ -4,6 +4,14 @@ import { Box } from 'leather-styles/jsx';
 
 import { isBigInt, isTypedArray } from '@shared/utils';
 
+export function parseJson(content: string) {
+  try {
+    return JSON.stringify(JSON.parse(content), null, 2);
+  } catch (e) {
+    return content;
+  }
+}
+
 function parseJsonReadable(value: any) {
   if (isBigInt(value)) return value.toString();
   if (isTypedArray(value)) return bytesToHex(value);

diff --git a/src/app/features/collectibles/components/bitcoin/inscription-text.tsx b/src/app/features/collectibles/components/bitcoin/inscription-text.tsx
@@ -1,16 +1,9 @@
+import { parseJson } from '@app/components/json';
 import { useInscriptionTextContentQuery } from '@app/query/bitcoin/ordinals/inscription-text-content.query';
 import { OrdinalIcon } from '@app/ui/components/icons/ordinal-icon';
 
 import { CollectibleText } from '../_collectible-types/collectible-text';
 
-function processContent(content: string) {
-  try {
-    return JSON.stringify(JSON.parse(content), null, 2);
-  } catch (e) {
-    return content;
-  }
-}
-
 interface InscriptionTextProps {
   contentSrc: string;
   inscriptionNumber: number;
@@ -33,7 +26,7 @@ export function InscriptionText({
       key={inscriptionNumber}
       onClickCallToAction={onClickCallToAction}
       onClickSend={onClickSend}
-      content={processContent(query.data)}
+      content={parseJson(query.data)}
       subtitle="Ordinal inscription"
       title={`# ${inscriptionNumber}`}
     />

diff --git a/src/app/features/collectibles/components/collectible-item.layout.tsx b/src/app/features/collectibles/components/collectible-item.layout.tsx
@@ -89,10 +89,11 @@ export function CollectibleItemLayout({
         <Box p="space.02">
           <styled.button
             _focus={{ clipPath: 'none', outline: 'focus' }}
-            _hover={{ bg: 'accent.background-primary', fontWeight: 500 }}
+            _hover={{ bg: 'accent.background-primary' }}
             bg="accent.background-primary"
             borderRadius="sm"
             clipPath={isHovered ? 'none' : 'circle(0%)'}
+            fontWeight={500}
             onClick={e => {
               e.stopPropagation();
               onClickSend();

diff --git a/src/app/features/psbt-signer/psbt-signer.tsx b/src/app/features/psbt-signer/psbt-signer.tsx
@@ -119,7 +119,6 @@ export function PsbtSigner(props: PsbtSignerProps) {
       <PsbtSignerLayout>
         <PsbtRequestHeader name={name} origin={origin} />
         <PsbtRequestDetailsLayout>
-          <PsbtRequestSighashWarningLabel />
           {isPsbtMutable ? <PsbtRequestSighashWarningLabel /> : null}
           <PsbtRequestDetailsHeader />
           <PsbtInputsOutputsTotals />

diff --git a/src/app/features/theme-drawer/theme-list-item-layout.tsx b/src/app/features/theme-drawer/theme-list-item-layout.tsx
@@ -1,5 +1,4 @@
 import { Box, Flex, styled } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
 
 import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon';
 
@@ -21,7 +20,7 @@ export function ThemeListItemLayout({
         isActive
           ? undefined
           : {
-              backgroundColor: token('colors.brown.2'),
+              backgroundColor: 'accent.component-background-hover',
             }
       }
       px="space.05"