Fine-tuning overall styling

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

src/renderer/components/+extensions/install.module.css

@@ -1,5 +1,5 @@
 .icon {
-  @apply h-5 w-5 cursor-pointer;
+  @apply h-5 w-5 mr-3 cursor-pointer;
 }
 
 .icon:hover {

src/renderer/components/+extensions/installed-extensions.module.css

@@ -12,5 +12,5 @@
 }
 
 .title {
-  margin-bottom: 6px!important;
+  margin-bottom: 0!important;
 }

src/renderer/components/+extensions/installed-extensions.tsx

@@ -116,9 +116,8 @@ export function InstalledExtensions({ extensions, uninstall }: Props) {
 
   return (
     <section>
-      <h2 className={styles.title}>Installed</h2>
       <List
-        title="Manage your extensions in here."
+        title={<h2 className={styles.title}>Installed</h2>}
         columns={columns}
         data={data}
         items={extensions}

src/renderer/components/list/list.tsx

@@ -9,7 +9,7 @@ export type SearchFilter = (item: object) => string | number;
 interface Props extends UseTableOptions<any> {
   items: object[];
   filters: SearchFilter[];
-  title?: string;
+  title?: React.ReactNode;
 }
 
 export function List({ columns, data, title, items, filters, }: Props) {

src/renderer/components/table/react-table.module.css

@@ -12,11 +12,11 @@
 }
 
 .thead .tr {
-  margin: 0;
+  margin: 0 var(--margin);
 }
 
 .tr {
-  margin: var(--margin) 0;
+  margin: calc(var(--margin) * 1.6) var(--margin);
 }
 
 .th {
@@ -30,7 +30,7 @@
 }
 
 .disabledArrow {
-  color: #909ba666;
+  opacity: 0.3;
 }
 
 .td {

src/renderer/components/table/react-table.tsx

@@ -2,16 +2,14 @@ import styles from "./react-table.module.css";
 import React from "react";
 import { useCallback, useMemo } from "react";
 import { useFlexLayout, useSortBy, useTable, UseTableOptions } from "react-table";
-import { FixedSizeList } from "react-window";
 import { Icon } from "../icon";
 import { cssNames } from "../../utils";
 
 interface Props extends UseTableOptions<any> {
-  virtual?: boolean;
   headless?: boolean;
 }
 
-export function Table({ columns, data, virtual, headless }: Props) {
+export function Table({ columns, data, headless }: Props) {
   const defaultColumn = useMemo(
     () => ({
       minWidth: 20,
@@ -20,15 +18,11 @@ export function Table({ columns, data, virtual, headless }: Props) {
     []
   );
 
-  // const scrollBarSize = React.useMemo(() => scrollbarWidth(), [])
-  const scrollBarSize = 10;
-
   const {
     getTableProps,
     getTableBodyProps,
     headerGroups,
     rows,
-    totalColumnsWidth,
     prepareRow,
   } = useTable(
     {
@@ -87,16 +81,7 @@ export function Table({ columns, data, virtual, headless }: Props) {
       </div>}
 
       <div {...getTableBodyProps()}>
-        {virtual ? (
+        {rows.map((row, index) => RenderRow({index}))}
-          <FixedSizeList
-            height={400}
-            itemCount={rows.length}
-            itemSize={35}
-            width={totalColumnsWidth+scrollBarSize}
-          >
-            {RenderRow}
-          </FixedSizeList>
-        ) : rows.map((row, index) => RenderRow({index}))}
       </div>
     </div>
   );