From 9c5165324c8721094a280c7fdc699fb6b13ab47d Mon Sep 17 00:00:00 2001
From: Ignacio <ignacio@forbole.com>
Date: Fri, 8 Mar 2024 19:46:36 +0800
Subject: [PATCH] fix: fonts and divisor colors

---
 src/features/core/components/base.tsx               |  9 ++++++---
 src/features/staking/components/divisor.tsx         |  6 ++++--
 .../staking/components/validator-delegation.tsx     | 13 +++++++------
 src/features/staking/components/validator-page.tsx  |  9 +++++++--
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/features/core/components/base.tsx b/src/features/core/components/base.tsx
index 2191393..ad557fe 100644
--- a/src/features/core/components/base.tsx
+++ b/src/features/core/components/base.tsx
@@ -58,7 +58,7 @@ export const Heading2 = ({
 export const Heading8 = ({
   children,
   className = "",
-  color = "text-typo-150",
+  color = "text-[#ffffff80]",
   title,
 }: TypographyProps & { color?: string }) => (
   <div
@@ -78,7 +78,7 @@ export const BodyMedium = ({
 }: TypographyProps) => (
   <div
     className={[
-      "text-[16px] font-normal leading-[24px] text-typo-125",
+      "text-[16px] font-normal leading-[24px] text-[#ffffffb3]",
       className,
     ].join(" ")}
     title={title}
@@ -93,7 +93,10 @@ type NavLinkProps = {
 };
 
 export const NavLink = ({ children, href }: NavLinkProps) => (
-  <Link className="text-left font-normal leading-[24px] underline" href={href}>
+  <Link
+    className="text-left font-normal leading-[24px] underline underline-offset-[2px]"
+    href={href}
+  >
     {children}
   </Link>
 );
diff --git a/src/features/staking/components/divisor.tsx b/src/features/staking/components/divisor.tsx
index 0fff870..6773a48 100644
--- a/src/features/staking/components/divisor.tsx
+++ b/src/features/staking/components/divisor.tsx
@@ -1,7 +1,9 @@
 export const DivisorHorizontal = ({ className }: { className?: string }) => (
-  <div className={["h-[1px] w-full bg-bg-400", className || ""].join(" ")} />
+  <div
+    className={["h-[1px] w-full bg-[#ffffff33]", className || ""].join(" ")}
+  />
 );
 
 export const DivisorVertical = () => (
-  <div className="h-full w-[1px] bg-bg-400" />
+  <div className="h-full w-[1px] bg-[#ffffff33]" />
 );
diff --git a/src/features/staking/components/validator-delegation.tsx b/src/features/staking/components/validator-delegation.tsx
index f2ccae7..837b5e0 100644
--- a/src/features/staking/components/validator-delegation.tsx
+++ b/src/features/staking/components/validator-delegation.tsx
@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
 
 import { minDisplayedXion } from "@/constants";
 import {
+  BodyMedium,
   Button,
   ButtonPill,
   Heading2,
@@ -102,7 +103,7 @@ export default function ValidatorDelegation() {
                 )}
               </Heading2>
             )}
-            <Heading8>{formatXionToUSD(totalRewards)}</Heading8>
+            <BodyMedium>{formatXionToUSD(totalRewards)}</BodyMedium>
           </div>
           {getCanClaimAnyRewards(staking.state) && (
             <ButtonPill
@@ -134,7 +135,7 @@ export default function ValidatorDelegation() {
             </Heading2>
           )}
         </div>
-        <Heading8>{formatXionToUSD(userTotalDelegation)}</Heading8>
+        <BodyMedium>{formatXionToUSD(userTotalDelegation)}</BodyMedium>
         <div className="absolute bottom-0 right-[20px] top-0">
           <DivisorVertical />
         </div>
@@ -149,11 +150,11 @@ export default function ValidatorDelegation() {
                 : "-"}
             </Heading2>
           </div>
-          <Heading8>
+          <BodyMedium>
             {availableToStakeBN
               ? formatXionToUSD(getXionCoin(availableToStakeBN))
               : "-"}
-          </Heading8>
+          </BodyMedium>
           <div className="absolute bottom-0 right-[20px] top-0">
             <DivisorVertical />
           </div>
@@ -171,9 +172,9 @@ export default function ValidatorDelegation() {
                 : "-"}
             </Heading2>
           </div>
-          <Heading8>
+          <BodyMedium>
             {userTotalUnbondings ? formatXionToUSD(userTotalUnbondings) : "-"}
-          </Heading8>
+          </BodyMedium>
         </div>
         {!!unbondings?.length && (
           <div className="flex h-full flex-row items-end justify-end text-right">
diff --git a/src/features/staking/components/validator-page.tsx b/src/features/staking/components/validator-page.tsx
index bef48cb..0d22788 100644
--- a/src/features/staking/components/validator-page.tsx
+++ b/src/features/staking/components/validator-page.tsx
@@ -9,6 +9,7 @@ import { useEffect, useState } from "react";
 
 import { basePath, defaultAvatar } from "@/constants";
 import {
+  BodyMedium,
   ClipboardCopy,
   Heading2,
   Heading8,
@@ -147,7 +148,9 @@ export default function ValidatorPage() {
               <div className="mb-[8px] mt-[12px]">
                 <Heading2>{formatToSmallDisplay(totalStakeBN)}</Heading2>
               </div>
-              <Heading8>{formatXionToUSD(getXionCoin(totalStakeBN))}</Heading8>
+              <BodyMedium>
+                {formatXionToUSD(getXionCoin(totalStakeBN))}
+              </BodyMedium>
               <div className="absolute bottom-0 right-[20px] top-0">
                 <DivisorVertical />
               </div>
@@ -188,7 +191,9 @@ export default function ValidatorPage() {
                     : "-"}
                 </Heading2>
               </div>
-              <Heading8>{formatXionToUSD(myDelegationToValidator)}</Heading8>
+              <BodyMedium>
+                {formatXionToUSD(myDelegationToValidator)}
+              </BodyMedium>
             </div>
           </div>
           <DivisorHorizontal className="min-w-[1000px]" />