1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Align table rows

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-05-16 07:55:54 +03:00
parent a1cbc7a568
commit 64ee0cb486
5 changed files with 14 additions and 9 deletions

View File

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

View File

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

View File

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

View File

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

View File

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