@spencern ^

@willopez Was super curious to see this but I don't see the new UI. Is there something I need to do to see it?

@zenweasel you'll need to navigate to /operator to see the new UI

@rymorgan I have added your comments to the "Areas that need attention" section.

@willopez I saw these additions to the package.json

    "@fortawesome/fontawesome-svg-core": "^1.2.8",
    "@fortawesome/free-solid-svg-icons": "^5.5.0",
    "@fortawesome/react-fontawesome": "^0.1.3",

Do we need to add these packages or can we just add some SVGs? Any idea what the additional weight penalty for these are?

@spencern @willopez Those packages do seem to be the recommended way to do fontawesome icons now (https://fontawesome.com/how-to-use/on-the-web/using-with/react), but...

1. As Spencer said, let's verify in the built JavaScript that Meteor/Babel is tree shaking and only including the SVGs that you import.
2. You should import all needed font awesome icons in a single file, render them there, export the rendered element, and then import them all into the components context. Then use them from the components context everywhere they are needed. That way all icons used in the app can be managed in a single file, making it easier for someone to swap out.

For example in imports/plugins/core/router/client/theme/ you can add icons.js with something like:

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";

export const iconChevronLeft = <FontAwesomeIcon icon={faChevronLeft} />;
// etc...

And then in appComponents.js:

import { iconChevronLeft, // etc... } from "./theme/icons";

export default {
  iconChevronLeft,
  // etc...
};

If you then wrap Sidebar and such in withComponents HOC, you can get any icon off components prop.

It's probably worth noting that in the future I plan on using custom icons for a few things, then using font awesome as fall back icons. Basically, for the left nav navigation icons, I plan on using custom icons in the future and for directional where the font awesome icons get too bulky. Therefore, I don't know that we need the whole library.

I fixed most of the issues mentioned in review and other style responsiveness issues I saw. Since this is still hidden, I'm merging it and any additional issues people find can be submitted in separate issues.