feat: improve modal and header

forbole · Mar 8, 2024 · 1924098 · 1924098
1 parent d0ca5cc
commit 1924098
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/src/features/core/components/common-modal.tsx b/src/features/core/components/common-modal.tsx
@@ -52,6 +52,7 @@ const CommonModal = ({ children, ...props }: Props) => {
           zIndex: 10,
         },
         overlay: {
+          backdropFilter: "blur(10px)",
           backgroundColor: "rgba(0, 0, 0, 0.5)",
         },
       }}

diff --git a/src/features/core/components/table.tsx b/src/features/core/components/table.tsx
@@ -29,7 +29,7 @@ export const HeaderTitleBase = <SortMethod extends string>({
       <button
         className={[
           "flex flex-row items-center gap-[8px] uppercase",
-          onSort ? "cursor-pointer" : "",
+          onSort ? "cursor-pointer" : "cursor-default",
         ].join(" ")}
         onClick={() => {
           if (!onSort || !sort) return;

diff --git a/src/features/staking/components/validator-delegation.tsx b/src/features/staking/components/validator-delegation.tsx
@@ -5,6 +5,7 @@ import BigNumber from "bignumber.js";
 import { useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 
+import { minDisplayedXion } from "@/constants";
 import {
   Button,
   ButtonPill,
@@ -90,9 +91,19 @@ export default function ValidatorDelegation() {
   ) : (
     <div className="grid min-w-[1000px] grid-cols-4 rounded-[24px] bg-bg-600 p-[24px]">
       <div className="relative">
-        <Heading8>Claimable Rewards</Heading8>
+        <Heading8>Claimable Rewards (XION)</Heading8>
         <div className="mb-[8px] mt-[12px] flex flex-row items-center gap-[8px]">
-          <Heading2>{formatXionToUSD(totalRewards)}</Heading2>
+          <div className="flex flex-col gap-[8px]">
+            {totalRewards && (
+              <Heading2 title={[totalRewards.amount, "XION"].join(" ")}>
+                {formatToSmallDisplay(
+                  new BigNumber(totalRewards.amount),
+                  minDisplayedXion,
+                )}
+              </Heading2>
+            )}
+            <Heading8>{formatXionToUSD(totalRewards)}</Heading8>
+          </div>
           {getCanClaimAnyRewards(staking.state) && (
             <ButtonPill
               onClick={() => {