diff --git a/components/Recommendations/Recommendations.tsx b/components/Recommendations/Recommendations.tsx index e373b3bb4..575736065 100644 --- a/components/Recommendations/Recommendations.tsx +++ b/components/Recommendations/Recommendations.tsx @@ -24,6 +24,7 @@ import { translate } from "@/i18n"; import { Text } from "@design-system/Text"; import { Loader } from "@/design-system/loader"; import { ThemedStyle, useAppTheme } from "@/theme/useAppTheme"; +import { textSizeStyles } from "@/design-system/Text/Text.styles"; const EXPIRE_AFTER = 86400000; // 1 DAY @@ -129,7 +130,7 @@ export default function Recommendations({ )} {visibility === "EMBEDDED" && showTitle && ( - + {translate("recommendations.section_title")} @@ -220,21 +221,20 @@ export default function Recommendations({ } const $emoji: ThemedStyle = ({ spacing }) => ({ + ...textSizeStyles.xl, textAlign: "center", marginTop: spacing.xl, - fontSize: 34, marginBottom: spacing.sm, }); const $title: ThemedStyle = ({ colors, spacing }) => ({ + ...textSizeStyles.sm, color: colors.text.primary, ...Platform.select({ default: { - fontSize: 17, paddingHorizontal: spacing.xl, }, android: { - fontSize: 14, paddingHorizontal: spacing.xxl, }, }), @@ -254,11 +254,8 @@ const $fetching: ThemedStyle = () => ({ }); const $fetchingText: ThemedStyle = ({ colors, spacing }) => ({ + ...textSizeStyles.sm, color: colors.text.primary, - ...Platform.select({ - default: { fontSize: 17 }, - android: { fontSize: 16 }, - }), textAlign: "center", marginTop: spacing.lg, }); @@ -268,15 +265,15 @@ const $clickableText: ThemedStyle = ({ colors }) => ({ fontWeight: "500", }); -const $noMatch: ThemedStyle = ({ spacing }) => ({ - marginTop: spacing.xl, -}); - -const $titleContainer: ThemedStyle = ({ colors, spacing }) => ({ +const $titleContainer: ThemedStyle = ({ + colors, + spacing, + borderWidth, +}) => ({ paddingBottom: spacing.xl, ...Platform.select({ default: { - borderBottomWidth: 0.5, + borderBottomWidth: borderWidth.xs, borderBottomColor: colors.border.subtle, }, android: {}, @@ -287,10 +284,11 @@ const $titleContainer: ThemedStyle = ({ colors, spacing }) => ({ const $sectionTitleContainer: ThemedStyle = ({ colors, spacing, + borderWidth, }) => ({ ...Platform.select({ default: { - borderBottomWidth: 0.5, + borderBottomWidth: borderWidth.xs, borderBottomColor: colors.border.subtle, paddingLeft: spacing.md, }, @@ -299,18 +297,7 @@ const $sectionTitleContainer: ThemedStyle = ({ }), }); -const $sectionTitle: ThemedStyle = ({ colors, spacing }) => ({ - color: colors.text.secondary, - ...Platform.select({ - default: { - fontSize: 12, - marginBottom: spacing.xs, - marginTop: spacing.lg, - }, - android: { - fontSize: 11, - marginBottom: spacing.sm, - marginTop: spacing.md, - }, - }), +const $sectionTitleSpacing: ThemedStyle = ({ colors, spacing }) => ({ + marginBottom: spacing.xs, + marginTop: spacing.lg, }); diff --git a/features/search/screens/ProfileSearch.tsx b/features/search/screens/ProfileSearch.tsx index e56f33ff0..889157927 100644 --- a/features/search/screens/ProfileSearch.tsx +++ b/features/search/screens/ProfileSearch.tsx @@ -103,16 +103,8 @@ const $sectionTitleContainer: ThemedStyle = ({ }); const $sectionTitleSpacing: ThemedStyle = ({ spacing }) => ({ - ...Platform.select({ - default: { - marginBottom: spacing.sm, - marginTop: spacing.xl, - }, - android: { - marginBottom: spacing.md, - marginTop: spacing.lg, - }, - }), + marginBottom: spacing.xs, + marginTop: spacing.lg, }); const $footer: ThemedStyle = ({ spacing }) => ({ diff --git a/screens/NewConversation/NewConversation.tsx b/screens/NewConversation/NewConversation.tsx index ac00e41b8..c34423456 100644 --- a/screens/NewConversation/NewConversation.tsx +++ b/screens/NewConversation/NewConversation.tsx @@ -40,6 +40,7 @@ import { setProfileRecordSocialsQueryData } from "@/queries/useProfileSocialsQue import { Text } from "@design-system/Text"; import { ThemedStyle, useAppTheme } from "@/theme/useAppTheme"; import { Loader } from "@/design-system/loader"; +import { textSizeStyles } from "@/design-system/Text/Text.styles"; export default function NewConversation({ route, @@ -51,10 +52,13 @@ export default function NewConversation({ const handleBack = useCallback(() => navigation.goBack(), [navigation]); const { theme, themed } = useAppTheme(); + + // TODO: Unused. Should we remove this once we have a proper group query? const { data: existingGroup } = useGroupQuery({ account: currentAccount(), topic: route.params?.addingToGroupTopic!, }); + const [group, setGroup] = useState({ enabled: !!route.params?.addingToGroupTopic, members: [] as (IProfileSocials & { address: string })[], @@ -488,16 +492,13 @@ const $messageContainer: ThemedStyle = ({ spacing }) => ({ }); const $message: ThemedStyle = ({ colors }) => ({ + color: colors.text.secondary, + ...textSizeStyles.sm, ...Platform.select({ default: { - fontSize: 17, textAlign: "center", }, - android: { - fontSize: 14, - }, }), - color: colors.text.secondary, }); const $error: ThemedStyle = ({ colors }) => ({