diff --git a/src/routes/(nav)/contacts/[[selectedMember]]/Table.svelte b/src/routes/(nav)/contacts/[[selectedMember]]/Table.svelte index 5f52b80..bf653c7 100644 --- a/src/routes/(nav)/contacts/[[selectedMember]]/Table.svelte +++ b/src/routes/(nav)/contacts/[[selectedMember]]/Table.svelte @@ -8,7 +8,7 @@ createColumnHelper, } from "@tanstack/svelte-table"; import type { SortingState, RowSelectionState, TableOptions } from "@tanstack/svelte-table"; - import { CheckSquare, Square } from "lucide-svelte"; + import { Check } from "lucide-svelte"; import { getContext } from "svelte"; import { writable } from "svelte/store"; @@ -134,14 +134,14 @@ @@ -178,19 +178,19 @@ {#each $table.getRowModel().rows.slice(0, 10) as row} - + - + {#each row.getVisibleCells() as cell} {#if cell.column.id === "notes"} @@ -215,8 +215,31 @@ min-width: 100%; border-spacing: 0; - tbody tr:hover { - background-color: var(--gray100); + .select { + all: unset; + border: 1px solid var(--gray600); + border-radius: 4px; + height: 16px; + width: 16px; + color: var(--background); + + &.is-selected { + background-color: var(--gray600); + } + } + + tbody tr { + &.selected { + background-color: var(--pink100); + + &:hover { + background-color: var(--pink200); + } + } + + &:hover { + background-color: var(--gray100); + } } th, @@ -259,13 +282,5 @@ border-left: $border; border-bottom: $border; } - - .selected { - background-color: var(--pink300); - - &:hover { - background-color: var(--pink200); - } - } }