diff --git a/packages/app/src/components/add-host-modal.tsx b/packages/app/src/components/add-host-modal.tsx index 0cf95858e..dc4a0ee02 100644 --- a/packages/app/src/components/add-host-modal.tsx +++ b/packages/app/src/components/add-host-modal.tsx @@ -489,7 +489,7 @@ export function AddHostModal({ visible, onClose, onCancel, onSaved }: AddHostMod {useTls ? ( - + ) : null} diff --git a/packages/app/src/components/composer.tsx b/packages/app/src/components/composer.tsx index dc29e28fd..9d3eabe21 100644 --- a/packages/app/src/components/composer.tsx +++ b/packages/app/src/components/composer.tsx @@ -463,7 +463,7 @@ function QueuedMessageRow({ item, onEdit, onSendNow }: QueuedMessageRowProps) { accessibilityLabel="Send queued message now" accessibilityRole="button" > - + @@ -1847,6 +1847,7 @@ const styles = StyleSheet.create((theme: Theme) => ({ const QUEUE_SEND_BUTTON_STYLE = [styles.queueActionButton, styles.queueSendButton]; const ThemedPencil = withUnistyles(Pencil); +const ThemedArrowUp = withUnistyles(ArrowUp); const ThemedGitPullRequest = withUnistyles(GitPullRequest); const ThemedCircleDot = withUnistyles(CircleDot); const ThemedAudioLines = withUnistyles(AudioLines); @@ -1855,3 +1856,4 @@ const ThemedGithub = withUnistyles(Github); const iconForegroundMapping = (theme: Theme) => ({ color: theme.colors.foreground }); const iconForegroundMutedMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted }); +const iconAccentForegroundMapping = (theme: Theme) => ({ color: theme.colors.accentForeground }); diff --git a/packages/app/src/components/dictation-controls.tsx b/packages/app/src/components/dictation-controls.tsx index 9a382fcc5..cc12a26de 100644 --- a/packages/app/src/components/dictation-controls.tsx +++ b/packages/app/src/components/dictation-controls.tsx @@ -166,16 +166,16 @@ export function DictationOverlay({ [actionsDisabled, isFailed], ); const overlayTimerTextStyle = useMemo( - () => [overlayStyles.timerText, { color: theme.colors.palette.white }], - [theme.colors.palette.white], + () => [overlayStyles.timerText, { color: theme.colors.accentForeground }], + [theme.colors.accentForeground], ); const overlayTranscriptTextStyle = useMemo( - () => [overlayStyles.transcriptText, { color: theme.colors.palette.white, opacity: 0.95 }], - [theme.colors.palette.white], + () => [overlayStyles.transcriptText, { color: theme.colors.accentForeground, opacity: 0.95 }], + [theme.colors.accentForeground], ); const overlayRetryButtonStyle = useMemo( - () => [overlayStyles.actionButton, { backgroundColor: theme.colors.palette.white }], - [theme.colors.palette.white], + () => [overlayStyles.actionButton, { backgroundColor: theme.colors.accentForeground }], + [theme.colors.accentForeground], ); const overlayConfirmButtonStyle = overlayRetryButtonStyle; @@ -192,7 +192,7 @@ export function DictationOverlay({ accessibilityLabel="Cancel dictation" style={overlayCancelButtonStyle} > - + @@ -202,7 +202,7 @@ export function DictationOverlay({ isMuted={false} isSpeaking={false} orientation="horizontal" - color={theme.colors.palette.white} + color={theme.colors.accentForeground} /> {formatDuration(duration)} @@ -216,7 +216,7 @@ export function DictationOverlay({ {actionsDisabled ? ( - + ) : null} {!actionsDisabled && isFailed ? ( @@ -239,7 +239,7 @@ export function DictationOverlay({ > diff --git a/packages/app/src/components/message-input.tsx b/packages/app/src/components/message-input.tsx index ed4409b2a..4b5b9cf38 100644 --- a/packages/app/src/components/message-input.tsx +++ b/packages/app/src/components/message-input.tsx @@ -315,12 +315,12 @@ function SendButtonContent({ buttonIconSize: number; }) { if (isSubmitLoading) { - return ; + return ; } if (submitIcon === "return") { - return ; + return ; } - return ; + return ; } function resolveSubmitAccessibilityLabel(input: { @@ -1977,10 +1977,14 @@ const styles = StyleSheet.create((theme: Theme) => ({ const ThemedPlus = withUnistyles(Plus); const ThemedMic = withUnistyles(Mic); const ThemedMicOff = withUnistyles(MicOff); +const ThemedArrowUp = withUnistyles(ArrowUp); +const ThemedCornerDownLeft = withUnistyles(CornerDownLeft); +const ThemedActivityIndicator = withUnistyles(ActivityIndicator); const ThemedTextInput = withUnistyles(TextInput); const iconForegroundMapping = (theme: Theme) => ({ color: theme.colors.foreground }); const iconForegroundMutedMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted }); +const iconAccentForegroundMapping = (theme: Theme) => ({ color: theme.colors.accentForeground }); const textInputPlaceholderColorMapping = (theme: Theme) => ({ placeholderTextColor: theme.colors.surface4, }); diff --git a/packages/app/src/styles/theme.ts b/packages/app/src/styles/theme.ts index 6017f5c2f..ac2a9d112 100644 --- a/packages/app/src/styles/theme.ts +++ b/packages/app/src/styles/theme.ts @@ -235,6 +235,7 @@ interface DarkThemeConfig { borderAccent: string; accent: string; accentBright: string; + accentForeground?: string; destructive: string; } @@ -277,7 +278,7 @@ function buildDarkSemanticColors(tint: DarkThemeConfig) { accent: tint.accent, accentBright: tint.accentBright, - accentForeground: "#ffffff", + accentForeground: tint.accentForeground ?? "#ffffff", destructive: tint.destructive, destructiveForeground: "#ffffff", @@ -352,8 +353,9 @@ const zincDarkColors = buildDarkSemanticColors({ scrollbarHandle: "#71717a", border: "#27272a", borderAccent: "#303036", - accent: "#20744A", - accentBright: "#7ccba0", + accent: "#e4e4e7", + accentBright: "#fafafa", + accentForeground: "#18181b", // monochrome zinc accent is near-white — needs dark text destructive: "#c44a4a", // neutral red, hue 0 — clearly red without screaming });