Skip to content

Commit 2e5ff37

Browse files
committed
lightbox header/footer: Make icons smaller.
As Greg points out [1], 24px seems to be the standard size for most icon buttons in Material Design [2] [3] [4]. [1] zulip#4442 (comment) [2] https://material.io/components/bottom-navigation#specs [3] https://material.io/components/app-bars-bottom#specs [4] https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes
1 parent a9499be commit 2e5ff37

File tree

2 files changed

+4
-4
lines changed

2 files changed

+4
-4
lines changed

src/lightbox/LightboxFooter.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,9 @@ export default class LightboxFooter extends PureComponent<Props> {
3838
<SafeAreaView mode="padding" edges={['right', 'bottom', 'left']}>
3939
<View style={[styles.wrapper, style]}>
4040
<Text style={styles.text}>{displayMessage}</Text>
41-
<Pressable style={styles.iconTouchTarget} onPress={onOptionsPress} hitSlop={10}>
41+
<Pressable style={styles.iconTouchTarget} onPress={onOptionsPress} hitSlop={12}>
4242
{({ pressed }) => (
43-
<Icon size={28} color={pressed ? 'gray' : 'white'} name="more-vertical" />
43+
<Icon size={24} color={pressed ? 'gray' : 'white'} name="more-vertical" />
4444
)}
4545
</Pressable>
4646
</View>

src/lightbox/LightboxHeader.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,8 @@ export default class LightboxHeader extends PureComponent<Props> {
7070
{subheader}
7171
</Text>
7272
</View>
73-
<Pressable style={styles.rightIconTouchTarget} onPress={onPressBack} hitSlop={10}>
74-
{({ pressed }) => <Icon size={28} color={pressed ? 'gray' : 'white'} name="x" />}
73+
<Pressable style={styles.rightIconTouchTarget} onPress={onPressBack} hitSlop={12}>
74+
{({ pressed }) => <Icon size={24} color={pressed ? 'gray' : 'white'} name="x" />}
7575
</Pressable>
7676
</View>
7777
</SafeAreaView>

0 commit comments

Comments
 (0)