authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-10-02 09:43:40-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-10-02 09:43:40-07:00
logce96e4c3de1973c7e0088ef8806043841f902080
tree07ecd8b3f29f3d0a598b46673445ac4423d40514
parent54084ae1e6c32809db040e4fa571c80fdf2d8ae4
signature Signed by PGP key B5690EEEBB952194

fix(mobile): project picker cards match the settings card color (#14756)

10 files changed, 38 insertions(+), 34 deletions(-)

apps/mobile/src/features/archive/ArchivedThreadsScreen.tsx+2-2
......@@ -190,7 +190,7 @@ function ArchivedThreadRow(props: {
190190 readonly thread: EnvironmentThreadShell;
191191}) {
192192 const { width: windowWidth } = useWindowDimensions();
193 const cardColor = useUniwindTheme()["--color-card"];
193 const cardColor = useUniwindTheme()["--color-grouped-card"];
194194 const timestamp = relativeTime(props.thread.archivedAt ?? props.thread.updatedAt);
195195 const subtitle = [props.environmentLabel, props.thread.branch].filter((part): part is string =>
196196 Boolean(part),
......@@ -224,7 +224,7 @@ function ArchivedThreadRow(props: {
224224 >
225225 {() => (
226226 <View
227 className={`flex-row items-center gap-3 bg-card px-4 py-3 ${props.isLast ? "" : "border-b border-separator"}`}
227 className={`flex-row items-center gap-3 bg-grouped-card px-4 py-3 ${props.isLast ? "" : "border-b border-separator"}`}
228228 >
229229 <View className="h-[34px] w-[34px] items-center justify-center rounded-[11px] bg-subtle">
230230 <SymbolView
apps/mobile/src/features/cloud/ConnectOnboardingRouteScreen.tsx+1-1
......@@ -117,7 +117,7 @@ function ConfiguredConnectOnboardingRouteScreen() {
117117 showHeader={false}
118118 />
119119 ) : (
120 <View collapsable={false} className="rounded-[24px] bg-card p-5">
120 <View collapsable={false} className="rounded-[24px] bg-grouped-card p-5">
121121 <Text className="text-sm leading-normal text-foreground-muted">
122122 Sign in to your T3 account to set up T3 Connect.
123123 </Text>
apps/mobile/src/features/connection/ConnectionsNewRouteScreen.tsx+2-2
......@@ -226,7 +226,7 @@ export function ConnectionsNewRouteScreen({
226226 />
227227 </View>
228228 ) : (
229 <View className="items-center gap-3 rounded-[24px] border-continuous bg-card px-5 py-8">
229 <View className="items-center gap-3 rounded-[24px] border-continuous bg-grouped-card px-5 py-8">
230230 <Text className="text-center text-sm leading-normal text-foreground-muted">
231231 Camera permission is required to scan a QR code.
232232 </Text>
......@@ -242,7 +242,7 @@ export function ConnectionsNewRouteScreen({
242242 </View>
243243 )
244244 ) : (
245 <View collapsable={false} className="gap-4 rounded-[24px] bg-card p-4">
245 <View collapsable={false} className="gap-4 rounded-[24px] bg-grouped-card p-4">
246246 <ConnectionFormField
247247 label="Host"
248248 autoCapitalize="none"
apps/mobile/src/features/projects/AddProjectScreen.tsx+6-5
......@@ -175,8 +175,8 @@ function ListSection(props: { readonly children: ReactNode }) {
175175 <View
176176 className={
177177 Platform.OS === "android"
178 ? "overflow-hidden rounded-[28px] bg-card"
179 : "overflow-hidden rounded-[24px] bg-card"
178 ? "overflow-hidden rounded-[28px] bg-grouped-card"
179 : "overflow-hidden rounded-[24px] bg-grouped-card"
180180 }
181181 >
182182 {props.children}
......@@ -197,6 +197,7 @@ function ListRow(props: {
197197 if (Platform.OS === "android") {
198198 return (
199199 <MaterialListRow
200 className="bg-grouped-card"
200201 title={props.title}
201202 subtitle={props.subtitle}
202203 leading={props.icon}
......@@ -213,7 +214,7 @@ function ListRow(props: {
213214 disabled={props.disabled}
214215 onPress={props.onPress}
215216 className={cn(
216 "bg-card px-3.5 py-2.5 active:opacity-70",
217 "bg-grouped-card px-3.5 py-2.5 active:opacity-70",
217218 !props.isFirst && "border-t border-border-subtle",
218219 props.disabled && "opacity-[0.45]",
219220 )}
......@@ -448,7 +449,7 @@ function EmptyEnvironmentState() {
448449 const navigation = useNavigation();
449450
450451 return (
451 <View className="items-center gap-3 rounded-2xl bg-card px-5 py-8">
452 <View className="items-center gap-3 rounded-2xl bg-grouped-card px-5 py-8">
452453 <Text className="text-center text-lg font-t3-bold">Environment unavailable</Text>
453454 <Text className="text-center text-sm leading-normal text-foreground-muted">
454455 Start or reconnect an environment before adding a project.
......@@ -1333,7 +1334,7 @@ export function AddProjectDestinationScreen(props: {
13331334 <AddProjectShell title="Clone destination">
13341335 {error ? <ErrorBanner message={error} /> : null}
13351336 {repositoryTitle ? (
1336 <View className="rounded-[24px] bg-card px-4 py-3">
1337 <View className="rounded-[24px] bg-grouped-card px-4 py-3">
13371338 <Text className="text-base font-t3-bold">{repositoryTitle}</Text>
13381339 <Text className="mt-0.5 text-xs text-foreground-muted" numberOfLines={2}>
13391340 {remoteUrl}
apps/mobile/src/features/threads/NewTaskContextPickerScreens.tsx+5-4
......@@ -54,6 +54,7 @@ function SelectionRow(props: {
5454 if (Platform.OS === "android") {
5555 return (
5656 <MaterialListRow
57 className="bg-grouped-card"
5758 title={props.title}
5859 subtitle={props.subtitle}
5960 leading={
......@@ -85,7 +86,7 @@ function SelectionRow(props: {
8586 accessibilityRole="radio"
8687 accessibilityState={{ checked: props.selected }}
8788 className={cn(
88 "min-h-14 flex-row items-center gap-3 bg-card px-4 py-3 active:bg-subtle",
89 "min-h-14 flex-row items-center gap-3 bg-grouped-card px-4 py-3 active:bg-subtle",
8990 !props.isLast && "border-b border-border-subtle",
9091 )}
9192 disabled={props.disabled}
......@@ -131,7 +132,7 @@ function ToggleRow(props: {
131132 readonly onValueChange: (value: boolean) => void;
132133}) {
133134 return (
134 <View className="min-h-14 flex-row items-center gap-3 bg-card px-4 py-3">
135 <View className="min-h-14 flex-row items-center gap-3 bg-grouped-card px-4 py-3">
135136 <Text
136137 className={cn(
137138 "min-w-0 flex-1 text-base text-foreground",
......@@ -192,8 +193,8 @@ function PickerSurface(props: { readonly children: ReactNode }) {
192193 <View
193194 className={
194195 Platform.OS === "android"
195 ? "overflow-hidden rounded-[28px] bg-card"
196 : "overflow-hidden rounded-2xl bg-card"
196 ? "overflow-hidden rounded-[28px] bg-grouped-card"
197 : "overflow-hidden rounded-2xl bg-grouped-card"
197198 }
198199 >
199200 {props.children}
apps/mobile/src/features/threads/NewTaskRouteScreen.tsx+9-7
......@@ -314,8 +314,9 @@ export function NewTaskRouteScreen({ route }: StaticScreenProps<NewTaskRoutePara
314314 >
315315 {canStartScratch && listScopes.length > 0 ? (
316316 Platform.OS === "android" ? (
317 <View collapsable={false} className="overflow-hidden rounded-[28px] bg-card">
317 <View collapsable={false} className="overflow-hidden rounded-[28px] bg-grouped-card">
318318 <MaterialListRow
319 className="bg-grouped-card"
319320 title="No project"
320321 subtitle="Start a task without a project"
321322 onPress={() => void startScratch()}
......@@ -330,12 +331,12 @@ export function NewTaskRouteScreen({ route }: StaticScreenProps<NewTaskRoutePara
330331 />
331332 </View>
332333 ) : (
333 <View collapsable={false} className="overflow-hidden rounded-[24px] bg-card">
334 <View collapsable={false} className="overflow-hidden rounded-[24px] bg-grouped-card">
334335 <Pressable
335336 accessibilityRole="button"
336337 accessibilityLabel="No project"
337338 onPress={() => void startScratch()}
338 className="flex-row items-center gap-3 bg-card px-4 py-3.5"
339 className="flex-row items-center gap-3 bg-grouped-card px-4 py-3.5"
339340 >
340341 <View className="h-7 w-7 items-center justify-center">
341342 <SymbolView
......@@ -366,7 +367,7 @@ export function NewTaskRouteScreen({ route }: StaticScreenProps<NewTaskRoutePara
366367 collapsable={false}
367368 className={cn(
368369 "items-center gap-3 px-6 py-8",
369 Platform.OS !== "android" && "rounded-[24px] bg-card",
370 Platform.OS !== "android" && "rounded-[24px] bg-grouped-card",
370371 )}
371372 >
372373 {projectEmptyState.loading ? (
......@@ -443,8 +444,8 @@ export function NewTaskRouteScreen({ route }: StaticScreenProps<NewTaskRoutePara
443444 collapsable={false}
444445 className={
445446 Platform.OS === "android"
446 ? "overflow-hidden rounded-[28px] bg-card"
447 : "overflow-hidden rounded-[24px] bg-card"
447 ? "overflow-hidden rounded-[28px] bg-grouped-card"
448 : "overflow-hidden rounded-[24px] bg-grouped-card"
448449 }
449450 >
450451 {visibleScopes.map((scope, scopeIndex) => {
......@@ -456,6 +457,7 @@ export function NewTaskRouteScreen({ route }: StaticScreenProps<NewTaskRoutePara
456457 if (Platform.OS === "android") {
457458 return (
458459 <MaterialListRow
460 className="bg-grouped-card"
459461 key={scope.key}
460462 title={scope.title}
461463 subtitle={
......@@ -488,7 +490,7 @@ export function NewTaskRouteScreen({ route }: StaticScreenProps<NewTaskRoutePara
488490 accessibilityLabel={scope.title}
489491 disabled={reservedDestinationProject !== null}
490492 onPress={() => void selectProject(selectionTarget)}
491 className="flex-row items-center gap-3 bg-card px-4 py-3.5"
493 className="flex-row items-center gap-3 bg-grouped-card px-4 py-3.5"
492494 >
493495 <View className="h-7 w-7 items-center justify-center">
494496 <ProjectFavicon
apps/mobile/src/features/threads/ThreadSettingsRows.shared.tsx+2-2
......@@ -41,7 +41,7 @@ export function ModelRowContent(
4141 <View
4242 style={props.minimumHeight === undefined ? undefined : { minHeight: props.minimumHeight }}
4343 className={cn(
44 "mx-4 min-h-11 flex-row items-center gap-2 bg-card px-4",
44 "mx-4 min-h-11 flex-row items-center gap-2 bg-grouped-card px-4",
4545 props.selectedClassName,
4646 props.isFirst && "rounded-t-2xl",
4747 props.isLast ? "rounded-b-2xl" : "border-b border-border-subtle",
......@@ -123,7 +123,7 @@ export function ChoiceRowContent(props: ChoiceRowProps & RowSelectionProps) {
123123 onPress={props.onPress}
124124 style={props.minimumHeight === undefined ? undefined : { minHeight: props.minimumHeight }}
125125 className={cn(
126 "min-h-14 flex-row items-center gap-3 bg-card px-4 py-3 active:bg-subtle",
126 "min-h-14 flex-row items-center gap-3 bg-grouped-card px-4 py-3 active:bg-subtle",
127127 !props.isLast && "border-b border-border-subtle",
128128 )}
129129 >
apps/mobile/src/features/threads/ThreadSettingsSheet.tsx+5-5
......@@ -186,7 +186,7 @@ function DisclosureRow(props: {
186186 accessibilityRole="button"
187187 onPress={props.onPress}
188188 className={cn(
189 "min-h-11 flex-row items-center gap-2 bg-card px-4 py-2 active:bg-subtle android:min-h-14",
189 "min-h-11 flex-row items-center gap-2 bg-grouped-card px-4 py-2 active:bg-subtle android:min-h-14",
190190 !props.isLast && "border-b border-border-subtle",
191191 )}
192192 >
......@@ -216,7 +216,7 @@ function SwitchRow(props: {
216216 return (
217217 <View
218218 className={cn(
219 "min-h-11 flex-row items-center justify-between bg-card px-4 py-1",
219 "min-h-11 flex-row items-center justify-between bg-grouped-card px-4 py-1",
220220 !props.isLast && "border-b border-border-subtle",
221221 )}
222222 >
......@@ -700,7 +700,7 @@ function ThreadSettingsOptionsItem(props: {
700700 <ChatGptSharingStatus provider={selectedProvider} />
701701 <Text className="px-5 pb-2 pt-2 text-sm font-t3-medium text-foreground-muted">Options</Text>
702702 <Animated.View
703 className="mx-4 overflow-hidden rounded-2xl bg-card"
703 className="mx-4 overflow-hidden rounded-2xl bg-grouped-card"
704704 layout={THREAD_SETTINGS_OPTIONS_LAYOUT_TRANSITION}
705705 >
706706 {session.displayedDescriptors.map((descriptor) => {
......@@ -754,7 +754,7 @@ function ThreadSettingsOptionsItem(props: {
754754 <Text className="px-5 pb-2 pt-7 text-sm font-t3-medium text-foreground-muted">
755755 Catalog
756756 </Text>
757 <View className="mx-4 overflow-hidden rounded-2xl bg-card">
757 <View className="mx-4 overflow-hidden rounded-2xl bg-grouped-card">
758758 <SwitchRow
759759 isLast
760760 label="Legacy models"
......@@ -999,7 +999,7 @@ function ThreadSettingsChoiceContent(props: {
999999 contentInsetAdjustmentBehavior="automatic"
10001000 showsVerticalScrollIndicator={false}
10011001 >
1002 <View className="overflow-hidden rounded-2xl bg-card">
1002 <View className="overflow-hidden rounded-2xl bg-grouped-card">
10031003 {submenuContent.rows.map((row, index) => (
10041004 <ChoiceRow
10051005 key={row.id}
apps/mobile/src/features/usage/UsageLimitsPooled.tsx+4-4
......@@ -100,7 +100,7 @@ function PoolWindowCard({
100100 },
101101 });
102102 return (
103 <View className="gap-3 rounded-[24px] border-continuous bg-card p-4">
103 <View className="gap-3 rounded-[24px] border-continuous bg-grouped-card p-4">
104104 <View className="flex-row items-start justify-between gap-3">
105105 <View className="gap-1">
106106 <Text className="text-sm font-t3-medium text-foreground">{label ?? pool.label}</Text>
......@@ -383,7 +383,7 @@ export function UsageLimitAccountScreen({ route }: AccountScreenProps) {
383383 </Text>
384384 ) : null}
385385 </View>
386 <View className="gap-3 rounded-[24px] border-continuous bg-card p-4">
386 <View className="gap-3 rounded-[24px] border-continuous bg-grouped-card p-4">
387387 <Text className="text-sm font-t3-medium text-foreground">{window.label}</Text>
388388 <Text className="text-3xl font-t3-bold tabular-nums text-foreground">
389389 {remainingPercent(window)}% left
......@@ -403,7 +403,7 @@ export function UsageLimitAccountScreen({ route }: AccountScreenProps) {
403403 </Text>
404404 ) : null}
405405 </View>
406 <View className="gap-2 rounded-[24px] border-continuous bg-card p-4">
406 <View className="gap-2 rounded-[24px] border-continuous bg-grouped-card p-4">
407407 <Text className="text-sm font-t3-medium text-foreground">
408408 {account.environments.length ? "Signed in" : "Source"}
409409 </Text>
......@@ -418,7 +418,7 @@ export function UsageLimitAccountScreen({ route }: AccountScreenProps) {
418418 )}
419419 </View>
420420 {account.redeem && account.limits.resetCredits ? (
421 <View className="gap-3 rounded-[24px] border-continuous bg-card p-4">
421 <View className="gap-3 rounded-[24px] border-continuous bg-grouped-card p-4">
422422 <Text className="text-sm font-t3-medium text-foreground">Reset credits</Text>
423423 <ResetCredits
424424 key={account.key}
apps/mobile/src/features/usage/UsageRouteScreen.tsx+2-2
......@@ -457,7 +457,7 @@ function CursorEnableLimits({
457457 <ProviderIcon provider="cursor" size={18} />
458458 <Text className="text-base font-t3-medium text-foreground">Cursor</Text>
459459 </View>
460 <View className="items-start gap-3 rounded-[24px] border-continuous bg-card p-4">
460 <View className="items-start gap-3 rounded-[24px] border-continuous bg-grouped-card p-4">
461461 <Text className="text-xs text-foreground-muted">{CURSOR_KEYCHAIN_COPY}</Text>
462462 <View className="flex-row flex-wrap gap-2">
463463 {environments.map((environment) => (
......@@ -491,7 +491,7 @@ function ChartCard(props: {
491491 const hasActivity = props.daily.some((period) => period.totalTokens > 0);
492492
493493 return (
494 <View className="gap-4 rounded-[24px] border-continuous bg-card p-4">
494 <View className="gap-4 rounded-[24px] border-continuous bg-grouped-card p-4">
495495 <View className="gap-0.5">
496496 <Text className="text-sm text-foreground-muted">
497497 {metric === "cost" ? "Raw token cost" : "Processed tokens"}