From 5b611813fe4d0214020e2eb6220626a36cf79703 Mon Sep 17 00:00:00 2001 From: Shawn Jackson Date: Wed, 12 Aug 2026 20:23:43 -0700 Subject: [PATCH 1/3] RC-T40 Chat Fixes --- global.css | 713 +----------------- global.web.css | 12 + src/app/(app)/chat.tsx | 7 +- src/app/(app)/command.tsx | 6 +- src/app/_layout.tsx | 6 +- src/app/chat/[channelId].tsx | 12 +- src/app/chat/thread/[messageId].tsx | 7 +- .../chat/__tests__/chat-utils.test.ts | 27 +- src/components/chat/chat-utils.ts | 2 + .../ui/gluestack-ui-provider/index.tsx | 16 +- src/components/ui/input/index.tsx | 42 +- src/components/ui/select/index.tsx | 33 +- src/hooks/use-signalr-lifecycle.ts | 15 + src/lib/theme-styles.ts | 9 + src/lib/theme-styles.web.ts | 7 + src/models/v4/chat/chatEnums.ts | 2 + .../incident-command-realtime.test.ts | 191 +++++ src/stores/signalr/signalr-store.ts | 78 +- src/translations/ar.json | 3 + src/translations/de.json | 3 + src/translations/en.json | 3 + src/translations/es.json | 3 + src/translations/fr.json | 3 + src/translations/it.json | 3 + src/translations/pl.json | 3 + src/translations/sv.json | 3 + src/translations/uk.json | 3 + theme-tokens.css | 703 +++++++++++++++++ 28 files changed, 1183 insertions(+), 732 deletions(-) create mode 100644 global.web.css create mode 100644 src/lib/theme-styles.ts create mode 100644 src/lib/theme-styles.web.ts create mode 100644 src/stores/signalr/__tests__/incident-command-realtime.test.ts create mode 100644 theme-tokens.css diff --git a/global.css b/global.css index e16d3c2..9298e6e 100644 --- a/global.css +++ b/global.css @@ -3,704 +3,15 @@ @import 'tailwindcss/utilities.css'; @import 'nativewind/theme'; -/* Class-driven dark mode (GluestackUIProvider toggles the .dark class on web - and on the native root View). */ -@custom-variant dark (&:where(.dark, .dark *)); - -/* ─── Design tokens (light / dark) ─────────────────────────────── - 1. :root — light defaults (all platforms) - 2. @media dark :root — dark defaults; on native this follows - Appearance.getColorScheme() (the provider - sets an override for explicit modes). - 3. :root.dark / :root.light — web-only class override, beats the media - query within the same layer. */ -@layer theme { - :root { - --color-primary-0: 248 250 252; - --color-primary-50: 241 245 249; - --color-primary-100: 226 232 240; - --color-primary-200: 203 213 225; - --color-primary-300: 148 163 184; - --color-primary-400: 100 116 139; - --color-primary-500: 71 85 105; - --color-primary-600: 51 65 85; - --color-primary-700: 45 55 72; - --color-primary-800: 39 49 66; - --color-primary-900: 30 41 59; - --color-primary-950: 15 23 42; - --color-secondary-0: 254 255 255; - --color-secondary-50: 241 242 242; - --color-secondary-100: 231 232 232; - --color-secondary-200: 219 219 219; - --color-secondary-300: 175 176 176; - --color-secondary-400: 114 115 115; - --color-secondary-500: 94 95 95; - --color-secondary-600: 81 82 82; - --color-secondary-700: 63 64 64; - --color-secondary-800: 39 38 38; - --color-secondary-900: 24 23 23; - --color-secondary-950: 11 12 12; - --color-tertiary-0: 255 250 245; - --color-tertiary-50: 255 242 229; - --color-tertiary-100: 255 233 213; - --color-tertiary-200: 254 209 170; - --color-tertiary-300: 253 180 116; - --color-tertiary-400: 251 157 75; - --color-tertiary-500: 231 129 40; - --color-tertiary-600: 215 117 31; - --color-tertiary-700: 180 98 26; - --color-tertiary-800: 130 73 23; - --color-tertiary-900: 108 61 19; - --color-tertiary-950: 84 49 18; - --color-error-0: 254 233 233; - --color-error-50: 254 226 226; - --color-error-100: 254 202 202; - --color-error-200: 252 165 165; - --color-error-300: 248 113 113; - --color-error-400: 239 68 68; - --color-error-500: 230 53 53; - --color-error-600: 220 38 38; - --color-error-700: 185 28 28; - --color-error-800: 153 27 27; - --color-error-900: 127 29 29; - --color-error-950: 83 19 19; - --color-success-0: 228 255 244; - --color-success-50: 202 255 232; - --color-success-100: 162 241 192; - --color-success-200: 132 211 162; - --color-success-300: 102 181 132; - --color-success-400: 72 151 102; - --color-success-500: 52 131 82; - --color-success-600: 42 121 72; - --color-success-700: 32 111 62; - --color-success-800: 22 101 52; - --color-success-900: 20 83 45; - --color-success-950: 27 50 36; - --color-warning-0: 255 253 251; - --color-warning-50: 255 249 245; - --color-warning-100: 255 231 213; - --color-warning-200: 254 205 170; - --color-warning-300: 253 173 116; - --color-warning-400: 251 149 75; - --color-warning-500: 231 120 40; - --color-warning-600: 215 108 31; - --color-warning-700: 180 90 26; - --color-warning-800: 130 68 23; - --color-warning-900: 108 56 19; - --color-warning-950: 84 45 18; - --color-info-0: 236 248 254; - --color-info-50: 199 235 252; - --color-info-100: 162 221 250; - --color-info-200: 124 207 248; - --color-info-300: 87 194 246; - --color-info-400: 50 180 244; - --color-info-500: 13 166 242; - --color-info-600: 11 141 205; - --color-info-700: 9 115 168; - --color-info-800: 7 90 131; - --color-info-900: 5 64 93; - --color-info-950: 3 38 56; - --color-typography-0: 254 254 255; - --color-typography-50: 245 245 245; - --color-typography-100: 229 229 229; - --color-typography-200: 219 219 220; - --color-typography-300: 212 212 212; - --color-typography-400: 163 163 163; - --color-typography-500: 140 140 140; - --color-typography-600: 115 115 115; - --color-typography-700: 82 82 82; - --color-typography-800: 64 64 64; - --color-typography-900: 38 38 39; - --color-typography-950: 23 23 23; - --color-outline-0: 253 254 254; - --color-outline-50: 243 243 243; - --color-outline-100: 230 230 230; - --color-outline-200: 221 220 219; - --color-outline-300: 211 211 211; - --color-outline-400: 165 163 163; - --color-outline-500: 140 141 141; - --color-outline-600: 115 116 116; - --color-outline-700: 83 82 82; - --color-outline-800: 65 65 65; - --color-outline-900: 39 38 36; - --color-outline-950: 26 23 23; - --color-background-0: 255 255 255; - --color-background-50: 246 246 246; - --color-background-100: 242 241 241; - --color-background-200: 220 219 219; - --color-background-300: 213 212 212; - --color-background-400: 162 163 163; - --color-background-500: 142 142 142; - --color-background-600: 116 116 116; - --color-background-700: 83 82 82; - --color-background-800: 65 64 64; - --color-background-900: 39 38 37; - --color-background-950: 24 23 24; - --color-background-error: 254 241 241; - --color-background-warning: 255 244 235; - --color-background-success: 237 252 242; - --color-background-muted: 247 248 247; - --color-background-info: 235 248 254; - --color-indicator-primary: 55 55 55; - --color-indicator-info: 83 153 236; - --color-indicator-error: 185 28 28; - } - - @media (prefers-color-scheme: dark) { - :root { - --color-primary-0: 15 23 42; - --color-primary-50: 30 41 59; - --color-primary-100: 39 49 66; - --color-primary-200: 45 55 72; - --color-primary-300: 51 65 85; - --color-primary-400: 71 85 105; - --color-primary-500: 100 116 139; - --color-primary-600: 71 85 105; - --color-primary-700: 51 65 85; - --color-primary-800: 45 55 72; - --color-primary-900: 39 49 66; - --color-primary-950: 30 41 59; - --color-secondary-0: 11 12 12; - --color-secondary-50: 24 23 23; - --color-secondary-100: 39 38 38; - --color-secondary-200: 63 64 64; - --color-secondary-300: 81 82 82; - --color-secondary-400: 94 95 95; - --color-secondary-500: 114 115 115; - --color-secondary-600: 175 176 176; - --color-secondary-700: 219 219 219; - --color-secondary-800: 231 232 232; - --color-secondary-900: 241 242 242; - --color-secondary-950: 254 255 255; - --color-tertiary-0: 84 49 18; - --color-tertiary-50: 108 61 19; - --color-tertiary-100: 130 73 23; - --color-tertiary-200: 180 98 26; - --color-tertiary-300: 215 117 31; - --color-tertiary-400: 231 129 40; - --color-tertiary-500: 251 157 75; - --color-tertiary-600: 253 180 116; - --color-tertiary-700: 254 209 170; - --color-tertiary-800: 255 233 213; - --color-tertiary-900: 255 242 229; - --color-tertiary-950: 255 250 245; - --color-error-0: 83 19 19; - --color-error-50: 127 29 29; - --color-error-100: 153 27 27; - --color-error-200: 185 28 28; - --color-error-300: 220 38 38; - --color-error-400: 230 53 53; - --color-error-500: 239 68 68; - --color-error-600: 248 113 113; - --color-error-700: 252 165 165; - --color-error-800: 254 202 202; - --color-error-900: 254 226 226; - --color-error-950: 254 233 233; - --color-success-0: 27 50 36; - --color-success-50: 20 83 45; - --color-success-100: 22 101 52; - --color-success-200: 32 111 62; - --color-success-300: 42 121 72; - --color-success-400: 52 131 82; - --color-success-500: 72 151 102; - --color-success-600: 102 181 132; - --color-success-700: 132 211 162; - --color-success-800: 162 241 192; - --color-success-900: 202 255 232; - --color-success-950: 228 255 244; - --color-warning-0: 84 45 18; - --color-warning-50: 108 56 19; - --color-warning-100: 130 68 23; - --color-warning-200: 180 90 26; - --color-warning-300: 215 108 31; - --color-warning-400: 231 120 40; - --color-warning-500: 251 149 75; - --color-warning-600: 253 173 116; - --color-warning-700: 254 205 170; - --color-warning-800: 255 231 213; - --color-warning-900: 255 249 245; - --color-warning-950: 255 253 251; - --color-info-0: 3 38 56; - --color-info-50: 5 64 93; - --color-info-100: 7 90 131; - --color-info-200: 9 115 168; - --color-info-300: 11 141 205; - --color-info-400: 13 166 242; - --color-info-500: 50 180 244; - --color-info-600: 87 194 246; - --color-info-700: 124 207 248; - --color-info-800: 162 221 250; - --color-info-900: 199 235 252; - --color-info-950: 236 248 254; - --color-typography-0: 23 23 23; - --color-typography-50: 38 38 39; - --color-typography-100: 64 64 64; - --color-typography-200: 82 82 82; - --color-typography-300: 115 115 115; - --color-typography-400: 140 140 140; - --color-typography-500: 163 163 163; - --color-typography-600: 212 212 212; - --color-typography-700: 219 219 220; - --color-typography-800: 229 229 229; - --color-typography-900: 245 245 245; - --color-typography-950: 254 254 255; - --color-outline-0: 26 23 23; - --color-outline-50: 39 38 36; - --color-outline-100: 65 65 65; - --color-outline-200: 83 82 82; - --color-outline-300: 115 116 116; - --color-outline-400: 140 141 141; - --color-outline-500: 165 163 163; - --color-outline-600: 211 211 211; - --color-outline-700: 221 220 219; - --color-outline-800: 230 230 230; - --color-outline-900: 243 243 243; - --color-outline-950: 253 254 254; - --color-background-0: 18 18 18; - --color-background-50: 39 38 37; - --color-background-100: 65 64 64; - --color-background-200: 83 82 82; - --color-background-300: 116 116 116; - --color-background-400: 142 142 142; - --color-background-500: 162 163 163; - --color-background-600: 213 212 212; - --color-background-700: 220 219 219; - --color-background-800: 242 241 241; - --color-background-900: 246 246 246; - --color-background-950: 254 254 254; - --color-background-error: 66 43 43; - --color-background-warning: 65 47 35; - --color-background-success: 28 43 33; - --color-background-muted: 51 51 51; - --color-background-info: 26 40 46; - --color-indicator-primary: 247 247 247; - --color-indicator-info: 161 199 245; - --color-indicator-error: 232 70 69; - } - } - - :root.dark { - --color-primary-0: 15 23 42; - --color-primary-50: 30 41 59; - --color-primary-100: 39 49 66; - --color-primary-200: 45 55 72; - --color-primary-300: 51 65 85; - --color-primary-400: 71 85 105; - --color-primary-500: 100 116 139; - --color-primary-600: 71 85 105; - --color-primary-700: 51 65 85; - --color-primary-800: 45 55 72; - --color-primary-900: 39 49 66; - --color-primary-950: 30 41 59; - --color-secondary-0: 11 12 12; - --color-secondary-50: 24 23 23; - --color-secondary-100: 39 38 38; - --color-secondary-200: 63 64 64; - --color-secondary-300: 81 82 82; - --color-secondary-400: 94 95 95; - --color-secondary-500: 114 115 115; - --color-secondary-600: 175 176 176; - --color-secondary-700: 219 219 219; - --color-secondary-800: 231 232 232; - --color-secondary-900: 241 242 242; - --color-secondary-950: 254 255 255; - --color-tertiary-0: 84 49 18; - --color-tertiary-50: 108 61 19; - --color-tertiary-100: 130 73 23; - --color-tertiary-200: 180 98 26; - --color-tertiary-300: 215 117 31; - --color-tertiary-400: 231 129 40; - --color-tertiary-500: 251 157 75; - --color-tertiary-600: 253 180 116; - --color-tertiary-700: 254 209 170; - --color-tertiary-800: 255 233 213; - --color-tertiary-900: 255 242 229; - --color-tertiary-950: 255 250 245; - --color-error-0: 83 19 19; - --color-error-50: 127 29 29; - --color-error-100: 153 27 27; - --color-error-200: 185 28 28; - --color-error-300: 220 38 38; - --color-error-400: 230 53 53; - --color-error-500: 239 68 68; - --color-error-600: 248 113 113; - --color-error-700: 252 165 165; - --color-error-800: 254 202 202; - --color-error-900: 254 226 226; - --color-error-950: 254 233 233; - --color-success-0: 27 50 36; - --color-success-50: 20 83 45; - --color-success-100: 22 101 52; - --color-success-200: 32 111 62; - --color-success-300: 42 121 72; - --color-success-400: 52 131 82; - --color-success-500: 72 151 102; - --color-success-600: 102 181 132; - --color-success-700: 132 211 162; - --color-success-800: 162 241 192; - --color-success-900: 202 255 232; - --color-success-950: 228 255 244; - --color-warning-0: 84 45 18; - --color-warning-50: 108 56 19; - --color-warning-100: 130 68 23; - --color-warning-200: 180 90 26; - --color-warning-300: 215 108 31; - --color-warning-400: 231 120 40; - --color-warning-500: 251 149 75; - --color-warning-600: 253 173 116; - --color-warning-700: 254 205 170; - --color-warning-800: 255 231 213; - --color-warning-900: 255 249 245; - --color-warning-950: 255 253 251; - --color-info-0: 3 38 56; - --color-info-50: 5 64 93; - --color-info-100: 7 90 131; - --color-info-200: 9 115 168; - --color-info-300: 11 141 205; - --color-info-400: 13 166 242; - --color-info-500: 50 180 244; - --color-info-600: 87 194 246; - --color-info-700: 124 207 248; - --color-info-800: 162 221 250; - --color-info-900: 199 235 252; - --color-info-950: 236 248 254; - --color-typography-0: 23 23 23; - --color-typography-50: 38 38 39; - --color-typography-100: 64 64 64; - --color-typography-200: 82 82 82; - --color-typography-300: 115 115 115; - --color-typography-400: 140 140 140; - --color-typography-500: 163 163 163; - --color-typography-600: 212 212 212; - --color-typography-700: 219 219 220; - --color-typography-800: 229 229 229; - --color-typography-900: 245 245 245; - --color-typography-950: 254 254 255; - --color-outline-0: 26 23 23; - --color-outline-50: 39 38 36; - --color-outline-100: 65 65 65; - --color-outline-200: 83 82 82; - --color-outline-300: 115 116 116; - --color-outline-400: 140 141 141; - --color-outline-500: 165 163 163; - --color-outline-600: 211 211 211; - --color-outline-700: 221 220 219; - --color-outline-800: 230 230 230; - --color-outline-900: 243 243 243; - --color-outline-950: 253 254 254; - --color-background-0: 18 18 18; - --color-background-50: 39 38 37; - --color-background-100: 65 64 64; - --color-background-200: 83 82 82; - --color-background-300: 116 116 116; - --color-background-400: 142 142 142; - --color-background-500: 162 163 163; - --color-background-600: 213 212 212; - --color-background-700: 220 219 219; - --color-background-800: 242 241 241; - --color-background-900: 246 246 246; - --color-background-950: 254 254 254; - --color-background-error: 66 43 43; - --color-background-warning: 65 47 35; - --color-background-success: 28 43 33; - --color-background-muted: 51 51 51; - --color-background-info: 26 40 46; - --color-indicator-primary: 247 247 247; - --color-indicator-info: 161 199 245; - --color-indicator-error: 232 70 69; - } - - :root.light { - --color-primary-0: 248 250 252; - --color-primary-50: 241 245 249; - --color-primary-100: 226 232 240; - --color-primary-200: 203 213 225; - --color-primary-300: 148 163 184; - --color-primary-400: 100 116 139; - --color-primary-500: 71 85 105; - --color-primary-600: 51 65 85; - --color-primary-700: 45 55 72; - --color-primary-800: 39 49 66; - --color-primary-900: 30 41 59; - --color-primary-950: 15 23 42; - --color-secondary-0: 254 255 255; - --color-secondary-50: 241 242 242; - --color-secondary-100: 231 232 232; - --color-secondary-200: 219 219 219; - --color-secondary-300: 175 176 176; - --color-secondary-400: 114 115 115; - --color-secondary-500: 94 95 95; - --color-secondary-600: 81 82 82; - --color-secondary-700: 63 64 64; - --color-secondary-800: 39 38 38; - --color-secondary-900: 24 23 23; - --color-secondary-950: 11 12 12; - --color-tertiary-0: 255 250 245; - --color-tertiary-50: 255 242 229; - --color-tertiary-100: 255 233 213; - --color-tertiary-200: 254 209 170; - --color-tertiary-300: 253 180 116; - --color-tertiary-400: 251 157 75; - --color-tertiary-500: 231 129 40; - --color-tertiary-600: 215 117 31; - --color-tertiary-700: 180 98 26; - --color-tertiary-800: 130 73 23; - --color-tertiary-900: 108 61 19; - --color-tertiary-950: 84 49 18; - --color-error-0: 254 233 233; - --color-error-50: 254 226 226; - --color-error-100: 254 202 202; - --color-error-200: 252 165 165; - --color-error-300: 248 113 113; - --color-error-400: 239 68 68; - --color-error-500: 230 53 53; - --color-error-600: 220 38 38; - --color-error-700: 185 28 28; - --color-error-800: 153 27 27; - --color-error-900: 127 29 29; - --color-error-950: 83 19 19; - --color-success-0: 228 255 244; - --color-success-50: 202 255 232; - --color-success-100: 162 241 192; - --color-success-200: 132 211 162; - --color-success-300: 102 181 132; - --color-success-400: 72 151 102; - --color-success-500: 52 131 82; - --color-success-600: 42 121 72; - --color-success-700: 32 111 62; - --color-success-800: 22 101 52; - --color-success-900: 20 83 45; - --color-success-950: 27 50 36; - --color-warning-0: 255 253 251; - --color-warning-50: 255 249 245; - --color-warning-100: 255 231 213; - --color-warning-200: 254 205 170; - --color-warning-300: 253 173 116; - --color-warning-400: 251 149 75; - --color-warning-500: 231 120 40; - --color-warning-600: 215 108 31; - --color-warning-700: 180 90 26; - --color-warning-800: 130 68 23; - --color-warning-900: 108 56 19; - --color-warning-950: 84 45 18; - --color-info-0: 236 248 254; - --color-info-50: 199 235 252; - --color-info-100: 162 221 250; - --color-info-200: 124 207 248; - --color-info-300: 87 194 246; - --color-info-400: 50 180 244; - --color-info-500: 13 166 242; - --color-info-600: 11 141 205; - --color-info-700: 9 115 168; - --color-info-800: 7 90 131; - --color-info-900: 5 64 93; - --color-info-950: 3 38 56; - --color-typography-0: 254 254 255; - --color-typography-50: 245 245 245; - --color-typography-100: 229 229 229; - --color-typography-200: 219 219 220; - --color-typography-300: 212 212 212; - --color-typography-400: 163 163 163; - --color-typography-500: 140 140 140; - --color-typography-600: 115 115 115; - --color-typography-700: 82 82 82; - --color-typography-800: 64 64 64; - --color-typography-900: 38 38 39; - --color-typography-950: 23 23 23; - --color-outline-0: 253 254 254; - --color-outline-50: 243 243 243; - --color-outline-100: 230 230 230; - --color-outline-200: 221 220 219; - --color-outline-300: 211 211 211; - --color-outline-400: 165 163 163; - --color-outline-500: 140 141 141; - --color-outline-600: 115 116 116; - --color-outline-700: 83 82 82; - --color-outline-800: 65 65 65; - --color-outline-900: 39 38 36; - --color-outline-950: 26 23 23; - --color-background-0: 255 255 255; - --color-background-50: 246 246 246; - --color-background-100: 242 241 241; - --color-background-200: 220 219 219; - --color-background-300: 213 212 212; - --color-background-400: 162 163 163; - --color-background-500: 142 142 142; - --color-background-600: 116 116 116; - --color-background-700: 83 82 82; - --color-background-800: 65 64 64; - --color-background-900: 39 38 37; - --color-background-950: 24 23 24; - --color-background-error: 254 241 241; - --color-background-warning: 255 244 235; - --color-background-success: 237 252 242; - --color-background-muted: 247 248 247; - --color-background-info: 235 248 254; - --color-indicator-primary: 55 55 55; - --color-indicator-info: 83 153 236; - --color-indicator-error: 185 28 28; - } -} - -/* ─── Tailwind v4 utilities for the legacy gluestack v2 token scales ── */ -@theme inline { - --color-primary-0: rgb(var(--color-primary-0)); - --color-primary-50: rgb(var(--color-primary-50)); - --color-primary-100: rgb(var(--color-primary-100)); - --color-primary-200: rgb(var(--color-primary-200)); - --color-primary-300: rgb(var(--color-primary-300)); - --color-primary-400: rgb(var(--color-primary-400)); - --color-primary-500: rgb(var(--color-primary-500)); - --color-primary-600: rgb(var(--color-primary-600)); - --color-primary-700: rgb(var(--color-primary-700)); - --color-primary-800: rgb(var(--color-primary-800)); - --color-primary-900: rgb(var(--color-primary-900)); - --color-primary-950: rgb(var(--color-primary-950)); - --color-secondary-0: rgb(var(--color-secondary-0)); - --color-secondary-50: rgb(var(--color-secondary-50)); - --color-secondary-100: rgb(var(--color-secondary-100)); - --color-secondary-200: rgb(var(--color-secondary-200)); - --color-secondary-300: rgb(var(--color-secondary-300)); - --color-secondary-400: rgb(var(--color-secondary-400)); - --color-secondary-500: rgb(var(--color-secondary-500)); - --color-secondary-600: rgb(var(--color-secondary-600)); - --color-secondary-700: rgb(var(--color-secondary-700)); - --color-secondary-800: rgb(var(--color-secondary-800)); - --color-secondary-900: rgb(var(--color-secondary-900)); - --color-secondary-950: rgb(var(--color-secondary-950)); - --color-tertiary-0: rgb(var(--color-tertiary-0)); - --color-tertiary-50: rgb(var(--color-tertiary-50)); - --color-tertiary-100: rgb(var(--color-tertiary-100)); - --color-tertiary-200: rgb(var(--color-tertiary-200)); - --color-tertiary-300: rgb(var(--color-tertiary-300)); - --color-tertiary-400: rgb(var(--color-tertiary-400)); - --color-tertiary-500: rgb(var(--color-tertiary-500)); - --color-tertiary-600: rgb(var(--color-tertiary-600)); - --color-tertiary-700: rgb(var(--color-tertiary-700)); - --color-tertiary-800: rgb(var(--color-tertiary-800)); - --color-tertiary-900: rgb(var(--color-tertiary-900)); - --color-tertiary-950: rgb(var(--color-tertiary-950)); - --color-error-0: rgb(var(--color-error-0)); - --color-error-50: rgb(var(--color-error-50)); - --color-error-100: rgb(var(--color-error-100)); - --color-error-200: rgb(var(--color-error-200)); - --color-error-300: rgb(var(--color-error-300)); - --color-error-400: rgb(var(--color-error-400)); - --color-error-500: rgb(var(--color-error-500)); - --color-error-600: rgb(var(--color-error-600)); - --color-error-700: rgb(var(--color-error-700)); - --color-error-800: rgb(var(--color-error-800)); - --color-error-900: rgb(var(--color-error-900)); - --color-error-950: rgb(var(--color-error-950)); - --color-success-0: rgb(var(--color-success-0)); - --color-success-50: rgb(var(--color-success-50)); - --color-success-100: rgb(var(--color-success-100)); - --color-success-200: rgb(var(--color-success-200)); - --color-success-300: rgb(var(--color-success-300)); - --color-success-400: rgb(var(--color-success-400)); - --color-success-500: rgb(var(--color-success-500)); - --color-success-600: rgb(var(--color-success-600)); - --color-success-700: rgb(var(--color-success-700)); - --color-success-800: rgb(var(--color-success-800)); - --color-success-900: rgb(var(--color-success-900)); - --color-success-950: rgb(var(--color-success-950)); - --color-warning-0: rgb(var(--color-warning-0)); - --color-warning-50: rgb(var(--color-warning-50)); - --color-warning-100: rgb(var(--color-warning-100)); - --color-warning-200: rgb(var(--color-warning-200)); - --color-warning-300: rgb(var(--color-warning-300)); - --color-warning-400: rgb(var(--color-warning-400)); - --color-warning-500: rgb(var(--color-warning-500)); - --color-warning-600: rgb(var(--color-warning-600)); - --color-warning-700: rgb(var(--color-warning-700)); - --color-warning-800: rgb(var(--color-warning-800)); - --color-warning-900: rgb(var(--color-warning-900)); - --color-warning-950: rgb(var(--color-warning-950)); - --color-info-0: rgb(var(--color-info-0)); - --color-info-50: rgb(var(--color-info-50)); - --color-info-100: rgb(var(--color-info-100)); - --color-info-200: rgb(var(--color-info-200)); - --color-info-300: rgb(var(--color-info-300)); - --color-info-400: rgb(var(--color-info-400)); - --color-info-500: rgb(var(--color-info-500)); - --color-info-600: rgb(var(--color-info-600)); - --color-info-700: rgb(var(--color-info-700)); - --color-info-800: rgb(var(--color-info-800)); - --color-info-900: rgb(var(--color-info-900)); - --color-info-950: rgb(var(--color-info-950)); - --color-typography-0: rgb(var(--color-typography-0)); - --color-typography-50: rgb(var(--color-typography-50)); - --color-typography-100: rgb(var(--color-typography-100)); - --color-typography-200: rgb(var(--color-typography-200)); - --color-typography-300: rgb(var(--color-typography-300)); - --color-typography-400: rgb(var(--color-typography-400)); - --color-typography-500: rgb(var(--color-typography-500)); - --color-typography-600: rgb(var(--color-typography-600)); - --color-typography-700: rgb(var(--color-typography-700)); - --color-typography-800: rgb(var(--color-typography-800)); - --color-typography-900: rgb(var(--color-typography-900)); - --color-typography-950: rgb(var(--color-typography-950)); - --color-outline-0: rgb(var(--color-outline-0)); - --color-outline-50: rgb(var(--color-outline-50)); - --color-outline-100: rgb(var(--color-outline-100)); - --color-outline-200: rgb(var(--color-outline-200)); - --color-outline-300: rgb(var(--color-outline-300)); - --color-outline-400: rgb(var(--color-outline-400)); - --color-outline-500: rgb(var(--color-outline-500)); - --color-outline-600: rgb(var(--color-outline-600)); - --color-outline-700: rgb(var(--color-outline-700)); - --color-outline-800: rgb(var(--color-outline-800)); - --color-outline-900: rgb(var(--color-outline-900)); - --color-outline-950: rgb(var(--color-outline-950)); - --color-background-0: rgb(var(--color-background-0)); - --color-background-50: rgb(var(--color-background-50)); - --color-background-100: rgb(var(--color-background-100)); - --color-background-200: rgb(var(--color-background-200)); - --color-background-300: rgb(var(--color-background-300)); - --color-background-400: rgb(var(--color-background-400)); - --color-background-500: rgb(var(--color-background-500)); - --color-background-600: rgb(var(--color-background-600)); - --color-background-700: rgb(var(--color-background-700)); - --color-background-800: rgb(var(--color-background-800)); - --color-background-900: rgb(var(--color-background-900)); - --color-background-950: rgb(var(--color-background-950)); - --color-background-error: rgb(var(--color-background-error)); - --color-background-warning: rgb(var(--color-background-warning)); - --color-background-success: rgb(var(--color-background-success)); - --color-background-muted: rgb(var(--color-background-muted)); - --color-background-info: rgb(var(--color-background-info)); - --color-indicator-primary: rgb(var(--color-indicator-primary)); - --color-indicator-info: rgb(var(--color-indicator-info)); - --color-indicator-error: rgb(var(--color-indicator-error)); -} - -/* ─── Non-color theme extensions (ported from tailwind.config.js) ── */ -@theme { - --font-roboto: Roboto, sans-serif; - --font-weight-extrablack: 950; - --text-2xs: 10px; - --color-typography-white: #ffffff; - --color-typography-gray: #d4d4d4; - --color-typography-black: #181718; - --color-background-light: #fbfbfb; - --color-background-dark: #181719; - --shadow-hard-1: -2px 2px 8px 0px rgba(38, 38, 38, 0.2); - --shadow-hard-2: 0px 3px 10px 0px rgba(38, 38, 38, 0.2); - --shadow-hard-3: 2px 2px 8px 0px rgba(38, 38, 38, 0.2); - --shadow-hard-4: 0px -3px 10px 0px rgba(38, 38, 38, 0.2); - --shadow-hard-5: 0px 2px 10px 0px rgba(38, 38, 38, 0.1); - --shadow-soft-1: 0px 0px 10px rgba(38, 38, 38, 0.1); - --shadow-soft-2: 0px 0px 20px rgba(38, 38, 38, 0.2); - --shadow-soft-3: 0px 0px 30px rgba(38, 38, 38, 0.1); - --shadow-soft-4: 0px 0px 40px rgba(38, 38, 38, 0.1); -} - -/* Web-only skeleton loading animation */ -@keyframes skeleton-pulse { - 0%, 100% { - opacity: 1; - } - 50% { - opacity: 0.75; - } -} +@import './theme-tokens.css'; + +/* Native dark mode: the colour-scheme media query, which react-native-css drives from Appearance. + GluestackUIProvider calls Appearance.setColorScheme() for explicit light/dark choices, so this + covers a user-selected theme as well as the system one, and it is the same query the tokens flip on. + + There is deliberately no theme class on native. The provider used to put one on the View wrapping + the whole app, and any className on that wrapper stops every native ScrollView beneath it from + starting a pan: a drag on plain content did nothing app-wide, and only a Pressable handing the + responder off could scroll anything. Keep this selector-free — react-native-css silently drops + rules whose selectors it cannot evaluate, which takes dark mode with them. */ +@custom-variant dark (@media (prefers-color-scheme: dark)); diff --git a/global.web.css b/global.web.css new file mode 100644 index 0000000..cf123fb --- /dev/null +++ b/global.web.css @@ -0,0 +1,12 @@ +@import 'tailwindcss/theme.css' layer(theme); +@import 'tailwindcss/preflight.css' layer(base); +@import 'tailwindcss/utilities.css'; +@import 'nativewind/theme'; + +@import './theme-tokens.css'; + +/* Web dark mode: the .dark class GluestackUIProvider puts on (see index.web.tsx). It is + always present — explicit modes set .dark/.light directly, and system mode sets one from the + media query — so the class alone is authoritative. Matching prefers-color-scheme here as well + would make an explicit Light choice render dark utilities on a dark-themed OS. */ +@custom-variant dark (&:where(.dark, .dark *)); diff --git a/src/app/(app)/chat.tsx b/src/app/(app)/chat.tsx index 561d581..f487ed6 100644 --- a/src/app/(app)/chat.tsx +++ b/src/app/(app)/chat.tsx @@ -35,7 +35,12 @@ function ChannelRow({ channel, onPress }: { channel: ChatChannelResultData; onPr ); } - const isIncident = channel.ChannelType === ChatChannelType.Incident || channel.ChannelType === ChatChannelType.IncidentLane || channel.ChannelType === ChatChannelType.IncidentCommand; + const isIncident = + channel.ChannelType === ChatChannelType.Incident || + channel.ChannelType === ChatChannelType.IncidentLane || + channel.ChannelType === ChatChannelType.IncidentCommand || + channel.ChannelType === ChatChannelType.IncidentLeads || + channel.ChannelType === ChatChannelType.IncidentDispatch; const Icon = channel.ChannelType === ChatChannelType.Chatbot ? Sparkles : isIncident ? Network : Users; return ( diff --git a/src/app/(app)/command.tsx b/src/app/(app)/command.tsx index a11bd89..90c43c4 100644 --- a/src/app/(app)/command.tsx +++ b/src/app/(app)/command.tsx @@ -680,11 +680,11 @@ export default function CommandBoard() {