[Next] Major Refactoring, Bug fixes and UI Overhaul

package.json

@@ -24,43 +24,38 @@
     "@patternfly/patternfly": "^4.59.1",
     "@patternfly/react-core": "^4.75.2",
     "@patternfly/react-icons": "^4.7.16",
+    "@patternfly/react-table": "^4.27.7",
     "classnames": "^2.2.6",
+    "concurrently": "^4.1.0",
     "core-js": "^2.5.7",
+    "cross-env": "^5.2.0",
     "dompurify": "^2.2.7",
     "email-validator": "^2.0.4",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "eslint": "^6.6.0",
+    "eslint-config-airbnb": "^18.2.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-react": "^7.21.2",
+    "husky": "^0.14.3",
+    "lint-staged": "^7.2.0",
     "lodash": "^4.17.21",
     "marked": "^2.0.3",
     "moment": "^2.22.2",
-    "patternfly": "^3.58.0",
-    "patternfly-react": "^2.24.0",
     "prop-types": "^15.6.2",
-    "react": "^16.8.0",
+    "react": "^17.0.2",
     "react-bootstrap": "^0.32.1",
-    "react-clipboard.js": "^2.0.0",
-    "react-copy-to-clipboard": "^5.0.2",
-    "react-dom": "^16.8.0",
+    "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
+    "react-test-renderer": "^16.4.1",
     "rxjs": "^6.3.3",
     "sirv-cli": "^1.0.8",
     "sortabular": "^1.6.0",
     "table-resolver": "^4.1.1",
     "undux": "^5.0.0-beta.18"
   },
-  "devDependencies": {
-    "concurrently": "^4.1.0",
-    "cross-env": "^5.2.0",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^6.6.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.21.2",
-    "husky": "^0.14.3",
-    "lint-staged": "^7.2.0",
-    "react-test-renderer": "^16.4.1"
-  },
   "browserslist": {
     "production": [
       ">0.2%",

src/components/App/App.css

@@ -1,6 +1,8 @@
 /* CSS variables */
 
 :root {
+  --pf-global--FontSize--md: 14px !important;
+
   /* PRIMARY COLORS */
 
   /* black */
@@ -48,6 +50,52 @@
 /* ---------- GLOBAL CSS -------- */
 /* ============================== */
 
+article {
+  margin: auto;
+  margin-bottom: 4em;
+  max-width: 1200px;
+}
+
+section { 
+  margin: 2em auto;
+  padding: 1em;
+}
+
+/* Typography */
+h1, h2, h3 {
+  font-size: 2.5em !important;
+  margin-top: 0.25em !important;
+  margin-bottom: 0.5em !important;
+}
+
+h2 {
+  font-size: 1.75em !important;
+}
+h1 + h2 {
+  margin-top: 0 !important;
+  margin-bottom: 0.5em !important;
+}
+
+h3 {
+  font-weight: 500 !important;
+  font-size: 1.25em !important;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+  font-weight: bolder;
+  position: relative;
+
+  /* Remove blue highlight in mobile */
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
 /* ============================== */
 /* ---------- HELPER CSS -------- */
 /* ============================== */
@@ -81,4 +129,4 @@
 
 .margin-right-sm {
     margin-right: 5px;
-}
+}

src/components/App/App.js → src/components/App/App.jsx

@@ -6,10 +6,10 @@ import ChrisStore from '../../store/ChrisStore';
 import './App.css';
 
 // import the patternfly CSS globally
-import '../../../node_modules/patternfly/dist/css/patternfly.min.css';
-import '../../../node_modules/patternfly/dist/css/patternfly-additions.min.css';
-import '../../../node_modules/@patternfly/patternfly/patternfly-no-reset.css';
+import '../../../node_modules/@patternfly/patternfly/patternfly.min.css';
+import '../../../node_modules/@patternfly/patternfly/patternfly-base.css';
 import '../../../node_modules/@patternfly/patternfly/patternfly-addons.css';
+import '../../../node_modules/@patternfly/patternfly/patternfly-no-reset.css';
 
 /*
  * The router here serves pages which replace the entire document,

src/components/AppLayout/AppLayout.js → src/components/AppLayout/AppLayout.jsx

@@ -1,6 +1,3 @@
-// based on
-// https://github.com/patternfly/patternfly-react-seed/blob/2195cdb69c4a82b64b4cf6870a67750cc1896ef2/src/app/AppLayout/AppLayout.tsx
-
 import React, { useCallback, useState } from 'react';
 import { Page, SkipToContent } from '@patternfly/react-core';
 import ConnectedNavbar from '../Navbar/Navbar';