Post layout tweaks (#53)

* Increase left margin on feed and embiggen avis

* Decrease feed margins a bit

* Tweak post bottom margin

* Update loading placeholder to match feed

* Update 'view full thread' positioning

* Update postthread to match feed layout

* Update notifications and individual post to match new layout

* Add missing aborted check

src/view/com/composer/ComposePost.tsx

@@ -117,6 +117,9 @@ export const ComposePost = observer(function ComposePost({
       })
         .catch(() => undefined)
         .then(localThumb => {
+          if (aborted) {
+            return
+          }
           setExtLink({
             ...extLink,
             isLoading: false, // done

src/view/com/notifications/FeedItem.tsx

@@ -230,6 +230,7 @@ function AdditionalPostText({
 const styles = StyleSheet.create({
   outer: {
     padding: 10,
+    paddingRight: 15,
     borderTopWidth: 1,
   },
   outerUnread: {
@@ -239,7 +240,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   layoutIcon: {
-    width: 60,
+    width: 70,
     alignItems: 'flex-end',
     paddingTop: 2,
   },

src/view/com/post-thread/PostThreadItem.tsx

@@ -116,12 +116,17 @@ export const PostThreadItem = observer(function PostThreadItem({
     return (
       <>
         <View
-          style={[styles.outer, {borderTopColor: pal.colors.border}, pal.view]}>
+          style={[
+            styles.outer,
+            styles.outerHighlighted,
+            {borderTopColor: pal.colors.border},
+            pal.view,
+          ]}>
           <View style={styles.layout}>
             <View style={styles.layoutAvi}>
               <Link href={authorHref} title={authorTitle}>
                 <UserAvatar
-                  size={50}
+                  size={52}
                   displayName={item.post.author.displayName}
                   handle={item.post.author.handle}
                   avatar={item.post.author.avatar}
@@ -275,7 +280,7 @@ export const PostThreadItem = observer(function PostThreadItem({
             <View style={styles.layoutAvi}>
               <Link href={authorHref} title={authorTitle}>
                 <UserAvatar
-                  size={50}
+                  size={52}
                   displayName={item.post.author.displayName}
                   handle={item.post.author.handle}
                   avatar={item.post.author.avatar}
@@ -346,17 +351,23 @@ export const PostThreadItem = observer(function PostThreadItem({
 const styles = StyleSheet.create({
   outer: {
     borderTopWidth: 1,
+    paddingLeft: 10,
+  },
+  outerHighlighted: {
+    paddingTop: 2,
+    paddingLeft: 6,
+    paddingRight: 6,
   },
   parentReplyLine: {
     position: 'absolute',
-    left: 34,
+    left: 44,
     top: -1 * PARENT_REPLY_LINE_LENGTH + 6,
     height: PARENT_REPLY_LINE_LENGTH,
     borderLeftWidth: 2,
   },
   childReplyLine: {
     position: 'absolute',
-    left: 34,
+    left: 44,
     top: 65,
     bottom: 0,
     borderLeftWidth: 2,
@@ -398,12 +409,12 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flexWrap: 'wrap',
     paddingBottom: 8,
-    paddingRight: 20,
+    paddingRight: 10,
     minHeight: 36,
   },
   postTextLargeContainer: {
-    paddingLeft: 4,
+    paddingHorizontal: 0,
-    paddingBottom: 20,
+    paddingBottom: 10,
   },
   expandedInfo: {
     flexDirection: 'row',

src/view/com/post/Post.tsx

@@ -215,13 +215,15 @@ export const Post = observer(function Post({
 const styles = StyleSheet.create({
   outer: {
     padding: 10,
+    paddingRight: 15,
     borderTopWidth: 1,
   },
   layout: {
     flexDirection: 'row',
   },
   layoutAvi: {
-    width: 60,
+    width: 70,
+    paddingLeft: 8,
   },
   layoutContent: {
     flex: 1,

src/view/com/posts/FeedItem.tsx

@@ -17,7 +17,6 @@ import * as Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
 import {s} from '../../lib/styles'
 import {useStores} from '../../../state'
-import {useTheme} from '../../lib/ThemeContext'
 import {usePalette} from '../../lib/hooks/usePalette'
 
 export const FeedItem = observer(function ({
@@ -229,13 +228,13 @@ export const FeedItem = observer(function ({
                 x1="2"
                 y1="0"
                 x2="2"
-                y2="5"
+                y2="8"
                 stroke={pal.colors.replyLine}
                 strokeWidth="2"
               />
-              <Circle x="2" y="10" r="1.5" fill={pal.colors.replyLineDot} />
+              <Circle x="2" y="14" r="1.5" fill={pal.colors.replyLineDot} />
-              <Circle x="2" y="16" r="1.5" fill={pal.colors.replyLineDot} />
+              <Circle x="2" y="20" r="1.5" fill={pal.colors.replyLineDot} />
-              <Circle x="2" y="22" r="1.5" fill={pal.colors.replyLineDot} />
+              <Circle x="2" y="26" r="1.5" fill={pal.colors.replyLineDot} />
             </Svg>
           </View>
           <Text type="md" style={pal.link}>
@@ -251,6 +250,8 @@ const styles = StyleSheet.create({
   outer: {
     borderTopWidth: 1,
     padding: 10,
+    paddingRight: 15,
+    paddingBottom: 8,
   },
   outerNoTop: {
     borderTopWidth: 0,
@@ -264,21 +265,21 @@ const styles = StyleSheet.create({
   },
   topReplyLine: {
     position: 'absolute',
-    left: 34,
+    left: 42,
     top: 0,
     height: 6,
     borderLeftWidth: 2,
   },
   bottomReplyLine: {
     position: 'absolute',
-    left: 34,
+    left: 42,
     top: 72,
     bottom: 0,
     borderLeftWidth: 2,
   },
   includeReason: {
     flexDirection: 'row',
-    paddingLeft: 40,
+    paddingLeft: 50,
     marginTop: 2,
     marginBottom: 2,
   },
@@ -290,8 +291,8 @@ const styles = StyleSheet.create({
     marginTop: 1,
   },
   layoutAvi: {
-    width: 60,
+    width: 70,
-    paddingTop: 0,
+    paddingLeft: 8,
   },
   layoutContent: {
     flex: 1,
@@ -309,7 +310,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flexWrap: 'wrap',
     paddingBottom: 4,
-    paddingRight: 20,
   },
   embed: {
     marginBottom: 6,
@@ -320,11 +320,11 @@ const styles = StyleSheet.create({
   viewFullThread: {
     paddingTop: 12,
     paddingBottom: 2,
-    paddingLeft: 70,
+    paddingLeft: 80,
   },
   viewFullThreadDots: {
     position: 'absolute',
-    left: 33,
+    left: 41,
     top: 0,
   },
 })

src/view/com/util/LoadingPlaceholder.tsx

@@ -48,7 +48,7 @@ export function PostLoadingPlaceholder({
   const pal = usePalette('default')
   return (
     <View style={[styles.post, pal.view, style]}>
-      <LoadingPlaceholder width={50} height={50} style={styles.avatar} />
+      <LoadingPlaceholder width={52} height={52} style={styles.avatar} />
       <View style={[s.flex1]}>
         <LoadingPlaceholder width={100} height={8} style={[s.mb10]} />
         <LoadingPlaceholder width={200} height={8} style={[s.mb5]} />
@@ -143,8 +143,9 @@ const styles = StyleSheet.create({
     margin: 1,
   },
   avatar: {
-    borderRadius: 25,
+    borderRadius: 26,
     marginRight: 10,
+    marginLeft: 6,
   },
   notification: {
     padding: 10,

src/view/lib/themes.ts

@@ -227,7 +227,7 @@ export const defaultTheme: Theme = {
       fontWeight: '400',
     },
     'post-text-lg': {
-      fontSize: 24,
+      fontSize: 22,
       letterSpacing: 0.4,
       fontWeight: '400',
     },