Improve message header sizes and touch areas (zulip#249)

Fixes zulip#242
gnprice · Jan 29, 2017 · 7c17f4f · 7c17f4f
1 parent b7b3263
commit 7c17f4f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 17 deletions.
diff --git a/src/message/headers/PrivateMessageHeader.js b/src/message/headers/PrivateMessageHeader.js
@@ -19,13 +19,13 @@ const styles = StyleSheet.create({
   },
   private: {
     flex: 1,
-    padding: 4,
+    padding: 8,
     fontSize: 16,
     color: 'white',
   },
   icon: {
-    padding: 6,
-    paddingLeft: 10,
+    padding: 10,
+    paddingLeft: 16,
   }
 });
 

diff --git a/src/message/headers/StreamMessageHeader.js b/src/message/headers/StreamMessageHeader.js
@@ -13,28 +13,24 @@ import { foregroundColorFromBackground } from '../../utils/color';
 
 const styles = StyleSheet.create({
   header: {
+    flex: 1,
     flexDirection: 'row',
     backgroundColor: '#eee',
     overflow: 'hidden',
   },
   stream: {
-    padding: 6,
-    fontSize: 16,
-  },
-  topic: {
-    flex: 1,
-    padding: 4,
+    padding: 8,
     fontSize: 16,
   },
   icon: {
-    padding: 6,
+    padding: 8,
     paddingLeft: 10,
   },
   triangle: {
-    borderTopWidth: 15,
+    borderTopWidth: 18,
     borderRightWidth: 0,
-    borderBottomWidth: 15,
-    borderLeftWidth: 15,
+    borderBottomWidth: 18,
+    borderLeftWidth: 18,
     borderTopColor: 'transparent',
     borderRightColor: 'transparent',
     borderBottomColor: 'transparent',

diff --git a/src/message/headers/TopicMessageHeader.js b/src/message/headers/TopicMessageHeader.js
@@ -8,9 +8,11 @@ import { Touchable } from '../../common';
 import { topicNarrow } from '../../utils/narrow';
 
 const styles = StyleSheet.create({
+  touch: {
+    flex: 1,
+  },
   topic: {
-    padding: 6,
-    paddingLeft: 8,
+    padding: 8,
     fontSize: 16,
     backgroundColor: '#eee',
   },
@@ -34,8 +36,8 @@ export default class TopicMessageHeader extends React.PureComponent {
     const { topic } = this.props;
 
     return (
-      <Touchable onPress={this.performTopicNarrow}>
-        <Text style={styles.topic} numberOfLines={1}>
+      <Touchable style={styles.touch} onPress={this.performTopicNarrow}>
+        <Text style={styles.topic} numberOfLines={1} ellipsizeMode="tail">
           {topic}
         </Text>
       </Touchable>