From 695592f80fbb447b7709441729a2751c55815c17 Mon Sep 17 00:00:00 2001
From: Dennis Falling <dennis@culpeos.com>
Date: Mon, 27 Jul 2026 11:21:24 +0100
Subject: [PATCH] Drop the blue circle behind element icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The last commit gave the map pins red teardrops, but the tooltip and the
detail screen still framed the same element's emoji in a solid blue
`accent` disc, so one place said red and the other said blue. The disc
also rendered unconditionally: an element with `icon: ""` showed an empty
blue circle holding nothing.

Remove the badge instead of recoloring it — the emoji already carries its
own color, and a filled shape behind it only competes. Rendering the
glyph as a direct flex child means no icon renders no element at all, so
the title and address start at the card edge rather than indenting past
a placeholder. Bump the glyph a size to keep the visual weight the disc
used to carry.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/map/ElementDetailScreen.tsx | 25 ++++++++-----------------
 src/map/ElementPreviewCard.tsx  | 21 ++++++---------------
 2 files changed, 14 insertions(+), 32 deletions(-)

diff --git a/src/map/ElementDetailScreen.tsx b/src/map/ElementDetailScreen.tsx
index 4fe173b..a13f939 100644
--- a/src/map/ElementDetailScreen.tsx
+++ b/src/map/ElementDetailScreen.tsx
@@ -98,11 +98,9 @@ function ModalContents({
             {paddingBottom: safeAreaInsets.bottom + 24},
           ]}>
           <View style={styles.hero}>
-            <View style={styles.iconWrap}>
-              {element.icon ? (
-                <Text style={styles.icon}>{element.icon}</Text>
-              ) : null}
-            </View>
+            {element.icon ? (
+              <Text style={styles.icon}>{element.icon}</Text>
+            ) : null}
             <View style={styles.heroBody}>
               <Text style={styles.title}>{element.name}</Text>
               {element.location?.address ? (
@@ -270,19 +268,12 @@ const makeStyles = (theme: Theme) =>
       flexDirection: 'row',
       alignItems: 'center',
     },
-    iconWrap: {
-      width: 56,
-      height: 56,
-      borderRadius: 28,
-      backgroundColor: theme.accent,
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginRight: 14,
-    },
+    // No wrapping badge: the emoji stands on its own, and an element without an
+    // icon renders nothing at all so the title fills the whole row.
     icon: {
-      fontSize: 28,
-      lineHeight: 32,
-      textAlign: 'center',
+      fontSize: 36,
+      lineHeight: 44,
+      marginRight: 12,
     },
     heroBody: {
       flex: 1,
diff --git a/src/map/ElementPreviewCard.tsx b/src/map/ElementPreviewCard.tsx
index 57d1735..e4bf6fb 100644
--- a/src/map/ElementPreviewCard.tsx
+++ b/src/map/ElementPreviewCard.tsx
@@ -30,9 +30,7 @@ export function ElementPreviewCard({
       }
       onPress={onExpand}
       style={[styles.card, {bottom: bottomOffset}]}>
-      <View style={styles.iconWrap}>
-        {element?.icon ? <Text style={styles.icon}>{element.icon}</Text> : null}
-      </View>
+      {element?.icon ? <Text style={styles.icon}>{element.icon}</Text> : null}
       <View style={styles.body}>
         <Text style={styles.title} numberOfLines={1}>
           {element?.name ?? (loading ? 'Loading…' : ' ')}
@@ -77,19 +75,12 @@ const makeStyles = (theme: Theme) =>
       shadowOffset: {width: 0, height: 2},
       elevation: 6,
     },
-    iconWrap: {
-      width: 44,
-      height: 44,
-      borderRadius: 22,
-      backgroundColor: theme.accent,
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginRight: 12,
-    },
+    // No wrapping badge: the emoji stands on its own, and an element without an
+    // icon renders nothing at all so the text fills the whole card.
     icon: {
-      fontSize: 22,
-      lineHeight: 26,
-      textAlign: 'center',
+      fontSize: 28,
+      lineHeight: 34,
+      marginRight: 12,
     },
     body: {
       flex: 1,