@bundle-stats/ui 3.2.6-beta.4 → 3.2.7-beta.3

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [3.2.6-beta.4](https://github.com/relative-ci/bundle-stats/compare/v3.2.6-beta.3...v3.2.6-beta.4) (2022-02-28)
+## [3.2.7-beta.3](https://github.com/relative-ci/bundle-stats/compare/v3.2.7-beta.2...v3.2.7-beta.3) (2022-03-09)
 
 **Note:** Version bump only for package @bundle-stats/ui
 
@@ -11,7 +11,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [3.2.6-beta.3](https://github.com/relative-ci/bundle-stats/compare/v3.2.6-beta.2...v3.2.6-beta.3) (2022-02-28)
+## [3.2.7-beta.2](https://github.com/relative-ci/bundle-stats/compare/v3.2.7-beta.1...v3.2.7-beta.2) (2022-03-08)
 
 **Note:** Version bump only for package @bundle-stats/ui
 
@@ -19,15 +19,32 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [3.2.6-beta.2](https://github.com/relative-ci/bundle-stats/compare/v3.2.5...v3.2.6-beta.2) (2022-02-27)
+## [3.2.7-beta.1](https://github.com/relative-ci/bundle-stats/compare/v3.2.6...v3.2.7-beta.1) (2022-03-08)
+
+
+### Bug Fixes
+
+* **ui:** HoverCard - prevent default on close ([9fae6a4](https://github.com/relative-ci/bundle-stats/commit/9fae6a4825d1a016e3b626168f73ca0a90213d10))
+* **ui:** MetricsTable - consistent toolbar spacing ([fcaf38d](https://github.com/relative-ci/bundle-stats/commit/fcaf38df698329bc00bc267e72289fec8064cc61))
+
+
+
+
+
+## [3.2.6](https://github.com/relative-ci/bundle-stats/compare/v3.2.5...v3.2.6) (2022-03-04)
 
 
 ### Bug Fixes
 
 * **ui:** Add border-radius to flags ([4f7663b](https://github.com/relative-ci/bundle-stats/commit/4f7663b29a954cf1ace9caa9739acd9f37aa3b95))
 * **ui:** Box - add border-radius to outline ([bd78d20](https://github.com/relative-ci/bundle-stats/commit/bd78d2052db4b781afc3a1d9e8dd583986d0093d))
+* **ui:** Filters - fix border radius ([de014b5](https://github.com/relative-ci/bundle-stats/commit/de014b5d81b1e46a726789e93fa049e8577c2d4b))
+* **ui:** Footer - update border ([7c76df8](https://github.com/relative-ci/bundle-stats/commit/7c76df85090649189b4b52e1dace53c96466402d))
+* **ui:** HoverCard - align close icon ([bd179a8](https://github.com/relative-ci/bundle-stats/commit/bd179a8b74fd7627cc056f52ddeced95211a6ae4))
 * **ui:** Normlize border-radius usage ([e8a6b30](https://github.com/relative-ci/bundle-stats/commit/e8a6b302729112d75a82c74ef1d952fc639d16ab))
 * **ui:** SearchParams - trigger filter change correctly ([0c331d2](https://github.com/relative-ci/bundle-stats/commit/0c331d2704382cd72d42363db539107fe22ed2ee))
+* **ui:** SummaryItem - update vertical spacing ([b4c57dc](https://github.com/relative-ci/bundle-stats/commit/b4c57dc6692d496fc45b3f66515fa4357307ff12))
+* **ui:** Table - correct outline variation ([82804d1](https://github.com/relative-ci/bundle-stats/commit/82804d13a2016332042dd38a21a4a4b0dbb0c928))
 * **ui:** Table - remove last row bottom line ([9398a93](https://github.com/relative-ci/bundle-stats/commit/9398a936e1d937aed188f96ce56ebfa56f3af7d7))
 
 

package/lib/app/app.module.css

@@ -42,7 +42,7 @@
 
 @media (min-width: 600px) {
   :root {
-    --header-height: 80px;
+    --header-height: 72px;
   }
 
   .header {

package/lib/app/header/header.js

@@ -15,8 +15,6 @@ var _container = require("../../ui/container");
 
 var _jobsHeader = require("../../components/jobs-header");
 
-var _logo = require("../../ui/logo");
-
 var _headerModule = _interopRequireDefault(require("./header.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -29,14 +27,7 @@ var Header = function Header(_ref) {
     className: (0, _classnames["default"])(_headerModule["default"].root, className)
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: _headerModule["default"].inner
-  }, /*#__PURE__*/_react["default"].createElement("a", {
-    className: _headerModule["default"].branding,
-    href: "https://github.com/relative-ci/bundle-stats",
-    target: "_blank",
-    rel: "noopener noreferrer nofollow"
-  }, /*#__PURE__*/_react["default"].createElement(_logo.Logo, {
-    className: _headerModule["default"].brandingLogo
-  }, "BundleStats")), /*#__PURE__*/_react["default"].createElement(_jobsHeader.JobsHeader, {
+  }, /*#__PURE__*/_react["default"].createElement(_jobsHeader.JobsHeader, {
     className: _headerModule["default"].jobs,
     jobs: jobs
   })));

package/lib/components/bundle-assets/bundle-assets.js

@@ -222,7 +222,7 @@ var BundleAssets = function BundleAssets(props) {
     renderActions: function renderActions(_ref7) {
       var actionClassName = _ref7.actionClassName;
       return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-        space: "xsmall",
+        space: "xxsmall",
         className: (0, _classnames["default"])(_bundleAssetsModule["default"].dropdown, actionClassName)
       }, /*#__PURE__*/_react["default"].createElement(_sortDropdown.SortDropdown, _extends({
         fields: sortFields
@@ -233,7 +233,9 @@ var BundleAssets = function BundleAssets(props) {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, null, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
+  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
     className: _bundleAssetsModule["default"].toolbarSearch,
     placeholder: "Search by name",
     search: search,

package/lib/components/bundle-modules/bundle-modules.js

@@ -232,7 +232,9 @@ var BundleModules = function BundleModules(_ref4) {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, null, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
+  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
     className: _bundleModulesModule["default"].toolbarSearch,
     search: search,
     updateSearch: updateSearch,

package/lib/components/bundle-packages/bundle-packages.js

@@ -225,7 +225,9 @@ var BundlePackages = function BundlePackages(props) {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, null, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
+  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
     className: _bundlePackagesModule["default"].toolbarSearch,
     placeholder: "Search by name",
     search: search,

package/lib/components/job-header/job-header.js

@@ -23,6 +23,8 @@ var _stack = require("../../layout/stack");
 
 var _icon = require("../../ui/icon");
 
+var _tag = require("../../ui/tag");
+
 var _jobHeaderModule = _interopRequireDefault(require("./job-header.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -43,7 +45,7 @@ var JobHeader = function JobHeader(props) {
     space: "xxsmall"
   }, /*#__PURE__*/_react["default"].createElement("h1", {
     className: _jobHeaderModule["default"].title
-  }, /*#__PURE__*/_react["default"].createElement("span", null, "#".concat(job.internalBuildNumber)), tag && /*#__PURE__*/_react["default"].createElement("span", {
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "#".concat(job.internalBuildNumber)), tag && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
     className: _jobHeaderModule["default"].tag
   }, tag)), /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     className: _jobHeaderModule["default"].meta,

package/lib/components/job-header/job-header.module.css

@@ -1,22 +1,20 @@
 .title {
+  font-size: var(--size-xlarge);
   line-height: 1;
   font-weight: bold;
   vertical-align: top;
 }
 
 .tag {
-  padding: var(--space-xxxsmall);
-  margin-left: var(--space-xxxsmall);
-  background-color: var(--color-highlight);
-  color: var(--color-text-light);
-  display: inline-block;
-  font-size: 9px;
-  line-height: var(--space-xxsmall);
-  font-weight: normal;
+  margin-left: var(--space-xxsmall);
   vertical-align: top;
+  outline: 1px solid var(--color-outline);
+  background: var(--color-highlight);
+  color: var(--color-text-light);
 }
 
 .meta {
+  font-size: var(--size-small);
   color: var(--color-text-light);
 }
 

package/lib/components/jobs-header/jobs-header.module.css

@@ -9,3 +9,8 @@
   padding: 0 var(--space-medium);
   border-left: 1px solid var(--color-outline);
 }
+
+.item:first-child {
+  border-left: 0;
+  padding-left: 0;
+}

package/lib/components/metrics-table-search/metrics-table-search.module.css

@@ -5,7 +5,7 @@
 }
 
 .input {
-  border-radius: var(--radius-small) 0 0 var(--radius-small);
+  border-radius: var(--radius-small);
   height: var(--space-large);
   border-color: var(--color-outline);
 }

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

@@ -81,7 +81,7 @@ 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: "xxsmall",
+    space: "xxxsmall",
     as: Component,
     className: rootClassName
   }, props), /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {

package/lib/css/variables.css

@@ -181,7 +181,7 @@
   --layer-high: 1000;
   --layer-xhigh: 10000;
 
-  --radius-small: 2px;
+  --radius-small: 3px;
   --radius-medium: var(--space-xxxsmall);
   --radius-large: var(--space-xxsmall);
 

package/lib/layout/footer/footer.module.css

@@ -3,7 +3,7 @@
 }
 
 .inner {
-  border-top: 2px solid var(--color-outline);
+  border-top: 1px solid var(--color-outline);
 }
 
 .navItem {

package/lib/ui/dropdown/dropdown.js

@@ -23,6 +23,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var Dropdown = function Dropdown(props) {
   var className = props.className,
+      buttonClassName = props.buttonClassName,
       label = props.label,
       ariaLabel = props.ariaLabel,
       glyph = props.glyph,
@@ -33,7 +34,7 @@ var Dropdown = function Dropdown(props) {
     className: rootClassName
   }, /*#__PURE__*/_react["default"].createElement(_menu.MenuButton, {
     state: menuState,
-    className: _dropdownModule["default"].button,
+    className: (0, _classnames["default"])(_dropdownModule["default"].button, buttonClassName),
     tabIndex: null
   }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     space: "xxxsmall"
@@ -55,6 +56,7 @@ var Dropdown = function Dropdown(props) {
 exports.Dropdown = Dropdown;
 Dropdown.defaultProps = {
   className: '',
+  buttonClassName: '',
   label: null,
   ariaLabel: '',
   glyph: null
@@ -63,6 +65,9 @@ Dropdown.propTypes = {
   /** Adopted child class name */
   className: _propTypes["default"].string,
 
+  /** Button adopted child class name */
+  buttonClassName: _propTypes["default"].string,
+
   /** Button label */
   label: _propTypes["default"].node,
 

package/lib/ui/filters/filters.js

@@ -21,7 +21,7 @@ var _filters = require("./filters.utils");
 
 var _filtersModule = _interopRequireDefault(require("./filters.module.css"));
 
-var _excluded = ["className", "label", "name", "getOnOnlyClick"],
+var _excluded = ["className", "buttonClassName", "label", "name", "getOnOnlyClick"],
     _excluded2 = ["label"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -52,6 +52,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var Filter = function Filter(props) {
   var className = props.className,
+      buttonClassName = props.buttonClassName,
       label = props.label,
       name = props.name,
       getOnOnlyClick = props.getOnOnlyClick,
@@ -64,7 +65,7 @@ var Filter = function Filter(props) {
   }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     space: "xxxsmall",
     as: "label",
-    className: _filtersModule["default"].filterCheckbox
+    className: (0, _classnames["default"])(_filtersModule["default"].filterCheckbox, buttonClassName)
   }, /*#__PURE__*/_react["default"].createElement("input", _extends({
     className: _filtersModule["default"].filterInput,
     type: "checkbox",
@@ -82,17 +83,20 @@ var Filter = function Filter(props) {
 
 Filter.propTypes = {
   className: _propTypes["default"].string,
+  buttonClassName: _propTypes["default"].string,
   name: _propTypes["default"].string.isRequired,
   label: _propTypes["default"].string.isRequired,
   getOnOnlyClick: _propTypes["default"].func
 };
 Filter.defaultProps = {
   className: '',
+  buttonClassName: '',
   getOnOnlyClick: null
 };
 
 var FilterGroup = function FilterGroup(props) {
   var className = props.className,
+      buttonClassName = props.buttonClassName,
       groupKey = props.groupKey,
       data = props.data,
       values = props.values,
@@ -140,6 +144,7 @@ var FilterGroup = function FilterGroup(props) {
 
   return /*#__PURE__*/_react["default"].createElement(_dropdown.Dropdown, {
     className: className,
+    buttonClassName: buttonClassName,
     label: dropdownLabel,
     ariaLabel: "".concat(groupLabel, ": ").concat(filterSuffix)
   }, function (_ref7) {
@@ -191,6 +196,7 @@ var FilterGroup = function FilterGroup(props) {
 
 FilterGroup.propTypes = {
   className: _propTypes["default"].string,
+  buttonClassName: _propTypes["default"].string,
   groupKey: _propTypes["default"].string.isRequired,
   data: _propTypes["default"].object.isRequired,
   // eslint-disable-line react/forbid-prop-types
@@ -200,7 +206,8 @@ FilterGroup.propTypes = {
   toggleFilters: _propTypes["default"].func.isRequired
 };
 FilterGroup.defaultProps = {
-  className: ''
+  className: '',
+  buttonClassName: ''
 };
 
 var Filters = function Filters(props) {
@@ -219,6 +226,7 @@ var Filters = function Filters(props) {
   return /*#__PURE__*/_react["default"].createElement("form", {
     className: rootClassName
   }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxsmall",
     className: _filtersModule["default"].items
   }, Object.entries(filters).map(function (_ref11) {
     var _ref12 = _slicedToArray(_ref11, 2),
@@ -229,6 +237,7 @@ var Filters = function Filters(props) {
       return /*#__PURE__*/_react["default"].createElement(Filter, {
         key: name,
         className: (0, _classnames["default"])(_filtersModule["default"].item, _filtersModule["default"].filterStandalone),
+        buttonClassName: _filtersModule["default"].itemButton,
         name: name,
         label: data.label,
         onChange: onCheckboxChange,
@@ -239,6 +248,7 @@ var Filters = function Filters(props) {
 
     return /*#__PURE__*/_react["default"].createElement(FilterGroup, {
       className: _filtersModule["default"].item,
+      buttonClassName: _filtersModule["default"].itemButton,
       key: name,
       groupKey: name,
       data: data,

package/lib/ui/filters/filters.module.css

@@ -130,20 +130,10 @@
 }
 
 .item {
-  border-radius: 0;
   position: relative;
   flex: 0 0 auto;
-  margin-right: -1px;
 }
 
-.item:first-child {
-  border-radius: var(--radius-small) 0 0 var(--radius-small);
-}
-
-.item:last-child {
-  border-radius: 0 var(--radius-small) var(--radius-small) 0;
-}
-
-.item:hover {
-  z-index: var(--layer-low); /* show collapsed border */
+.itemButton {
+  border-radius: var(--radius-small);
 }

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

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HoverCard = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -19,6 +21,10 @@ var _hoverCardModule = _interopRequireDefault(require("./hover-card.module.css")
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var resolveComponent = function resolveComponent(as, href) {
@@ -48,6 +54,10 @@ var HoverCard = function HoverCard(props) {
   }); // Fallback to span if no href
 
   var Component = resolveComponent(as, href);
+  var handleOnClose = (0, _react.useCallback)(function (event) {
+    state.hide();
+    event.preventDefault();
+  }, [state]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])(_hoverCardModule["default"].root, className)
   }, /*#__PURE__*/_react["default"].createElement(_hovercard.HovercardAnchor, {
@@ -71,7 +81,7 @@ var HoverCard = function HoverCard(props) {
     as: "button",
     type: "button",
     className: _hoverCardModule["default"].closeBtn,
-    onClick: state.hide
+    onClick: handleOnClose
   })));
 };
 

package/lib/ui/hover-card/hover-card.module.css

@@ -32,7 +32,7 @@ button.anchor:hover {
 
 .closeBtn {
   position: absolute;
-  right: 0;
+  right: var(--space-xxxsmall);
   top: var(--space-xxxsmall);
   width: var(--space-large);
   height: var(--space-large);

package/lib/ui/table/table.module.css

@@ -1,7 +1,7 @@
 .root {
   border-width: 0;
   width: 100%;
-  border-collapse: collapse;
+  border-spacing: 0;
   empty-cells: show;
   background: var(--color-background);
 }
@@ -14,9 +14,10 @@
 }
 
 .root thead .cell {
-  border-width: 0 0 2px;
+  border-width: 0 0 1px;
   text-transform: uppercase;
   vertical-align: top;
+  background: var(--color-highlight);
 }
 
 .root thead .cell:empty {
@@ -27,6 +28,10 @@
   font-weight: normal;
 }
 
+.root tbody tr:first-child .cell {
+  border-top: 0;
+}
+
 .root tbody .cell a {
   color: inherit;
   text-decoration: none;
@@ -40,10 +45,6 @@
   text-decoration: underline;
 }
 
-.root tbody tr:nth-child(odd) .cell {
-  background-color: var(--color-highlight);
-}
-
 .root tbody tr:hover .cell {
   background-color: var(--color-highlight-warning);
 }
@@ -58,12 +59,27 @@
 
 /* outline variation */
 .outline {
+  --table-radius: var(--radius-medium);
   border: 1px solid var(--color-outline);
-  border-width: 0 1px;
+  border-radius: var(--table-radius);
+}
+
+.outline thead tr:first-child .cell:first-child,
+.outline tbody:first-child tr:first-child .cell:first-child {
+  border-top-left-radius: var(--table-radius);
+}
+
+.outline thead tr:first-child .cell:last-child,
+.outline tbody:first-child tr:first-child .cell:last-child {
+  border-top-right-radius: var(--table-radius);
+}
+
+.outline tbody:last-child tr:last-child .cell:first-child {
+  border-bottom-left-radius: var(--table-radius);
 }
 
-.outline thead tr:first-child .cell {
-  border-top-width: 1px;
+.outline tbody:last-child tr:last-child .cell:last-child {
+  border-bottom-right-radius: var(--table-radius);
 }
 
 .outline.empty {

package/lib-esm/app/app.module.css

@@ -42,7 +42,7 @@
 
 @media (min-width: 600px) {
   :root {
-    --header-height: 80px;
+    --header-height: 72px;
   }
 
   .header {

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

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Container } from '../../ui/container';
 import { JobsHeader } from '../../components/jobs-header';
-import { Logo } from '../../ui/logo';
 import css from './header.module.css';
 export const Header = _ref => {
   let {
@@ -15,14 +14,7 @@ export const Header = _ref => {
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement("div", {
     className: css.inner
-  }, /*#__PURE__*/React.createElement("a", {
-    className: css.branding,
-    href: "https://github.com/relative-ci/bundle-stats",
-    target: "_blank",
-    rel: "noopener noreferrer nofollow"
-  }, /*#__PURE__*/React.createElement(Logo, {
-    className: css.brandingLogo
-  }, "BundleStats")), /*#__PURE__*/React.createElement(JobsHeader, {
+  }, /*#__PURE__*/React.createElement(JobsHeader, {
     className: css.jobs,
     jobs: jobs
   })));

package/lib-esm/components/bundle-assets/bundle-assets.js

@@ -170,7 +170,7 @@ export const BundleAssets = props => {
         actionClassName
       } = _ref5;
       return /*#__PURE__*/React.createElement(FlexStack, {
-        space: "xsmall",
+        space: "xxsmall",
         className: cx(css.dropdown, actionClassName)
       }, /*#__PURE__*/React.createElement(SortDropdown, _extends({
         fields: sortFields
@@ -181,7 +181,9 @@ export const BundleAssets = props => {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(MetricsTableSearch, {
+  }, /*#__PURE__*/React.createElement(FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/React.createElement(MetricsTableSearch, {
     className: css.toolbarSearch,
     placeholder: "Search by name",
     search: search,

package/lib-esm/components/bundle-modules/bundle-modules.js

@@ -187,7 +187,9 @@ export const BundleModules = _ref4 => {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(MetricsTableSearch, {
+  }, /*#__PURE__*/React.createElement(FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/React.createElement(MetricsTableSearch, {
     className: css.toolbarSearch,
     search: search,
     updateSearch: updateSearch,

package/lib-esm/components/bundle-packages/bundle-packages.js

@@ -170,7 +170,9 @@ export const BundlePackages = props => {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/React.createElement(FlexStack, null, /*#__PURE__*/React.createElement(MetricsTableSearch, {
+  }, /*#__PURE__*/React.createElement(FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/React.createElement(MetricsTableSearch, {
     className: css.toolbarSearch,
     placeholder: "Search by name",
     search: search,

package/lib-esm/components/job-header/job-header.js

@@ -7,6 +7,7 @@ import { SOURCE_PATH_WEBPACK_STATS, formatDate, formatTime } from '@bundle-stats
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { Icon } from '../../ui/icon';
+import { Tag } from '../../ui/tag';
 import css from './job-header.module.css';
 export const JobHeader = props => {
   const {
@@ -27,7 +28,7 @@ export const JobHeader = props => {
     space: "xxsmall"
   }, /*#__PURE__*/React.createElement("h1", {
     className: css.title
-  }, /*#__PURE__*/React.createElement("span", null, `#${job.internalBuildNumber}`), tag && /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", null, `#${job.internalBuildNumber}`), tag && /*#__PURE__*/React.createElement(Tag, {
     className: css.tag
   }, tag)), /*#__PURE__*/React.createElement(FlexStack, {
     className: css.meta,

package/lib-esm/components/job-header/job-header.module.css

@@ -1,22 +1,20 @@
 .title {
+  font-size: var(--size-xlarge);
   line-height: 1;
   font-weight: bold;
   vertical-align: top;
 }
 
 .tag {
-  padding: var(--space-xxxsmall);
-  margin-left: var(--space-xxxsmall);
-  background-color: var(--color-highlight);
-  color: var(--color-text-light);
-  display: inline-block;
-  font-size: 9px;
-  line-height: var(--space-xxsmall);
-  font-weight: normal;
+  margin-left: var(--space-xxsmall);
   vertical-align: top;
+  outline: 1px solid var(--color-outline);
+  background: var(--color-highlight);
+  color: var(--color-text-light);
 }
 
 .meta {
+  font-size: var(--size-small);
   color: var(--color-text-light);
 }
 

package/lib-esm/components/jobs-header/jobs-header.module.css

@@ -9,3 +9,8 @@
   padding: 0 var(--space-medium);
   border-left: 1px solid var(--color-outline);
 }
+
+.item:first-child {
+  border-left: 0;
+  padding-left: 0;
+}