@bundle-stats/ui 3.4.0-alpha.3 → 3.4.0-beta.0

package/lib/components/summary/summary.js

@@ -17,8 +17,6 @@ var _utils = require("@bundle-stats/utils");
 
 var _constants = require("../../constants");
 
-var _icon = require("../../ui/icon");
-
 var _box = require("../../layout/box");
 
 var _flexStack = require("../../layout/flex-stack");
@@ -73,23 +71,19 @@ var Summary = function Summary(_ref) {
         metricId = _ref5[0],
         metricOptions = _ref5[1];
 
-    return /*#__PURE__*/_react["default"].createElement("div", {
+    return /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, _extends({
       key: metricId,
-      className: _summaryModule["default"].item
-    }, /*#__PURE__*/_react["default"].createElement(_summaryItem.SummaryItem, {
+      className: _summaryModule["default"].item,
+      as: SummaryItemCustomLink
+    }, metricOptions.link, {
       size: size,
       id: metricId,
       data: (0, _get2["default"])(data, metricId),
-      budget: (0, _get2["default"])(budgets, getSourceMetricId(metricId)),
+      budget: (0, _get2["default"])(budgets, ['data', getSourceMetricId(metricId)]),
       loading: loading,
       showMetricDescription: true,
       showDelta: showSummaryItemDelta && metricOptions.showDelta !== false
-    }), !loading && /*#__PURE__*/_react["default"].createElement(SummaryItemCustomLink, _extends({}, metricOptions.link, {
-      className: _summaryModule["default"].readMore
-    }), /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-      className: _summaryModule["default"].readMoreIcon,
-      glyph: _icon.Icon.ICONS.ARROW_RIGHT_CIRLCE
-    })));
+    }));
   })));
 };
 

package/lib/components/summary/summary.module.css

@@ -6,49 +6,5 @@
 .item {
   padding: var(--space-small);
   flex: 1 0 25%; /* force equal sizes */
-  position: relative;
-  z-index: 1;
-}
-
-.item::before {
-  content: '';
-  display: block;
-  width: 1px;
-  position: absolute;
-  left: -1px;
-  top: var(--space-small);
-  bottom: var(--space-small);
-  background: var(--color-outline);
-}
-
-.readMore {
-  display: block;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  padding: var(--space-small);
-  color: var(--color-text-ultra-light);
-  transition: var(--transition-out);
-}
-
-.readMore:hover,
-.readMore:focus {
-  color: var(--color-primary);
-  transition: var(--transition-in);
-}
-
-.readMoreIcon {
-  display: block;
-}
-
-/** hover state */
-.readMore {
-  opacity: 0;
-}
-
-.item:hover .readMore,
-.item:active .readMore,
-.item:focus .readMore {
-  opacity: 1;
-  transition: var(--transition-in);
+  text-decoration: none;
 }

package/lib/components/summary/summary.stories.js

@@ -45,26 +45,54 @@ stories.add('budgets', function () {
   return /*#__PURE__*/_react["default"].createElement(_.Summary, {
     data: MULTIPLE_JOBS[0].summary,
     budgets: {
-      webpack: {
+      data: {
         totalSizeByTypeALL: {
-          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalSizeByTypeALL.current,
-          budgetValue: 1024 * 1024,
-          failed: false
+          type: 'ERROR',
+          message: {
+            text: 'Metric is over the budget',
+            md: 'Metric is over the budget'
+          },
+          data: {
+            currentValue: MULTIPLE_JOBS[0].summary.webpack.totalSizeByTypeALL.current,
+            budgetValue: 1024 * 1024,
+            failed: false
+          }
         },
         totalInitialSizeJS: {
-          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeJS.current,
-          budgetValue: 512 * 1024,
-          failed: true
+          type: 'WARNING',
+          message: {
+            text: 'Metric is over the budget',
+            md: 'Metric is over the budget'
+          },
+          data: {
+            currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeJS.current,
+            budgetValue: 512 * 1024,
+            failed: true
+          }
         },
         totalInitialSizeCSS: {
-          currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeCSS.current,
-          budgetValue: 50 * 1024,
-          failed: false
+          type: 'SUCCESS',
+          message: {
+            text: 'Metric is under the budget',
+            md: 'Metric is under the budget'
+          },
+          data: {
+            currentValue: MULTIPLE_JOBS[0].summary.webpack.totalInitialSizeCSS.current,
+            budgetValue: 50 * 1024,
+            failed: false
+          }
         },
         chunkCount: {
-          currentValue: MULTIPLE_JOBS[0].summary.webpack.chunkCount.current,
-          budgetValue: 50,
-          failed: false
+          type: 'SUCCESS',
+          message: {
+            text: 'Metric is under the budget',
+            md: 'Metric is under the budget'
+          },
+          data: {
+            currentValue: MULTIPLE_JOBS[0].summary.webpack.chunkCount.current,
+            budgetValue: 50,
+            failed: false
+          }
         }
       }
     }

package/lib/components/summary-item/summary-item.js

@@ -15,14 +15,12 @@ var _utils = require("@bundle-stats/utils");
 
 var _hoverCard = require("../../ui/hover-card");
 
-var _icon = require("../../ui/icon");
-
 var _skeleton = require("../../ui/skeleton");
 
-var _stack = require("../../layout/stack");
-
 var _flexStack = require("../../layout/flex-stack");
 
+var _stack = require("../../layout/stack");
+
 var _metric = require("../metric");
 
 var _delta = require("../delta");
@@ -46,8 +44,11 @@ var MetricInfo = function MetricInfo(_ref) {
       url = _ref.url;
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "xxxsmall"
-  }, /*#__PURE__*/_react["default"].createElement("p", null, description), url && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("a", {
-    href: url,
+  }, /*#__PURE__*/_react["default"].createElement("p", null, description), url && /*#__PURE__*/_react["default"].createElement("p", null, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return window.open(url);
+    },
     className: _summaryItemModule["default"].readMoreLink
   }, "Read more")));
 };
@@ -84,23 +85,17 @@ var SummaryItem = function SummaryItem(_ref2) {
   var showMetricDescriptionTooltip = showMetricDescription && (metric === null || metric === void 0 ? void 0 : metric.description);
   var rootClassName = (0, _classnames["default"])(_summaryItemModule["default"].root, className, _summaryItemModule["default"][size], showDelta && _summaryItemModule["default"].showDelta);
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, _extends({
-    space: "xxxsmall",
+    space: "xxsmall",
     as: Component,
     className: rootClassName
   }, props), /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-    as: "h3",
     space: "xxxsmall",
+    as: "h3",
     className: _summaryItemModule["default"].title
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: _summaryItemModule["default"].titleLabel
-  }, metric.label), showMetricDescriptionTooltip && /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
-    className: _summaryItemModule["default"].icon,
-    label: /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-      glyph: "help"
-    })
-  }, /*#__PURE__*/_react["default"].createElement(MetricInfo, metric)), budget && /*#__PURE__*/_react["default"].createElement(_budgetInfo.BudgetInfo, {
+  }, showMetricDescriptionTooltip ? /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+    label: metric.label
+  }, /*#__PURE__*/_react["default"].createElement(MetricInfo, metric)) : metric.label, budget && /*#__PURE__*/_react["default"].createElement(_budgetInfo.BudgetInfo, {
     className: _summaryItemModule["default"].budgetInfo,
-    metricId: id,
     budgetInsight: budget
   })), !loading ? /*#__PURE__*/_react["default"].createElement(_stack.Stack, null, /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
     className: _summaryItemModule["default"].currentMetric,
@@ -161,9 +156,6 @@ SummaryItem.propTypes = {
   showDelta: _propTypes["default"].bool,
 
   /** Budget insight data */
-  budget: _propTypes["default"].shape({
-    currentBalue: _propTypes["default"].number,
-    budgetValue: _propTypes["default"].number,
-    failed: _propTypes["default"].bool
-  })
+  budget: _propTypes["default"].object // eslint-disable-line react/forbid-prop-types
+
 };

package/lib/components/summary-item/summary-item.module.css

@@ -8,17 +8,11 @@
   color: var(--color-text-ultra-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
-  line-height: var(--space-small);
+  line-height: 1;
   text-transform: uppercase;
   white-space: nowrap;
 }
 
-.budgetInfo {
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
 .currentMetric {
   display: block;
   color: var(--color-heading);
@@ -39,6 +33,30 @@
   line-height: var(--space-small);
 }
 
+.readMoreLink {
+  appearance: none;
+  background: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.readMoreLink:hover,
+.readMoreLink:active,
+.readMoreLink:focus {
+  color: var(--color-primary-dark);
+  text-decoration: none;
+}
+
+/* Hover state */
+.root:hover .title {
+  color: var(--color-text-light);
+}
+
+
 /* Loading state */
 .loading.currentMetric {
   width: 8em;

package/lib/components/summary-item/summary-item.stories.js

@@ -58,9 +58,16 @@ exports.BudgetError = BudgetError;
 BudgetError.args = {
   showMetricDescription: true,
   budget: {
-    currentValue: 120 * 1000,
-    budgetValue: 100 * 1000,
-    failed: true
+    type: 'ERROR',
+    message: {
+      text: 'Metric is over the budget',
+      md: 'Metric is over the budget'
+    },
+    data: {
+      currentValue: 120 * 1000,
+      budgetValue: 100 * 1000,
+      failed: true
+    }
   }
 };
 var BudgetSuccess = Template.bind();
@@ -68,9 +75,16 @@ exports.BudgetSuccess = BudgetSuccess;
 BudgetSuccess.args = {
   showMetricDescription: true,
   budget: {
-    currentValue: 120 * 1000,
-    budgetValue: 120 * 1024,
-    failed: false
+    type: 'SUCCESS',
+    message: {
+      text: 'Metric is under the budget',
+      md: 'Metric is under the budget'
+    },
+    data: {
+      currentValue: 120 * 1000,
+      budgetValue: 120 * 1024,
+      failed: false
+    }
   }
 };
 var Loading = Template.bind();

package/lib/ui/hover-card/hover-card.js

@@ -53,6 +53,11 @@ var HoverCard = function HoverCard(props) {
   }); // Fallback to span if no href
 
   var Component = resolveComponent(as, href);
+
+  var handleOnClick = function handleOnClick(event) {
+    event.preventDefault();
+  };
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])(_hoverCardModule["default"].root, className)
   }, /*#__PURE__*/_react["default"].createElement(_hovercard.HovercardAnchor, {
@@ -65,7 +70,8 @@ var HoverCard = function HoverCard(props) {
     className: (0, _classnames["default"])(_hoverCardModule["default"].hoverCard, hoverCardClassName),
     style: {
       zIndex: 10000
-    }
+    },
+    onClick: handleOnClick
   }), /*#__PURE__*/_react["default"].createElement(_hovercard.HovercardArrow, {
     size: 24
   }), typeof children === 'function' ? children({

package/lib-esm/app/app.js

@@ -54,6 +54,7 @@ const Layout = _ref => {
 
 Layout.propTypes = {
   jobs: PropTypes.arrayOf(PropTypes.object),
+  // eslint-disable-line react/forbid-prop-types
   version: PropTypes.string
 };
 Layout.defaultProps = {
@@ -78,7 +79,8 @@ const JobsProvider = _ref2 => {
 };
 
 JobsProvider.propTypes = {
-  jobs: PropTypes.arrayOf(PropTypes.object).isRequired
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired // eslint-disable-line react/forbid-prop-types
+
 };
 
 const OverviewContent = () => {

package/lib-esm/app/header/header.js

@@ -21,7 +21,8 @@ export const Header = _ref => {
 };
 Header.propTypes = {
   className: PropTypes.string,
-  jobs: PropTypes.arrayOf(PropTypes.object)
+  jobs: PropTypes.arrayOf(PropTypes.object) // eslint-disable-line react/forbid-prop-types
+
 };
 Header.defaultProps = {
   className: '',

package/lib-esm/components/budget-info/budget-info.js

@@ -2,7 +2,6 @@ import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { InsightType } from '@bundle-stats/utils';
-import * as budgetsInsightsTransformer from '@bundle-stats/utils/lib-esm/transformers/budgets-insights';
 import { Icon } from '../../ui/icon';
 import { Tooltip } from '../../ui/tooltip';
 import css from './budget-info.module.css';
@@ -23,21 +22,16 @@ const INSIGHT_TYPE_MAP = {
 export const BudgetInfo = _ref => {
   let {
     className = '',
-    metricId,
     budgetInsight
   } = _ref;
-  const budgetInsightInfo = budgetsInsightsTransformer.getInfo(metricId, budgetInsight);
   const {
     className: insightTypeClassName,
     glyph
-  } = INSIGHT_TYPE_MAP[budgetInsightInfo.type];
+  } = INSIGHT_TYPE_MAP[budgetInsight.type];
   const rootClassName = cx(css.root, insightTypeClassName, className);
-  const {
-    data: messageData
-  } = budgetInsightInfo.message;
   return /*#__PURE__*/React.createElement(Tooltip, {
     className: rootClassName,
-    title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("strong", null, messageData.metricLabel), ` value (`, /*#__PURE__*/React.createElement("strong", null, messageData.currentValue), `) is ${messageData.diffLabel} `, /*#__PURE__*/React.createElement("strong", null, messageData.budgetValue), ` budget `)
+    title: budgetInsight.message.text
   }, /*#__PURE__*/React.createElement(Icon, {
     className: css.icon,
     glyph: glyph,
@@ -45,11 +39,16 @@ export const BudgetInfo = _ref => {
   }));
 };
 BudgetInfo.propTypes = {
-  metricId: PropTypes.string.isRequired,
   budgetInsight: PropTypes.shape({
-    currentValue: PropTypes.number,
-    budgetValue: PropTypes.number,
-    failed: PropTypes.bool
+    type: PropTypes.string,
+    message: PropTypes.shape({
+      text: PropTypes.string
+    }),
+    data: PropTypes.shape({
+      currentValue: PropTypes.number,
+      budgetValue: PropTypes.number,
+      failed: PropTypes.bool
+    })
   }).isRequired,
   className: PropTypes.string
 };

package/lib-esm/components/budget-info/budget-info.stories.js

@@ -5,26 +5,41 @@ import { BudgetInfo } from '.';
 const stories = storiesOf('Components/BudgetInfo', module);
 stories.addDecorator(getWrapperDecorator());
 stories.add('default', () => /*#__PURE__*/React.createElement(BudgetInfo, {
-  metricId: "webpack.assetCount",
   budgetInsight: {
-    budgetValue: 300,
-    currentValue: 250,
-    failed: false
+    type: 'SUCCESS',
+    message: {
+      text: 'Metric is under the budget'
+    },
+    data: {
+      budgetValue: 300,
+      currentValue: 250,
+      failed: false
+    }
   }
 }));
 stories.add('error', () => /*#__PURE__*/React.createElement(BudgetInfo, {
-  metricId: "webpack.assetCount",
   budgetInsight: {
-    budgetValue: 300,
-    currentValue: 350,
-    failed: true
+    type: 'ERROR',
+    message: {
+      text: 'Metric is over the budget'
+    },
+    data: {
+      budgetValue: 300,
+      currentValue: 250,
+      failed: false
+    }
   }
 }));
 stories.add('warning', () => /*#__PURE__*/React.createElement(BudgetInfo, {
-  metricId: "webpack.assetCount",
   budgetInsight: {
-    budgetValue: 300,
-    currentValue: 300,
-    failed: false
+    type: 'WARNING',
+    message: {
+      text: 'Metric is equal the budget'
+    },
+    data: {
+      budgetValue: 300,
+      currentValue: 250,
+      failed: false
+    }
   }
 }));

package/lib-esm/components/budget-insights/budget-insights.js

@@ -4,7 +4,6 @@ import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
-import * as budgetsInsightsTransformer from '@bundle-stats/utils/lib-esm/transformers/budgets-insights';
 import { Box } from '../../layout/box';
 import { Stack } from '../../layout/stack';
 import { FlexStack } from '../../layout/flex-stack';
@@ -17,47 +16,60 @@ const Budget = props => {
   const {
     className,
     metricId,
-    budgetInsight,
+    budget,
     CustomLink
   } = props;
   const componentLinkOptions = METRIC_COMPONENT_LINKS.get(metricId);
-  const budgetInsightInfo = budgetsInsightsTransformer.getInfo(metricId, budgetInsight);
-  const {
-    data: messageData
-  } = budgetInsightInfo.message;
   return /*#__PURE__*/React.createElement(CustomLink, _extends({
-    className: cx(css.budget, className)
-  }, componentLinkOptions == null ? void 0 : componentLinkOptions.link), /*#__PURE__*/React.createElement("strong", null, messageData.metricLabel), ` value (`, /*#__PURE__*/React.createElement("strong", null, messageData.currentValue), `) is ${messageData.diffLabel} `, /*#__PURE__*/React.createElement("strong", null, messageData.budgetValue), ` budget `);
+    className: cx(css.budget, className, budget.type === 'SUCCESS' && css.budgetSuccess)
+  }, componentLinkOptions == null ? void 0 : componentLinkOptions.link), budget.message.text);
 };
 
 Budget.propTypes = {
   className: PropTypes.string,
   metricId: PropTypes.string.isRequired,
-  budgetInsight: PropTypes.shape({
-    currentValue: PropTypes.number.isRequired,
-    budgetValue: PropTypes.number.isRequired,
-    failed: PropTypes.bool.isRequired
+  budget: PropTypes.shape({
+    type: PropTypes.string,
+    message: PropTypes.shape({
+      text: PropTypes.string
+    }),
+    data: PropTypes.shape({
+      currentValue: PropTypes.number.isRequired,
+      budgetValue: PropTypes.number.isRequired,
+      failed: PropTypes.bool.isRequired
+    })
   }).isRequired,
   CustomLink: PropTypes.elementType.isRequired
 };
 Budget.defaultProps = {
   className: ''
 };
-
-const BudgetsGroup = props => {
+const BUDGET_ALERT_KIND = new Map([['ERROR', 'danger'], ['WARNING', 'warning'], ['SUCCESS', 'success']]);
+const BUDGET_ICON = new Map([['ERROR', Icon.ICONS.ALERT_CIRCLE], ['WARNING', Icon.ICONS.WARNING], ['SUCCESS', Icon.ICONS.CHECK_CIRCLE]]);
+export const BudgetInsights = props => {
   const {
     className,
-    kind,
     source,
     budgets,
     CustomLink
   } = props;
   const [showBudgets, setShowBudgets] = useState(false);
-  const isFailed = kind === 'danger';
+  const iconGlyph = BUDGET_ICON.get(budgets.type);
+  const alertKind = BUDGET_ALERT_KIND.get(budgets.type);
+  const rootClassName = cx(css.group, className, css[`group-${alertKind}`]);
+  const budgetItems = useMemo(() => {
+    const items = Object.entries(budgets.data); // When there are errors/warnings, sort budget items first
+
+    if (['ERROR', 'WARNING'].includes(budgets.type)) {
+      items.sort(a => a[1].type === budgets.type ? -1 : 1);
+    }
+
+    return items;
+  }, [budgets]);
   return /*#__PURE__*/React.createElement(Alert, {
-    kind: kind,
+    kind: alertKind,
     padding: "none",
-    className: cx(css.group, css[kind], className)
+    className: rootClassName
   }, /*#__PURE__*/React.createElement(Box, {
     padding: ['xsmall', 'small'],
     className: css.groupHeader,
@@ -67,74 +79,26 @@ const BudgetsGroup = props => {
   }, /*#__PURE__*/React.createElement(FlexStack, {
     space: "xxsmall",
     className: css.groupTitle
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, iconGlyph && /*#__PURE__*/React.createElement(Icon, {
     className: css.groupIcon,
-    glyph: isFailed ? Icon.ICONS.ALERT_CIRCLE : Icon.ICONS.CHECK_CIRCLE
-  }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, budgets.length), ` budget ${budgets.length > 1 ? 'checks' : 'check'} ${isFailed ? 'failed' : 'passed'}`), /*#__PURE__*/React.createElement("span", {
+    glyph: iconGlyph
+  }), /*#__PURE__*/React.createElement("span", null, budgets.message.text), /*#__PURE__*/React.createElement("span", {
     className: css.groupTitleToggle
   }, showBudgets ? 'hide' : 'show', " all"))), showBudgets && /*#__PURE__*/React.createElement(Box, {
     padding: ['xsmall', 'small'],
     className: css.groupContent
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "none"
-  }, budgets.map(_ref => {
+  }, budgetItems.map(_ref => {
     let [key, budget] = _ref;
     return /*#__PURE__*/React.createElement(Budget, {
       key: key,
       metricId: `${source}.${key}`,
-      budgetInsight: budget,
+      budget: budget,
       CustomLink: CustomLink
     });
   }))));
 };
-
-BudgetsGroup.propTypes = {
-  className: PropTypes.string,
-  kind: PropTypes.oneOf(['success', 'danger']).isRequired,
-  source: PropTypes.string.isRequired,
-  budgets: PropTypes.object.isRequired,
-  // eslint-disable-line react/forbid-prop-types
-  CustomLink: PropTypes.elementType.isRequired
-};
-BudgetsGroup.defaultProps = {
-  className: ''
-};
-export const BudgetInsights = props => {
-  const {
-    className,
-    source,
-    budgets,
-    CustomLink
-  } = props;
-  const [failedBudgets, passedBudgets] = useMemo(() => {
-    const passed = [];
-    const failed = [];
-    Object.entries(budgets).forEach(_ref2 => {
-      let [key, budget] = _ref2;
-
-      if (budget.failed) {
-        failed.push([key, budget]);
-      } else {
-        passed.push([key, budget]);
-      }
-    });
-    return [failed, passed];
-  }, [budgets]);
-  return /*#__PURE__*/React.createElement(Stack, {
-    className: className,
-    space: "xsmall"
-  }, failedBudgets.length > 0 && /*#__PURE__*/React.createElement(BudgetsGroup, {
-    kind: "danger",
-    source: source,
-    budgets: failedBudgets,
-    CustomLink: CustomLink
-  }), passedBudgets.length > 0 && /*#__PURE__*/React.createElement(BudgetsGroup, {
-    kind: "success",
-    source: source,
-    budgets: passedBudgets,
-    CustomLink: CustomLink
-  }));
-};
 BudgetInsights.propTypes = {
   className: PropTypes.string,
   source: PropTypes.string.isRequired,

package/lib-esm/components/budget-insights/budget-insights.module.css

@@ -20,11 +20,15 @@
   margin: 0 0 0 auto !important;
 }
 
-.danger .groupIcon {
+.group-danger .groupIcon {
   color: var(--color-danger);
 }
 
-.success .groupIcon {
+.group-warning .groupIcon {
+  color: var(--color-warning);
+}
+
+.group-success .groupIcon {
   color: var(--color-success);
 }
 
@@ -39,6 +43,10 @@
   text-decoration: none;
 }
 
+.budgetSuccess {
+  color: var(--color-text-light);
+}
+
 .budgetLabel,
 .budgetValue {
   color: var(--color-text-dark);