From 300cecc2ec799e04668ab7b7c5ad416c8133901e Mon Sep 17 00:00:00 2001 From: Lalit Sharma Date: Mon, 23 Feb 2026 23:07:09 +0000 Subject: [PATCH 1/3] Simplify timer screen chrome and enlarge map --- apps/mobile/src/screens/TimerScreen.tsx | 82 ++++++++++++------------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/apps/mobile/src/screens/TimerScreen.tsx b/apps/mobile/src/screens/TimerScreen.tsx index 9154396..28eb35f 100644 --- a/apps/mobile/src/screens/TimerScreen.tsx +++ b/apps/mobile/src/screens/TimerScreen.tsx @@ -408,19 +408,19 @@ export default function TimerScreen({ accessibilityLabel="Switch active eclipse" accessibilityState={{ disabled: !eclipseOptions.length || isActiveEclipseLoading }} > - + Active Eclipse + + {activeEclipseOption + ? `${activeEclipseOption.dateYmd} - ${activeEclipseOption.kindLabel}` + : "No eclipse selected"} + Switch - - {activeEclipseOption - ? `${activeEclipseOption.dateYmd} - ${activeEclipseOption.kindLabel}` - : "No eclipse selected"} - {activeEclipseOption - ? `${activeEclipseOption.id} - ${activeEclipseOption.isPast ? "Past" : "Upcoming"}` - : "Pick an eclipse to compute on this screen"} + ? `${activeEclipseOption.id} · ${activeEclipseOption.isPast ? "Past" : "Upcoming"}` + : "Pick an eclipse to compute"} @@ -607,12 +607,10 @@ export default function TimerScreen({ - - - + { if (!activeEclipseCenter) { timer.setStatusMessage("No center coordinates available for this eclipse"); @@ -622,16 +620,16 @@ export default function TimerScreen({ }} disabled={isActiveEclipseLoading} > - Greatest Eclipse + Greatest Eclipse - - {canAddCurrentPinToFavorites ? "Add to Favorites" : "Already in Favorites"} + + {canAddCurrentPinToFavorites ? "Add Favorite" : "Saved"} @@ -974,17 +972,17 @@ const styles = StyleSheet.create({ borderWidth: 1, borderColor: "#2e3566", backgroundColor: "#151a43", - paddingVertical: 10, + paddingVertical: 8, paddingHorizontal: 10, gap: 4, }, eclipseSwitcherBtnDisabled: { opacity: 0.68, }, - eclipseSwitcherTopRow: { + eclipseSwitcherRow: { flexDirection: "row", - justifyContent: "space-between", alignItems: "center", + gap: 8, }, eclipseSwitcherLabel: { color: "#b7beff", @@ -995,28 +993,24 @@ const styles = StyleSheet.create({ }, eclipseSwitcherHint: { color: "#d9dcff", - fontSize: 11, + fontSize: 10, fontWeight: "700", }, eclipseSwitcherValue: { color: "white", - fontSize: 13, + flex: 1, + fontSize: 12, fontWeight: "700", }, eclipseSwitcherMeta: { color: "#bcc2f4", - fontSize: 11, + fontSize: 10, }, - mapWrap: { height: 300, marginHorizontal: 12, borderRadius: 12, overflow: "hidden" }, + mapWrap: { height: 360, marginHorizontal: 12, borderRadius: 12, overflow: "hidden" }, map: { flex: 1 }, - controls: { - paddingHorizontal: 12, - paddingTop: 10, - gap: 10, - }, favoriteWrap: { paddingHorizontal: 12, - paddingTop: 8, + paddingTop: 6, gap: 6, }, favoriteList: { @@ -1040,11 +1034,6 @@ const styles = StyleSheet.create({ color: "#8f8f8f", fontSize: 12, }, - btnRow: { - flexDirection: "row", - flexWrap: "wrap", - gap: 8, - }, mapOverlayBtn: { position: "absolute", top: 10, @@ -1112,6 +1101,24 @@ const styles = StyleSheet.create({ bottom: 10, gap: 6, }, + mapActionsRow: { + position: "absolute", + right: 10, + bottom: 10, + flexDirection: "row", + gap: 6, + }, + mapActionBtn: { + borderRadius: 999, + backgroundColor: "rgba(0,0,0,0.65)", + paddingVertical: 7, + paddingHorizontal: 10, + }, + mapActionBtnText: { + color: "white", + fontSize: 11, + fontWeight: "700", + }, mapLegend: { paddingVertical: 7, paddingHorizontal: 8, @@ -1195,16 +1202,9 @@ const styles = StyleSheet.create({ fontWeight: "800", letterSpacing: 0.4, }, - btn: { - paddingVertical: 10, - paddingHorizontal: 12, - borderRadius: 10, - backgroundColor: "#1f1f1f", - }, btnDisabled: { opacity: 0.7, }, - btnText: { color: "white", fontWeight: "600" }, statusBar: { paddingHorizontal: 12, paddingTop: 8 }, statusText: { color: "#bdbdbd", fontSize: 12 }, results: { flex: 1, paddingHorizontal: 12, paddingTop: 10 }, From 58325c8a6363c20435a432b842744a23175b893c Mon Sep 17 00:00:00 2001 From: Lalit Sharma Date: Mon, 23 Feb 2026 23:10:12 +0000 Subject: [PATCH 2/3] Refine timer declutter layout and bump mobile version --- CHANGELOG.md | 8 ++++ apps/mobile/package.json | 2 +- apps/mobile/src/screens/TimerScreen.tsx | 63 ++++++++++++------------- 3 files changed, 38 insertions(+), 35 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4745edd..bbb17ef 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [1.1.21] — 2026-02-23 + +### Changed +- Refined the Timer screen declutter pass by keeping the larger map while moving action controls out of the map viewport into a compact row below it, so map content is less obstructed. +- Simplified the Active Eclipse switcher to a single concise row to reduce vertical and textual chrome. +- Increased map viewport height to `420` for stronger map-first focus on the Timer screen. +- Bumped `apps/mobile` version to `1.1.21`. + ## [1.1.20] — 2026-02-23 ### Changed diff --git a/apps/mobile/package.json b/apps/mobile/package.json index db1f775..9b5dc6b 100644 --- a/apps/mobile/package.json +++ b/apps/mobile/package.json @@ -1,6 +1,6 @@ { "name": "@eclipse-timer/mobile", - "version": "1.1.20", + "version": "1.1.21", "private": true, "main": "index.js", "scripts": { diff --git a/apps/mobile/src/screens/TimerScreen.tsx b/apps/mobile/src/screens/TimerScreen.tsx index 28eb35f..73fc609 100644 --- a/apps/mobile/src/screens/TimerScreen.tsx +++ b/apps/mobile/src/screens/TimerScreen.tsx @@ -417,11 +417,6 @@ export default function TimerScreen({ Switch - - {activeEclipseOption - ? `${activeEclipseOption.id} · ${activeEclipseOption.isPast ? "Past" : "Upcoming"}` - : "Pick an eclipse to compute"} - @@ -607,10 +602,12 @@ export default function TimerScreen({ + - + + { if (!activeEclipseCenter) { timer.setStatusMessage("No center coordinates available for this eclipse"); @@ -620,15 +617,15 @@ export default function TimerScreen({ }} disabled={isActiveEclipseLoading} > - Greatest Eclipse + Greatest Eclipse - + {canAddCurrentPinToFavorites ? "Add Favorite" : "Saved"} @@ -974,7 +971,6 @@ const styles = StyleSheet.create({ backgroundColor: "#151a43", paddingVertical: 8, paddingHorizontal: 10, - gap: 4, }, eclipseSwitcherBtnDisabled: { opacity: 0.68, @@ -1002,12 +998,29 @@ const styles = StyleSheet.create({ fontSize: 12, fontWeight: "700", }, - eclipseSwitcherMeta: { - color: "#bcc2f4", - fontSize: 10, - }, - mapWrap: { height: 360, marginHorizontal: 12, borderRadius: 12, overflow: "hidden" }, + mapWrap: { height: 420, marginHorizontal: 12, borderRadius: 12, overflow: "hidden" }, map: { flex: 1 }, + controls: { + paddingHorizontal: 12, + paddingTop: 6, + }, + btnRowCompact: { + flexDirection: "row", + gap: 8, + }, + btnCompact: { + borderRadius: 999, + borderWidth: 1, + borderColor: "#2f376f", + backgroundColor: "#11163d", + paddingVertical: 7, + paddingHorizontal: 11, + }, + btnCompactText: { + color: "#eef0ff", + fontSize: 11, + fontWeight: "700", + }, favoriteWrap: { paddingHorizontal: 12, paddingTop: 6, @@ -1101,24 +1114,6 @@ const styles = StyleSheet.create({ bottom: 10, gap: 6, }, - mapActionsRow: { - position: "absolute", - right: 10, - bottom: 10, - flexDirection: "row", - gap: 6, - }, - mapActionBtn: { - borderRadius: 999, - backgroundColor: "rgba(0,0,0,0.65)", - paddingVertical: 7, - paddingHorizontal: 10, - }, - mapActionBtnText: { - color: "white", - fontSize: 11, - fontWeight: "700", - }, mapLegend: { paddingVertical: 7, paddingHorizontal: 8, From f42e5dbe01c8cd45716c09b101190dc7647df03b Mon Sep 17 00:00:00 2001 From: Lalit Sharma Date: Mon, 23 Feb 2026 23:18:26 +0000 Subject: [PATCH 3/3] Make timer map height responsive on short screens --- apps/mobile/src/screens/TimerScreen.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/apps/mobile/src/screens/TimerScreen.tsx b/apps/mobile/src/screens/TimerScreen.tsx index 73fc609..b930e0a 100644 --- a/apps/mobile/src/screens/TimerScreen.tsx +++ b/apps/mobile/src/screens/TimerScreen.tsx @@ -12,6 +12,7 @@ import { Switch, Text, TextInput, + useWindowDimensions, View, } from "react-native"; import MapView, { Marker, Polygon, Polyline } from "react-native-maps"; @@ -215,6 +216,7 @@ export default function TimerScreen({ onOpenPreview, }: TimerScreenProps) { const insets = useSafeAreaInsets(); + const { height: windowHeight } = useWindowDimensions(); const [isEclipsePickerOpen, setIsEclipsePickerOpen] = useState(false); const [isAddFavoriteModalOpen, setIsAddFavoriteModalOpen] = useState(false); const [favoriteModalName, setFavoriteModalName] = useState(""); @@ -226,6 +228,10 @@ export default function TimerScreen({ () => eclipseOptions.find((option) => option.id === activeEclipseId) ?? null, [activeEclipseId, eclipseOptions], ); + const mapHeight = useMemo( + () => clamp((windowHeight - insets.top - insets.bottom) * 0.4, 260, 420), + [insets.bottom, insets.top, windowHeight], + ); const activeEclipseCenter = useMemo(() => eclipseCenterForRecord(activeEclipse), [activeEclipse]); const activeKindCode = useMemo( () => (activeEclipse ? kindCodeForRecord(activeEclipse) : "P"), @@ -420,7 +426,7 @@ export default function TimerScreen({ - +