From caff2aa9d2ae2c86a4ce19df6b1fbcf477dc1ba4 Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Wed, 25 Oct 2023 10:02:08 +0100
Subject: [PATCH] format delegations summary

---
 .../src/components/Rewards/RewardsSummary.tsx | 77 +++++++++++++------
 1 file changed, 53 insertions(+), 24 deletions(-)

diff --git a/nym-wallet/src/components/Rewards/RewardsSummary.tsx b/nym-wallet/src/components/Rewards/RewardsSummary.tsx
index c6e48b395c..75f7da4a7b 100644
--- a/nym-wallet/src/components/Rewards/RewardsSummary.tsx
+++ b/nym-wallet/src/components/Rewards/RewardsSummary.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { CircularProgress, Stack, Typography } from '@mui/material';
+import { CircularProgress, Stack, StackProps, Typography, useMediaQuery } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { useDelegationContext } from 'src/context/delegations';
 import { InfoTooltip } from '../InfoToolTip';
@@ -9,34 +9,63 @@ export const RewardsSummary: FCWithChildren<{
   totalDelegation?: string;
   totalRewards?: string;
 }> = ({ isLoading, totalDelegation, totalRewards }) => {
-  const theme = useTheme();
-
   const { totalDelegationsAndRewards } = useDelegationContext();
   return (
     <Stack direction="row" justifyContent="space-between" marginTop={3}>
       <Stack direction="row" spacing={5}>
-        <Stack direction="row" spacing={1} alignItems="center">
-          <InfoTooltip title="The total amount you have delegated to node(s) in the network. The amount also includes the rewards you have accrued since last time you claimed your rewards" />
-          <Typography>Total delegations:</Typography>
-          <Typography fontWeight={600} fontSize={16} textTransform="uppercase">
-            {isLoading ? <CircularProgress size={theme.typography.fontSize} /> : totalDelegationsAndRewards || '-'}
-          </Typography>
-        </Stack>
-        <Stack direction="row" spacing={1} alignItems="center">
-          <InfoTooltip title="The initial amount you delegated to the node(s)" />
-          <Typography>Original delegations:</Typography>
-          <Typography fontWeight={600} fontSize={16} textTransform="uppercase">
-            {isLoading ? <CircularProgress size={theme.typography.fontSize} /> : totalDelegation || '-'}
-          </Typography>
-        </Stack>
-        <Stack direction="row" spacing={1} alignItems="center">
-          <InfoTooltip title="The rewards you have accrued since the last time you claimed your rewards. Rewards are automatically compounded. You can claim your rewards at any time." />
-          <Typography>Total rewards:</Typography>
-          <Typography fontWeight={600} fontSize={16} textTransform="uppercase">
-            {isLoading ? <CircularProgress size={theme.typography.fontSize} /> : totalRewards || '-'}
-          </Typography>
-        </Stack>
+        <RewardSummaryField
+          title="Total delegations"
+          value={totalDelegationsAndRewards || '-'}
+          isLoading={isLoading}
+          Tooltip={
+            <InfoTooltip title="The total amount you have delegated to node(s) in the network. The amount also includes the rewards you have accrued since last time you claimed your rewards" />
+          }
+        />
+        <RewardSummaryField
+          title="Original delegations"
+          value={totalDelegation || '-'}
+          isLoading={isLoading}
+          Tooltip={<InfoTooltip title="The initial amount you delegated to the node(s)" />}
+        />
+        <RewardSummaryField
+          title="Total rewards"
+          value={totalRewards || '-'}
+          isLoading={isLoading}
+          Tooltip={
+            <InfoTooltip title="The rewards you have accrued since the last time you claimed your rewards. Rewards are automatically compounded. You can claim your rewards at any time." />
+          }
+        />
       </Stack>
     </Stack>
   );
 };
+
+const RewardSummaryField = ({
+  title,
+  value,
+  Tooltip,
+  isLoading,
+}: {
+  title: string;
+  value: string;
+  Tooltip?: React.ReactNode;
+  isLoading?: boolean;
+}) => {
+  const breakpoint = useMediaQuery(useTheme().breakpoints.down('xl'));
+  const alignProps: { gap: number; direction: StackProps['direction'] } = {
+    gap: breakpoint ? 0 : 1,
+    direction: breakpoint ? 'column' : 'row',
+  };
+
+  return (
+    <Stack {...alignProps} alignItems="start">
+      <Stack direction="row" alignItems="center" gap={1}>
+        {Tooltip}
+        <Typography>{title}:</Typography>
+      </Stack>
+      <Typography fontWeight={600} fontSize={16} textTransform="uppercase">
+        {isLoading ? <CircularProgress size={16} /> : value}
+      </Typography>
+    </Stack>
+  );
+};