From 3778d87e65c86b636656d720484c0b3f21babdac Mon Sep 17 00:00:00 2001
From: Lalit Sharma <lalit.nv@gmail.com>
Date: Mon, 23 Feb 2026 22:57:34 +0000
Subject: [PATCH] Refine map legends layout and labels

---
 CHANGELOG.md                            |   7 +
 apps/mobile/package.json                |   2 +-
 apps/mobile/src/screens/TimerScreen.tsx | 170 +++++++++++-------------
 3 files changed, 82 insertions(+), 97 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5206276..4745edd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,13 @@ 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.20] — 2026-02-23
+
+### Changed
+- Moved the map direction legend controls to the lower-left legend stack so they no longer block the map action buttons.
+- Simplified map legend labels by removing `On/Off` state text for direction, eclipse visibility, and central-path overlays.
+- Bumped `apps/mobile` version to `1.1.20`.
+
 ## [1.1.19] — 2026-02-23
 
 ### Fixed
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
index ab1491d..db1f775 100644
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-timer/mobile",
-  "version": "1.1.19",
+  "version": "1.1.20",
   "private": true,
   "main": "index.js",
   "scripts": {
diff --git a/apps/mobile/src/screens/TimerScreen.tsx b/apps/mobile/src/screens/TimerScreen.tsx
index 4c87f2c..9154396 100644
--- a/apps/mobile/src/screens/TimerScreen.tsx
+++ b/apps/mobile/src/screens/TimerScreen.tsx
@@ -532,84 +532,81 @@ export default function TimerScreen({
           <Text style={styles.mapOverlayBtnText}>{mapTypeText}</Text>
         </Pressable>
 
-        <View style={styles.mapLegend}>
-          <Pressable
-            style={[
-              styles.mapLegendItem,
-              !timer.showVisibleOverlay ? styles.mapLegendMuted : null,
-              !timer.hasVisibleOverlayData ? styles.mapLegendDisabled : null,
-            ]}
-            onPress={timer.toggleVisibleOverlay}
-            disabled={!timer.hasVisibleOverlayData}
-            accessibilityRole="button"
-            accessibilityLabel={
-              timer.showVisibleOverlay
-                ? "Hide eclipse visible overlay"
-                : "Show eclipse visible overlay"
-            }
-          >
-            <View style={styles.mapLegendRow}>
-              <View style={[styles.mapLegendSwatch, { backgroundColor: visibleOverlayColor }]} />
-              <Text style={styles.mapLegendText}>Eclipse Visible</Text>
-            </View>
-            <Text style={styles.mapLegendState}>{timer.showVisibleOverlay ? "On" : "Off"}</Text>
-          </Pressable>
+        <View style={styles.mapLegendStack}>
+          {timer.result && timer.isResultCurrentForPin ? (
+            <Pressable
+              style={[
+                styles.mapDirectionLegend,
+                !timer.showDirectionsOverlay ? styles.mapLegendMuted : null,
+                !hasDirectionsData ? styles.mapLegendDisabled : null,
+              ]}
+              onPress={timer.toggleDirectionsOverlay}
+              disabled={!hasDirectionsData}
+              accessibilityRole="button"
+              accessibilityLabel={
+                timer.showDirectionsOverlay ? "Hide direction overlays" : "Show direction overlays"
+              }
+            >
+              {contactDirectionOverlays.map((direction) => (
+                <View
+                  key={`direction-legend-${direction.key}`}
+                  style={styles.mapDirectionLegendRow}
+                >
+                  <View
+                    style={[styles.mapDirectionLegendLine, { borderTopColor: direction.color }]}
+                  />
+                  <Text style={[styles.mapDirectionLegendText, { color: direction.color }]}>
+                    {direction.label}
+                  </Text>
+                </View>
+              ))}
+            </Pressable>
+          ) : null}
 
-          <Pressable
-            style={[
-              styles.mapLegendItem,
-              !timer.showCentralOverlay ? styles.mapLegendMuted : null,
-              !timer.hasCentralOverlayData ? styles.mapLegendDisabled : null,
-            ]}
-            onPress={timer.toggleCentralOverlay}
-            disabled={!timer.hasCentralOverlayData}
-            accessibilityRole="button"
-            accessibilityLabel={
-              timer.showCentralOverlay ? "Hide central path overlay" : "Show central path overlay"
-            }
-          >
-            <View style={styles.mapLegendRow}>
-              <View
-                style={[styles.mapLegendSwatch, { backgroundColor: activeCentralOverlayColor }]}
-              />
-              <Text style={styles.mapLegendText}>{centralLegendLabel}</Text>
-            </View>
-            <Text style={styles.mapLegendState}>{timer.showCentralOverlay ? "On" : "Off"}</Text>
-          </Pressable>
-        </View>
+          <View style={styles.mapLegend}>
+            <Pressable
+              style={[
+                styles.mapLegendItem,
+                !timer.showVisibleOverlay ? styles.mapLegendMuted : null,
+                !timer.hasVisibleOverlayData ? styles.mapLegendDisabled : null,
+              ]}
+              onPress={timer.toggleVisibleOverlay}
+              disabled={!timer.hasVisibleOverlayData}
+              accessibilityRole="button"
+              accessibilityLabel={
+                timer.showVisibleOverlay
+                  ? "Hide eclipse visible overlay"
+                  : "Show eclipse visible overlay"
+              }
+            >
+              <View style={styles.mapLegendRow}>
+                <View style={[styles.mapLegendSwatch, { backgroundColor: visibleOverlayColor }]} />
+                <Text style={styles.mapLegendText}>Eclipse Visible</Text>
+              </View>
+            </Pressable>
 
-        {timer.result && timer.isResultCurrentForPin ? (
-          <Pressable
-            style={[
-              styles.mapDirectionLegend,
-              !timer.showDirectionsOverlay ? styles.mapLegendMuted : null,
-              !hasDirectionsData ? styles.mapLegendDisabled : null,
-            ]}
-            onPress={timer.toggleDirectionsOverlay}
-            disabled={!hasDirectionsData}
-            accessibilityRole="button"
-            accessibilityLabel={
-              timer.showDirectionsOverlay ? "Hide direction overlays" : "Show direction overlays"
-            }
-          >
-            <View style={styles.mapDirectionLegendHeader}>
-              <Text style={styles.mapDirectionLegendTitle}>Directions</Text>
-              <Text style={styles.mapLegendState}>
-                {timer.showDirectionsOverlay ? "On" : "Off"}
-              </Text>
-            </View>
-            {contactDirectionOverlays.map((direction) => (
-              <View key={`direction-legend-${direction.key}`} style={styles.mapDirectionLegendRow}>
+            <Pressable
+              style={[
+                styles.mapLegendItem,
+                !timer.showCentralOverlay ? styles.mapLegendMuted : null,
+                !timer.hasCentralOverlayData ? styles.mapLegendDisabled : null,
+              ]}
+              onPress={timer.toggleCentralOverlay}
+              disabled={!timer.hasCentralOverlayData}
+              accessibilityRole="button"
+              accessibilityLabel={
+                timer.showCentralOverlay ? "Hide central path overlay" : "Show central path overlay"
+              }
+            >
+              <View style={styles.mapLegendRow}>
                 <View
-                  style={[styles.mapDirectionLegendLine, { borderTopColor: direction.color }]}
+                  style={[styles.mapLegendSwatch, { backgroundColor: activeCentralOverlayColor }]}
                 />
-                <Text style={[styles.mapDirectionLegendText, { color: direction.color }]}>
-                  {direction.label}
-                </Text>
+                <Text style={styles.mapLegendText}>{centralLegendLabel}</Text>
               </View>
-            ))}
-          </Pressable>
-        ) : null}
+            </Pressable>
+          </View>
+        </View>
       </View>
 
       <View style={styles.controls}>
@@ -1109,10 +1106,13 @@ const styles = StyleSheet.create({
     borderRadius: 2,
     backgroundColor: "white",
   },
-  mapLegend: {
+  mapLegendStack: {
     position: "absolute",
     left: 10,
     bottom: 10,
+    gap: 6,
+  },
+  mapLegend: {
     paddingVertical: 7,
     paddingHorizontal: 8,
     borderRadius: 10,
@@ -1151,35 +1151,13 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: "600",
   },
-  mapLegendState: {
-    color: "#d6d6d6",
-    fontSize: 10,
-    fontWeight: "700",
-    textTransform: "uppercase",
-  },
   mapDirectionLegend: {
-    position: "absolute",
-    right: 10,
-    bottom: 10,
     borderRadius: 10,
     backgroundColor: "rgba(0,0,0,0.62)",
     paddingHorizontal: 8,
     paddingVertical: 7,
     gap: 4,
   },
-  mapDirectionLegendHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 8,
-  },
-  mapDirectionLegendTitle: {
-    color: "#e2e2e2",
-    fontSize: 10,
-    fontWeight: "700",
-    textTransform: "uppercase",
-    letterSpacing: 0.4,
-  },
   mapDirectionLegendRow: {
     flexDirection: "row",
     alignItems: "center",