Align table rows

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

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

@@ -4,7 +4,7 @@
 }
 
 .extensionDescription {
-  @apply mt-2;
+  @apply mt-1;
 }
 
 .enabled {

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

@@ -1,5 +1,4 @@
 import styles from "./installed-extensions.module.css";
-import { Avatar } from "@material-ui/core";
 import React, { useMemo } from "react";
 import { ExtensionDiscovery, InstalledExtension } from "../../../extensions/extension-discovery";
 import { ExtensionLoader } from "../../../extensions/extension-loader";
@@ -70,9 +69,6 @@ export function InstalledExtensions({ extensions, uninstall }: Props) {
         return {
           extension: (
             <div className="flex items-start">
-              <div className="mr-4 mt-2">
-                <Avatar/>
-              </div>
               <div>
                 <div className={styles.extensionName}>{name}</div>
                 <div className={styles.extensionDescription}>{description}</div>

src/renderer/components/button/button.scss

@@ -112,6 +112,10 @@
     }
   }
 
+  &:focus {
+    outline: none;
+  }
+
   &:focus:not(:active) {
     transition: box-shadow 350ms;
     box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);

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

@@ -11,12 +11,17 @@
   height: 33px;
 }
 
+.thead .tr {
+  margin: 0;
+}
+
 .tr {
+  margin: var(--margin) 0;
 }
 
 .th {
   @apply relative whitespace-nowrap;
-  padding: var(--padding);
+  padding: 0 var(--padding);
 }
 
 .headIcon {
@@ -30,7 +35,7 @@
 
 .td {
   @apply flex items-center;
-  padding: var(--padding);
+  padding: 0 var(--padding);
 }
 
 .actions {

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

@@ -51,7 +51,7 @@ export function Table({ columns, data, virtual, headless }: Props) {
           {...row.getRowProps({
             style,
           })}
-          className="tr"
+          className={styles.tr}
         >
           {row.cells.map((cell, index) => (
             <div {...cell.getCellProps()} key={cell.getCellProps().key} className={cssNames(styles.td, columns[index].accessor)}>
@@ -70,7 +70,7 @@ export function Table({ columns, data, virtual, headless }: Props) {
         {headerGroups.map(headerGroup => (
           <div {...headerGroup.getHeaderGroupProps()} key={headerGroup.getHeaderGroupProps().key} className={styles.tr}>
             {headerGroup.headers.map(column => (
-              <div {...column.getHeaderProps(column.getSortByToggleProps())} key={column.getHeaderProps().key} className={styles.tr}>
+              <div {...column.getHeaderProps(column.getSortByToggleProps())} key={column.getHeaderProps().key} className={styles.th}>
                 {column.render("Header")}
                 {/* Sort direction indicator */}
                 <span>