Post UI updates (Profile Preview on mobile) (#990)

* Update postmeta to put the timestamp on the right side on mobile

* Drop the two-line PostMeta mode

* Add ProfilePreview modal

* Tune PostMeta to give the best behavior possible for a given platform

* Remove old showFollowBtn attributes

* Fix style issue

* Switch the follow button in the profile header to use the inverted color for consistency with the rest of the app

* Fix lint

* Fix darkmode

* Tune the profile preview footer

* Better analytics choice

src/view/com/profile/ProfileHeader.tsx

@@ -6,10 +6,7 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useNavigation} from '@react-navigation/native'
 import {BlurView} from '../util/BlurView'
 import {ProfileModel} from 'state/models/content/profile'
@@ -102,6 +99,7 @@ export const ProfileHeader = observer(
 const ProfileHeaderLoaded = observer(
   ({view, onRefreshAll, hideBackButton = false}: Props) => {
     const pal = usePalette('default')
+    const palInverted = usePalette('inverted')
     const store = useStores()
     const navigation = useNavigation<NavigationProp>()
     const {track} = useAnalytics()
@@ -351,15 +349,15 @@ const ProfileHeaderLoaded = observer(
                   <TouchableOpacity
                     testID="followBtn"
                     onPress={onPressToggleFollow}
-                    style={[styles.btn, styles.primaryBtn]}
+                    style={[styles.btn, styles.mainBtn, palInverted.view]}
                     accessibilityRole="button"
                     accessibilityLabel={`Follow ${view.handle}`}
                     accessibilityHint={`Shows direct posts from ${view.handle} in your feed`}>
                     <FontAwesomeIcon
                       icon="plus"
-                      style={[s.white as FontAwesomeIconStyle, s.mr5]}
+                      style={[palInverted.text, s.mr5]}
                     />
-                    <Text type="button" style={[s.white, s.bold]}>
+                    <Text type="button" style={[palInverted.text, s.bold]}>
                       Follow
                     </Text>
                   </TouchableOpacity>
@@ -609,7 +607,6 @@ const styles = StyleSheet.create({
   },
 
   description: {
-    flex: 1,
     marginBottom: 8,
   },