@bundle-stats/ui 3.2.5-alpha.0 → 3.2.5-alpha.21

package/CHANGELOG.md

@@ -3,33 +3,81 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [3.2.5-alpha.0](https://github.com/relative-ci/bundle-stats/compare/v3.2.4...v3.2.5-alpha.0) (2022-01-23)
+## [3.2.5-alpha.21](https://github.com/relative-ci/bundle-stats/compare/v3.2.5-alpha.20...v3.2.5-alpha.21) (2022-01-29)
 
+**Note:** Version bump only for package @bundle-stats/ui
+
+
+
+
+
+## [3.2.5-alpha.20](https://github.com/relative-ci/bundle-stats/compare/v3.2.5-alpha.19...v3.2.5-alpha.20) (2022-01-29)
+
+**Note:** Version bump only for package @bundle-stats/ui
+
+
+
+
+
+## [3.2.5-alpha.19](https://github.com/relative-ci/bundle-stats/compare/v3.2.5-alpha.18...v3.2.5-alpha.19) (2022-01-27)
+
+**Note:** Version bump only for package @bundle-stats/ui
+
+
+
+
+
+## [3.2.5-alpha.18](https://github.com/relative-ci/bundle-stats/compare/v3.2.5-alpha.17...v3.2.5-alpha.18) (2022-01-27)
+
+**Note:** Version bump only for package @bundle-stats/ui
+
+
+
+
+
+## [3.2.5-alpha.17](https://github.com/relative-ci/bundle-stats/compare/v3.2.5-alpha.16...v3.2.5-alpha.17) (2022-01-26)
+
+**Note:** Version bump only for package @bundle-stats/ui
 
-### Bug Fixes
 
-* **ui:** Add - add content background ([7eae6d0](https://github.com/relative-ci/bundle-stats/commit/7eae6d06212f108d1c7b550fab684c2608275273))
-* **ui:** Add border-radius to flags ([2059ef9](https://github.com/relative-ci/bundle-stats/commit/2059ef9f84b9d1f36a84d0b5a9190f99cdce9cb2))
-* **ui:** App - decrease vertical spacing between components ([192fc8e](https://github.com/relative-ci/bundle-stats/commit/192fc8e003582abb11b10b84202b451d8e3891aa))
-* **ui:** Box - add border-radius to outline ([ed752f7](https://github.com/relative-ci/bundle-stats/commit/ed752f7b8e4748283925ef201c3997c18a9df3d2))
-* **ui:** Delta - readd inverted variation ([55c0217](https://github.com/relative-ci/bundle-stats/commit/55c0217309ed24bf604f17b920c3c39df5359e4d))
-* **ui:** Footer - container separator ([e76f50b](https://github.com/relative-ci/bundle-stats/commit/e76f50becbcf754c2c888caa42f4e4b73d666cc1))
-* **ui:** Header - add logo back ([de20e84](https://github.com/relative-ci/bundle-stats/commit/de20e84c8b93db96d743ab1d3d9d6e4fec554574))
-* **ui:** JobHeaders - tweak styles ([f0107f1](https://github.com/relative-ci/bundle-stats/commit/f0107f1acecf1bdec34ebe7f9311f7fb4207a74c))
-* **ui:** Metric - always use inline variation ([2862b68](https://github.com/relative-ci/bundle-stats/commit/2862b68b68ced1f9caf6aa4bf4dab9c9d7ab32de))
-* **ui:** Move separator to layout ([fcb97c9](https://github.com/relative-ci/bundle-stats/commit/fcb97c9930cc9ff85fc2aff2f116c1cb126ca581))
-* **ui:** Shift radius scale ([554ca52](https://github.com/relative-ci/bundle-stats/commit/554ca52cd16035c1af0820f3f3d2b2394e5accba))
-* **ui:** Table - 1px thead sep ([8193b7f](https://github.com/relative-ci/bundle-stats/commit/8193b7f682c8be8c28e841bcc7a88b63de9c01ee))
-* **ui:** Table - remove last row bottom line ([880a879](https://github.com/relative-ci/bundle-stats/commit/880a879830b3965c1643da6e7f4d8dbbec8c5e7c))
-* **ui:** Table - remove odd styles ([d691c15](https://github.com/relative-ci/bundle-stats/commit/d691c15d73da350402f7b337864b7c10f26d331e))
-* **ui:** Tabs - increase contrast ([c21d688](https://github.com/relative-ci/bundle-stats/commit/c21d68821a03a9cbaf706d13114e4bc895e80869))
-* **ui:** Update layout ([fb2ace8](https://github.com/relative-ci/bundle-stats/commit/fb2ace84bb04617a313d9f7a024eeaf7781b44b4))
-* **ui:** Variables - increase outline contrast ([2a2768a](https://github.com/relative-ci/bundle-stats/commit/2a2768aef9162ad47adfe5ecb74aad0d3f1fbb60))
 
 
-### Features
 
-* **ui:** Separator component ([937df0c](https://github.com/relative-ci/bundle-stats/commit/937df0ca7dfb778eec583c67afc6727a0affa98e))
+## [3.2.5-alpha.16](https://github.com/relative-ci/bundle-stats/compare/v3.2.5-alpha.15...v3.2.5-alpha.16) (2022-01-26)
+
+**Note:** Version bump only for package @bundle-stats/ui
+
+
+
+
+
+## [3.2.5-alpha.15](https://github.com/relative-ci/bundle-stats/compare/v3.2.5-alpha.14...v3.2.5-alpha.15) (2022-01-26)
+
+**Note:** Version bump only for package @bundle-stats/ui
+
+
+
+
+
+## [3.2.5-alpha.14](https://github.com/relative-ci/bundle-stats/compare/v3.2.5-alpha.13...v3.2.5-alpha.14) (2022-01-26)
+
+**Note:** Version bump only for package @bundle-stats/ui
+
+
+
+
+
+## [3.2.5-alpha.13](https://github.com/relative-ci/bundle-stats/compare/v3.2.5-alpha.12...v3.2.5-alpha.13) (2022-01-26)
+
+**Note:** Version bump only for package @bundle-stats/ui
+
+
+
+
+
+## [3.2.5-alpha.12](https://github.com/relative-ci/bundle-stats/compare/v3.2.4...v3.2.5-alpha.12) (2022-01-26)
+
+**Note:** Version bump only for package @bundle-stats/ui
 
 
 

package/lib/app/app.js

@@ -19,8 +19,6 @@ var _constants = require("../constants");
 
 var _box = require("../layout/box");
 
-var _separator = require("../layout/separator");
-
 var _container = require("../ui/container");
 
 var _duplicatePackagesWarning = require("../components/duplicate-packages-warning");
@@ -102,7 +100,6 @@ var Layout = function Layout(_ref) {
   }), /*#__PURE__*/_react["default"].createElement("main", _extends({
     className: _appModule["default"].main
   }, props)), /*#__PURE__*/_react["default"].createElement(_footer.Footer, {
-    className: _appModule["default"].footer,
     version: version
   }));
 };
@@ -239,21 +236,17 @@ var AppComponent = function AppComponent(_ref2) {
     path: _constants.URLS.OVERVIEW,
     render: function render() {
       return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-        space: "medium"
-      }, /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-        space: "medium"
-      }, duplicatePackagesInsights && /*#__PURE__*/_react["default"].createElement(_duplicatePackagesWarning.DuplicatePackagesWarning, {
+        space: "large"
+      }, duplicatePackagesInsights && /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_duplicatePackagesWarning.DuplicatePackagesWarning, {
         duplicatePackagesCount: duplicatePackagesCount,
         showDelta: jobs.length > 1
-      }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-        outline: true
-      }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
-        padding: "small"
-      }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+      })), /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
         space: "small"
       }, /*#__PURE__*/_react["default"].createElement(_totalSizeTypeTitle.TotalSizeTypeTitle, null), /*#__PURE__*/_react["default"].createElement(_bundleAssetsTotalsChartBars.BundleAssetsTotalsChartBars, {
         jobs: jobs
-      }))), /*#__PURE__*/_react["default"].createElement(_separator.Separator, null), /*#__PURE__*/_react["default"].createElement(_bundleAssetsTotalsTable.BundleAssetsTotalsTable, {
+      }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+        outline: true
+      }, /*#__PURE__*/_react["default"].createElement(_bundleAssetsTotalsTable.BundleAssetsTotalsTable, {
         jobs: jobs
       })))));
     }

package/lib/app/app.module.css

@@ -3,10 +3,7 @@
 }
 
 .root {
-}
-
-.header {
-  border-bottom: 1px solid var(--color-outline);
+  padding-top: var(--header-height);
 }
 
 .empty {
@@ -16,12 +13,16 @@
 }
 
 .summaryContainer {
-  padding-top: var(--space-medium);
-  padding-bottom: var(--space-xsmall);
+  padding-top: var(--space-large);
+  padding-bottom: var(--space-small);
 }
 
 .tabsContainer {
-  background: var(--color-light);
+  border-bottom: 1px solid var(--color-outline);
+}
+
+.tabs {
+  margin-bottom: -1px;
 }
 
 .tabActive {
@@ -33,27 +34,24 @@
 }
 
 .tabsContent {
-  padding-top: var(--space-medium);
-  padding-bottom: var(--space-medium);
+  padding-top: var(--space-large);
+  padding-bottom: var(--space-large);
   min-height: 480px;
 }
 
 @media (min-width: 600px) {
   :root {
-    --header-height: 78px;
+    --header-height: 80px;
   }
 
   .header {
-    position: sticky;
+    position: fixed;
     z-index: var(--layer-high);
+    left: 0;
     top: 0;
+    right: 0;
     height: var(--header-height);
     background-color: var(--color-background);
-  }
-
-  .tabsContainer {
-    position: sticky;
-    top: var(--header-height);
-    z-index: 100;
+    border-bottom: 1px solid var(--color-outline);
   }
 }

package/lib/app/header/header.js

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _flexStack = require("../../layout/flex-stack");
-
 var _container = require("../../ui/container");
 
 var _jobsHeader = require("../../components/jobs-header");
@@ -29,23 +27,19 @@ var Header = function Header(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_container.Container, {
     as: "header",
     className: (0, _classnames["default"])(_headerModule["default"].root, className)
-  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-    space: "small",
+  }, /*#__PURE__*/_react["default"].createElement("div", {
     className: _headerModule["default"].inner
-  }, /*#__PURE__*/_react["default"].createElement(_jobsHeader.JobsHeader, {
-    className: _headerModule["default"].jobs,
-    jobs: jobs
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: _headerModule["default"].options
   }, /*#__PURE__*/_react["default"].createElement("a", {
+    className: _headerModule["default"].branding,
     href: "https://github.com/relative-ci/bundle-stats",
     target: "_blank",
-    rel: "noopener noreferrer nofollow",
-    title: "View bundle-stats on GitHub"
+    rel: "noopener noreferrer nofollow"
   }, /*#__PURE__*/_react["default"].createElement(_logo.Logo, {
-    className: _headerModule["default"].github,
-    kind: "github"
-  }, "GitHub")))));
+    className: _headerModule["default"].brandingLogo
+  }, "BundleStats")), /*#__PURE__*/_react["default"].createElement(_jobsHeader.JobsHeader, {
+    className: _headerModule["default"].jobs,
+    jobs: jobs
+  })));
 };
 
 exports.Header = Header;

package/lib/app/header/header.module.css

@@ -1,23 +1,30 @@
 .inner {
+  display: flex;
   align-items: center;
 }
 
-.jobs {
-  flex: 1 1 auto;
-  overflow-x: auto;
+.branding {
+  padding: var(--space-small);
+  flex: 0 0 auto;
+  color: var(--color-text);
+  display: flex;
+  align-items: center;
 }
 
-.options {
-  flex: 0 0 var(--space-large);
+.jobs {
+  flex: 1 1 auto;
 }
 
-.option {
-  display: inline-block;
+.tools {
+  border-left: 1px solid var(--color-outline);
+  padding: var(--space-small);
+  margin: 0 0 0 auto;
+  display: flex;
+  align-items: center;
+  color: var(--color-text-light);
 }
 
-.github {
-  display: block;
-  color: var(--color-text-ultra-light);
+.toolsGithub {
+  color: inherit;
   width: var(--space-medium);
-  height: var(--space-medium);
 }

package/lib/components/bundle-assets/bundle-assets.module.css

@@ -31,7 +31,6 @@
 }
 
 .flag {
-  border-radius: var(--radius-small);
   display: inline-block;
   width: var(--space-xsmall);
   height: var(--space-xsmall);

package/lib/components/bundle-packages/bundle-packages.module.css

@@ -13,21 +13,17 @@
 }
 
 .duplicate {
-  border-radius: var(--radius-small);
+  margin-right: var(--space-xxxsmall);
   display: inline-block;
-  width: var(--space-xsmall);
-  height: var(--space-xsmall);
-  font-family: var(--font-family);
-  font-size: 8px;
+  width: var(--space-small);
+  height: var(--space-small);
+  font-size: 10px;
   font-weight: bold;
-  background: var(--color-highlight);
-  color: var(--color-text-light);
-  line-height: var(--space-xsmall);
+  line-height: var(--space-small);
   text-align: center;
   text-transform: uppercase;
   vertical-align: middle;
 
-  margin-right: var(--space-xxxsmall);
   background: var(--color-danger);
   color: var(--color-light);
 }

package/lib/components/delta/delta.js

@@ -15,26 +15,11 @@ var _deltaModule = _interopRequireDefault(require("./delta.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var propTypes = {
-  className: _propTypes["default"].string,
-  displayValue: _propTypes["default"].string.isRequired,
-  deltaType: _propTypes["default"].string.isRequired,
-  inverted: _propTypes["default"].bool
-};
-var defaultProps = {
-  className: '',
-  inverted: false
-};
-/**
- * @param {PropTypes.InferProps<typeof propTypes>} props
- * @return {React.FunctionComponentElement}
- */
-
-var Delta = function Delta(props) {
-  var className = props.className,
-      displayValue = props.displayValue,
-      deltaType = props.deltaType,
-      inverted = props.inverted;
+var Delta = function Delta(_ref) {
+  var className = _ref.className,
+      displayValue = _ref.displayValue,
+      deltaType = _ref.deltaType,
+      inverted = _ref.inverted;
   var rootClassName = (0, _classnames["default"])(_deltaModule["default"].root, className, inverted && _deltaModule["default"].inverted, _deltaModule["default"][deltaType]);
   return /*#__PURE__*/_react["default"].createElement("span", {
     className: rootClassName
@@ -42,5 +27,13 @@ var Delta = function Delta(props) {
 };
 
 exports.Delta = Delta;
-Delta.defaultProps = defaultProps;
-Delta.propTypes = propTypes;
+Delta.defaultProps = {
+  className: '',
+  inverted: false
+};
+Delta.propTypes = {
+  className: _propTypes["default"].string,
+  displayValue: _propTypes["default"].string.isRequired,
+  deltaType: _propTypes["default"].string.isRequired,
+  inverted: _propTypes["default"].bool
+};

package/lib/components/delta/delta.module.css

@@ -1,5 +1,6 @@
 .root {
   white-space: nowrap;
+  color: var(--color-gray-ultra-light);
 }
 
 .HIGH_NEGATIVE {
@@ -7,7 +8,7 @@
 }
 
 .NEGATIVE {
-  color: var(--color-red);
+  color: var(--color-red-dark);
 }
 
 .LOW_NEGATIVE {
@@ -19,7 +20,7 @@
 }
 
 .POSITIVE {
-  color: var(--color-green);
+  color: var(--color-green-dark);
 }
 
 .HIGH_POSITIVE {
@@ -27,38 +28,30 @@
 }
 
 .inverted {
-  padding: 2px;
-  border-radius: var(--radius-small);
-  background: var(--color-gray-ultra-light);
+  background-color: var(--color-gray-ultra-light);
   color: var(--color-light);
 }
 
 .inverted.HIGH_NEGATIVE {
   background: var(--color-red-dark);
-  color: var(--color-highlight-danger);
 }
 
 .inverted.NEGATIVE {
-  background: var(--color-red);
-  color: var(--color-highlight-danger);
+  background: var(--color-red-dark);
 }
 
 .inverted.LOW_NEGATIVE {
   background: var(--color-red-light);
-  color: var(--color-highlight-danger);
 }
 
 .inverted.LOW_POSITIVE {
   background: var(--color-green-light);
-  color: var(--color-highlight-success);
 }
 
 .inverted.POSITIVE {
-  background: var(--color-green);
-  color: var(--color-highlight-success);
+  background: var(--color-green-dark);
 }
 
 .inverted.HIGH_POSITIVE {
   background: var(--color-green-dark);
-  color: var(--color-highlight-success);
 }

package/lib/components/duplicate-packages-warning/duplicate-packages-warning.js

@@ -36,9 +36,9 @@ var DuplicatePackagesWarning = function DuplicatePackagesWarning(props) {
     className: (0, _classnames["default"])(_duplicatePackagesWarningModule["default"].root, className)
   }, "Bundle contains ", /*#__PURE__*/_react["default"].createElement(CustomComponentLink, _utils.BUNDLE_PACKAGES_DUPLICATE, metricRunInfo.value, showDelta && metricRunInfo.delta !== 0 && /*#__PURE__*/_react["default"].createElement(_delta.Delta, {
     className: _duplicatePackagesWarningModule["default"].titleDelta,
+    inverted: true,
     displayValue: metricRunInfo.displayDelta,
-    deltaType: metricRunInfo.deltaType,
-    inverted: true
+    deltaType: metricRunInfo.deltaType
   }), " duplicate ".concat(metricRunInfo.value === 1 ? 'package' : 'packages', ".")));
 };
 

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

@@ -40,7 +40,7 @@ var JobHeader = function JobHeader(props) {
   var rootClassName = (0, _classnames["default"])(_jobHeaderModule["default"].root, className);
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     className: rootClassName,
-    space: "xxxsmall"
+    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", {
@@ -48,10 +48,9 @@ var JobHeader = function JobHeader(props) {
   }, tag)), /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     className: _jobHeaderModule["default"].meta,
     space: "xxsmall"
-  }, builtAt && /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+  }, builtAt && /*#__PURE__*/_react["default"].createElement("span", {
     className: _jobHeaderModule["default"].metaItem,
-    title: "".concat((0, _utils.formatDate)(builtAt), " ").concat((0, _utils.formatTime)(builtAt)),
-    space: "xxxsmall"
+    title: "".concat((0, _utils.formatDate)(builtAt), " ").concat((0, _utils.formatTime)(builtAt))
   }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
     glyph: "clock",
     className: _jobHeaderModule["default"].metaIcon
@@ -59,11 +58,9 @@ var JobHeader = function JobHeader(props) {
     className: _jobHeaderModule["default"].metaLabel
   }, (0, _dateFns.formatDistanceToNow)(new Date(builtAt), {
     addSuffix: true
-  }))), hash && /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-    span: true,
+  }))), hash && /*#__PURE__*/_react["default"].createElement("span", {
     className: _jobHeaderModule["default"].metaItem,
-    title: "Webpack bundle hash",
-    space: "xxxsmall"
+    title: "Webpack bundle hash"
   }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
     glyph: "commit",
     className: _jobHeaderModule["default"].metaIcon

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

@@ -1,32 +1,36 @@
 .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: var(--color-highlight);
+  background-color: var(--color-highlight);
   color: var(--color-text-light);
   display: inline-block;
-  font-size: var(--size-xsmall);
+  font-size: 9px;
   line-height: var(--space-xxsmall);
   font-weight: normal;
   vertical-align: top;
 }
 
+.meta {
+  color: var(--color-text-light);
+}
+
 .metaItem {
   display: inline-flex;
   align-items: center;
-  white-space: nowrap;
 }
 
 .metaIcon {
   width: var(--space-small);
   height: var(--space-small);
-  color: var(--color-text-ultra-light);
+  margin-right: var(--space-xxxsmall);
 }
 
 .metaLabel {
-  color: var(--color-text-light);
+  line-height: var(--space-small);
 }

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

@@ -27,7 +27,7 @@ var JobsHeader = function JobsHeader(props) {
   var rootClassName = (0, _classnames["default"])(_jobsHeaderModule["default"].root, className);
   return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     className: rootClassName,
-    space: "small"
+    space: "none"
   }, jobs === null || jobs === void 0 ? void 0 : jobs.map(function (job, index) {
     return /*#__PURE__*/_react["default"].createElement(_jobHeader.JobHeader, {
       key: job.internalBuildNumber || index,

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

@@ -1,8 +1,11 @@
 .root {
   align-items: stretch;
+  flex-wrap: wrap;
   padding: var(--space-small) 0;
 }
 
 .item {
-  flex: 0 1 auto;
+  flex: 0 0 auto;
+  padding: 0 var(--space-medium);
+  border-left: 1px solid var(--color-outline);
 }

package/lib/components/metric/metric.js

@@ -34,6 +34,7 @@ var Metric = function Metric(_ref) {
   var className = _ref.className,
       value = _ref.value,
       formatter = _ref.formatter,
+      inline = _ref.inline,
       anchored = _ref.anchored,
       children = _ref.children,
       enhanced = _ref.enhanced;
@@ -45,7 +46,7 @@ var Metric = function Metric(_ref) {
       displayValue = _ref3[1],
       displayUnit = _ref3[2];
 
-  var rootClassName = (0, _classnames["default"])(className, _metricModule["default"].root, anchored && _metricModule["default"].anchored);
+  var rootClassName = (0, _classnames["default"])(className, _metricModule["default"].root, inline && _metricModule["default"].inline, anchored && _metricModule["default"].anchored);
   return /*#__PURE__*/_react["default"].createElement("span", {
     className: rootClassName
   }, /*#__PURE__*/_react["default"].createElement("span", {
@@ -64,6 +65,7 @@ Metric.defaultProps = {
   className: '',
   anchored: false,
   enhanced: false,
+  inline: false,
   value: 0,
   children: [],
   formatter: function formatter(val) {
@@ -73,6 +75,7 @@ Metric.defaultProps = {
 Metric.propTypes = {
   className: _propTypes["default"].string,
   enhanced: _propTypes["default"].bool,
+  inline: _propTypes["default"].bool,
   anchored: _propTypes["default"].bool,
   value: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
   formatter: _propTypes["default"].func,

package/lib/components/metric/metric.module.css

@@ -1,9 +1,6 @@
 .root {
   display: block;
-}
-
-.display {
-  vertical-align: middle;
+  letter-spacing: 0.05em;
 }
 
 .displayUnit {
@@ -11,9 +8,7 @@
 }
 
 .delta {
-  display: inline;
-  vertical-align: middle;
-  margin: 0 0 0 var(--space-xxxsmall);
+  display: block;
   font-size: var(--size-xsmall);
 }
 
@@ -28,3 +23,8 @@
   line-height: 1;
   margin-top: -2px;
 }
+
+.inline .delta {
+  display: inline-block;
+  margin: 0 0 0 var(--space-xxxsmall);
+}

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

@@ -5,7 +5,6 @@
 }
 
 .input {
-  border-radius: var(--radius-medium) 0 0 var(--radius-medium);
   height: var(--space-large);
   border-color: var(--color-outline);
 }
@@ -22,12 +21,12 @@
   cursor: pointer;
   border-radius: 50%;
   position: absolute;
-  right: 2px;
+  right: 0;
   top: 50%;
   transform: translateY(-50%);
-  padding: var(--space-xxxsmall);
-  width: var(--space-medium);
-  height: var(--space-medium);
+  padding: var(--space-xxsmall);
+  width: var(--space-large);
+  height: var(--space-large);
   background: radial-gradient(var(--color-background) 50%, transparent);
   color: var(--color-text-ultra-light);
   transition: var(--transition-in);