In the Babel 7 migration guide these are the different plugings and
to add them:

See https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets#migrating

```
// Stage 0
"@babel/plugin-proposal-function-bind",

// Stage 1
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-logical-assignment-operators",
["@babel/plugin-proposal-optional-chaining", { "loose": false }],
["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }],
["@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }],
"@babel/plugin-proposal-do-expressions",

// Stage 2
["@babel/plugin-proposal-decorators", { "legacy": true }],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions",

// Stage 3
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
["@babel/plugin-proposal-class-properties", { "loose": false }],
"@babel/plugin-proposal-json-strings"
```

Fixes errors:

```
{ Error: Cannot find module '@babel/plugin-proposal-class-properties' from '/Users/scon/code/src/paritytech/fether/packages/fether-ui'
```

```
Failed to minify the bundle. Error: static/js/main.f19a0eac.chunk.js from Terser
TypeError: Cannot read property 'minify' of undefined
```

* `account_name -header` CSS is actually only required where Name is used in the Account Header,
elsewhere we do not want to add top and bottom padding to the Name component.

* Remove `decimals`, `onClick`, and `tokens` props from TokenAddress as was only required
on TokenBalance

* Update SignedTxSummary so "To" input field is above "Amount"

* Explicitely pass down `drawers` prop since it is used by Card component

* Remove incorrect `handleClick` from TokenAddress component, as
that was functionality from TokenBalance

refactor: Rename handleMenuOpen to onOpen and same to close. Remove unnecesary isMenuOpen from child

* Remove useless .header-container

* Add width to .account_information to fit full title width

* Use `flex-grow` instead of abbreviation `flex`

* Use justify-content: left to align account info and avatar to left and remove flex: 0 from .header-tokens

* Remove titleOffset and add placeholder width for header nav buttons

* Remove passing `screen` prop for specific pages

* Change Account screen so its header uses the Information component with a big identicon, a short address,
so it is clickable, and with identicon on left of name and address.

* Apply extra bottom margin between name and account address when Information component used in the header

* Update header so it uses Flexbox according to docs as intended

* Since we're using Flexbox without placeholder spacing for the left and right header buttons, when the title
is shown in the header it is offset if there is only a left or right button. So a `titleOffset` prop
is used on pages where the Header component is used to indicate if the title needs to be offset to the left
or right so it appears centered in the screen. We also pass a `screen` prop (named after the component where the
Header component is being used so we can tailor the header spacing on specific screens.

* Re-order props alphabetically

* QUESTION - should we consider always adding placeholder spacing for where both right and left buttons in header would be as an alternative so no offset for the title is require?

* Remove titleOffset and add placeholder width for header nav buttons

* Remove passing `screen` prop for specific pages

* Use `-webkit-transform-origin-x: 0;` to have no padding on left side when scale font size smaller. See https://stackoverflow.com/questions/13031158/unwanted-left-margin-when-using-webkit-transform-scale

* Refactor code to only use `shortAddress` to determine whether to show full address on screen. `screen` prop not necessary

* Remove `-narrow` from Information and Name, only need it for Address component

* Increase scale to 0.95 so address just fits in on the tx summary page that uses the Unlock component

* Change Account screen so its header uses the Information component with a big identicon, a short address,
so it is clickable, and with identicon on left of name and address.

* Apply extra bottom margin between name and account address when Information component used in the header

* Update header so it uses Flexbox according to docs as intended

* Since we're using Flexbox without placeholder spacing for the left and right header buttons, when the title
is shown in the header it is offset if there is only a left or right button. So a `titleOffset` prop
is used on pages where the Header component is used to indicate if the title needs to be offset to the left
or right so it appears centered in the screen. We also pass a `screen` prop (named after the component where the
Header component is being used so we can tailor the header spacing on specific screens.

* Re-order props alphabetically

* QUESTION - should we consider always adding placeholder spacing for where both right and left buttons in header would be as an alternative so no offset for the title is require?