Post controls update followup (#4276)

* rm legacy repost modal

* make repost button transparent

* reduce gap between post and ctrls

* remove old repost modal on web

src/alf/atoms.ts

@@ -55,6 +55,13 @@ export const atoms = {
     height: '100vh',
   }),
 
+  /*
+   * Theme-independent bg colors
+   */
+  bg_transparent: {
+    backgroundColor: 'transparent',
+  },
+
   /*
    * Border radius
    */

src/components/Button.tsx

@@ -376,10 +376,10 @@ export function Button({
         a.align_center,
         a.justify_center,
         flattenedBaseStyles,
+        flatten(style),
         ...(state.hovered || state.pressed
           ? [hoverStyles, flatten(hoverStyleProp)]
           : []),
-        flatten(style),
       ]}
       onPressIn={onPressIn}
       onPressOut={onPressOut}

src/state/modals/index.tsx

@@ -60,13 +60,6 @@ export interface DeleteAccountModal {
   name: 'delete-account'
 }
 
-export interface RepostModal {
-  name: 'repost'
-  onRepost: () => void
-  onQuote: () => void
-  isReposted: boolean
-}
-
 export interface SelfLabelModal {
   name: 'self-label'
   labels: string[]
@@ -154,7 +147,6 @@ export type Modal =
   | AltTextImageModal
   | CropImageModal
   | EditImageModal
-  | RepostModal
   | SelfLabelModal
   | ThreadgateModal
 

src/view/com/modals/Modal.tsx

@@ -22,7 +22,6 @@ import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguages
 import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
 import * as LinkWarningModal from './LinkWarning'
 import * as ListAddUserModal from './ListAddRemoveUsers'
-import * as RepostModal from './Repost'
 import * as SelfLabelModal from './SelfLabel'
 import * as ThreadgateModal from './Threadgate'
 import * as UserAddRemoveListsModal from './UserAddRemoveLists'
@@ -74,9 +73,6 @@ export function ModalsContainer() {
   } else if (activeModal?.name === 'delete-account') {
     snapPoints = DeleteAccountModal.snapPoints
     element = <DeleteAccountModal.Component />
-  } else if (activeModal?.name === 'repost') {
-    snapPoints = RepostModal.snapPoints
-    element = <RepostModal.Component {...activeModal} />
   } else if (activeModal?.name === 'self-label') {
     snapPoints = SelfLabelModal.snapPoints
     element = <SelfLabelModal.Component {...activeModal} />

src/view/com/modals/Modal.web.tsx

@@ -22,7 +22,6 @@ import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguages
 import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
 import * as LinkWarningModal from './LinkWarning'
 import * as ListAddUserModal from './ListAddRemoveUsers'
-import * as RepostModal from './Repost'
 import * as SelfLabelModal from './SelfLabel'
 import * as ThreadgateModal from './Threadgate'
 import * as UserAddRemoveLists from './UserAddRemoveLists'
@@ -83,8 +82,6 @@ function Modal({modal}: {modal: ModalIface}) {
     element = <CropImageModal.Component {...modal} />
   } else if (modal.name === 'delete-account') {
     element = <DeleteAccountModal.Component />
-  } else if (modal.name === 'repost') {
-    element = <RepostModal.Component {...modal} />
   } else if (modal.name === 'self-label') {
     element = <SelfLabelModal.Component {...modal} />
   } else if (modal.name === 'threadgate') {

src/view/com/modals/Repost.tsx

@@ -1,129 +0,0 @@
-import React from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import {LinearGradient} from 'expo-linear-gradient'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {useModalControls} from '#/state/modals'
-import {usePalette} from 'lib/hooks/usePalette'
-import {RepostIcon} from 'lib/icons'
-import {colors, gradients, s} from 'lib/styles'
-import {Text} from '../util/text/Text'
-
-export const snapPoints = [250]
-
-export function Component({
-  onRepost,
-  onQuote,
-  isReposted,
-}: {
-  onRepost: () => void
-  onQuote: () => void
-  isReposted: boolean
-  // TODO: Add author into component
-}) {
-  const pal = usePalette('default')
-  const {_} = useLingui()
-  const {closeModal} = useModalControls()
-  const onPress = async () => {
-    closeModal()
-  }
-
-  return (
-    <View testID="repostModal" style={[s.flex1, pal.view, styles.container]}>
-      <View style={s.pb20}>
-        <TouchableOpacity
-          testID="repostBtn"
-          style={[styles.actionBtn]}
-          onPress={onRepost}
-          accessibilityRole="button"
-          accessibilityLabel={
-            isReposted
-              ? _(msg`Undo repost`)
-              : _(msg({message: `Repost`, context: 'action'}))
-          }
-          accessibilityHint={
-            isReposted
-              ? _(msg`Remove repost`)
-              : _(msg({message: `Repost`, context: 'action'}))
-          }>
-          <RepostIcon strokeWidth={2} size={24} style={s.blue3} />
-          <Text type="title-lg" style={[styles.actionBtnLabel, pal.text]}>
-            {!isReposted ? (
-              <Trans context="action">Repost</Trans>
-            ) : (
-              <Trans>Undo repost</Trans>
-            )}
-          </Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          testID="quoteBtn"
-          style={[styles.actionBtn]}
-          onPress={onQuote}
-          accessibilityRole="button"
-          accessibilityLabel={_(
-            msg({message: `Quote post`, context: 'action'}),
-          )}
-          accessibilityHint="">
-          <FontAwesomeIcon icon="quote-left" size={24} style={s.blue3} />
-          <Text type="title-lg" style={[styles.actionBtnLabel, pal.text]}>
-            <Trans context="action">Quote Post</Trans>
-          </Text>
-        </TouchableOpacity>
-      </View>
-      <TouchableOpacity
-        testID="cancelBtn"
-        onPress={onPress}
-        accessibilityRole="button"
-        accessibilityLabel={_(msg`Cancel quote post`)}
-        accessibilityHint=""
-        onAccessibilityEscape={onPress}>
-        <LinearGradient
-          colors={[gradients.blueLight.start, gradients.blueLight.end]}
-          start={{x: 0, y: 0}}
-          end={{x: 1, y: 1}}
-          style={[styles.btn]}>
-          <Text style={[s.white, s.bold, s.f18]}>
-            <Trans>Cancel</Trans>
-          </Text>
-        </LinearGradient>
-      </TouchableOpacity>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 30,
-  },
-  title: {
-    textAlign: 'center',
-    fontWeight: 'bold',
-    fontSize: 24,
-    marginBottom: 12,
-  },
-  description: {
-    textAlign: 'center',
-    fontSize: 17,
-    paddingHorizontal: 22,
-    marginBottom: 10,
-  },
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    borderRadius: 32,
-    padding: 14,
-    backgroundColor: colors.gray1,
-  },
-  actionBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  actionBtnLabel: {
-    paddingHorizontal: 14,
-    paddingVertical: 16,
-  },
-})

src/view/com/posts/FeedItem.tsx

@@ -390,7 +390,7 @@ let PostContent = ({
         />
       ) : undefined}
       {postEmbed ? (
-        <View style={[a.pb_sm]}>
+        <View style={[a.pb_xs]}>
           <PostEmbeds
             embed={postEmbed}
             moderation={moderation}
@@ -482,7 +482,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     flexWrap: 'wrap',
-    paddingBottom: 4,
+    paddingBottom: 2,
   },
   contentHiderChild: {
     marginTop: 6,

src/view/com/util/post-ctrls/RepostButton.tsx

@@ -47,7 +47,13 @@ let RepostButton = ({
         onPress={() => {
           requireAuth(() => dialogControl.open())
         }}
-        style={[a.flex_row, a.align_center, a.gap_xs, {padding: 5}]}
+        style={[
+          a.flex_row,
+          a.align_center,
+          a.gap_xs,
+          a.bg_transparent,
+          {padding: 5},
+        ]}
         hoverStyle={t.atoms.bg_contrast_25}
         label={`${
           isReposted