fix: fixed some signers page ui bugs

hirosystems · Feb 27, 2025 · 7a28acc · 7a28acc
1 parent 7061635
commit 7a28acc
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/src/app/signers/CurrentCycleCard.tsx b/src/app/signers/CurrentCycleCard.tsx
@@ -85,10 +85,10 @@ export function CurrentCycleCardBase() {
   const pieChart = useMemo(
     () => (
       <Box
-        width={pieChartWidth}
-        height={pieChartHeight}
-        minWidth={pieChartWidth}
-        minHeight={pieChartHeight}
+        width={`${pieChartWidth}px`}
+        height={`${pieChartHeight}px`}
+        minWidth={`${pieChartWidth}px`}
+        minHeight={`${pieChartHeight}px`}
       >
         <PieChart width={pieChartWidth} height={pieChartHeight}>
           <defs>
@@ -164,7 +164,7 @@ export function CurrentCycleCardBase() {
     <ClientOnly>
       <Card padding={6} height="100%" width="100%">
         <Flex mb={3}>
-          <Box mr="16px">{pieChart}</Box>
+          <Box mr={4}>{pieChart}</Box>
           <Stack gap={3}>
             <Text fontSize={'xs'} fontWeight="medium" whiteSpace={'nowrap'}>
               Current cycle

diff --git a/src/app/signers/SignerDistributionPieChart.tsx b/src/app/signers/SignerDistributionPieChart.tsx
@@ -41,8 +41,8 @@ const startAngle = 0;
 const endAngle = -(360 - startAngle);
 const innerRadius = 70;
 const outerRadius = 100;
-const pieChartWidth = 220;
-const pieChartHeight = 220;
+export const singersPieChartWidth = 220;
+export const signersPieChartHeight = 220;
 
 interface PieData {
   name: string;
@@ -208,7 +208,7 @@ export function SignersDistributionPieChart({
 
   const pieChart = useMemo(
     () => (
-      <PieChart width={pieChartWidth} height={pieChartHeight}>
+      <PieChart width={singersPieChartWidth} height={signersPieChartHeight}>
         <Pie
           paddingAngle={2}
           startAngle={startAngle}
@@ -254,8 +254,8 @@ export function SignersDistributionPieChart({
         <Tooltip content={<CustomTooltip />} />
         {renderCenterCustomizedLabel({
           numSigners: signers.length,
-          cx: pieChartWidth / 2,
-          cy: pieChartHeight / 2,
+          cx: singersPieChartWidth / 2,
+          cy: signersPieChartHeight / 2,
         })}
       </PieChart>
     ),

diff --git a/src/app/signers/skeleton.tsx b/src/app/signers/skeleton.tsx
@@ -9,6 +9,7 @@ import { PageTitle } from '../_components/PageTitle';
 import { SkeletonStatSection } from '../_components/Stats/skeleton';
 import { SignersDistributionLayout } from './SignerDistribution';
 import { SignerLegendItem, SignersDistributionLegendLayout } from './SignerDistributionLegend';
+import { signersPieChartHeight, singersPieChartWidth } from './SignerDistributionPieChart';
 import { SignersHeaderLayout } from './SignersHeader';
 import { SignersMapComponentLayout } from './SignersMapComponent';
 import { SignersTableLayout, signersTableHeaders } from './SignersTable';
@@ -42,7 +43,9 @@ export const TableHeaderSkeleton = () => (
   </Table.ColumnHeader>
 );
 
-export const PieChartSkeleton = () => <SkeletonCircle size="150" />;
+export const PieChartSkeleton = () => (
+  <SkeletonCircle h={signersPieChartHeight} w={singersPieChartWidth} />
+);
 
 export const SignersTableSkeleton = () => {
   const numRows = Array.from({ length: 10 }, (_, i) => i + 1);