polish styles

Author: joaojmendes

src/controls/KPIControl/KpiCard.tsx

@@ -43,7 +43,7 @@ export const KPICard: React.FunctionComponent<IKpiCardProps> = (
   const isOnTrack = React.useMemo(
     () =>
       dataCard.goalMetric === EGoalMetric.LOWER_IS_BETTER
-        ? dataCard.currentValue <= dataCard.goal  // Lower is better: on track when current <= goal
+        ? dataCard.currentValue <= dataCard.goal // Lower is better: on track when current <= goal
         : dataCard.currentValue >= dataCard.goal, // Higher is better: on track when current >= goal
     [dataCard.currentValue, dataCard.goal, dataCard.goalMetric],
   );
@@ -61,7 +61,7 @@ export const KPICard: React.FunctionComponent<IKpiCardProps> = (
     [dataCard.currentValue, dataCard.totalItems],
   );
 
-  // Success / Danger foregrounds (icon + badge text + bar fill)
+  // Success / Danger foregrounds
   const accentFg = React.useMemo(
     () =>
       isOnTrack
@@ -120,7 +120,8 @@ export const KPICard: React.FunctionComponent<IKpiCardProps> = (
                     infoButton={{
                       popover: {
                         open: isInfoLabelOpen,
-                        onOpenChange: (_e, data) => setIsInfoLabelOpen(data.open),
+                        onOpenChange: (_e, data) =>
+                          setIsInfoLabelOpen(data.open),
                       },
                     }}
                     info={
@@ -211,57 +212,47 @@ export const KPICard: React.FunctionComponent<IKpiCardProps> = (
               content={strings.KPIMaxAllowedThreshold}
               relationship="inaccessible"
             >
-              <Text className={styles.footerMetric}>
+              <Stack alignItems="center" gap={tokens.spacingVerticalXXS}>
                 <TargetRegular className={styles.footerIcon} />
                 <Text className={styles.footerLabel}>Goal</Text>
                 <Text className={styles.footerValue}>{goal}</Text>
-              </Text>
+              </Stack>
             </Tooltip>
 
-            <Divider
-              vertical
-              style={{
-                height: '32px',
-                borderColor: tokens.colorNeutralStroke1, // token border
-              }}
-            />
+            <Divider vertical className={styles.footerDivider} />
 
             {/* Total Items */}
             <Tooltip
               content={strings.KPITotalItemsInScope}
               relationship="inaccessible"
             >
-              <Text className={styles.footerMetric}>
+              <Stack alignItems="center" gap={tokens.spacingVerticalXXS}>
                 <DocumentRegular className={styles.footerIcon} />
                 <Text className={styles.footerLabel}>
                   {strings.KPITotalItems}
                 </Text>
                 <Text className={styles.footerValue}>
                   {dataCard.totalItems.toLocaleString()}
                 </Text>
-              </Text>
+              </Stack>
             </Tooltip>
 
-            <Divider
-              vertical
-              style={{
-                height: '32px',
-                borderColor: tokens.colorNeutralStroke1,
-              }}
-            />
+            <Divider vertical className={styles.footerDivider} />
 
             {/* % of Total */}
             <Tooltip
               content={strings.KPICurrentValueAsPercent}
               relationship="inaccessible"
             >
-              <Text className={styles.footerMetric}>
+              <Stack alignItems="center" gap={tokens.spacingVerticalXXS}>
                 <CalculatorRegular className={styles.footerIcon} />
-                <Text className={styles.footerLabel}>{strings.KPIPercentOfTotal}</Text>
+                <Text className={styles.footerLabel}>
+                  {strings.KPIPercentOfTotal}
+                </Text>
                 <Text className={styles.footerValue}>
                   {totalPercent.toFixed(2)}%
                 </Text>
-              </Text>
+              </Stack>
             </Tooltip>
           </CardFooter>
           <Stack>

src/controls/KPIControl/KpiCardCompact.tsx

@@ -48,7 +48,7 @@ export const KPICardCompact: React.FunctionComponent<IKpiCardProps> = (
     [isOnTrack],
   );
 
-  // Success / Danger foregrounds (icon + badge text + bar fill)
+  // Success / Danger foregrounds
   const accentFg = React.useMemo(
     () =>
       isOnTrack
@@ -57,11 +57,6 @@ export const KPICardCompact: React.FunctionComponent<IKpiCardProps> = (
     [isOnTrack],
   );
 
-  // Success / Danger backgrounds (badge pill bg)
-
-  // Success / Danger borders (badge pill border)
-
-
   return (
     <>
       <Card className={styles.card} style={{ height: '168px' }} onMouseLeave={handleCardMouseLeave}>

src/controls/KPIControl/useKpiStyles.tsx

@@ -22,6 +22,7 @@ interface IKpiStyles {
   footerIcon: string;
   footerLabel: string;
   footerValue: string;
+  footerDivider: string;
   glowBlob: string;
   glowBlobSuccess: string;
   glowBlobError: string;
@@ -42,6 +43,7 @@ interface IKpiStyles {
   noKpiButtonContainer: string;
   noKpiButton: string;
   noKpiDecorativeLine: string;
+  footerGrid: string;
 }
 
 export const useKpiStyles = (): IKpiStyles => {
@@ -92,6 +94,10 @@ export const useKpiStyles = (): IKpiStyles => {
       fontWeight: tokens.fontWeightSemibold,
       color: tokens.colorNeutralForeground2,
     }),
+    footerDivider: css({
+      height: "32px",
+      borderColor: tokens.colorNeutralStroke1,
+    }),
     glowBlob: css({
       position: "absolute",
       top: "-60px",
@@ -292,6 +298,14 @@ export const useKpiStyles = (): IKpiStyles => {
       position: "relative",
       zIndex: 1,
     }),
+    footerGrid: css({
+      width: "100%",
+      display: "grid",
+      gridTemplateColumns: "repeat(auto-fit, minmax(80px, 1fr))",
+
+      alignItems: "center",
+
+    }),
   };
   return styles;
 };

src/loc/en-us.ts

@@ -487,6 +487,7 @@ KPIPercentOfTotal: "% of Total",
 KPIProgressGoal: "Progress Goal",
 KPISucess: "success",
 KPITotalItemsInScope: "Total items in scope",
+KPITotalItems: "Items",
 KPIWithinGoalThreshold: "Within goal threshold",
 worldMapCoord: "Coord:",
 worldMapE: "° E",