From d92036f2c576d33964b1141ac63888bdc2fb1ca4 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Thu, 30 May 2024 09:44:49 +0300 Subject: [PATCH] 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 | 7 + src/components/Button.tsx | 2 +- src/state/modals/index.tsx | 8 -- src/view/com/modals/Modal.tsx | 4 - src/view/com/modals/Modal.web.tsx | 3 - src/view/com/modals/Repost.tsx | 129 ------------------ src/view/com/posts/FeedItem.tsx | 4 +- src/view/com/util/post-ctrls/RepostButton.tsx | 8 +- 8 files changed, 17 insertions(+), 148 deletions(-) delete mode 100644 src/view/com/modals/Repost.tsx diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 158bb6ec5b..eb130f3ae9 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -55,6 +55,13 @@ export const atoms = { height: '100vh', }), + /* + * Theme-independent bg colors + */ + bg_transparent: { + backgroundColor: 'transparent', + }, + /* * Border radius */ diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 3db8033997..c543cbba5f 100644 --- a/src/components/Button.tsx +++ b/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} diff --git a/src/state/modals/index.tsx b/src/state/modals/index.tsx index cf82bcd075..f8a64dc2d3 100644 --- a/src/state/modals/index.tsx +++ b/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 diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index d82975b5e8..3491b94e34 100644 --- a/src/view/com/modals/Modal.tsx +++ b/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 = - } else if (activeModal?.name === 'repost') { - snapPoints = RepostModal.snapPoints - element = } else if (activeModal?.name === 'self-label') { snapPoints = SelfLabelModal.snapPoints element = diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx index f95c748111..14ee99e576 100644 --- a/src/view/com/modals/Modal.web.tsx +++ b/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 = } else if (modal.name === 'delete-account') { element = - } else if (modal.name === 'repost') { - element = } else if (modal.name === 'self-label') { element = } else if (modal.name === 'threadgate') { diff --git a/src/view/com/modals/Repost.tsx b/src/view/com/modals/Repost.tsx deleted file mode 100644 index 5dedee832b..0000000000 --- a/src/view/com/modals/Repost.tsx +++ /dev/null @@ -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 ( - - - - - - {!isReposted ? ( - Repost - ) : ( - Undo repost - )} - - - - - - Quote Post - - - - - - - Cancel - - - - - ) -} - -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, - }, -}) diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 70f63427dc..8077c29683 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -390,7 +390,7 @@ let PostContent = ({ /> ) : undefined} {postEmbed ? ( - + { 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