From 0f0be777209d1b0a0dca7673136fca1143142646 Mon Sep 17 00:00:00 2001 From: Philippe Martin Date: Thu, 20 Jun 2024 11:23:58 +0200 Subject: [PATCH] refactor: light mode for models page Signed-off-by: Philippe Martin --- packages/frontend/src/lib/Badge.spec.ts | 8 ++++---- packages/frontend/src/lib/Badge.svelte | 4 ++-- packages/frontend/src/lib/icons/ModelWhite.svelte | 7 ++++--- .../frontend/src/lib/table/model/ModelColumnAge.spec.ts | 2 +- .../frontend/src/lib/table/model/ModelColumnAge.svelte | 2 +- .../src/lib/table/model/ModelColumnLabels.svelte | 2 +- .../frontend/src/lib/table/model/ModelColumnName.svelte | 9 ++++++--- .../frontend/src/lib/table/model/ModelColumnSize.spec.ts | 2 +- .../frontend/src/lib/table/model/ModelColumnSize.svelte | 2 +- packages/frontend/src/pages/Models.svelte | 8 ++++---- 10 files changed, 25 insertions(+), 21 deletions(-) diff --git a/packages/frontend/src/lib/Badge.spec.ts b/packages/frontend/src/lib/Badge.spec.ts index 7705a5b5e..c515aff99 100644 --- a/packages/frontend/src/lib/Badge.spec.ts +++ b/packages/frontend/src/lib/Badge.spec.ts @@ -27,14 +27,14 @@ test('print Badge with custom text and default background', async () => { const badgeContent = screen.getByText('custom-text'); expect(badgeContent).toBeInTheDocument(); - expect(badgeContent).toHaveClass('bg-charcoal-600'); + expect(badgeContent).toHaveClass('bg-[var(--pd-label-bg)]'); }); test('print Badge with custom text and custom background', async () => { - render(Badge, { icon: faTrash, content: 'custom-text', background: 'bg-charcoal-100' }); + render(Badge, { icon: faTrash, content: 'custom-text', background: 'bg-[var(--pd-label-text)]' }); const badgeContent = screen.getByText('custom-text'); expect(badgeContent).toBeInTheDocument(); - expect(badgeContent).toHaveClass('bg-charcoal-100'); - expect(badgeContent).not.toHaveClass('bg-charcoal-600'); + expect(badgeContent).toHaveClass('bg-[var(--pd-label-text)]'); + expect(badgeContent).not.toHaveClass('bg-[var(--pd-label-bg)]'); }); diff --git a/packages/frontend/src/lib/Badge.svelte b/packages/frontend/src/lib/Badge.svelte index 07d7ca25e..9bd71efe3 100644 --- a/packages/frontend/src/lib/Badge.svelte +++ b/packages/frontend/src/lib/Badge.svelte @@ -4,11 +4,11 @@ import Fa from 'svelte-fa'; export let icon: IconDefinition; export let content: string; -export let background: string = 'bg-charcoal-600'; +export let background: string = 'bg-[var(--pd-label-bg)]';
+ class="{background} rounded-md px-2 py-1 flex flex-row w-min h-min text-xs text-[var(--pd-label-text)] text-nowrap items-center"> {#if icon} {/if} diff --git a/packages/frontend/src/lib/icons/ModelWhite.svelte b/packages/frontend/src/lib/icons/ModelWhite.svelte index 872423f36..acdad4299 100644 --- a/packages/frontend/src/lib/icons/ModelWhite.svelte +++ b/packages/frontend/src/lib/icons/ModelWhite.svelte @@ -1,5 +1,6 @@