Restyling extensions page with tailwindcss (#2796)

* Setting up tailwind and css modules env

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Using tailwind with scss files also

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Introducing react-table

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Spread extensions to smaller components

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Add table sorting

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing inputs line-height

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fine-tuning page view

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Align table rows

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding extension notice

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fine-tuning overall styling

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding a extensions placeholder

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Updating MaterialIcons font

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Aligning not found state

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Making extension components observable

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing search input cross icon

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix drag-n-drop indication

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing extension name sorting

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix linter

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing tests

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Ignoring ts files to tailwind purge

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Cleaning up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Renaming Table -> ReactTable

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing integration tests

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Moving tailwind imports into app.scss

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Moving userExtensionList() out from extension-loader

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Transform extension list to array

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Expand install input placeholder a bit

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

package.json

@@ -241,7 +241,7 @@
   },
   "devDependencies": {
     "@emeraldpay/hashicon-react": "^0.4.0",
-    "@material-ui/core": "^4.10.1",
+    "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
@@ -280,6 +280,7 @@
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.6",
     "@types/react-select": "^3.0.13",
+    "@types/react-table": "^7.7.0",
     "@types/react-window": "^1.8.2",
     "@types/readable-stream": "^2.3.9",
     "@types/request": "^2.48.5",
@@ -336,6 +337,8 @@
     "nodemon": "^2.0.4",
     "open": "^7.3.1",
     "patch-package": "^6.2.2",
+    "postcss": "^8.2.14",
+    "postcss-loader": "~3.0.0",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.2.0",
     "progress-bar-webpack-plugin": "^2.1.0",
@@ -346,11 +349,13 @@
     "react-router-dom": "^5.2.0",
     "react-select": "^3.1.0",
     "react-select-event": "^5.1.0",
+    "react-table": "^7.7.0",
     "react-window": "^1.8.5",
     "sass-loader": "^8.0.2",
     "sharp": "^0.26.1",
     "spectron": "11.0.0",
     "style-loader": "^1.2.1",
+    "tailwindcss": "^2.1.2",
     "ts-jest": "26.3.0",
     "ts-loader": "^7.0.5",
     "ts-node": "^8.10.2",
@@ -359,6 +364,7 @@
     "typedoc-plugin-markdown": "^2.4.0",
     "typeface-roboto": "^0.0.75",
     "typescript": "4.0.2",
+    "typescript-plugin-css-modules": "^3.2.0",
     "url-loader": "^4.1.0",
     "webpack": "^4.44.2",
     "webpack-cli": "^3.3.11",