From 92774440a233083a5dff36a8d3db02c56788ba8f Mon Sep 17 00:00:00 2001
From: Pietro <pietro.di.marco@dfinity.org>
Date: Thu, 22 Aug 2024 17:38:49 +0200
Subject: [PATCH] Box style widget

---
 .../src/Styles.tsx                                | 15 ++++-----------
 .../src/components/NodeChart.tsx                  |  6 +++---
 .../src/components/Widgets.tsx                    |  4 ++--
 3 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/Styles.tsx b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/Styles.tsx
index 8158b8ab6..f3a990aec 100644
--- a/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/Styles.tsx
+++ b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/Styles.tsx
@@ -6,20 +6,13 @@ export const paperStyle: SxProps<Theme> = {
   p: 2,
 };
 
-export const boxStyleLeft: SxProps<Theme> = {
+export const boxStyleWidget = (justifyContent: 'left' | 'right', alignItems?: 'flex-start' | 'center' | 'flex-end'): SxProps<Theme> => ({
   display: 'flex',
   flexWrap: 'wrap',
-  justifyContent: 'left',
+  justifyContent: justifyContent,
+  alignItems: alignItems || 'stretch',
   gap: 2,
-};
-
-export const boxStyleRight: SxProps<Theme> = {
-  display: 'flex',
-  flexWrap: 'wrap',
-  justifyContent: 'right',
-  alignItems: 'left',
-  gap: 2,
-};
+});
 
 export const paperStyleWidget: SxProps<Theme> = {
     p: 2, 
diff --git a/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/NodeChart.tsx b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/NodeChart.tsx
index e381443aa..93f2d6329 100644
--- a/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/NodeChart.tsx
+++ b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/NodeChart.tsx
@@ -6,7 +6,7 @@ import { Box, Grid, Paper, Typography } from '@mui/material';
 import { useParams } from 'react-router-dom';
 import DailyPerformanceChart from './DailyPerformanceChart';
 import NodeInfo from './NodeInfo';
-import { paperStyle, boxStyleLeft, boxStyleRight } from '../Styles';
+import { paperStyle, boxStyleWidget } from '../Styles';
 import { NodeRewardsResponse } from '../../../declarations/trustworthy-node-metrics/trustworthy-node-metrics.did';
 
 export interface NodeChartProps {
@@ -15,14 +15,14 @@ export interface NodeChartProps {
 }
 
 const NodeMetricsStats: React.FC<{ stats: NodeRewardsResponse['rewards_stats'] }> = ({ stats }) => (
-    <Box sx={boxStyleLeft}>
+    <Box sx={boxStyleWidget('left')}>
         <WidgetNumber value={stats.blocks_proposed.toString()} title="Blocks Proposed Total" />
         <WidgetNumber value={stats.blocks_failed.toString()} title="Blocks Failed Total" />
     </Box>
 );
 
 const NodePerformanceStats: React.FC<{ failureRateAvg: string, rewardPercent: string }> = ({ failureRateAvg, rewardPercent }) => (
-    <Box sx={boxStyleRight}>
+    <Box sx={boxStyleWidget('right')}>
         <WidgetNumber value={failureRateAvg} title="Failure Rate Assigned" />
         <WidgetNumber value={rewardPercent} title="Rewards Percent Assigned" />
         <WidgetNumber value={"100%"} title="Rewards Percent Unassigned" />
diff --git a/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/Widgets.tsx b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/Widgets.tsx
index 977168796..91345d827 100644
--- a/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/Widgets.tsx
+++ b/rs/dre-canisters/trustworthy-node-metrics/src/trustworthy-node-metrics-frontend/src/components/Widgets.tsx
@@ -1,6 +1,6 @@
 import { Box, Paper, Stack, Typography } from '@mui/material';
 import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge';
-import { boxStyleRight, paperStyleWidget } from '../Styles';
+import { boxStyleWidget, paperStyleWidget } from '../Styles';
 
 import React from 'react';
 
@@ -24,7 +24,7 @@ export function WidgetNumber({ value, title }: { value: string, title: string })
 export function WidgetGauge({ value, title }: { value: number, title: string }) {
   return (
     <Box 
-      sx={boxStyleRight}
+      sx={boxStyleWidget('right')}
     >
       <Paper 
         elevation={15}