From 94fd6971487182bd8ce55107b34b79ee9f73ae35 Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Wed, 31 Aug 2022 20:09:47 -0500
Subject: [PATCH] Aesthetic improvements

---
 src/view/com/feed/FeedItem.tsx              | 26 ++++++++++++---------
 src/view/com/notifications/FeedItem.tsx     |  2 +-
 src/view/com/post-thread/PostLikedBy.tsx    |  2 +-
 src/view/com/post-thread/PostRepostedBy.tsx |  2 +-
 src/view/com/post-thread/PostThreadItem.tsx | 23 ++++++++++--------
 src/view/com/post/Post.tsx                  | 14 +++++------
 src/view/com/profile/ProfileFollowers.tsx   |  2 +-
 src/view/com/profile/ProfileFollows.tsx     |  2 +-
 src/view/lib/styles.ts                      | 16 +++++++++++++
 src/view/shell/mobile/history-menu.tsx      |  1 +
 10 files changed, 57 insertions(+), 33 deletions(-)

diff --git a/src/view/com/feed/FeedItem.tsx b/src/view/com/feed/FeedItem.tsx
index 7c54abf49d..c8acf18997 100644
--- a/src/view/com/feed/FeedItem.tsx
+++ b/src/view/com/feed/FeedItem.tsx
@@ -81,8 +81,9 @@ export const FeedItem = observer(function FeedItem({
               <FontAwesomeIcon
                 style={styles.ctrlIcon}
                 icon={['far', 'comment']}
+                size={14}
               />
-              <Text>{item.replyCount}</Text>
+              <Text style={s.f13}>{item.replyCount}</Text>
             </TouchableOpacity>
             <TouchableOpacity style={styles.ctrl} onPress={onPressToggleRepost}>
               <FontAwesomeIcon
@@ -92,11 +93,11 @@ export const FeedItem = observer(function FeedItem({
                     : styles.ctrlIcon
                 }
                 icon="retweet"
-                size={22}
+                size={18}
               />
               <Text
                 style={
-                  item.myState.hasReposted ? [s.bold, s.green3] : undefined
+                  item.myState.hasReposted ? [s.bold, s.green3, s.f13] : s.f13
                 }>
                 {item.repostCount}
               </Text>
@@ -107,9 +108,10 @@ export const FeedItem = observer(function FeedItem({
                   item.myState.hasLiked ? styles.ctrlIconLiked : styles.ctrlIcon
                 }
                 icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']}
+                size={14}
               />
               <Text
-                style={item.myState.hasLiked ? [s.bold, s.pink3] : undefined}>
+                style={item.myState.hasLiked ? [s.bold, s.red3, s.f13] : s.f13}>
                 {item.likeCount}
               </Text>
             </TouchableOpacity>
@@ -119,6 +121,7 @@ export const FeedItem = observer(function FeedItem({
               <FontAwesomeIcon
                 style={styles.ctrlIcon}
                 icon="share-from-square"
+                size={14}
               />
             </TouchableOpacity>
           </View>
@@ -140,7 +143,7 @@ const styles = StyleSheet.create({
   },
   repostedBy: {
     flexDirection: 'row',
-    paddingLeft: 70,
+    paddingLeft: 60,
   },
   repostedByIcon: {
     marginRight: 2,
@@ -150,12 +153,13 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   layoutAvi: {
-    width: 70,
+    width: 60,
+    paddingTop: 5,
   },
   avi: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
+    width: 50,
+    height: 50,
+    borderRadius: 25,
     resizeMode: 'cover',
   },
   layoutContent: {
@@ -164,7 +168,7 @@ const styles = StyleSheet.create({
   meta: {
     flexDirection: 'row',
     paddingTop: 2,
-    paddingBottom: 4,
+    paddingBottom: 2,
   },
   metaItem: {
     paddingRight: 5,
@@ -193,6 +197,6 @@ const styles = StyleSheet.create({
   },
   ctrlIconLiked: {
     marginRight: 5,
-    color: colors.pink3,
+    color: colors.red3,
   },
 })
diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx
index 02c8c0cc70..6a418872d3 100644
--- a/src/view/com/notifications/FeedItem.tsx
+++ b/src/view/com/notifications/FeedItem.tsx
@@ -115,7 +115,7 @@ const styles = StyleSheet.create({
   meta: {
     flexDirection: 'row',
     paddingTop: 6,
-    paddingBottom: 4,
+    paddingBottom: 2,
   },
   metaItem: {
     paddingRight: 3,
diff --git a/src/view/com/post-thread/PostLikedBy.tsx b/src/view/com/post-thread/PostLikedBy.tsx
index d6d1e7e840..77224640c4 100644
--- a/src/view/com/post-thread/PostLikedBy.tsx
+++ b/src/view/com/post-thread/PostLikedBy.tsx
@@ -112,7 +112,7 @@ const styles = StyleSheet.create({
   avi: {
     width: 40,
     height: 40,
-    borderRadius: 30,
+    borderRadius: 20,
     resizeMode: 'cover',
   },
   layoutContent: {
diff --git a/src/view/com/post-thread/PostRepostedBy.tsx b/src/view/com/post-thread/PostRepostedBy.tsx
index 0c22367703..b298a2484e 100644
--- a/src/view/com/post-thread/PostRepostedBy.tsx
+++ b/src/view/com/post-thread/PostRepostedBy.tsx
@@ -118,7 +118,7 @@ const styles = StyleSheet.create({
   avi: {
     width: 40,
     height: 40,
-    borderRadius: 30,
+    borderRadius: 20,
     resizeMode: 'cover',
   },
   layoutContent: {
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 46d7816c68..ed411131f6 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -129,8 +129,9 @@ export const PostThreadItem = observer(function PostThreadItem({
               <FontAwesomeIcon
                 style={styles.ctrlIcon}
                 icon={['far', 'comment']}
+                size={14}
               />
-              <Text>{item.replyCount}</Text>
+              <Text style={s.f13}>{item.replyCount}</Text>
             </TouchableOpacity>
             <TouchableOpacity style={styles.ctrl} onPress={onPressToggleRepost}>
               <FontAwesomeIcon
@@ -140,11 +141,11 @@ export const PostThreadItem = observer(function PostThreadItem({
                     : styles.ctrlIcon
                 }
                 icon="retweet"
-                size={22}
+                size={18}
               />
               <Text
                 style={
-                  item.myState.hasReposted ? [s.bold, s.green3] : undefined
+                  item.myState.hasReposted ? [s.bold, s.green3, s.f13] : s.f13
                 }>
                 {item.repostCount}
               </Text>
@@ -155,9 +156,10 @@ export const PostThreadItem = observer(function PostThreadItem({
                   item.myState.hasLiked ? styles.ctrlIconLiked : styles.ctrlIcon
                 }
                 icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']}
+                size={14}
               />
               <Text
-                style={item.myState.hasLiked ? [s.bold, s.pink3] : undefined}>
+                style={item.myState.hasLiked ? [s.bold, s.red3, s.f13] : s.f13}>
                 {item.likeCount}
               </Text>
             </TouchableOpacity>
@@ -167,6 +169,7 @@ export const PostThreadItem = observer(function PostThreadItem({
               <FontAwesomeIcon
                 style={styles.ctrlIcon}
                 icon="share-from-square"
+                size={14}
               />
             </TouchableOpacity>
           </View>
@@ -190,15 +193,15 @@ const styles = StyleSheet.create({
     marginRight: 2,
   },
   layoutAvi: {
-    width: 80,
+    width: 70,
     paddingLeft: 10,
     paddingTop: 10,
     paddingBottom: 10,
   },
   avi: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
+    width: 50,
+    height: 50,
+    borderRadius: 25,
     resizeMode: 'cover',
   },
   layoutContent: {
@@ -210,7 +213,7 @@ const styles = StyleSheet.create({
   meta: {
     flexDirection: 'row',
     paddingTop: 2,
-    paddingBottom: 4,
+    paddingBottom: 2,
   },
   metaItem: {
     paddingRight: 5,
@@ -251,6 +254,6 @@ const styles = StyleSheet.create({
   },
   ctrlIconLiked: {
     marginRight: 5,
-    color: colors.pink3,
+    color: colors.red3,
   },
 })
diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx
index a8d0dfd0ee..0b8ba457ee 100644
--- a/src/view/com/post/Post.tsx
+++ b/src/view/com/post/Post.tsx
@@ -136,7 +136,7 @@ export const Post = observer(function Post({uri}: {uri: string}) {
                 icon={[item.myState.hasLiked ? 'fas' : 'far', 'heart']}
               />
               <Text
-                style={item.myState.hasLiked ? [s.bold, s.pink3] : undefined}>
+                style={item.myState.hasLiked ? [s.bold, s.red3] : undefined}>
                 {item.likeCount}
               </Text>
             </TouchableOpacity>
@@ -164,12 +164,12 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   layoutAvi: {
-    width: 70,
+    width: 60,
   },
   avi: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
+    width: 50,
+    height: 50,
+    borderRadius: 25,
     resizeMode: 'cover',
   },
   layoutContent: {
@@ -178,7 +178,7 @@ const styles = StyleSheet.create({
   meta: {
     flexDirection: 'row',
     paddingTop: 2,
-    paddingBottom: 4,
+    paddingBottom: 2,
   },
   metaItem: {
     paddingRight: 5,
@@ -206,6 +206,6 @@ const styles = StyleSheet.create({
   },
   ctrlIconLiked: {
     marginRight: 5,
-    color: colors.pink3,
+    color: colors.red3,
   },
 })
diff --git a/src/view/com/profile/ProfileFollowers.tsx b/src/view/com/profile/ProfileFollowers.tsx
index 9a701a9caa..9b0d57e7d3 100644
--- a/src/view/com/profile/ProfileFollowers.tsx
+++ b/src/view/com/profile/ProfileFollowers.tsx
@@ -116,7 +116,7 @@ const styles = StyleSheet.create({
   avi: {
     width: 40,
     height: 40,
-    borderRadius: 30,
+    borderRadius: 20,
     resizeMode: 'cover',
   },
   layoutContent: {
diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx
index 1945d16186..ed015430d3 100644
--- a/src/view/com/profile/ProfileFollows.tsx
+++ b/src/view/com/profile/ProfileFollows.tsx
@@ -116,7 +116,7 @@ const styles = StyleSheet.create({
   avi: {
     width: 40,
     height: 40,
-    borderRadius: 30,
+    borderRadius: 20,
     resizeMode: 'cover',
   },
   layoutContent: {
diff --git a/src/view/lib/styles.ts b/src/view/lib/styles.ts
index 236ba67ca6..5d624b83e4 100644
--- a/src/view/lib/styles.ts
+++ b/src/view/lib/styles.ts
@@ -17,6 +17,12 @@ export const colors = {
   blue4: '#0062bd',
   blue5: '#034581',
 
+  red1: '#ffe6f2',
+  red2: '#fba2ce',
+  red3: '#ec4899',
+  red4: '#d1106f',
+  red5: '#97074e',
+
   pink1: '#f8ccff',
   pink2: '#e966ff',
   pink3: '#db00ff',
@@ -36,6 +42,10 @@ export const colors = {
   green5: '#082b03',
 }
 
+export const gradients = {
+  primary: {start: '#db00ff', end: '#ff007a'},
+}
+
 export const s = StyleSheet.create({
   // font weights
   fw600: {fontWeight: '600'},
@@ -128,6 +138,12 @@ export const s = StyleSheet.create({
   blue4: {color: colors.blue4},
   blue5: {color: colors.blue5},
 
+  red1: {color: colors.red1},
+  red2: {color: colors.red2},
+  red3: {color: colors.red3},
+  red4: {color: colors.red4},
+  red5: {color: colors.red5},
+
   pink1: {color: colors.pink1},
   pink2: {color: colors.pink2},
   pink3: {color: colors.pink3},
diff --git a/src/view/shell/mobile/history-menu.tsx b/src/view/shell/mobile/history-menu.tsx
index b625162d48..d0b9b9751f 100644
--- a/src/view/shell/mobile/history-menu.tsx
+++ b/src/view/shell/mobile/history-menu.tsx
@@ -36,6 +36,7 @@ export function createBackMenu(tab: NavigationTabModel): RootSiblings {
   )
   return sibling
 }
+
 export function createForwardMenu(tab: NavigationTabModel): RootSiblings {
   const onPressItem = (index: number) => {
     sibling.destroy()