From 2308502336d5f42632397de3b536be8472db62ab Mon Sep 17 00:00:00 2001 From: staszekscp Date: Thu, 25 Sep 2025 08:43:44 +0200 Subject: [PATCH 1/4] Remove nestedStyles --- Mobile-Expensify | 2 +- contributingGuides/STYLING.md | 1 + src/components/Badge.tsx | 4 +- src/components/DotIndicatorMessage.tsx | 6 +- .../HTMLRenderers/EditedRenderer.tsx | 2 +- .../BaseLocationErrorMessage.tsx | 6 +- src/components/MenuItem.tsx | 6 +- src/components/OfflineWithFeedback.tsx | 6 +- .../ReportActionItem/MoneyReportView.tsx | 2 +- .../TransactionPreviewContent.tsx | 2 +- .../index.native.tsx | 4 +- .../WorkspacesListRowDisplayName/index.tsx | 2 +- .../report/comment/TextCommentFragment.tsx | 6 +- .../settings/Wallet/RedDotCardSection.tsx | 2 +- src/pages/workspace/WorkspaceMembersPage.tsx | 2 +- src/pages/workspace/WorkspacesListPage.tsx | 4 +- src/pages/workspace/WorkspacesListRow.tsx | 10 +- ...WorkspaceCompanyCardsListHeaderButtons.tsx | 2 +- .../members/WorkspaceMemberDetailsPage.tsx | 2 +- src/styles/index.ts | 296 +++++++++--------- src/styles/utils/index.ts | 2 +- 21 files changed, 182 insertions(+), 187 deletions(-) diff --git a/Mobile-Expensify b/Mobile-Expensify index d90699759bd2..549d225df547 160000 --- a/Mobile-Expensify +++ b/Mobile-Expensify @@ -1 +1 @@ -Subproject commit d90699759bd2977801d65948bb056f77201a502b +Subproject commit 549d225df54727cb4360a8db0e0b5218e884e971 diff --git a/contributingGuides/STYLING.md b/contributingGuides/STYLING.md index 444914bf2196..e8126e8e50f6 100644 --- a/contributingGuides/STYLING.md +++ b/contributingGuides/STYLING.md @@ -9,6 +9,7 @@ All non-theme-related styles must be defined in the `/styles` directory and `sty The styles are grouped into: - `staticStyles` - object wrapped into `StyleSheet.create()` which contains static styles based on the `theme`. - `dynamicStyles` - object that contains functions which return dynamic styles +- `plainStyles` - object that contains styles, which cannot be wrapped by StyleSheet.create eg. because of requirements of 3rd party libraries All styles that contain theme colors have to be defined in the `ThemeStylesProvider` component, as those need to be dynamically created and animated. diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx index ded27fc6a6b2..b38ae23017ab 100644 --- a/src/components/Badge.tsx +++ b/src/components/Badge.tsx @@ -62,7 +62,7 @@ function Badge({ const StyleUtils = useStyleUtils(); const Wrapper = pressable ? PressableWithoutFeedback : View; - const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedback.deleted) : false; + const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedbackDeleted) : false; const iconColor = StyleUtils.getIconColorStyle(success, error); @@ -97,7 +97,7 @@ function Badge({ )} {text} diff --git a/src/components/DotIndicatorMessage.tsx b/src/components/DotIndicatorMessage.tsx index 4b1d975b014b..15ec19aebcf1 100644 --- a/src/components/DotIndicatorMessage.tsx +++ b/src/components/DotIndicatorMessage.tsx @@ -69,7 +69,7 @@ function DotIndicatorMessage({messages = {}, style, type, textStyles, dismissErr <> {translate('iou.error.receiptFailureMessage')} - + - {uniqueMessages.map(renderMessage)} + {uniqueMessages.map(renderMessage)} ); } diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.tsx index ad5de9793dbd..630792f31b46 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.tsx @@ -19,7 +19,7 @@ function EditedRenderer({tnode, TDefaultRenderer, style, ...defaultRendererProps {...defaultRendererProps} fontSize={variables.fontSizeSmall} color={theme.textSupporting} - style={[styles.editedLabelStyles, isPendingDelete && styles.offlineFeedback.deleted]} + style={[styles.editedLabelStyles, isPendingDelete && styles.offlineFeedbackDeleted]} > {translate('reportActionCompose.edited')} diff --git a/src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx b/src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx index 33a0bba7481c..d773258fc04f 100644 --- a/src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx +++ b/src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx @@ -33,13 +33,13 @@ function BaseLocationErrorMessage({onClose, onAllowLocationLinkPress, locationEr return ( - + - + {isPermissionDenied ? ( {`${translate('location.permissionDenied')} ${translate('location.please')}`} @@ -52,7 +52,7 @@ function BaseLocationErrorMessage({onClose, onAllowLocationLinkPress, locationEr {translate('location.tryAgain')} ) : ( - {translate('location.notFound')} + {translate('location.notFound')} )} diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 5c3b82410b9b..20aa2c544470 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -518,7 +518,7 @@ function MenuItem({ const deviceHasHoverSupport = hasHoverSupport(); const isCompact = viewMode === CONST.OPTION_MODE.COMPACT; - const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedback.deleted) : false; + const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedbackDeleted) : false; const descriptionVerticalMargin = shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1; const combinedTitleTextStyle = StyleUtils.combineStyles( @@ -531,7 +531,7 @@ function MenuItem({ numberOfLinesTitle !== 1 ? styles.preWrap : styles.pre, interactive && disabled ? {...styles.userSelectNone} : {}, styles.ltr, - isDeleted ? styles.offlineFeedback.deleted : {}, + isDeleted ? styles.offlineFeedbackDeleted : {}, shouldBreakWord ? styles.breakWord : {}, styles.mw100, ], @@ -544,7 +544,7 @@ function MenuItem({ title ? descriptionVerticalMargin : StyleUtils.getFontSizeStyle(variables.fontSizeNormal), title ? styles.textLineHeightNormal : StyleUtils.getLineHeightStyle(variables.fontSizeNormalHeight), (descriptionTextStyle as TextStyle) || styles.breakWord, - isDeleted ? styles.offlineFeedback.deleted : {}, + isDeleted ? styles.offlineFeedbackDeleted : {}, ]); const html = useMemo(() => { diff --git a/src/components/OfflineWithFeedback.tsx b/src/components/OfflineWithFeedback.tsx index b86b666c2d97..67997145ebfd 100644 --- a/src/components/OfflineWithFeedback.tsx +++ b/src/components/OfflineWithFeedback.tsx @@ -116,7 +116,7 @@ function OfflineWithFeedback({ type ChildComponentProps = ChildrenProps & {style?: AllStyles}; const childProps = child.props as ChildComponentProps; const props: StrikethroughProps = { - style: StyleUtils.combineStyles(childProps.style ?? [], styles.offlineFeedback.deleted, styles.userSelectNone), + style: StyleUtils.combineStyles(childProps.style ?? [], styles.offlineFeedbackDeleted, styles.userSelectNone), }; if (childProps.children) { @@ -148,10 +148,10 @@ function OfflineWithFeedback({ )} {!hideChildren && ( - {children} + {children} )} {shouldShowErrorMessages && !shouldDisplayErrorAbove && ( diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index 1e0eac53ed61..1cb9ce471935 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -206,7 +206,7 @@ function MoneyReportView({report, policy, isCombinedReport = false, shouldShowTo ) : ( {formattedTotalAmount} diff --git a/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx index ccb6db55051a..033baf79f2b4 100644 --- a/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx +++ b/src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx @@ -196,7 +196,7 @@ function TransactionPreviewContent({ const previewTextViewGap = (shouldShowCategoryOrTag || !shouldWrapDisplayAmount) && styles.gap2; const previewTextMargin = shouldShowIOUHeader && shouldShowMerchantOrDescription && !isBillSplit && !shouldShowCategoryOrTag && styles.mbn1; - const transactionWrapperStyles = [styles.border, styles.moneyRequestPreviewBox, (isIOUSettled || isApproved) && isSettlementOrApprovalPartial && styles.offlineFeedback.pending]; + const transactionWrapperStyles = [styles.border, styles.moneyRequestPreviewBox, (isIOUSettled || isApproved) && isSettlementOrApprovalPartial && styles.offlineFeedbackPending]; return ( diff --git a/src/components/WorkspacesListRowDisplayName/index.native.tsx b/src/components/WorkspacesListRowDisplayName/index.native.tsx index 1a91e2857db3..399816190109 100644 --- a/src/components/WorkspacesListRowDisplayName/index.native.tsx +++ b/src/components/WorkspacesListRowDisplayName/index.native.tsx @@ -11,10 +11,10 @@ function WorkspacesListRowDisplayName({isDeleted, ownerName}: WorkspacesListRowD return ( {processedOwnerName.length !== 0 - ? EmojiUtils.getProcessedText(processedOwnerName, [styles.labelStrong, isDeleted ? styles.offlineFeedback.deleted : {}, styles.emojisWithTextFontFamily]) + ? EmojiUtils.getProcessedText(processedOwnerName, [styles.labelStrong, isDeleted ? styles.offlineFeedbackDeleted : {}, styles.emojisWithTextFontFamily]) : ownerName} ); diff --git a/src/components/WorkspacesListRowDisplayName/index.tsx b/src/components/WorkspacesListRowDisplayName/index.tsx index 0d3acb736d2f..a5c239f12f97 100644 --- a/src/components/WorkspacesListRowDisplayName/index.tsx +++ b/src/components/WorkspacesListRowDisplayName/index.tsx @@ -9,7 +9,7 @@ function WorkspacesListRowDisplayName({isDeleted, ownerName}: WorkspacesListRowD return ( {ownerName} diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx index 8a9f68d05d48..c27ac40c1260 100644 --- a/src/pages/home/report/comment/TextCommentFragment.tsx +++ b/src/pages/home/report/comment/TextCommentFragment.tsx @@ -120,7 +120,7 @@ function TextCommentFragment({fragment, styleAsDeleted, reportActionID, styleAsM style={[ styles.ltr, style, - styleAsDeleted ? styles.offlineFeedback.deleted : undefined, + styleAsDeleted ? styles.offlineFeedbackDeleted : undefined, styleAsMuted ? styles.colorMuted : undefined, !canUseTouchScreen() || !shouldUseNarrowLayout ? styles.userSelectText : styles.userSelectNone, ]} @@ -131,7 +131,7 @@ function TextCommentFragment({fragment, styleAsDeleted, reportActionID, styleAsM containsOnlyEmojis ? styles.onlyEmojisText : undefined, styles.ltr, style, - styleAsDeleted ? styles.offlineFeedback.deleted : undefined, + styleAsDeleted ? styles.offlineFeedbackDeleted : undefined, styleAsMuted ? styles.colorMuted : undefined, !canUseTouchScreen() || !shouldUseNarrowLayout ? styles.userSelectText : styles.userSelectNone, containsOnlyCustomEmoji && styles.customEmojiFont, @@ -146,7 +146,7 @@ function TextCommentFragment({fragment, styleAsDeleted, reportActionID, styleAsM {translate('reportActionCompose.edited')} diff --git a/src/pages/settings/Wallet/RedDotCardSection.tsx b/src/pages/settings/Wallet/RedDotCardSection.tsx index 29acf7489fc7..9fa83bfac796 100644 --- a/src/pages/settings/Wallet/RedDotCardSection.tsx +++ b/src/pages/settings/Wallet/RedDotCardSection.tsx @@ -17,7 +17,7 @@ function RedDotCardSection({title, description}: RedDotCardSectionProps) { return ( - + ( - + {translate('workspace.people.workspaceMembersCount', {count: memberCount})} {!isEmptyObject(invitedPrimaryToSecondaryLogins) && ( diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx index 2b788b3b50bf..9be3b1f6423b 100755 --- a/src/pages/workspace/WorkspacesListPage.tsx +++ b/src/pages/workspace/WorkspacesListPage.tsx @@ -327,7 +327,7 @@ function WorkspacesListPage() { layoutWidth={isLessThanMediumScreen ? CONST.LAYOUT_WIDTH.NARROW : CONST.LAYOUT_WIDTH.WIDE} brickRoadIndicator={item.brickRoadIndicator} shouldDisableThreeDotsMenu={item.disabled} - style={[item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE ? styles.offlineFeedback.deleted : {}]} + style={[item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE ? styles.offlineFeedbackDeleted : {}]} isDefault={isDefault} isLoadingBill={isLoadingBill} resetLoadingSpinnerIconIndex={resetLoadingSpinnerIconIndex} @@ -350,7 +350,7 @@ function WorkspacesListPage() { styles.mh5, styles.ph5, styles.hoveredComponentBG, - styles.offlineFeedback.deleted, + styles.offlineFeedbackDeleted, loadingSpinnerIconIndex, shouldCalculateBillNewDot, isSupportalAction, diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx index d62dc87b7bcd..51acd76564fc 100644 --- a/src/pages/workspace/WorkspacesListRow.tsx +++ b/src/pages/workspace/WorkspacesListRow.tsx @@ -164,7 +164,7 @@ function WorkspacesListRow({ const isWide = layoutWidth === CONST.LAYOUT_WIDTH.WIDE; - const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedback.deleted) : false; + const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedbackDeleted) : false; const ThreeDotMenuOrPendingIcon = ( @@ -230,7 +230,7 @@ function WorkspacesListRow({ {isNarrow && ThreeDotMenuOrPendingIcon} @@ -252,7 +252,7 @@ function WorkspacesListRow({ /> {Str.removeSMSDomain(ownerDetails?.login ?? '')} @@ -271,14 +271,14 @@ function WorkspacesListRow({ {!!workspaceType && ( {getUserFriendlyWorkspaceType(workspaceType)} )} {translate('workspace.common.plan')} diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx index 5af6d5c71bab..ca06c828e3cc 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx @@ -155,7 +155,7 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed, shouldS fill={theme.danger} additionalStyles={styles.mr1} /> - + {translate('workspace.companyCards.brokenConnectionErrorFirstPart')} ); diff --git a/src/styles/index.ts b/src/styles/index.ts index 019717227b47..66ac0094b68c 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -5037,6 +5037,39 @@ const staticStyles = (theme: ThemeColors) => height: 220, }, + offlineFeedbackDeleted: { + textDecorationLine: 'line-through', + textDecorationStyle: 'solid', + }, + offlineFeedbackPending: { + opacity: 0.5, + }, + offlineFeedbackDefault: { + // fixes a crash on iOS when we attempt to remove already unmounted children + // see https://github.com/Expensify/App/issues/48197 for more details + // it's a temporary solution while we are working on a permanent fix + opacity: Platform.OS === 'ios' ? 0.99 : undefined, + }, + offlineFeedbackError: { + flexDirection: 'row', + alignItems: 'center', + }, + offlineFeedbackContainer: { + ...spacing.pv2, + }, + offlineFeedbackTextContainer: { + flexDirection: 'column', + flex: 1, + }, + offlineFeedbackText: { + color: theme.textSupporting, + verticalAlign: 'middle', + fontSize: variables.fontSizeLabel, + }, + offlineFeedbackErrorDot: { + marginRight: 12, + }, + workflowApprovalVerticalLine: { height: 16, width: 1, @@ -5644,157 +5677,121 @@ const dynamicStyles = (theme: ThemeColors) => }, }) satisfies DynamicStyles; -const customPickerStyles = (theme: ThemeColors) => ({ - picker: (disabled = false, backgroundColor: string = theme.appBG) => - ({ - iconContainer: { - top: Math.round(variables.inputHeight * 0.5) - 11, - right: 0, - ...pointerEventsNone, - }, - - inputWeb: { - appearance: 'none', - ...(disabled ? cursor.cursorDisabled : cursor.cursorPointer), - ...picker(theme), - backgroundColor, - }, - - inputIOS: { - ...picker(theme), - }, - done: { - color: theme.text, - }, - doneDepressed: { - // Extracted from react-native-picker-select, src/styles.js - fontSize: 17, - }, - modalViewMiddle: { - backgroundColor: theme.border, - borderTopWidth: 0, - }, - modalViewBottom: { - backgroundColor: theme.highlightBG, - }, - - inputAndroid: { - ...picker(theme), - }, - }) satisfies CustomPickerStyle, - - pickerSmall: (disabled = false, backgroundColor: string = theme.highlightBG) => - ({ - inputIOS: { - ...FontUtils.fontFamily.platform.EXP_NEUE, - fontSize: variables.fontSizeSmall, - paddingLeft: 0, - paddingRight: 17, - paddingTop: 6, - paddingBottom: 6, - borderWidth: 0, - color: theme.text, - height: 26, - opacity: 1, - backgroundColor: 'transparent', - }, - done: { - color: theme.text, - }, - doneDepressed: { - // Extracted from react-native-picker-select, src/styles.js - fontSize: 17, - }, - modalViewMiddle: { - position: 'relative', - backgroundColor: theme.border, - borderTopWidth: 0, - }, - modalViewBottom: { - backgroundColor: theme.highlightBG, - }, - inputWeb: { - ...FontUtils.fontFamily.platform.EXP_NEUE, - fontSize: variables.fontSizeSmall, - paddingLeft: 0, - paddingRight: 17, - paddingTop: 6, - paddingBottom: 6, - borderWidth: 0, - color: theme.text, - appearance: 'none', - height: 26, - opacity: 1, - backgroundColor, - ...(disabled ? cursor.cursorDisabled : cursor.cursorPointer), - }, - inputAndroid: { - ...FontUtils.fontFamily.platform.EXP_NEUE, - fontSize: variables.fontSizeSmall, - paddingLeft: 0, - paddingRight: 17, - paddingTop: 6, - paddingBottom: 6, - borderWidth: 0, - color: theme.text, - height: 26, - opacity: 1, - backgroundColor: 'transparent', - }, - iconContainer: { - top: 7, - ...pointerEventsNone, - }, - icon: { - width: variables.iconSizeExtraSmall, - height: variables.iconSizeExtraSmall, - }, - chevronContainer: { - pointerEvents: 'none', - opacity: 0, - }, - }) satisfies CustomPickerStyle, -}); -// Styles that don't satisfy the StyleSheet.create typing, because they are not defined on the top level of the object -const nestedStyles = (theme: ThemeColors) => +// Styles that cannot be wrapped in StyleSheet.create because they eg. must be passed to 3rd party libraries as JS objects +const plainStyles = (theme: ThemeColors) => ({ webViewStyles: webViewStyles(theme), + textInputDesktop: addOutlineWidth(theme, {}, 0), + noOutline: addOutlineWidth(theme, {}, 0), + picker: (disabled = false, backgroundColor: string = theme.appBG) => + ({ + iconContainer: { + top: Math.round(variables.inputHeight * 0.5) - 11, + right: 0, + ...pointerEventsNone, + }, - offlineFeedback: { - deleted: { - textDecorationLine: 'line-through', - textDecorationStyle: 'solid', - }, - pending: { - opacity: 0.5, - }, - default: { - // fixes a crash on iOS when we attempt to remove already unmounted children - // see https://github.com/Expensify/App/issues/48197 for more details - // it's a temporary solution while we are working on a permanent fix - opacity: Platform.OS === 'ios' ? 0.99 : undefined, - }, - error: { - flexDirection: 'row', - alignItems: 'center', - }, - container: { - ...spacing.pv2, - }, - textContainer: { - flexDirection: 'column', - flex: 1, - }, - text: { - color: theme.textSupporting, - verticalAlign: 'middle', - fontSize: variables.fontSizeLabel, - }, - errorDot: { - marginRight: 12, - }, - }, + inputWeb: { + appearance: 'none', + ...(disabled ? cursor.cursorDisabled : cursor.cursorPointer), + ...picker(theme), + backgroundColor, + }, + + inputIOS: { + ...picker(theme), + }, + done: { + color: theme.text, + }, + doneDepressed: { + // Extracted from react-native-picker-select, src/styles.js + fontSize: 17, + }, + modalViewMiddle: { + backgroundColor: theme.border, + borderTopWidth: 0, + }, + modalViewBottom: { + backgroundColor: theme.highlightBG, + }, + inputAndroid: { + ...picker(theme), + }, + }) satisfies CustomPickerStyle, + + pickerSmall: (disabled = false, backgroundColor: string = theme.highlightBG) => + ({ + inputIOS: { + ...FontUtils.fontFamily.platform.EXP_NEUE, + fontSize: variables.fontSizeSmall, + paddingLeft: 0, + paddingRight: 17, + paddingTop: 6, + paddingBottom: 6, + borderWidth: 0, + color: theme.text, + height: 26, + opacity: 1, + backgroundColor: 'transparent', + }, + done: { + color: theme.text, + }, + doneDepressed: { + // Extracted from react-native-picker-select, src/styles.js + fontSize: 17, + }, + modalViewMiddle: { + position: 'relative', + backgroundColor: theme.border, + borderTopWidth: 0, + }, + modalViewBottom: { + backgroundColor: theme.highlightBG, + }, + inputWeb: { + ...FontUtils.fontFamily.platform.EXP_NEUE, + fontSize: variables.fontSizeSmall, + paddingLeft: 0, + paddingRight: 17, + paddingTop: 6, + paddingBottom: 6, + borderWidth: 0, + color: theme.text, + appearance: 'none', + height: 26, + opacity: 1, + backgroundColor, + ...(disabled ? cursor.cursorDisabled : cursor.cursorPointer), + }, + inputAndroid: { + ...FontUtils.fontFamily.platform.EXP_NEUE, + fontSize: variables.fontSizeSmall, + paddingLeft: 0, + paddingRight: 17, + paddingTop: 6, + paddingBottom: 6, + borderWidth: 0, + color: theme.text, + height: 26, + opacity: 1, + backgroundColor: 'transparent', + }, + iconContainer: { + top: 7, + ...pointerEventsNone, + }, + icon: { + width: variables.iconSizeExtraSmall, + height: variables.iconSizeExtraSmall, + }, + chevronContainer: { + pointerEvents: 'none', + opacity: 0, + }, + }) satisfies CustomPickerStyle, mapDirection: { lineColor: theme.success, lineWidth: 7, @@ -5804,16 +5801,13 @@ const nestedStyles = (theme: ThemeColors) => layout: {'line-join': 'round', 'line-cap': 'round'}, paint: {'line-color': theme.success, 'line-width': 7}, }, - textInputDesktop: addOutlineWidth(theme, {}, 0), - noOutline: addOutlineWidth(theme, {}, 0), }) satisfies Styles; const styles = (theme: ThemeColors) => ({ ...staticStyles(theme), ...dynamicStyles(theme), - ...customPickerStyles(theme), - ...nestedStyles(theme), + ...plainStyles(theme), }) satisfies Styles; type ThemeStyles = ReturnType; diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 4b3cfaebbde2..3d17445b9ddc 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1554,7 +1554,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ /** * Get the styles of the text next to dot indicators */ - getDotIndicatorTextStyles: (isErrorText = true): TextStyle => (isErrorText ? {...styles.offlineFeedback.text, color: styles.formError.color} : {...styles.offlineFeedback.text}), + getDotIndicatorTextStyles: (isErrorText = true): TextStyle => (isErrorText ? {...styles.offlineFeedbackText, color: styles.formError.color} : {...styles.offlineFeedbackText}), getEmojiReactionBubbleStyle: (isHovered: boolean, hasUserReacted: boolean, isContextMenu = false): ViewStyle => { let backgroundColor = theme.border; From b850eeaaeb7f0dc386ad4a5ceb02df48d680048e Mon Sep 17 00:00:00 2001 From: staszekscp Date: Thu, 25 Sep 2025 09:28:19 +0200 Subject: [PATCH 2/4] Fix linter by using named imports in WorkspacesListRowDisplayName --- .../WorkspacesListRowDisplayName/index.native.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/WorkspacesListRowDisplayName/index.native.tsx b/src/components/WorkspacesListRowDisplayName/index.native.tsx index 399816190109..57d46733c779 100644 --- a/src/components/WorkspacesListRowDisplayName/index.native.tsx +++ b/src/components/WorkspacesListRowDisplayName/index.native.tsx @@ -1,12 +1,12 @@ import React from 'react'; import Text from '@components/Text'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as EmojiUtils from '@libs/EmojiUtils'; +import {splitTextWithEmojis, getProcessedText} from '@libs/EmojiUtils'; import type WorkspacesListRowDisplayNameProps from './types'; function WorkspacesListRowDisplayName({isDeleted, ownerName}: WorkspacesListRowDisplayNameProps) { const styles = useThemeStyles(); - const processedOwnerName = EmojiUtils.splitTextWithEmojis(ownerName); + const processedOwnerName = splitTextWithEmojis(ownerName); return ( {processedOwnerName.length !== 0 - ? EmojiUtils.getProcessedText(processedOwnerName, [styles.labelStrong, isDeleted ? styles.offlineFeedbackDeleted : {}, styles.emojisWithTextFontFamily]) + ? getProcessedText(processedOwnerName, [styles.labelStrong, isDeleted ? styles.offlineFeedbackDeleted : {}, styles.emojisWithTextFontFamily]) : ownerName} ); From 347b374ce9048642610c36d403b7c8eba8519712 Mon Sep 17 00:00:00 2001 From: staszekscp Date: Thu, 25 Sep 2025 09:31:09 +0200 Subject: [PATCH 3/4] Fix prettier --- src/components/WorkspacesListRowDisplayName/index.native.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/WorkspacesListRowDisplayName/index.native.tsx b/src/components/WorkspacesListRowDisplayName/index.native.tsx index 57d46733c779..d6d47d3b11ac 100644 --- a/src/components/WorkspacesListRowDisplayName/index.native.tsx +++ b/src/components/WorkspacesListRowDisplayName/index.native.tsx @@ -1,7 +1,7 @@ import React from 'react'; import Text from '@components/Text'; import useThemeStyles from '@hooks/useThemeStyles'; -import {splitTextWithEmojis, getProcessedText} from '@libs/EmojiUtils'; +import {getProcessedText, splitTextWithEmojis} from '@libs/EmojiUtils'; import type WorkspacesListRowDisplayNameProps from './types'; function WorkspacesListRowDisplayName({isDeleted, ownerName}: WorkspacesListRowDisplayNameProps) { From e6cd2d63d595876cfe16240ba7c8970734508e96 Mon Sep 17 00:00:00 2001 From: staszekscp Date: Mon, 6 Oct 2025 13:08:07 +0200 Subject: [PATCH 4/4] Update Mobile-Expensify --- Mobile-Expensify | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Mobile-Expensify b/Mobile-Expensify index 549d225df547..226a8a55a3d7 160000 --- a/Mobile-Expensify +++ b/Mobile-Expensify @@ -1 +1 @@ -Subproject commit 549d225df54727cb4360a8db0e0b5218e884e971 +Subproject commit 226a8a55a3d716ef61a9dc96f84b5bb077b9f0a6