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}, ]}> - - {element.icon ? ( - {element.icon} - ) : null} - + {element.icon ? ( + {element.icon} + ) : null} {element.name} {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}]}> - - {element?.icon ? {element.icon} : null} - + {element?.icon ? {element.icon} : null} {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,