UI: align home-screen widget and TaskRow with the palette tokens

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude
2026-09-01 22:39:46 +10:00
parent 31934c7c27
commit 1398a5d54b
2 changed files with 5 additions and 5 deletions

View File

@@ -101,7 +101,7 @@ const s = StyleSheet.create({
justifyContent: "center", justifyContent: "center",
}, },
checkboxDone: { backgroundColor: C.done }, checkboxDone: { backgroundColor: C.done },
check: { color: "#FFFFFF", fontSize: 13, lineHeight: 16, fontWeight: "700" }, check: { color: C.onAccent, fontSize: 13, lineHeight: 16, fontWeight: "700" },
title: { ...type.row, color: C.text }, title: { ...type.row, color: C.text },
titleDone: { color: C.muted, textDecorationLine: "line-through" }, titleDone: { color: C.muted, textDecorationLine: "line-through" },
meta: { ...type.meta, color: C.muted, marginTop: 3 }, meta: { ...type.meta, color: C.muted, marginTop: 3 },

View File

@@ -3,7 +3,7 @@
// Built only from react-native-android-widget primitives (no RN views, no // Built only from react-native-android-widget primitives (no RN views, no
// hooks) — it renders to Android RemoteViews in a headless task. // hooks) — it renders to Android RemoteViews in a headless task.
// //
// Interactions mirror the app: tap the circle to complete, tap the row to // Interactions mirror the app: tap the checkbox to complete, tap the row to
// open Clarify, tap + to capture, tap anywhere else to open the app. // open Clarify, tap + to capture, tap anywhere else to open the app.
import { FlexWidget, TextWidget } from "react-native-android-widget"; import { FlexWidget, TextWidget } from "react-native-android-widget";
import { dueMeta, type DueTone } from "../lib/dates"; import { dueMeta, type DueTone } from "../lib/dates";
@@ -31,7 +31,7 @@ function Row({ task }: { task: Task }) {
style={{ width: 32, height: 32, alignItems: "center", justifyContent: "center" }} style={{ width: 32, height: 32, alignItems: "center", justifyContent: "center" }}
> >
<FlexWidget <FlexWidget
style={{ width: 19, height: 19, borderRadius: 10, borderWidth: 2, borderColor: PRIORITY_COLOR[task.priority] }} style={{ width: 19, height: 19, borderRadius: 6, borderWidth: 2, borderColor: PRIORITY_COLOR[task.priority] }}
/> />
</FlexWidget> </FlexWidget>
<FlexWidget style={{ flex: 1, marginLeft: 6 }}> <FlexWidget style={{ flex: 1, marginLeft: 6 }}>
@@ -60,7 +60,7 @@ export function NextUpWidget({ tasks, totalNext, overdueCount }: { tasks: Task[]
style={{ width: "match_parent", flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }} style={{ width: "match_parent", flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }}
> >
<FlexWidget style={{ flexDirection: "row", alignItems: "center" }}> <FlexWidget style={{ flexDirection: "row", alignItems: "center" }}>
<TextWidget text="NEXT UP" style={{ fontSize: 12, letterSpacing: 1, color: C.muted }} /> <TextWidget text="Next up" style={{ fontSize: 13, fontWeight: "600", letterSpacing: 0.3, color: C.textSecondary }} />
{totalNext > tasks.length && ( {totalNext > tasks.length && (
<TextWidget text={` +${totalNext - tasks.length} more`} style={{ fontSize: 12, color: C.muted }} /> <TextWidget text={` +${totalNext - tasks.length} more`} style={{ fontSize: 12, color: C.muted }} />
)} )}
@@ -79,7 +79,7 @@ export function NextUpWidget({ tasks, totalNext, overdueCount }: { tasks: Task[]
accessibilityLabel="Add task" accessibilityLabel="Add task"
style={{ width: 28, height: 28, borderRadius: 14, backgroundColor: C.accent, alignItems: "center", justifyContent: "center" }} style={{ width: 28, height: 28, borderRadius: 14, backgroundColor: C.accent, alignItems: "center", justifyContent: "center" }}
> >
<TextWidget text="+" style={{ fontSize: 16, color: "#FFFFFF" }} /> <TextWidget text="+" style={{ fontSize: 16, color: C.onAccent }} />
</FlexWidget> </FlexWidget>
</FlexWidget> </FlexWidget>
{tasks.length === 0 ? ( {tasks.length === 0 ? (