diff --git a/src/components/Instance/index.tsx b/src/components/Instance/index.tsx index 80aecd9e..e21c49de 100644 --- a/src/components/Instance/index.tsx +++ b/src/components/Instance/index.tsx @@ -146,7 +146,8 @@ const ComponentInstance: React.FC = ({ borderBottomWidth: 1, ...StyleConstants.FontStyle.M, color: colors.primaryDefault, - borderBottomColor: instanceQuery.isError ? colors.red : colors.border + borderBottomColor: instanceQuery.isError ? colors.red : colors.border, + ...(Platform.OS === 'android' && { paddingRight: 0 }) }} editable={false} defaultValue='https://' @@ -158,7 +159,8 @@ const ComponentInstance: React.FC = ({ ...StyleConstants.FontStyle.M, marginRight: StyleConstants.Spacing.M, color: colors.primaryDefault, - borderBottomColor: instanceQuery.isError ? colors.red : colors.border + borderBottomColor: instanceQuery.isError ? colors.red : colors.border, + ...(Platform.OS === 'android' && { paddingLeft: 0 }) }} onChangeText={debounce(text => setDomain(text.replace(/^http(s)?\:\/\//i, '')), 1000, { trailing: true diff --git a/src/components/Parse/Emojis.tsx b/src/components/Parse/Emojis.tsx index 6e8df38b..fe8fac22 100644 --- a/src/components/Parse/Emojis.tsx +++ b/src/components/Parse/Emojis.tsx @@ -21,13 +21,7 @@ export interface Props { } const ParseEmojis = React.memo( - ({ - content, - emojis, - size = 'M', - adaptiveSize = false, - fontBold = false - }: Props) => { + ({ content, emojis, size = 'M', adaptiveSize = false, fontBold = false }: Props) => { const { reduceMotionEnabled } = useAccessibility() const adaptiveFontsize = useSelector(getSettingsFontsize) @@ -51,22 +45,13 @@ const ParseEmojis = React.memo( image: { width: adaptedFontsize, height: adaptedFontsize, - ...(Platform.OS === 'ios' - ? { - transform: [{ translateY: -2 }] - } - : { - transform: [{ translateY: 1 }] - }) + ...(Platform.OS === 'android' && { transform: [{ translateY: 2 }] }) } }) }, [theme, adaptiveFontsize]) return ( - + {emojis ? ( content .split(regexEmoji) @@ -78,11 +63,7 @@ const ParseEmojis = React.memo( return emojiShortcode === `:${emoji.shortcode}:` }) if (emojiIndex === -1) { - return ( - - {emojiShortcode} - - ) + return {emojiShortcode} } else { const uri = reduceMotionEnabled ? emojis[emojiIndex].static_url diff --git a/src/components/Parse/HTML.tsx b/src/components/Parse/HTML.tsx index a2615163..68b9f48c 100644 --- a/src/components/Parse/HTML.tsx +++ b/src/components/Parse/HTML.tsx @@ -10,6 +10,7 @@ import { StyleConstants } from '@utils/styles/constants' import layoutAnimation from '@utils/styles/layoutAnimation' import { adaptiveScale } from '@utils/styles/scaling' import { useTheme } from '@utils/styles/ThemeManager' +import { isEqual } from 'lodash' import React, { useCallback, useState } from 'react' import { useTranslation } from 'react-i18next' import { Platform, Pressable, View } from 'react-native' @@ -133,13 +134,8 @@ const renderNode = ({ name='ExternalLink' size={adaptedFontsize} style={{ - ...(Platform.OS === 'ios' - ? { - transform: [{ translateY: -2 }] - } - : { - transform: [{ translateY: 1 }] - }) + marginLeft: StyleConstants.Spacing.XS, + ...(Platform.OS === 'android' && { transform: [{ translateY: 2 }] }) }} /> ) : null} @@ -320,7 +316,7 @@ const ParseHTML = React.memo( /> ) }, - (prev, next) => prev.content === next.content + (prev, next) => prev.content === next.content && isEqual(prev.emojis, next.emojis) ) export default ParseHTML diff --git a/src/components/Timeline/Default.tsx b/src/components/Timeline/Default.tsx index 4277ec17..446d138b 100644 --- a/src/components/Timeline/Default.tsx +++ b/src/components/Timeline/Default.tsx @@ -70,9 +70,11 @@ const TimelineDefault: React.FC = ({ const mainStyle: StyleProp = { flex: 1, - padding: StyleConstants.Spacing.Global.PagePadding, + padding: disableDetails + ? StyleConstants.Spacing.Global.PagePadding / 1.5 + : StyleConstants.Spacing.Global.PagePadding, backgroundColor: colors.backgroundDefault, - paddingBottom: disableDetails ? StyleConstants.Spacing.Global.PagePadding : 0 + paddingBottom: disableDetails ? StyleConstants.Spacing.Global.PagePadding / 1.5 : 0, } const main = () => ( <> @@ -82,7 +84,13 @@ const TimelineDefault: React.FC = ({ ) : null} - + @@ -90,7 +98,11 @@ const TimelineDefault: React.FC = ({ diff --git a/src/components/Timeline/Shared/Avatar.tsx b/src/components/Timeline/Shared/Avatar.tsx index e9d6a052..d04cc92b 100644 --- a/src/components/Timeline/Shared/Avatar.tsx +++ b/src/components/Timeline/Shared/Avatar.tsx @@ -12,7 +12,7 @@ export interface Props { } const TimelineAvatar: React.FC = ({ account }) => { - const { status, highlighted, disableOnPress } = useContext(StatusContext) + const { status, highlighted, disableDetails, disableOnPress } = useContext(StatusContext) const actualAccount = account || status?.account if (!actualAccount) return null @@ -33,10 +33,17 @@ const TimelineAvatar: React.FC = ({ account }) => { !disableOnPress && navigation.push('Tab-Shared-Account', { account: actualAccount }) } uri={{ original: actualAccount.avatar, static: actualAccount.avatar_static }} - dimension={{ - width: StyleConstants.Avatar.M, - height: StyleConstants.Avatar.M - }} + dimension={ + disableDetails + ? { + width: StyleConstants.Avatar.XS, + height: StyleConstants.Avatar.XS + } + : { + width: StyleConstants.Avatar.M, + height: StyleConstants.Avatar.M + } + } style={{ borderRadius: StyleConstants.Avatar.M, overflow: 'hidden', diff --git a/src/components/Timeline/Shared/Card.tsx b/src/components/Timeline/Shared/Card.tsx index 31fcb1c9..412bd22a 100644 --- a/src/components/Timeline/Shared/Card.tsx +++ b/src/components/Timeline/Shared/Card.tsx @@ -10,7 +10,7 @@ import { useStatusQuery } from '@utils/queryHooks/status' import { StyleConstants } from '@utils/styles/constants' import { useTheme } from '@utils/styles/ThemeManager' import React, { useContext, useEffect, useState } from 'react' -import { Pressable, StyleSheet, Text, View } from 'react-native' +import { Pressable, StyleSheet, View } from 'react-native' import { Circle } from 'react-native-animated-spinkit' import TimelineDefault from '../Default' import StatusContext from './Context' @@ -187,7 +187,10 @@ const TimelineCard: React.FC = () => { style={{ flex: 1, flexDirection: 'row', - minHeight: isAccount && foundAccount ? undefined : StyleConstants.Font.LineHeight.M * 5, + minHeight: + (isStatus && foundStatus) || (isAccount && foundAccount) + ? undefined + : StyleConstants.Font.LineHeight.M * 5, marginTop: StyleConstants.Spacing.M, borderWidth: StyleSheet.hairlineWidth, borderRadius: StyleConstants.Spacing.S, diff --git a/src/components/Timeline/Shared/HeaderDefault.tsx b/src/components/Timeline/Shared/HeaderDefault.tsx index 5d52636a..1e482239 100644 --- a/src/components/Timeline/Shared/HeaderDefault.tsx +++ b/src/components/Timeline/Shared/HeaderDefault.tsx @@ -42,14 +42,20 @@ const TimelineHeaderDefault: React.FC = () => { return ( - + { style={{ flex: 1, flexDirection: 'row', - minHeight: StyleConstants.Font.LineHeight.M * 5, borderWidth: StyleSheet.hairlineWidth, borderRadius: StyleConstants.Spacing.S, overflow: 'hidden', diff --git a/src/screens/Tabs/Me/List/Edit.tsx b/src/screens/Tabs/Me/List/Edit.tsx index 5666fb63..d2b67a3c 100644 --- a/src/screens/Tabs/Me/List/Edit.tsx +++ b/src/screens/Tabs/Me/List/Edit.tsx @@ -83,15 +83,6 @@ const TabMeListEdit: React.FC> = ({ useEffect(() => { navigation.setOptions({ title: params.type === 'add' ? t('me.stacks.listAdd.name') : t('me.stacks.listEdit.name'), - ...(Platform.OS === 'android' && { - headerCenter: () => ( - - ) - }), headerLeft: () => ( () -const TabMeProfile: React.FC> = ({ - navigation -}) => { +const TabMeProfile: React.FC> = ({ navigation }) => { const { t } = useTranslation('screenTabs') const messageRef = useRef(null) @@ -32,82 +27,37 @@ const TabMeProfile: React.FC> = ({ name='Tab-Me-Profile-Root' options={{ title: t('me.stacks.profile.name'), - ...(Platform.OS === 'android' && { - headerCenter: () => ( - - ) - }), headerLeft: () => ( - navigation.goBack()} - /> + navigation.goBack()} /> ) }} > {({ route, navigation }) => ( - + )} ( - - ) - }) - }} + options={{ title: t('me.stacks.profileName.name') }} > {({ route, navigation }) => ( - + )} ( - - ) - }) - }} + options={{ title: t('me.stacks.profileNote.name') }} > {({ route, navigation }) => ( - + )} ( - - ) - }) - }} + options={{ title: t('me.stacks.profileFields.name') }} > {({ route, navigation }) => ( - + )} diff --git a/src/utils/styles/constants.ts b/src/utils/styles/constants.ts index 8a9415b2..e20c5546 100644 --- a/src/utils/styles/constants.ts +++ b/src/utils/styles/constants.ts @@ -21,5 +21,5 @@ export const StyleConstants = { Global: { PagePadding: Base * 4 } }, - Avatar: { S: 40, M: 48, L: 96 } + Avatar: { XS: 32, S: 40, M: 48, L: 96 } }