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>

src/renderer/components/layout/page-layout.scss

@@ -111,6 +111,10 @@
           &.active {
             background-color: var(--navSelectedBackground);
           }
+
+          > .label {
+            width: 100%;
+          }
         }
       }
     }
@@ -171,10 +175,6 @@
     }
   }
 
-  a {
-    color: var(--colorInfo);
-  }
-
   section {
     display: flex;
     flex-direction: column;
@@ -189,16 +189,26 @@
 
     h1, h2 {
       color: var(--textColorAccent);
-      text-transform: uppercase;
+    }
+
+    h1 {
+      color: var(--textColorAccent);
+      font-size: 22px;
+      font-weight: bold;
+      margin-bottom: 10px;
     }
 
     h2 {
-      font-size: 16px;
+      font-size: 18px;
       line-height: 20px;
       font-weight: 600;
       margin-bottom: 20px;
     }
 
+    a {
+      color: var(--colorInfo);
+    }
+
     .hint {
       margin-top: 8px;
       font-size: 14px;