diff options
Diffstat (limited to 'web/src/components')
| -rw-r--r-- | web/src/components/grid/drawGrid.ts | 6 | ||||
| -rw-r--r-- | web/src/components/toolbar/index.css | 36 |
2 files changed, 18 insertions, 24 deletions
diff --git a/web/src/components/grid/drawGrid.ts b/web/src/components/grid/drawGrid.ts index 01240b5..8e64479 100644 --- a/web/src/components/grid/drawGrid.ts +++ b/web/src/components/grid/drawGrid.ts @@ -5,7 +5,7 @@ import { RenderedCell, RenderedGrid } from "./renderGrid"; function fillBackground(ctx: CanvasRenderingContext2D, grid: RenderedGrid) { ctx.clearRect(0, 0, grid.rect.width, grid.rect.height); - ctx.fillStyle = colors.neutral[800]; + ctx.fillStyle = colors.neutral[900]; ctx.fillRect(0, 0, grid.rect.width, grid.rect.height); } @@ -15,7 +15,7 @@ function strokeGrid(ctx: CanvasRenderingContext2D, grid: RenderedGrid) { } function strokeGridLines(ctx: CanvasRenderingContext2D, grid: RenderedGrid) { - ctx.strokeStyle = colors.neutral[700]; + ctx.strokeStyle = colors.neutral[800]; grid.renderedRows.forEach((row, renderedRowIndex) => { const isLastRow = renderedRowIndex === grid.renderedRows.length - 1; @@ -72,7 +72,7 @@ function drawSelection( // cell.rect.height - 1, // ); - ctx.strokeStyle = colors.green[600]; + ctx.strokeStyle = colors.green[400]; ctx.lineWidth = 2; ctx.strokeRect( diff --git a/web/src/components/toolbar/index.css b/web/src/components/toolbar/index.css index 3f78671..b580fbf 100644 --- a/web/src/components/toolbar/index.css +++ b/web/src/components/toolbar/index.css @@ -1,41 +1,35 @@ ntv-toolbar { display: flex; - border-radius: 4px; - background: var(--color-neutral-800); + border-radius: 99999px; + background: var(--color-neutral-900); width: min-content; } ntv-toolbar > section { display: flex; - gap: 0.5rem; - padding: 0.5rem; + gap: 0.25rem; + padding: 0.325rem; } -ntv-toolbar button[data-variant="menu"] { - border-radius: 4px; - background: var(--color-neutral-700); - padding: 0 0.625rem; - height: 1.5rem; +ntv-toolbar button { + border-radius: 99999px; + background: var(--color-neutral-800); + padding: 0 0.5rem; + height: 1.25rem; color: white; font-size: 0.75rem; } +ntv-toolbar button:hover { + background: var(--color-neutral-700); +} + ntv-toolbar button[data-variant="icon"] { display: flex; justify-content: center; align-items: center; - border-radius: 4px; - background: var(--color-neutral-700); - padding: 0.125rem 0.625rem; aspect-ratio: 1; - height: 1.5rem; - color: white; - font-weight: 600; - font-size: 0.75rem; -} - -ntv-toolbar button:hover { - background: var(--color-neutral-600); + height: 1.25rem; } ntv-toolbar input { @@ -43,7 +37,7 @@ ntv-toolbar input { border-radius: 4px; background: var(--color-neutral-900); width: 2.5rem; - height: 1.5rem; + height: 1.25rem; color: white; font-size: 0.75rem; text-align: center; |
