Merge pull request #1141 from relative-ci/update-ui

UI updates
relative-ci · Jan 5, 2021 · c38d203 · c38d203
2 parents 77a0666 + bf968b9
commit c38d203
Show file tree

Hide file tree

Showing 29 changed files with 18,591 additions and 16,533 deletions.
diff --git a/packages/html-templates/src/app/header/header.jsx b/packages/html-templates/src/app/header/header.jsx
@@ -1,28 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { Container } from '@bundle-stats/ui/lib-esm/ui/container';
 import { JobsHeader } from '@bundle-stats/ui/lib-esm/components/jobs-header';
 import { Logo } from '@bundle-stats/ui/lib-esm/ui/logo';
 
 import css from './header.module.css';
 
 export const Header = ({ className, jobs }) => (
-  <header className={cx(css.root, className)}>
-    <a className={css.branding} href="https://github.com/relative-ci/bundle-stats">
-      <Logo className={css.brandingLogo}>BundleStats</Logo>
-    </a>
-    <JobsHeader className={css.jobs} jobs={jobs} />
-    <div className={css.tools}>
-      <Logo
-        className={css.toolsGithub}
-        kind="github"
-        as="a"
+  <Container as="header" className={cx(css.root, className)}>
+    <div className={css.inner}>
+      <a
+        className={css.branding}
         href="https://github.com/relative-ci/bundle-stats"
         target="_blank"
         rel="noopener noreferrer nofollow"
-      />
+      >
+        <Logo className={css.brandingLogo}>BundleStats</Logo>
+      </a>
+      <JobsHeader className={css.jobs} jobs={jobs} />
     </div>
-  </header>
+  </Container>
 );
 
 Header.propTypes = {

diff --git a/packages/html-templates/src/app/header/header.module.css b/packages/html-templates/src/app/header/header.module.css
@@ -1,6 +1,6 @@
-.root {
+.inner {
   display: flex;
-  align-items: stretch;
+  align-items: center;
 }
 
 .branding {

diff --git a/packages/html-templates/src/app/index.jsx b/packages/html-templates/src/app/index.jsx
@@ -59,7 +59,7 @@ const StandaloneApp = ({ jobs }) => {
   return (
     <HashRouter>
       <StandaloneAppLayout jobs={jobs}>
-        <Container>
+        <Container className={css.summaryContainer}>
           <Summary
             data={jobs[0].summary}
             showSummaryItemDelta={jobs.length !== 1}

diff --git a/packages/html-templates/src/app/styles.module.css b/packages/html-templates/src/app/styles.module.css
@@ -16,10 +16,16 @@
   text-align: center;
 }
 
+.summaryContainer {
+  padding-top: var(--space-large);
+  padding-bottom: var(--space-small);
+  background: var(--color-highlight);
+}
+
 .tabsContainer {
-  margin-top: var(--space-small);
   margin-bottom: var(--space-large);
   border-bottom: 1px solid var(--color-outline);
+  background: var(--color-highlight);
 }
 
 .tabs {
@@ -55,10 +61,6 @@
     --header-height: 80px;
   }
 
-  .root {
-    padding-top: calc(var(--header-height) + var(--space-large));
-  }
-
   .header {
     position: fixed;
     z-index: 100;
@@ -68,6 +70,6 @@
     height: var(--header-height);
     background-color: var(--color-background);
     border-bottom: 1px solid var(--color-outline);
-    box-shadow: 0 0 var(--space-xxsmall) var(--color-shadow);
+    box-shadow: 0 0 var(--space-xxxsmall) var(--color-shadow);
   }
 }
diff --git a/packages/ui/.babelrc.js b/packages/ui/.babelrc.js
@@ -14,7 +14,7 @@ module.exports = {
     '@babel/plugin-proposal-private-methods',
     '@babel/plugin-proposal-class-properties',
     'babel-plugin-lodash',
-    ['babel-plugin-inline-react-svg', { svgo: false }],
+    ['@simplyianm/babel-plugin-inline-react-svg', { noReactAutoImport: true, svgo: false }],
   ],
   env: {
     test: {

diff --git a/packages/ui/build/webpack/config.js b/packages/ui/build/webpack/config.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const StatsPlugin = require('stats-webpack-plugin');
+const webpack = require('webpack');
 
 const ROOT = path.join(__dirname, '../../');
 const CONTEXT = path.join(ROOT, 'src');
@@ -70,6 +71,9 @@ module.exports = {
   },
   devtool: 'source-map',
   plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+    }),
     new StatsPlugin('../artifacts/webpack-stats.json', {
       all: false,
       assets: true,

diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -39,14 +39,14 @@
     "@babel/preset-env": "7.12.11",
     "@babel/preset-react": "7.12.10",
     "@bundle-stats/utils": "^2.4.0",
+    "@simplyianm/babel-plugin-inline-react-svg": "1.2.0",
     "@storybook/addon-knobs": "6.1.11",
     "@storybook/addon-storyshots": "6.1.11",
     "@storybook/addons": "6.1.11",
     "@storybook/react": "6.1.11",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "26.6.3",
     "babel-loader": "8.2.2",
-    "babel-plugin-inline-react-svg": "1.1.2",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
     "classnames": "2.2.6",
@@ -67,6 +67,7 @@
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-test-renderer": "16.14.0",
+    "reakit": "^1.3.3",
     "recompose": "0.30.0",
     "stats-webpack-plugin": "0.7.0",
     "style-loader": "2.0.0",

diff --git a/packages/ui/src/components/bundle-assets/bundle-assets.jsx b/packages/ui/src/components/bundle-assets/bundle-assets.jsx
@@ -101,7 +101,6 @@ const getRenderRowHeader = (labels) => (item) => (
       <Tooltip
         className={css.notPredictive}
         title={<TooltipNotPredictive runs={item.runs} />}
-        align="topLeft"
       >
         <span className={cx('ui-icon ui-icon--small', css.notPredictiveIcon)}>warning</span>
       </Tooltip>