Rework profile header controls

src/view/com/profile/ProfileHeader.tsx

@@ -86,16 +86,14 @@ export const ProfileHeader = observer(function ProfileHeader({
         <View style={[styles.displayNameLine]}>
           <Text style={styles.displayName}>{view.displayName}</Text>
         </View>
-        {
-          undefined /*TODO<View style={styles.badgesLine}>
+        <View style={styles.badgesLine}>
           <FontAwesomeIcon icon="shield" style={s.mr5} size={12} />
           <Link href="/" title="Badge TODO">
             <Text style={[s.f12, s.bold]}>
               Employee <Text style={[s.blue3]}>@blueskyweb.xyz</Text>
             </Text>
           </Link>
-        </View>*/
-        }
+        </View>
         <View style={[styles.buttonsLine]}>
           {isMe ? (
             <TouchableOpacity
@@ -103,31 +101,40 @@ export const ProfileHeader = observer(function ProfileHeader({
               style={[styles.mainBtn, styles.btn]}>
               <Text style={[s.fw400, s.f14]}>Edit Profile</Text>
             </TouchableOpacity>
-          ) : view.myState.follow ? (
-            <TouchableOpacity
-              onPress={onPressToggleFollow}
-              style={[styles.mainBtn, styles.btn]}>
-              <Text style={[s.fw400, s.f14]}>Following</Text>
-            </TouchableOpacity>
           ) : (
-            <TouchableOpacity onPress={onPressToggleFollow}>
-              <LinearGradient
-                colors={[gradients.primary.start, gradients.primary.end]}
-                start={{x: 0, y: 0}}
-                end={{x: 1, y: 1}}
-                style={[styles.followBtn]}>
-                <FontAwesomeIcon icon="plus" style={[s.white, s.mr5]} />
-                <Text style={[s.white, s.fw600, s.f16]}>Follow</Text>
-              </LinearGradient>
-            </TouchableOpacity>
+            <>
+              {view.myState.follow ? (
+                <TouchableOpacity
+                  onPress={onPressToggleFollow}
+                  style={[styles.mainBtn, styles.btn]}>
+                  <FontAwesomeIcon icon="check" style={[s.mr5]} size={14} />
+                  <Text style={[s.fw400, s.f14]}>Following</Text>
+                </TouchableOpacity>
+              ) : (
+                <TouchableOpacity
+                  onPress={onPressToggleFollow}
+                  style={[styles.mainBtn, styles.btn]}>
+                  <FontAwesomeIcon icon="rss" style={[s.mr5]} size={13} />
+                  <Text style={[s.fw400, s.f14]}>Follow</Text>
+                </TouchableOpacity>
+              )}
+              <TouchableOpacity
+                onPress={onPressMenu}
+                style={[styles.btn, styles.secondaryBtn, s.mr5]}>
+                <FontAwesomeIcon icon="user-plus" style={[s.gray5]} />
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={onPressMenu}
+                style={[styles.btn, styles.secondaryBtn, s.mr5]}>
+                <FontAwesomeIcon icon="note-sticky" style={[s.gray5]} />
+              </TouchableOpacity>
+            </>
           )}
-          {
-            undefined /*TODO<TouchableOpacity
+          <TouchableOpacity
             onPress={onPressMenu}
-            style={[styles.btn, styles.secondaryBtn, s.ml10]}>
+            style={[styles.btn, styles.secondaryBtn]}>
             <FontAwesomeIcon icon="ellipsis" style={[s.gray5]} />
-          </TouchableOpacity>*/
-          }
+          </TouchableOpacity>
         </View>
         <View style={[s.flexRow]}>
           <TouchableOpacity
@@ -203,24 +210,24 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     paddingVertical: 6,
-    paddingLeft: 55,
-    paddingRight: 60,
-    borderRadius: 30,
-    borderWidth: 1,
-    borderColor: 'transparent',
+    borderRadius: 6,
+    marginRight: 6,
   },
   btn: {
+    flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
     paddingVertical: 7,
-    borderRadius: 30,
-    borderWidth: 1,
-    borderColor: colors.gray2,
+    borderRadius: 4,
+    backgroundColor: colors.gray1,
+    marginRight: 6,
   },
   mainBtn: {
-    paddingHorizontal: 40,
+    flexDirection: 'row',
   },
   secondaryBtn: {
-    paddingHorizontal: 12,
+    flex: 0,
+    paddingHorizontal: 14,
+    marginRight: 0,
   },
 })

src/view/index.ts

@@ -29,15 +29,19 @@ import {faLink} from '@fortawesome/free-solid-svg-icons/faLink'
 import {faLock} from '@fortawesome/free-solid-svg-icons/faLock'
 import {faMagnifyingGlass} from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass'
 import {faMessage} from '@fortawesome/free-regular-svg-icons/faMessage'
+import {faNoteSticky} from '@fortawesome/free-solid-svg-icons/faNoteSticky'
 import {faPenNib} from '@fortawesome/free-solid-svg-icons/faPenNib'
+import {faPenToSquare} from '@fortawesome/free-solid-svg-icons/faPenToSquare'
 import {faPlus} from '@fortawesome/free-solid-svg-icons/faPlus'
 import {faShare} from '@fortawesome/free-solid-svg-icons/faShare'
 import {faShareFromSquare} from '@fortawesome/free-solid-svg-icons/faShareFromSquare'
 import {faShield} from '@fortawesome/free-solid-svg-icons/faShield'
 import {faReply} from '@fortawesome/free-solid-svg-icons/faReply'
 import {faRetweet} from '@fortawesome/free-solid-svg-icons/faRetweet'
+import {faRss} from '@fortawesome/free-solid-svg-icons/faRss'
 import {faUser} from '@fortawesome/free-regular-svg-icons/faUser'
 import {faUsers} from '@fortawesome/free-solid-svg-icons/faUsers'
+import {faUserCheck} from '@fortawesome/free-solid-svg-icons/faUserCheck'
 import {faUserPlus} from '@fortawesome/free-solid-svg-icons/faUserPlus'
 import {faTicket} from '@fortawesome/free-solid-svg-icons/faTicket'
 import {faX} from '@fortawesome/free-solid-svg-icons/faX'
@@ -73,15 +77,19 @@ export function setup() {
     faLock,
     faMagnifyingGlass,
     faMessage,
+    faNoteSticky,
     faPenNib,
+    faPenToSquare,
     faPlus,
     faReply,
     faRetweet,
+    faRss,
     faShare,
     faShareFromSquare,
     faShield,
     faUser,
     faUsers,
+    faUserCheck,
     faUserPlus,
     faTicket,
     faX,