diff --git a/CLAUDE.md b/CLAUDE.md index be00c79c28..0e4d6869ef 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -85,9 +85,10 @@ Plugin architecture in `/src/modules/`: ### Testing Patterns - Unit tests in `/test/unit-tests/` using Jest -- E2E tests in `/playwright/e2e/` using Playwright +- E2E tests in `/playwright/e2e/` using Playwright with testcontainers for Synapse/Dendrite - Mock Matrix client and SDK extensively in tests - Component tests via Storybook +- See `docs/playwright.md` for detailed E2E testing guide ### Important Conventions - TypeScript strict mode - always use explicit types diff --git a/res/manifest.json b/res/manifest.json index 6b0d70c059..db7e8ef2be 100644 --- a/res/manifest.json +++ b/res/manifest.json @@ -2,7 +2,7 @@ "name": "HealthChat", "short_name": "HealthChat", "display": "standalone", - "theme_color": "#76CFA6", + "theme_color": "#12325c", "start_url": "index.html", "icons": [ { diff --git a/res/themes/dark/css/_dark.pcss b/res/themes/dark/css/_dark.pcss index 326c2cd646..b635305c1a 100644 --- a/res/themes/dark/css/_dark.pcss +++ b/res/themes/dark/css/_dark.pcss @@ -35,20 +35,21 @@ $roomtile-default-badge-bg-color: var(--cpd-color-icon-secondary); * To use under very rare circumstances, always prefer the semantics defined * in https://compound.element.io/?path=/docs /tokens-semantic-colors--docs */ -$accent-100: var(--cpd-color-green-100); -$accent-200: var(--cpd-color-green-200); -$accent-300: var(--cpd-color-green-300); -$accent-400: var(--cpd-color-green-400); -$accent-500: var(--cpd-color-green-500); -$accent-600: var(--cpd-color-green-600); -$accent-700: var(--cpd-color-green-700); -$accent-800: var(--cpd-color-green-800); -$accent-900: var(--cpd-color-green-900); -$accent-1000: var(--cpd-color-green-1000); -$accent-1100: var(--cpd-color-green-1100); -$accent-1200: var(--cpd-color-green-1200); -$accent-1300: var(--cpd-color-green-1300); -$accent-1400: var(--cpd-color-green-1400); +/* HealthChat brand blue color scale (dark mode adjusted) */ +$accent-100: #091729; +$accent-200: #0d2340; +$accent-300: #12325c; +$accent-400: #2a4063; +$accent-500: #1f4d85; +$accent-600: #376A91; +$accent-700: #486581; +$accent-800: #627d98; +$accent-900: #829ab1; +$accent-1000: #9fb3c8; +$accent-1100: #bcccdc; +$accent-1200: #d9e2ec; +$accent-1300: #e8eff5; +$accent-1400: #f0f4f8; /* Reused Figma non-compound colors */ /* ******************** */ @@ -191,7 +192,7 @@ $message-action-bar-hover-border-color: $header-panel-text-primary-color; /* Reaction row */ /* ******************** */ $reaction-row-button-hover-border-color: $header-panel-text-primary-color; -$reaction-row-button-selected-bg-color: #1f6954; +$reaction-row-button-selected-bg-color: #1f4d85; /* HealthChat blue accent-500 */ /* ******************** */ /* Voice messages */ @@ -202,7 +203,7 @@ $voice-record-icon-color: $quaternary-content; /* Bubble tiles */ /* ******************** */ -$eventbubble-self-bg: var(--cpd-color-green-300); +$eventbubble-self-bg: #12325c; /* HealthChat blue accent-300 (dark mode) */ $eventbubble-others-bg: var(--cpd-color-gray-300); $eventbubble-bg-hover: var(--cpd-color-bg-subtle-secondary); /* ******************** */ @@ -301,7 +302,7 @@ body { } .hljs-addition { - background: #1a4b59; + background: #1f4d85; /* HealthChat blue accent-500 */ } .hljs-deletion { diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index f01a85cb4c..dd5861752a 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -36,10 +36,10 @@ $panel-actions: var(--cpd-color-alpha-gray-300); $separator: var(--cpd-color-gray-400); -$accent: var(--cpd-color-text-action-accent); +$accent: #12325c; $alert: var(--cpd-color-text-critical-primary); -$links: var(--cpd-color-text-link-external); -$link-external: var(--cpd-color-text-link-external); +$links: #1f4d85; +$link-external: #1f4d85; $username-variant1-color: var(--cpd-color-text-decorative-1); $username-variant2-color: var(--cpd-color-text-decorative-2); @@ -59,20 +59,21 @@ $username-variant6-color: var(--cpd-color-text-decorative-6); * To use under very rare circumstances, always prefer the semantics defined * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs */ -$accent-100: var(--cpd-color-green-100); -$accent-200: var(--cpd-color-green-200); -$accent-300: var(--cpd-color-green-300); -$accent-400: var(--cpd-color-green-400); -$accent-500: var(--cpd-color-green-500); -$accent-600: var(--cpd-color-green-600); -$accent-700: var(--cpd-color-green-700); -$accent-800: var(--cpd-color-green-800); -$accent-900: var(--cpd-color-green-900); -$accent-1000: var(--cpd-color-green-1000); -$accent-1100: var(--cpd-color-green-1100); -$accent-1200: var(--cpd-color-green-1200); -$accent-1300: var(--cpd-color-green-1300); -$accent-1400: var(--cpd-color-green-1400); +/* HealthChat brand blue color scale */ +$accent-100: #f0f4f8; +$accent-200: #d9e2ec; +$accent-300: #bcccdc; +$accent-400: #9fb3c8; +$accent-500: #829ab1; +$accent-600: #627d98; +$accent-700: #486581; +$accent-800: #334e68; +$accent-900: #243b53; +$accent-1000: #1f4d85; +$accent-1100: #2a4063; +$accent-1200: #12325c; +$accent-1300: #0d2340; +$accent-1400: #091729; /* Reused Figma non-compound colors */ /* ******************** */ @@ -215,7 +216,7 @@ $roomtile-default-badge-bg-color: var(--cpd-color-icon-secondary); /* ******************** */ $e2e-verified-color: var(--cpd-color-icon-success-primary); $e2e-warning-color: var(--cpd-color-icon-critical-primary); -$e2e-verified-color-light: var(--cpd-color-green-300); +$e2e-verified-color-light: #bcccdc; /* HealthChat blue accent-300 */ $e2e-warning-color-light: var(--cpd-color-red-300); /* ******************** */ @@ -264,7 +265,7 @@ $message-action-bar-hover-border-color: $focus-bg-color; /* Reaction row */ /* ******************** */ $reaction-row-button-hover-border-color: $focus-bg-color; -$reaction-row-button-selected-bg-color: #e9fff9; +$reaction-row-button-selected-bg-color: #d9e2ec; /* HealthChat blue accent-200 */ /* ******************** */ /* Voice messages */ @@ -279,7 +280,7 @@ $voice-record-icon-color: $tertiary-content; /* Bubble tiles */ /* ******************** */ -$eventbubble-self-bg: var(--cpd-color-green-300); +$eventbubble-self-bg: #bcccdc; /* HealthChat blue accent-300 */ $eventbubble-others-bg: var(--cpd-color-gray-300); $eventbubble-bg-hover: var(--cpd-color-bg-subtle-secondary); /* ******************** */ @@ -368,7 +369,7 @@ body { /* diff highlight colors */ /* ******************** */ .hljs-addition { - background: var(--cpd-color-green-500); + background: #829ab1; /* HealthChat blue accent-500 */ } .hljs-deletion {