From 7c9139ffd59745ffb25a8d91feee037387878cfe Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 1 Apr 2026 11:06:31 -0500 Subject: [PATCH] Some style cleanup --- src/alf/util/flatten.ts | 21 ------------------- src/components/Composer/index.tsx | 18 +++++++++------- .../Messages/components/MessageComposer.tsx | 19 +++++++---------- 3 files changed, 17 insertions(+), 41 deletions(-) diff --git a/src/alf/util/flatten.ts b/src/alf/util/flatten.ts index df5397f466..448716a082 100644 --- a/src/alf/util/flatten.ts +++ b/src/alf/util/flatten.ts @@ -1,24 +1,3 @@ import {StyleSheet} from 'react-native' export const flatten = StyleSheet.flatten - -type PaddingStyle = { - padding?: number - paddingHorizontal?: number - paddingVertical?: number - paddingTop?: number - paddingBottom?: number - paddingLeft?: number - paddingRight?: number -} - -export function extractPadding(style: PaddingStyle | PaddingStyle[]) { - const s = flatten(style) - const base = s.padding ?? 0 - return { - paddingTop: s.paddingTop ?? s.paddingVertical ?? base, - paddingBottom: s.paddingBottom ?? s.paddingVertical ?? base, - paddingLeft: s.paddingLeft ?? s.paddingHorizontal ?? base, - paddingRight: s.paddingRight ?? s.paddingHorizontal ?? base, - } -} diff --git a/src/components/Composer/index.tsx b/src/components/Composer/index.tsx index 092143554d..a5f0e799b3 100644 --- a/src/components/Composer/index.tsx +++ b/src/components/Composer/index.tsx @@ -33,7 +33,6 @@ import {HITSLOP_10} from '#/lib/constants' import {mergeRefs} from '#/lib/merge-refs' import { atoms as a, - extractPadding, type TextStyleProp, useAlf, type ViewStyleProp, @@ -49,7 +48,7 @@ import { } from '#/components/Autocomplete' import {useOnKeyboard} from '#/components/hooks/useOnKeyboard' import {Span, Text} from '#/components/Typography' -import {IS_WEB, IS_WEB_TOUCH_DEVICE} from '#/env' +import {IS_IOS, IS_WEB, IS_WEB_TOUCH_DEVICE} from '#/env' /* * ─── Types ──────────────────────────────────────────────────────────────────── @@ -100,7 +99,12 @@ export type ComposerProps = Omit< label: string ref?: React.Ref style?: ViewStyleProp['style'] - padding?: Parameters[0] + padding?: { + paddingTop?: number + paddingBottom?: number + paddingLeft?: number + paddingRight?: number + } textStyle?: TextStyleProp['style'] initialNumberOfLines?: number maxNumberOfLines?: number @@ -205,11 +209,9 @@ export function Composer({ flags: {}, }, ) - const p = padding - ? extractPadding(padding) - : {paddingTop: 0, paddingBottom: 0} const lineHeight = ts.lineHeight || 20 - const verticalSpace = p.paddingTop + p.paddingBottom + const verticalSpace = + (padding?.paddingTop || 0) + (padding?.paddingBottom || 0) const mh = lineHeight * initialNumberOfLines + verticalSpace const xh = maxNumberOfLines ? lineHeight * maxNumberOfLines + verticalSpace @@ -218,7 +220,7 @@ export function Composer({ ? {height: lineHeight + verticalSpace} : {minHeight: mh, maxHeight: xh} - if (!IS_WEB) { + if (IS_IOS) { delete ts.lineHeight } diff --git a/src/screens/Messages/components/MessageComposer.tsx b/src/screens/Messages/components/MessageComposer.tsx index 48a557bd70..e46895fb4e 100644 --- a/src/screens/Messages/components/MessageComposer.tsx +++ b/src/screens/Messages/components/MessageComposer.tsx @@ -23,7 +23,7 @@ import {useInteractionState} from '#/components/hooks/useInteractionState' import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji' import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane' import * as Toast from '#/components/Toast' -import {IS_WEB} from '#/env' +import {IS_ANDROID, IS_WEB} from '#/env' export function MessageComposer({ onSendMessage, @@ -136,17 +136,12 @@ export function MessageComposer({ borderColor: t.palette.primary_500, }, ]} - padding={[ - a.p_md, - { - paddingRight: 35 + a.p_sm.padding, - }, - IS_WEB - ? { - paddingLeft: 30 + a.p_sm.padding, - } - : {}, - ]} + padding={{ + paddingLeft: IS_WEB ? 30 + 8 : 16, + paddingTop: 12, + paddingBottom: IS_ANDROID ? 4 : 12, + paddingRight: 35 + a.p_sm.padding, + }} textStyle={[a.text_md, a.leading_snug]} onFocus={onFocus} onBlur={onBlur}