chore: change style of BRC20

Author: slient-coder

src/ui/components/BRC20BalanceCard2/index.tsx

@@ -133,9 +133,9 @@ export default function BRC20BalanceCard2(props: BRC20BalanceCard2Props) {
                     <Card
                       key={'transfer_' + index}
                       style={{ width: 68, height: 68 }}
-                      bg={v === 'Deploy' ? 'brc20_deploy' : 'brc20_transfer'}>
+                      bg={v === 'Transfer' ? 'brc20_transfer' : v === 'Deploy' ? 'brc20_deploy' : 'brc20_other'}>
                       <Column gap="zero">
-                        <Text text={v} size={v === 'Transfer' ? 'sm' : v === 'Deploy' ? 'md' : 'xxl'} />
+                        <Text text={v} size={v === 'Transfer' ? 'sm' : v === 'Deploy' ? 'sm' : 'md'} />
                         {v === 'Transfer' ? <Text text={`(${_amounts[index]})`} size="xxs" textCenter wrap /> : null}
                       </Column>
                     </Card>

src/ui/components/BRC20Preview/index.tsx

@@ -32,9 +32,9 @@ export default function BRC20Preview({
   }
   let balanceSize = 'xxl';
   if (balance.length < 7) {
-    balanceSize = 'xxl';
+    balanceSize = 'md';
   } else if (balance.length < 14) {
-    balanceSize = 'xl';
+    balanceSize = 'md';
   } else if (balance.length < 21) {
     balanceSize = 'md';
   } else {
@@ -44,7 +44,7 @@ export default function BRC20Preview({
   let width = 100;
   let height = 130;
   let bodyHeight = 90;
-  let numberSize: any = 'md';
+  let numberSize: any = 'sm';
   let tickerPreset: any = 'md';
   if (preset === 'small') {
     width = 80;
@@ -76,23 +76,30 @@ export default function BRC20Preview({
         borderWidth: selected ? 1 : 0,
         borderColor: colors.primary
       }}
+      gap="zero"
       onClick={onClick}>
-      <Column
+      <Row
+        bg={bg}
         style={{
-          padding: 8,
-          height: bodyHeight,
           borderTopLeftRadius: 5,
           borderTopRightRadius: 5
-        }}
-        bg={bg}>
-        <Row>
+        }}>
+        <Row
+          style={{ backgroundColor: 'rgba(255,255,255,0.2)', borderBottomRightRadius: 5, borderTopLeftRadius: 5 }}
+          px="sm">
           <BRC20Ticker tick={tick} preset={tickerPreset} />
         </Row>
-
+      </Row>
+      <Column
+        style={{
+          height: bodyHeight
+        }}
+        justifyCenter
+        bg={bg}>
         <Text text={balance} size={balanceSize as any} textCenter wrap />
       </Column>
 
-      <Column px="sm" pb="sm" gap="sm">
+      <Column px="sm" pb="sm" gap="sm" py="sm">
         <Row itemsCenter justifyCenter>
           <Text text={`#${inscriptionNumber}`} color="primary" size={numberSize} />
         </Row>

src/ui/pages/BRC20/BRC20TokenScreen.tsx

@@ -160,9 +160,9 @@ export default function BRC20TokenScreen() {
           </Column>
           <Column>
             <Row justifyBetween>
-              <Text text="Transferable" preset="bold" size="lg" />
-              <Row itemsCenter>
-                <Text text={`${tokenSummary.tokenBalance.transferableBalance}`} preset="bold" size="lg" wrap />
+              <Text text="Transferable" preset="bold" size="md" />
+              <Row itemsCenter justifyCenter>
+                <Text text={`${tokenSummary.tokenBalance.transferableBalance}`} size="md" wrap />
                 <BRC20Ticker tick={ticker} />
               </Row>
             </Row>

src/ui/theme/colors.ts

@@ -19,7 +19,7 @@ const palette = {
   green_light: '#5ec04f',
 
   yellow_dark: '#d5ac00',
-  yellow: 'rgb(253,224,71)',
+  yellow: '#e3bb5f',
   yellow_light: '#fcd226',
 
   red_dark: '#c92b40',
@@ -62,9 +62,10 @@ export const colors = Object.assign({}, palette, {
 
   icon_yellow: '#FFBA33',
 
-  brc20_deploy: '#9F5315',
-  brc20_transfer: '#2D7E24',
-  brc20_transfer_selected: '#41B530'
+  brc20_deploy: '#233933',
+  brc20_transfer: '#375e4d',
+  brc20_transfer_selected: '#41B530',
+  brc20_other: '#3e3e3e'
 });
 
 export type ColorTypes = keyof typeof colors;