Explorer: Moving where is displayed the delegators number (#1341)

* moving the delegators number

* changing column header and styles order

* another color test

explorer/src/components/MixNodes/BondBreakdown.tsx

@@ -149,14 +149,6 @@ export const BondBreakdownTable: React.FC = () => {
             >
               Delegations  
             </Typography>
-            <Typography
-              sx={{
-                fontSize: 12,
-                fontWeight: 400,
-              }}
-            >
-              {`(${uniqDelegations?.data?.length} delegators)`}
-            </Typography>
           </Box>
           <Table stickyHeader>
             <TableHead>

explorer/src/pages/MixnodeDetail/index.tsx

@@ -63,7 +63,7 @@ const columns: ColumnsType[] = [
  * Shows mix node details
  */
 const PageMixnodeDetailWithState: React.FC = () => {
-  const { mixNode, mixNodeRow, description, stats, status, uptimeStory } = useMixnodeContext();
+  const { mixNode, mixNodeRow, description, stats, status, uptimeStory, uniqDelegations } = useMixnodeContext();
 
   return (
     <Box component="main">
@@ -95,7 +95,7 @@ const PageMixnodeDetailWithState: React.FC = () => {
 
       <Grid container spacing={2} mt={0}>
         <Grid item xs={12}>
-          <ContentCard title="Stake Breakdown">
+          <ContentCard title={`Stake Breakdown (${uniqDelegations?.data?.length} delegators)`}>
             <BondBreakdownTable />
           </ContentCard>
         </Grid>

explorer/src/pages/Mixnodes/index.tsx

@@ -19,8 +19,8 @@ import { splice } from '../../utils';
 import { getMixNodeStatusColor } from '../../components/MixNodes/Status';
 import { MixNodeStatusDropdown } from '../../components/MixNodes/StatusDropdown';
 
-const getCellFontStyle = (theme: Theme, row: MixnodeRowType) => {
-  const color = getMixNodeStatusColor(theme, row.status);
+const getCellFontStyle = (theme: Theme, row: MixnodeRowType, textColor?: string) => {
+  const color = textColor || getMixNodeStatusColor(theme, row.status);
   return {
     fontWeight: 400,
     fontSize: 12,
@@ -28,10 +28,10 @@ const getCellFontStyle = (theme: Theme, row: MixnodeRowType) => {
   };
 };
 
-const getCellStyles = (theme: Theme, row: MixnodeRowType): SxProps => ({
+const getCellStyles = (theme: Theme, row: MixnodeRowType, textColor?: string): SxProps => ({
   ...cellStyles,
   // TODO: should these be here, or change in `cellStyles`??
-  ...getCellFontStyle(theme, row),
+  ...getCellFontStyle(theme, row, textColor),
 });
 
 export const PageMixnodes: React.FC = () => {
@@ -189,8 +189,7 @@ export const PageMixnodes: React.FC = () => {
         <MuiLink
           sx={{
             textAlign: 'left',
-            color: params.value > 100 ? theme.palette.warning.main : 'inherit',
-            ...getCellStyles(theme, params.row),
+            ...getCellStyles(theme, params.row, params.value > 100 ? 'theme.palette.warning.main' : undefined),
           }}
           component={RRDLink}
           to={`/network-components/mixnode/${params.row.identity_key}`}
@@ -236,8 +235,8 @@ export const PageMixnodes: React.FC = () => {
     },
     {
       field: 'avg_uptime',
-      headerName: 'Average Uptime',
-      renderHeader: () => <CustomColumnHeading headingTitle="Average Uptime" />,
+      headerName: 'Avg. Uptime',
+      renderHeader: () => <CustomColumnHeading headingTitle="Avg. Uptime" />,
       headerClassName: 'MuiDataGrid-header-override',
       width: 160,
       headerAlign: 'left',