import {defaultStyles as defaultPickerStyles} from 'react-native-picker-select/src/styles';
import lodashClamp from 'lodash/clamp';
import fontFamily from './fontFamily';
import addOutlineWidth from './addOutlineWidth';
import defaultTheme from './themes/default';
import fontWeightBold from './fontWeight/bold';
import variables from './variables';
import spacing from './utilities/spacing';
import sizing from './utilities/sizing';
import flex from './utilities/flex';
import display from './utilities/display';
import overflow from './utilities/overflow';
import whiteSpace from './utilities/whiteSpace';
import wordBreak from './utilities/wordBreak';
import positioning from './utilities/positioning';
import codeStyles from './codeStyles';
import visibility from './utilities/visibility';
import writingDirection from './utilities/writingDirection';
import optionAlternateTextPlatformStyles from './optionAlternateTextPlatformStyles';
import pointerEventsNone from './pointerEventsNone';
import pointerEventsAuto from './pointerEventsAuto';
import getPopOverVerticalOffset from './getPopOverVerticalOffset';
import overflowXHidden from './overflowXHidden';
import CONST from '../CONST';
import * as Browser from '../libs/Browser';
import cursor from './utilities/cursor';
import userSelect from './utilities/userSelect';
import textUnderline from './utilities/textUnderline';
import objectFit from './utilities/objectFit';
// touchCallout is an iOS safari only property that controls the display of the callout information when you touch and hold a target
const touchCalloutNone = Browser.isMobileSafari() ? {WebkitTouchCallout: 'none'} : {};
// to prevent vertical text offset in Safari for badges, new lineHeight values have been added
const lineHeightBadge = Browser.isSafari() ? {lineHeight: variables.lineHeightXSmall} : {lineHeight: variables.lineHeightNormal};
const picker = (theme) => ({
backgroundColor: theme.transparent,
color: theme.text,
fontFamily: fontFamily.EXP_NEUE,
fontSize: variables.fontSizeNormal,
lineHeight: variables.fontSizeNormalHeight,
paddingBottom: 8,
paddingTop: 23,
paddingLeft: 0,
paddingRight: 25,
height: variables.inputHeight,
borderWidth: 0,
textAlign: 'left',
});
const link = (theme) => ({
color: theme.link,
textDecorationColor: theme.link,
fontFamily: fontFamily.EXP_NEUE,
});
const baseCodeTagStyles = (theme) => ({
borderWidth: 1,
borderRadius: 5,
borderColor: theme.border,
backgroundColor: theme.textBackground,
});
const headlineFont = {
fontFamily: fontFamily.EXP_NEW_KANSAS_MEDIUM,
fontWeight: '500',
};
const webViewStyles = (theme) => ({
// As of react-native-render-html v6, don't declare distinct styles for
// custom renderers, the API for custom renderers has changed. Declare the
// styles in the below "tagStyles" instead. If you need to reuse those
// styles from the renderer, just pass the "style" prop to the underlying
// component.
tagStyles: {
em: {
fontFamily: fontFamily.EXP_NEUE,
fontStyle: 'italic',
},
del: {
textDecorationLine: 'line-through',
textDecorationStyle: 'solid',
},
strong: {
fontFamily: fontFamily.EXP_NEUE,
fontWeight: 'bold',
},
a: link(theme),
ul: {
maxWidth: '100%',
},
ol: {
maxWidth: '100%',
},
li: {
flexShrink: 1,
},
blockquote: {
borderLeftColor: theme.border,
borderLeftWidth: 4,
paddingLeft: 12,
marginTop: 4,
marginBottom: 4,
// Overwrite default HTML margin for blockquotes
marginLeft: 0,
},
pre: {
...baseCodeTagStyles(theme),
paddingTop: 12,
paddingBottom: 12,
paddingRight: 8,
paddingLeft: 8,
fontFamily: fontFamily.MONOSPACE,
marginTop: 0,
marginBottom: 0,
},
code: {
...baseCodeTagStyles(theme),
...codeStyles.codeTextStyle,
paddingLeft: 5,
paddingRight: 5,
fontFamily: fontFamily.MONOSPACE,
fontSize: 13,
},
img: {
borderColor: theme.border,
borderRadius: variables.componentBorderRadiusNormal,
borderWidth: 1,
...touchCalloutNone,
},
p: {
marginTop: 0,
marginBottom: 0,
},
h1: {
fontSize: variables.fontSizeLarge,
marginBottom: 8,
},
},
baseFontStyle: {
color: theme.text,
fontSize: variables.fontSizeNormal,
fontFamily: fontFamily.EXP_NEUE,
flex: 1,
lineHeight: variables.fontSizeNormalHeight,
...writingDirection.ltr,
},
});
const styles = (theme) => ({
// Add all of our utility and helper styles
...spacing,
...sizing,
...flex,
...display,
...overflow,
...positioning,
...wordBreak,
...whiteSpace,
...writingDirection,
...cursor,
...userSelect,
...textUnderline,
...theme, // TODO: Should we do this?
...objectFit,
autoCompleteSuggestionsContainer: {
backgroundColor: theme.appBG,
borderRadius: 8,
borderWidth: 1,
borderColor: theme.border,
justifyContent: 'center',
boxShadow: variables.popoverMenuShadow,
position: 'absolute',
left: 0,
right: 0,
paddingVertical: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING,
},
autoCompleteSuggestionContainer: {
flexDirection: 'row',
alignItems: 'center',
},
emojiSuggestionsEmoji: {
fontSize: variables.fontSizeMedium,
width: 51,
textAlign: 'center',
},
emojiSuggestionsText: {
fontSize: variables.fontSizeMedium,
flex: 1,
...wordBreak.breakWord,
...spacing.pr4,
},
mentionSuggestionsAvatarContainer: {
width: 24,
height: 24,
alignItems: 'center',
justifyContent: 'center',
},
mentionSuggestionsText: {
fontSize: variables.fontSizeMedium,
...spacing.ml2,
},
mentionSuggestionsDisplayName: {
fontFamily: fontFamily.EXP_NEUE_BOLD,
fontWeight: fontWeightBold,
},
mentionSuggestionsHandle: {
color: theme.textSupporting,
},
webViewStyles: webViewStyles(theme),
link: link(theme),
linkMuted: {
color: theme.textSupporting,
textDecorationColor: theme.textSupporting,
fontFamily: fontFamily.EXP_NEUE,
},
linkMutedHovered: {
color: theme.textMutedReversed,
},
highlightBG: {
backgroundColor: theme.highlightBG,
},
appBG: {
backgroundColor: theme.appBG,
},
h4: {
fontFamily: fontFamily.EXP_NEUE_BOLD,
fontSize: variables.fontSizeLabel,
fontWeight: fontWeightBold,
},
textAlignCenter: {
textAlign: 'center',
},
textAlignRight: {
textAlign: 'right',
},
textAlignLeft: {
textAlign: 'left',
},
textUnderline: {
textDecorationLine: 'underline',
},
label: {
fontSize: variables.fontSizeLabel,
lineHeight: variables.lineHeightLarge,
},
textLabel: {
color: theme.text,
fontSize: variables.fontSizeLabel,
lineHeight: variables.lineHeightLarge,
},
mutedTextLabel: {
color: theme.textSupporting,
fontSize: variables.fontSizeLabel,
lineHeight: variables.lineHeightLarge,
},
textMicro: {
fontFamily: fontFamily.EXP_NEUE,
fontSize: variables.fontSizeSmall,
lineHeight: variables.lineHeightSmall,
},
textMicroBold: {
color: theme.text,
fontWeight: fontWeightBold,
fontFamily: fontFamily.EXP_NEUE_BOLD,
fontSize: variables.fontSizeSmall,
lineHeight: variables.lineHeightSmall,
},
textMicroSupporting: {
color: theme.textSupporting,
fontFamily: fontFamily.EXP_NEUE,
fontSize: variables.fontSizeSmall,
lineHeight: variables.lineHeightSmall,
},
textExtraSmallSupporting: {
color: theme.textSupporting,
fontFamily: fontFamily.EXP_NEUE,
fontSize: variables.fontSizeExtraSmall,
},
textNormal: {
fontSize: variables.fontSizeNormal,
},
textLarge: {
fontSize: variables.fontSizeLarge,
},
textXLarge: {
fontSize: variables.fontSizeXLarge,
},
textXXLarge: {
fontSize: variables.fontSizeXXLarge,
},
textXXXLarge: {
fontSize: variables.fontSizeXXXLarge,
},
textHero: {
fontSize: variables.fontSizeHero,
fontFamily: fontFamily.EXP_NEW_KANSAS_MEDIUM,
lineHeight: variables.lineHeightHero,
},
textStrong: {
fontFamily: fontFamily.EXP_NEUE_BOLD,
fontWeight: fontWeightBold,
},
textItalic: {
fontFamily: fontFamily.EXP_NEUE_ITALIC,
fontStyle: 'italic',
},
textHeadline: {
...headlineFont,
...whiteSpace.preWrap,
color: theme.heading,
fontSize: variables.fontSizeXLarge,
lineHeight: variables.lineHeightXXLarge,
},
textHeadlineH1: {
...headlineFont,
...whiteSpace.preWrap,
color: theme.heading,
fontSize: variables.fontSizeh1,
lineHeight: variables.lineHeightSizeh1,
},
textDecorationNoLine: {
textDecorationLine: 'none',
},
textWhite: {
color: theme.textLight,
},
textBlue: {
color: theme.link,
},
textUppercase: {
textTransform: 'uppercase',
},
textNoWrap: {
...whiteSpace.noWrap,
},
colorReversed: {
color: theme.textReversed,
},
colorMutedReversed: {
color: theme.textMutedReversed,
},
colorMuted: {
color: theme.textSupporting,
},
bgTransparent: {
backgroundColor: 'transparent',
},
bgDark: {
backgroundColor: theme.inverse,
},
opacity0: {
opacity: 0,
},
opacity1: {
opacity: 1,
},
textDanger: {
color: theme.danger,
},
borderRadiusNormal: {
borderRadius: variables.buttonBorderRadius,
},
button: {
backgroundColor: theme.buttonDefaultBG,
borderRadius: variables.buttonBorderRadius,
minHeight: variables.componentSizeLarge,
justifyContent: 'center',
...spacing.ph3,
},
buttonContainer: {
padding: 1,
borderRadius: variables.buttonBorderRadius,
},
buttonText: {
color: theme.text,
fontFamily: fontFamily.EXP_NEUE_BOLD,
fontSize: variables.fontSizeNormal,
fontWeight: fontWeightBold,
textAlign: 'center',
flexShrink: 1,
// It is needed to unset the Lineheight. We don't need it for buttons as button always contains single line of text.
// It allows to vertically center the text.
lineHeight: undefined,
// Add 1px to the Button text to give optical vertical alignment.
paddingBottom: 1,
},
buttonSmall: {
borderRadius: variables.buttonBorderRadius,
minHeight: variables.componentSizeSmall,
paddingTop: 4,
paddingHorizontal: 14,
paddingBottom: 4,
backgroundColor: theme.buttonDefaultBG,
},
buttonMedium: {
borderRadius: variables.buttonBorderRadius,
minHeight: variables.componentSizeNormal,
paddingTop: 12,
paddingRight: 16,
paddingBottom: 12,
paddingLeft: 16,
backgroundColor: theme.buttonDefaultBG,
},
buttonLarge: {
borderRadius: variables.buttonBorderRadius,
minHeight: variables.componentSizeLarge,
paddingTop: 8,
paddingRight: 10,
paddingBottom: 8,
paddingLeft: 18,
backgroundColor: theme.buttonDefaultBG,
},
buttonSmallText: {
fontSize: variables.fontSizeSmall,
fontFamily: fontFamily.EXP_NEUE_BOLD,
fontWeight: fontWeightBold,
textAlign: 'center',
},
buttonMediumText: {
fontSize: variables.fontSizeLabel,
fontFamily: fontFamily.EXP_NEUE_BOLD,
fontWeight: fontWeightBold,
textAlign: 'center',
},
buttonLargeText: {
fontSize: variables.fontSizeNormal,
fontFamily: fontFamily.EXP_NEUE_BOLD,
fontWeight: fontWeightBold,
textAlign: 'center',
},
buttonDefaultHovered: {
backgroundColor: theme.buttonHoveredBG,
borderWidth: 0,
},
buttonSuccess: {
backgroundColor: theme.success,
borderWidth: 0,
},
buttonOpacityDisabled: {
opacity: 0.5,
},
buttonSuccessHovered: {
backgroundColor: theme.successHover,
borderWidth: 0,
},
buttonDanger: {
backgroundColor: theme.danger,
borderWidth: 0,
},
buttonDangerHovered: {
backgroundColor: theme.dangerHover,
borderWidth: 0,
},
buttonDisabled: {
backgroundColor: theme.buttonDefaultBG,
borderWidth: 0,
},
buttonDivider: {
height: variables.dropDownButtonDividerHeight,
borderWidth: 0.7,
borderColor: theme.text,
},
noBorderRadius: {
borderRadius: 0,
},
noRightBorderRadius: {
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
},
noLeftBorderRadius: {
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
},
buttonCTA: {
paddingVertical: 6,
...spacing.mh4,
},
buttonCTAIcon: {
marginRight: 22,
// Align vertically with the Button text
paddingBottom: 1,
paddingTop: 1,
},
buttonConfirm: {
margin: 20,
},
attachmentButtonBigScreen: {
minWidth: 300,
alignSelf: 'center',
},
buttonConfirmText: {
paddingLeft: 20,
paddingRight: 20,
},
buttonSuccessText: {
color: theme.textLight,
},
buttonDangerText: {
color: theme.textLight,
},
hoveredComponentBG: {
backgroundColor: theme.hoverComponentBG,
},
activeComponentBG: {
backgroundColor: theme.activeComponentBG,
},
touchableButtonImage: {
alignItems: 'center',
height: variables.componentSizeNormal,
justifyContent: 'center',
width: variables.componentSizeNormal,
},
visuallyHidden: {
...visibility.hidden,
overflow: 'hidden',
width: 0,
height: 0,
},
visibilityHidden: {
...visibility.hidden,
},
loadingVBAAnimation: {
width: 140,
height: 140,
},
pickerSmall: (backgroundColor = theme.highlightBG) => ({
inputIOS: {
fontFamily: fontFamily.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: {
fontSize: defaultPickerStyles.done.fontSize,
},
modalViewMiddle: {
backgroundColor: theme.border,
borderTopWidth: 0,
},
modalViewBottom: {
backgroundColor: theme.highlightBG,
},
inputWeb: {
fontFamily: fontFamily.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,
...cursor.cursorPointer,
},
inputAndroid: {
fontFamily: fontFamily.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,
},
}),
badge: {
backgroundColor: theme.border,
borderRadius: 14,
height: variables.iconSizeNormal,
flexDirection: 'row',
paddingHorizontal: 7,
alignItems: 'center',
},
badgeSuccess: {
backgroundColor: theme.success,
},
badgeSuccessPressed: {
backgroundColor: theme.successHover,
},
badgeAdHocSuccess: {
backgroundColor: theme.badgeAdHoc,
},
badgeAdHocSuccessPressed: {
backgroundColor: theme.badgeAdHocHover,
},
badgeDanger: {
backgroundColor: theme.danger,
},
badgeDangerPressed: {
backgroundColor: theme.dangerPressed,
},
badgeText: {
color: theme.text,
fontSize: variables.fontSizeSmall,
...lineHeightBadge,
...whiteSpace.noWrap,
},
border: {
borderWidth: 1,
borderRadius: variables.componentBorderRadius,
borderColor: theme.border,
},
borderColorFocus: {
borderColor: theme.borderFocus,
},
borderColorDanger: {
borderColor: theme.danger,
},
textInputDisabled: {
// Adding disabled color theme to indicate user that the field is not editable.
backgroundColor: theme.highlightBG,
borderBottomWidth: 2,
borderColor: theme.borderLighter,
// Adding browser specefic style to bring consistency between Safari and other platforms.
// Applying the Webkit styles only to browsers as it is not available in native.
...(Browser.getBrowser()
? {
WebkitTextFillColor: theme.textSupporting,
WebkitOpacity: 1,
}
: {}),
color: theme.textSupporting,
},
uploadReceiptView: (isSmallScreenWidth) => ({
borderRadius: variables.componentBorderRadiusLarge,
borderWidth: isSmallScreenWidth ? 0 : 2,
borderColor: theme.borderFocus,
borderStyle: 'dotted',
marginBottom: 20,
marginLeft: 20,
marginRight: 20,
justifyContent: 'center',
alignItems: 'center',
paddingVertical: 40,
gap: 4,
flex: 1,
}),
receiptViewTextContainer: {
paddingHorizontal: 40,
...sizing.w100,
},
cameraView: {
flex: 1,
overflow: 'hidden',
borderRadius: 28,
borderStyle: 'solid',
borderWidth: 8,
backgroundColor: theme.highlightBG,
borderColor: theme.appBG,
display: 'flex',
justifyContent: 'center',
justifyItems: 'center',
},
permissionView: {
paddingVertical: 108,
paddingHorizontal: 61,
alignItems: 'center',
justifyContent: 'center',
},
headerAnonymousFooter: {
color: theme.heading,
fontFamily: fontFamily.EXP_NEW_KANSAS_MEDIUM,
fontSize: variables.fontSizeXLarge,
lineHeight: variables.lineHeightXXLarge,
},
headerText: {
color: theme.heading,
fontFamily: fontFamily.EXP_NEUE_BOLD,
fontSize: variables.fontSizeNormal,
fontWeight: fontWeightBold,
},
headerGap: {
height: CONST.DESKTOP_HEADER_PADDING,
},
reportOptions: {
marginLeft: 8,
},
chatItemComposeSecondaryRow: {
height: 15,
marginBottom: 5,
marginTop: 5,
},
chatItemComposeSecondaryRowSubText: {
color: theme.textSupporting,
fontFamily: fontFamily.EXP_NEUE,
fontSize: variables.fontSizeSmall,
lineHeight: variables.lineHeightSmall,
},
chatItemComposeSecondaryRowOffset: {
marginLeft: variables.chatInputSpacing,
},
offlineIndicator: {
marginLeft: variables.chatInputSpacing,
},
offlineIndicatorMobile: {
paddingLeft: 20,
paddingTop: 5,
paddingBottom: 30,
marginBottom: -25,
},
offlineIndicatorRow: {
height: 25,
},
// Actions
actionAvatar: {
borderRadius: 20,
},
componentHeightLarge: {
height: variables.inputHeight,
},
calendarHeader: {
height: 50,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: 15,
paddingRight: 5,
...userSelect.userSelectNone,
},
calendarDayRoot: {
flex: 1,
height: 45,
justifyContent: 'center',
alignItems: 'center',
...userSelect.userSelectNone,
},
calendarDayContainer: {
width: 30,
height: 30,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 15,
overflow: 'hidden',
},
calendarDayContainerSelected: {
backgroundColor: theme.buttonDefaultBG,
},
/**
* @param {number} textInputHeight
* @param {number} minHeight
* @param {number} maxHeight
* @returns {object}
*/
autoGrowHeightInputContainer: (textInputHeight, minHeight, maxHeight) => ({
height: lodashClamp(textInputHeight, minHeight, maxHeight),
minHeight,
}),
autoGrowHeightHiddenInput: (maxWidth, maxHeight) => ({
maxWidth,
maxHeight: maxHeight && maxHeight + 1,
overflow: 'hidden',
}),
textInputContainer: {
flex: 1,
justifyContent: 'center',
height: '100%',
backgroundColor: 'transparent',
borderBottomWidth: 2,
borderColor: theme.border,
overflow: 'hidden',
},
textInputLabel: {
position: 'absolute',
left: 0,
top: 0,
fontSize: variables.fontSizeNormal,
color: theme.textSupporting,
fontFamily: fontFamily.EXP_NEUE,
width: '100%',
},
textInputLabelBackground: {
position: 'absolute',
top: 0,
width: '100%',
height: 23,
backgroundColor: theme.componentBG,
},
textInputLabelDesktop: {
transformOrigin: 'left center',
},
textInputLabelTransformation: (translateY, translateX, scale) => ({
transform: [{translateY}, {translateX}, {scale}],
}),
baseTextInput: {
fontFamily: fontFamily.EXP_NEUE,
fontSize: variables.fontSizeNormal,
lineHeight: variables.lineHeightXLarge,
color: theme.text,
paddingTop: 23,
paddingBottom: 8,
paddingLeft: 0,
borderWidth: 0,
},
textInputMultiline: {
scrollPadding: '23px 0 0 0',
},
textInputMultilineContainer: {
paddingTop: 23,
},
textInputAndIconContainer: {
flex: 1,
height: '100%',
zIndex: -1,
flexDirection: 'row',
},
textInputDesktop: addOutlineWidth({}, 0),
textInputIconContainer: {
paddingHorizontal: 11,
justifyContent: 'center',
margin: 1,
},
secureInput: {
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
},
textInput: {
backgroundColor: 'transparent',
borderRadius: variables.componentBorderRadiusNormal,
height: variables.inputComponentSizeNormal,
borderColor: theme.border,
borderWidth: 1,
color: theme.text,
fontFamily: fontFamily.EXP_NEUE,
fontSize: variables.fontSizeNormal,
paddingLeft: 12,
paddingRight: 12,
paddingTop: 10,
paddingBottom: 10,
textAlignVertical: 'center',
},
textInputPrefixWrapper: {
position: 'absolute',
left: 0,
top: 0,
height: variables.inputHeight,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
paddingTop: 23,
paddingBottom: 8,
},
textInputPrefix: {
color: theme.text,
fontFamily: fontFamily.EXP_NEUE,
fontSize: variables.fontSizeNormal,
textAlignVertical: 'center',
},
pickerContainer: {
borderBottomWidth: 2,
paddingLeft: 0,
borderStyle: 'solid',
borderColor: theme.border,
justifyContent: 'center',
backgroundColor: 'transparent',
height: variables.inputHeight,
overflow: 'hidden',
},
pickerContainerSmall: {
height: variables.inputHeightSmall,
},
pickerLabel: {
position: 'absolute',
left: 0,
top: 6,
zIndex: 1,
},
picker: (disabled = false, backgroundColor = 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: {
fontSize: defaultPickerStyles.done.fontSize,
},
modalViewMiddle: {
backgroundColor: theme.border,
borderTopWidth: 0,
},
modalViewBottom: {
backgroundColor: theme.highlightBG,
},
inputAndroid: {
...picker(theme),
},
}),
disabledText: {
color: theme.icon,
},
inputDisabled: {
backgroundColor: theme.highlightBG,
color: theme.icon,
},
noOutline: addOutlineWidth({}, 0),
textLabelSupporting: {
fontFamily: fontFamily.EXP_NEUE,
fontSize: variables.fontSizeLabel,
color: theme.textSupporting,
},
textLabelError: {
fontFamily: fontFamily.EXP_NEUE,
fontSize: variables.fontSizeLabel,
color: theme.textError,
},
textReceiptUpload: {
...headlineFont,
fontSize: variables.fontSizeXLarge,
color: theme.textLight,
textAlign: 'center',
},
subTextReceiptUpload: {
fontFamily: fontFamily.EXP_NEUE,
lineHeight: variables.lineHeightLarge,
textAlign: 'center',
color: theme.textLight,
},
furtherDetailsText: {
fontFamily: fontFamily.EXP_NEUE,
fontSize: variables.fontSizeSmall,
color: theme.textSupporting,
},
lh16: {
lineHeight: 16,
},
lh20: {
lineHeight: 20,
},
lh140Percent: {
lineHeight: '140%',
},
formHelp: {
color: theme.textSupporting,
fontSize: variables.fontSizeLabel,
lineHeight: variables.lineHeightLarge,
marginBottom: 4,
},
formError: {
color: theme.textError,
fontSize: variables.fontSizeLabel,
lineHeight: variables.formErrorLineHeight,
marginBottom: 4,
},
formSuccess: {
color: theme.success,
fontSize: variables.fontSizeLabel,
lineHeight: 18,
marginBottom: 4,
},
signInPage: {
backgroundColor: theme.highlightBG,
minHeight: '100%',
flex: 1,
},
signInPageHeroCenter: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'center',
alignItems: 'center',
},
signInPageGradient: {
height: '100%',
width: 540,
position: 'absolute',
top: 0,
left: 0,
},
signInPageGradientMobile: {
height: 300,
width: 800,
position: 'absolute',
top: 0,
left: 0,
},
signInBackground: {
position: 'absolute',
bottom: 0,
left: 0,
minHeight: 700,
},
signInPageInner: {
marginLeft: 'auto',
marginRight: 'auto',
height: '100%',
width: '100%',
},
signInPageContentTopSpacer: {
maxHeight: 132,
minHeight: 24,
},
signInPageContentTopSpacerSmallScreens: {
maxHeight: 132,
minHeight: 45,
},
signInPageLeftContainer: {
paddingLeft: 40,
paddingRight: 40,
},
signInPageLeftContainerWide: {
maxWidth: variables.sideBarWidth,
},
signInPageWelcomeFormContainer: {
maxWidth: CONST.SIGN_IN_FORM_WIDTH,
},
signInPageWelcomeTextContainer: {
width: CONST.SIGN_IN_FORM_WIDTH,
},
changeExpensifyLoginLinkContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
...wordBreak.breakWord,
},
// Sidebar Styles
sidebar: {
backgroundColor: theme.sidebar,
height: '100%',
},
sidebarHeaderContainer: {
flexDirection: 'row',
paddingHorizontal: 20,
paddingVertical: 19,
justifyContent: 'space-between',
alignItems: 'center',
},
subNavigationContainer: {
backgroundColor: theme.sidebar,
flex: 1,
borderTopLeftRadius: variables.componentBorderRadiusRounded,
},
sidebarAnimatedWrapperContainer: {
height: '100%',
position: 'absolute',
},
sidebarFooter: {
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
paddingVertical: variables.lineHeightXLarge,
width: '100%',
},
sidebarAvatar: {
backgroundColor: theme.icon,
borderRadius: 20,
height: variables.componentSizeNormal,
width: variables.componentSizeNormal,
},
statusIndicator: (backgroundColor = theme.danger) => ({
borderColor: theme.sidebar,
backgroundColor,
borderRadius: 8,
borderWidth: 2,
position: 'absolute',
right: -2,
top: -1,
height: 16,
width: 16,
zIndex: 10,
}),
floatingActionButtonContainer: {
position: 'absolute',
left: 16,
// The bottom of the floating action button should align with the bottom of the compose box.
// The value should be equal to the height + marginBottom + marginTop of chatItemComposeSecondaryRow
bottom: 25,
},
floatingActionButton: {
backgroundColor: theme.success,
height: variables.componentSizeNormal,
width: variables.componentSizeNormal,
borderRadius: 999,
alignItems: 'center',
justifyContent: 'center',
},
sidebarFooterUsername: {
color: theme.heading,
fontSize: variables.fontSizeLabel,
fontWeight: '700',
width: 200,
textOverflow: 'ellipsis',
overflow: 'hidden',
...whiteSpace.noWrap,
},
sidebarFooterLink: {
color: theme.textSupporting,
fontSize: variables.fontSizeSmall,
textDecorationLine: 'none',
fontFamily: fontFamily.EXP_NEUE,
lineHeight: 20,
},
sidebarListContainer: {
scrollbarWidth: 'none',
paddingBottom: 4,
},
sidebarListItem: {
justifyContent: 'center',
textDecorationLine: 'none',
},
RHPNavigatorContainer: (isSmallScreenWidth) => ({
width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
position: 'absolute',
right: 0,
height: '100%',
}),
onlyEmojisText: {
fontSize: variables.fontSizeOnlyEmojis,
lineHeight: variables.fontSizeOnlyEmojisHeight,
},
onlyEmojisTextLineHeight: {
lineHeight: variables.fontSizeOnlyEmojisHeight,
},
createMenuPositionSidebar: (windowHeight) => ({
horizontal: 18,
vertical: windowHeight - 75,
}),
createMenuPositionProfile: (windowWidth) => ({
horizontal: windowWidth - 355,
...getPopOverVerticalOffset(162),
}),
createMenuPositionReportActionCompose: (windowHeight) => ({
horizontal: 18 + variables.sideBarWidth,
vertical: windowHeight - 83,
}),
createMenuPositionRightSidepane: {
right: 18,
bottom: 75,
},
createMenuContainer: {
width: variables.sideBarWidth - 40,
paddingVertical: 12,
},
createMenuHeaderText: {
fontFamily: fontFamily.EXP_NEUE,
fontSize: variables.fontSizeLabel,
color: theme.heading,
},
popoverMenuItem: {
flexDirection: 'row',
borderRadius: 0,
paddingHorizontal: 20,
paddingVertical: 12,
justifyContent: 'space-between',
width: '100%',
},
popoverMenuIcon: {
width: variables.componentSizeNormal,
justifyContent: 'center',
alignItems: 'center',
},
popoverMenuText: {
fontSize: variables.fontSizeNormal,
color: theme.heading,
},
popoverInnerContainer: {
paddingTop: 0, // adjusting this because the mobile modal adds additional padding that we don't need for our layout
maxHeight: '95%',
},
menuItemTextContainer: {
minHeight: variables.componentSizeNormal,
},
chatLinkRowPressable: {
minWidth: 0,
textDecorationLine: 'none',
flex: 1,
},
sidebarLink: {
textDecorationLine: 'none',
},
sidebarLinkLHN: {
textDecorationLine: 'none',
marginLeft: 12,
marginRight: 12,
borderRadius: 8,
},
sidebarLinkInner: {
alignItems: 'center',
flexDirection: 'row',
paddingLeft: 20,
paddingRight: 20,
},
sidebarLinkInnerLHN: {
alignItems: 'center',
flexDirection: 'row',
paddingLeft: 8,
paddingRight: 8,
},
sidebarLinkText: {
color: theme.textSupporting,
fontSize: variables.fontSizeNormal,
textDecorationLine: 'none',
overflow: 'hidden',
},
sidebarLinkHover: {
backgroundColor: theme.sidebarHover,
},
sidebarLinkHoverLHN: {
backgroundColor: theme.highlightBG,
},
sidebarLinkActive: {
backgroundColor: theme.border,
textDecorationLine: 'none',
},
sidebarLinkActiveLHN: {
backgroundColor: theme.highlightBG,
textDecorationLine: 'none',
},
sidebarLinkTextBold: {
fontFamily: fontFamily.EXP_NEUE_BOLD,
fontWeight: fontWeightBold,
color: theme.heading,
},
sidebarLinkActiveText: {
color: theme.textSupporting,
fontSize: variables.fontSizeNormal,
textDecorationLine: 'none',
overflow: 'hidden',
},
optionItemAvatarNameWrapper: {
minWidth: 0,
flex: 1,
},
optionDisplayName: {
fontFamily: fontFamily.EXP_NEUE,
minHeight: variables.alternateTextHeight,
lineHeight: variables.lineHeightXLarge,
...whiteSpace.noWrap,
},
optionDisplayNameCompact: {
minWidth: 'auto',
flexBasis: 'auto',
flexGrow: 0,
flexShrink: 1,
},
displayNameTooltipEllipsis: {
position: 'absolute',
opacity: 0,
right: 0,
bottom: 0,
},
optionAlternateText: {
minHeight: variables.alternateTextHeight,
lineHeight: variables.lineHeightXLarge,
},
optionAlternateTextCompact: {
flexShrink: 1,
flexGrow: 1,
flexBasis: 'auto',
...optionAlternateTextPlatformStyles,
},
optionRow: {
minHeight: variables.optionRowHeight,
paddingTop: 12,
paddingBottom: 12,
},
optionRowSelected: {
backgroundColor: theme.activeComponentBG,
},
optionRowDisabled: {
color: theme.textSupporting,
},
optionRowCompact: {
height: variables.optionRowHeightCompact,
paddingTop: 12,
paddingBottom: 12,
},
optionsListSectionHeader: {
marginTop: 8,
marginBottom: 4,
},
overlayStyles: (current) => ({
position: 'fixed',
// We need to stretch the overlay to cover the sidebar and the translate animation distance.
left: -2 * variables.sideBarWidth,
top: 0,
bottom: 0,
right: 0,
backgroundColor: theme.overlay,
opacity: current.progress.interpolate({
inputRange: [0, 1],
outputRange: [0, variables.overlayOpacity],
extrapolate: 'clamp',
}),
}),
appContent: {
backgroundColor: theme.appBG,
overflow: 'hidden',
},
appContentHeader: {
height: variables.contentHeaderHeight,
justifyContent: 'center',
display: 'flex',
paddingRight: 20,
},
appContentHeaderTitle: {
alignItems: 'center',
flexDirection: 'row',
},
LHNToggle: {
alignItems: 'center',
height: variables.contentHeaderHeight,
justifyContent: 'center',
paddingRight: 10,
paddingLeft: 20,
},
LHNToggleIcon: {
height: 15,
width: 18,
},
chatContentScrollView: {
flexGrow: 1,
justifyContent: 'flex-start',
paddingBottom: 16,
},
// Chat Item
chatItem: {
display: 'flex',
flexDirection: 'row',
paddingTop: 8,
paddingBottom: 8,
paddingLeft: 20,
paddingRight: 20,
},
chatItemRightGrouped: {
flexGrow: 1,
flexShrink: 1,
flexBasis: 0,
position: 'relative',
marginLeft: variables.chatInputSpacing,
},
chatItemRight: {
flexGrow: 1,
flexShrink: 1,
flexBasis: 0,
position: 'relative',
},
chatItemMessageHeader: {
alignItems: 'center',
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
},
chatItemMessageHeaderSender: {
color: theme.heading,
fontFamily: fontFamily.EXP_NEUE_BOLD,
fontSize: variables.fontSizeNormal,
fontWeight: fontWeightBold,
lineHeight: variables.lineHeightXLarge,
...wordBreak.breakWord,
},
chatItemMessageHeaderTimestamp: {
flexShrink: 0,
color: theme.textSupporting,
fontSize: variables.fontSizeSmall,
paddingTop: 2,
},
chatItemMessage: {
color: theme.text,
fontSize: variables.fontSizeNormal,
fontFamily: fontFamily.EXP_NEUE,
lineHeight: variables.lineHeightXLarge,
maxWidth: '100%',
...cursor.cursorAuto,
...whiteSpace.preWrap,
...wordBreak.breakWord,
},
renderHTMLTitle: {
color: theme.text,
fontSize: variables.fontSizeNormal,
fontFamily: fontFamily.EXP_NEUE,
lineHeight: variables.lineHeightXLarge,
maxWidth: '100%',
...whiteSpace.preWrap,
...wordBreak.breakWord,
},
chatItemComposeWithFirstRow: {
minHeight: 90,
},
chatItemFullComposeRow: {
...sizing.h100,
},
chatItemComposeBoxColor: {
borderColor: theme.border,
},
chatItemComposeBoxFocusedColor: {
borderColor: theme.borderFocus,
},
chatItemComposeBox: {
backgroundColor: theme.componentBG,
borderWidth: 1,
borderRadius: variables.componentBorderRadiusRounded,
minHeight: variables.componentSizeMedium,
},
chatItemFullComposeBox: {
...flex.flex1,
...sizing.h100,
},
chatFooter: {
paddingLeft: 20,
paddingRight: 20,
display: 'flex',
backgroundColor: theme.appBG,
},
chatFooterFullCompose: {
flex: 1,
},
chatItemDraft: {
display: 'flex',
flexDirection: 'row',
paddingTop: 8,
paddingBottom: 8,
paddingLeft: 20,
paddingRight: 20,
},
chatItemReactionsDraftRight: {
marginLeft: 52,
},
chatFooterAtTheTop: {
flexGrow: 1,
justifyContent: 'flex-start',
},
// Be extremely careful when editing the compose styles, as it is easy to introduce regressions.
// Make sure you run the following tests against any changes: #12669
textInputCompose: addOutlineWidth(
{
backgroundColor: theme.componentBG,
borderColor: theme.border,
color: theme.text,
fontFamily: fontFamily.EXP_NEUE,
fontSize: variables.fontSizeNormal,
borderWidth: 0,
height: 'auto',
lineHeight: variables.lineHeightXLarge,
...overflowXHidden,
// On Android, multiline TextInput with height: 'auto' will show extra padding unless they are configured with
// paddingVertical: 0, alignSelf: 'center', and textAlignVertical: 'center'
paddingHorizontal: variables.avatarChatSpacing,
paddingTop: 0,
paddingBottom: 0,
alignSelf: 'center',
textAlignVertical: 'center',
},
0,
),
textInputFullCompose: {
alignSelf: 'stretch',
flex: 1,
maxHeight: '100%',
textAlignVertical: 'top',
},
// composer padding should not be modified unless thoroughly tested against the cases in this PR: #12669
textInputComposeSpacing: {
paddingVertical: 5,
...flex.flexRow,
flex: 1,
},
textInputComposeBorder: {
borderLeftWidth: 1,
borderColor: theme.border,
},
chatItemSubmitButton: {
alignSelf: 'flex-end',
borderRadius: variables.componentBorderRadiusRounded,
backgroundColor: theme.transparent,
height: 40,
padding: 10,
margin: 3,
justifyContent: 'center',
},
emojiPickerContainer: {
backgroundColor: theme.componentBG,
},
emojiHeaderContainer: {
backgroundColor: theme.componentBG,
display: 'flex',
height: CONST.EMOJI_PICKER_HEADER_HEIGHT,
justifyContent: 'center',
width: '100%',
},
emojiSkinToneTitle: {
...spacing.pv1,
fontFamily: fontFamily.EXP_NEUE_BOLD,
fontWeight: fontWeightBold,
color: theme.heading,
fontSize: variables.fontSizeSmall,
},
// Emoji Picker Styles
emojiText: {
textAlign: 'center',
fontSize: variables.emojiSize,
...spacing.pv0,
...spacing.ph0,
lineHeight: variables.emojiLineHeight,
},
emojiItem: {
width: '12.5%',
textAlign: 'center',
borderRadius: 8,
paddingTop: 2,
paddingBottom: 2,
height: CONST.EMOJI_PICKER_ITEM_HEIGHT,
...userSelect.userSelectNone,
},
emojiItemHighlighted: {
transition: '0.2s ease',
backgroundColor: theme.buttonDefaultBG,
},
emojiItemKeyboardHighlighted: {
transition: '0.2s ease',
borderWidth: 1,
borderColor: theme.link,
borderRadius: variables.buttonBorderRadius,
},
categoryShortcutButton: {
flex: 1,
borderRadius: 8,
height: CONST.EMOJI_PICKER_ITEM_HEIGHT,
alignItems: 'center',
justifyContent: 'center',
},
chatItemEmojiButton: {
alignSelf: 'flex-end',
borderRadius: variables.buttonBorderRadius,
height: 40,
marginVertical: 3,
paddingHorizontal: 10,
justifyContent: 'center',
},
editChatItemEmojiWrapper: {
marginRight: 3,
alignSelf: 'flex-end',
},
hoveredButton: {
backgroundColor: theme.buttonHoveredBG,
},
composerSizeButton: {
alignSelf: 'center',
height: 32,
width: 32,
padding: 6,
margin: 3,
borderRadius: variables.componentBorderRadiusRounded,
backgroundColor: theme.transparent,
justifyContent: 'center',
},
chatItemAttachmentPlaceholder: {
backgroundColor: theme.sidebar,
borderColor: theme.border,
borderWidth: 1,
borderRadius: variables.componentBorderRadiusNormal,
height: 150,
textAlign: 'center',
verticalAlign: 'middle',
width: 200,
},
sidebarVisible: {
borderRightWidth: 1,
},
sidebarHidden: {
width: 0,
borderRightWidth: 0,
},
exampleCheckImage: {
width: '100%',
height: 80,
borderColor: theme.border,
borderWidth: 1,
borderRadius: variables.componentBorderRadiusNormal,
},
singleAvatar: {
height: 24,
width: 24,
backgroundColor: theme.icon,
borderRadius: 24,
},
singleAvatarSmall: {
height: 18,
width: 18,
backgroundColor: theme.icon,
borderRadius: 18,
},
singleAvatarMedium: {
height: 52,
width: 52,
backgroundColor: theme.icon,
borderRadius: 52,
},
secondAvatar: {
position: 'absolute',
right: -18,
bottom: -18,
borderWidth: 3,
borderRadius: 30,
borderColor: 'transparent',
},
secondAvatarSmall: {
position: 'absolute',
right: -13,
bottom: -13,
borderWidth: 3,
borderRadius: 18,
borderColor: 'transparent',
},
secondAvatarMedium: {
position: 'absolute',
right: -36,
bottom: -36,
borderWidth: 3,
borderRadius: 52,
borderColor: 'transparent',
},
secondAvatarSubscript: {
position: 'absolute',
right: -6,
bottom: -6,
},
secondAvatarSubscriptCompact: {
position: 'absolute',
bottom: -1,
right: -1,
},
secondAvatarSubscriptSmallNormal: {
position: 'absolute',
bottom: 0,
right: 0,
},
secondAvatarInline: {
bottom: -3,
right: -25,
borderWidth: 3,
borderRadius: 18,
borderColor: theme.cardBorder,
backgroundColor: theme.appBG,
},
avatarLarge: {
width: variables.avatarSizeLarge,
height: variables.avatarSizeLarge,
},
avatarXLarge: {
width: variables.avatarSizeXLarge,
height: variables.avatarSizeXLarge,
},
avatarInnerText: {
color: theme.textLight,
fontSize: variables.fontSizeSmall,
lineHeight: undefined,
marginLeft: -3,
textAlign: 'center',
},
avatarInnerTextSmall: {
color: theme.textLight,
fontSize: variables.fontSizeExtraSmall,
lineHeight: undefined,
marginLeft: -2,
textAlign: 'center',
},
emptyAvatar: {
height: variables.avatarSizeNormal,
width: variables.avatarSizeNormal,
},
emptyAvatarSmallNormal: {
height: variables.avatarSizeSmallNormal,
width: variables.avatarSizeSmallNormal,
},
emptyAvatarSmall: {
height: variables.avatarSizeSmall,
width: variables.avatarSizeSmall,
},
emptyAvatarSmaller: {
height: variables.avatarSizeSmaller,
width: variables.avatarSizeSmaller,
},
emptyAvatarMedium: {
height: variables.avatarSizeMedium,
width: variables.avatarSizeMedium,
},
emptyAvatarLarge: {
height: variables.avatarSizeLarge,
width: variables.avatarSizeLarge,
},
emptyAvatarMargin: {
marginRight: variables.avatarChatSpacing,
},
emptyAvatarMarginChat: {
marginRight: variables.avatarChatSpacing - 12,
},
emptyAvatarMarginSmall: {
marginRight: variables.avatarChatSpacing - 4,
},
emptyAvatarMarginSmaller: {
marginRight: variables.avatarChatSpacing - 4,
},
borderTop: {
borderTopWidth: variables.borderTopWidth,
borderColor: theme.border,
},
borderTopRounded: {
borderTopWidth: 1,
borderColor: theme.border,
borderTopLeftRadius: variables.componentBorderRadiusNormal,
borderTopRightRadius: variables.componentBorderRadiusNormal,
},
borderBottomRounded: {
borderBottomWidth: 1,
borderColor: theme.border,
borderBottomLeftRadius: variables.componentBorderRadiusNormal,
borderBottomRightRadius: variables.componentBorderRadiusNormal,
},
borderBottom: {
borderBottomWidth: 1,
borderColor: theme.border,
},
borderNone: {
borderWidth: 0,
borderBottomWidth: 0,
},
borderRight: {
borderRightWidth: 1,
borderColor: theme.border,
},
borderLeft: {
borderLeftWidth: 1,
borderColor: theme.border,
},
pointerEventsNone,
pointerEventsAuto,
headerBar: {
overflow: 'hidden',
justifyContent: 'center',
display: 'flex',
paddingLeft: 20,
height: variables.contentHeaderHeight,
width: '100%',
},
imageViewContainer: {
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
},
imageModalPDF: {
flex: 1,
backgroundColor: theme.modalBackground,
},
PDFView: {
// `display: grid` is not supported in native platforms!
// It's being used on Web/Desktop only to vertically center short PDFs,
// while preventing the overflow of the top of long PDF files.
display: 'grid',
backgroundColor: theme.modalBackground,
width: '100%',
height: '100%',
justifyContent: 'center',
overflow: 'hidden',
alignItems: 'center',
},
PDFViewList: {
overflowX: 'hidden',
// There properties disable "focus" effect on list
boxShadow: 'none',
outline: 'none',
},
getPDFPasswordFormStyle: (isSmallScreenWidth) => ({
width: isSmallScreenWidth ? '100%' : 350,
...(isSmallScreenWidth && flex.flex1),
}),
centeredModalStyles: (isSmallScreenWidth, isFullScreenWhenSmall) => ({
borderWidth: isSmallScreenWidth && !isFullScreenWhenSmall ? 1 : 0,
marginHorizontal: isSmallScreenWidth ? 0 : 20,
}),
imageModalImageCenterContainer: {
alignItems: 'center',
flex: 1,
justifyContent: 'center',
width: '100%',
},
defaultAttachmentView: {
backgroundColor: theme.sidebar,
borderRadius: variables.componentBorderRadiusNormal,
borderWidth: 1,
borderColor: theme.border,
flexDirection: 'row',
padding: 20,
alignItems: 'center',
},
notFoundTextHeader: {
...headlineFont,
color: theme.heading,
fontSize: variables.fontSizeXLarge,
lineHeight: variables.lineHeightXXLarge,
marginTop: 20,
marginBottom: 8,
textAlign: 'center',
},
blockingViewContainer: {
paddingBottom: variables.contentHeaderHeight,
},
defaultModalContainer: {
backgroundColor: theme.componentBG,
borderColor: theme.transparent,
},
reportActionContextMenuMiniButton: {
...spacing.p1,
...spacing.mv1,
...spacing.mh1,
...{borderRadius: variables.buttonBorderRadius},
},
reportActionSystemMessageContainer: {
marginLeft: 42,
},
reportDetailsTitleContainer: {
...flex.dFlex,
...flex.flexColumn,
...flex.alignItemsCenter,
paddingHorizontal: 20,
paddingBottom: 20,
},
reportDetailsRoomInfo: {
...flex.flex1,
...flex.dFlex,
...flex.flexColumn,
...flex.alignItemsCenter,
},
reportSettingsVisibilityText: {
textTransform: 'capitalize',
},
settingsPageBackground: {
flexDirection: 'column',
width: '100%',
flexGrow: 1,
},
settingsPageBody: {
width: '100%',
justifyContent: 'space-around',
},
twoFactorAuthSection: {
backgroundColor: theme.appBG,
padding: 0,
},
twoFactorAuthCodesBox: ({isExtraSmallScreenWidth, isSmallScreenWidth}) => {
let paddingHorizontal = styles.ph9;
if (isSmallScreenWidth) {
paddingHorizontal = styles.ph4;
}
if (isExtraSmallScreenWidth) {
paddingHorizontal = styles.ph2;
}
return {
alignItems: 'center',
justifyContent: 'center',
backgroundColor: theme.highlightBG,
paddingVertical: 28,
borderRadius: 16,
marginTop: 32,
...paddingHorizontal,
};
},
twoFactorLoadingContainer: {
alignItems: 'center',
justifyContent: 'center',
height: 210,
},
twoFactorAuthCodesContainer: {
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
flexWrap: 'wrap',
gap: 12,
},
twoFactorAuthCode: {
fontFamily: fontFamily.MONOSPACE,
width: 112,
textAlign: 'center',
},
twoFactorAuthCodesButtonsContainer: {
flexDirection: 'row',
justifyContent: 'center',
gap: 12,
marginTop: 20,
flexWrap: 'wrap',
},
twoFactorAuthCodesButton: {
minWidth: 112,
},
twoFactorAuthCopyCodeButton: {
minWidth: 110,
},
anonymousRoomFooter: (isSmallSizeLayout) => ({
flexDirection: isSmallSizeLayout ? 'column' : 'row',
...(!isSmallSizeLayout && {
alignItems: 'center',
justifyContent: 'space-between',
}),
padding: 20,
backgroundColor: theme.cardBG,
borderRadius: variables.componentBorderRadiusLarge,
overflow: 'hidden',
}),
anonymousRoomFooterWordmarkAndLogoContainer: (isSmallSizeLayout) => ({
flexDirection: 'row',
alignItems: 'center',
...(isSmallSizeLayout && {
justifyContent: 'space-between',
marginTop: 16,
}),
}),
anonymousRoomFooterLogo: {
width: 88,
marginLeft: 0,
height: 20,
},
anonymousRoomFooterLogoTaglineText: {
fontFamily: fontFamily.EXP_NEUE,
fontSize: variables.fontSizeMedium,
color: theme.textLight,
},
signInButtonAvatar: {
width: 80,
},
anonymousRoomFooterSignInButton: {
width: 110,
},
roomHeaderAvatarSize: {
height: variables.componentSizeLarge,
width: variables.componentSizeLarge,
},
roomHeaderAvatar: {
backgroundColor: theme.appBG,
borderRadius: 100,
borderColor: theme.componentBG,
borderWidth: 4,
},
roomHeaderAvatarOverlay: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundColor: theme.overlay,
opacity: variables.overlayOpacity,
borderRadius: 88,
},
rootNavigatorContainerStyles: (isSmallScreenWidth) => ({marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWidth, flex: 1}),
RHPNavigatorContainerNavigatorContainerStyles: (isSmallScreenWidth) => ({marginLeft: isSmallScreenWidth ? 0 : variables.sideBarWidth, flex: 1}),
avatarInnerTextChat: {
color: theme.textLight,
fontSize: variables.fontSizeXLarge,
fontFamily: fontFamily.EXP_NEW_KANSAS_MEDIUM,
textAlign: 'center',
fontWeight: 'normal',
position: 'absolute',
width: 88,
left: -16,
},
pageWrapper: {
width: '100%',
alignItems: 'center',
padding: 20,
},
avatarSectionWrapper: {
width: '100%',
alignItems: 'center',
paddingHorizontal: 20,
paddingBottom: 20,
},
avatarSectionWrapperSkeleton: {
width: '100%',
paddingHorizontal: 20,
paddingBottom: 20,
},
selectCircle: {
width: variables.componentSizeSmall,
height: variables.componentSizeSmall,
borderColor: theme.border,
borderWidth: 1,
borderRadius: variables.componentSizeSmall / 2,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: theme.componentBG,
marginLeft: 8,
},
unreadIndicatorContainer: {
position: 'absolute',
top: -10,
left: 0,
width: '100%',
height: 20,
paddingHorizontal: 20,
flexDirection: 'row',
alignItems: 'center',
zIndex: 1,
...cursor.cursorDefault,
},
unreadIndicatorLine: {
height: 1,
backgroundColor: theme.unreadIndicator,
flexGrow: 1,
marginRight: 8,
opacity: 0.5,
},
threadDividerLine: {
height: 1,
backgroundColor: theme.border,
flexGrow: 1,
marginHorizontal: 20,
},
unreadIndicatorText: {
color: theme.unreadIndicator,
fontFamily: fontFamily.EXP_NEUE_BOLD,
fontSize: variables.fontSizeSmall,
fontWeight: fontWeightBold,
textTransform: 'capitalize',
},
flipUpsideDown: {
transform: [{rotate: '180deg'}],
},
navigationScreenCardStyle: {
backgroundColor: theme.appBG,
height: '100%',
},
invisible: {
position: 'absolute',
opacity: 0,
},
invisiblePopover: {
position: 'absolute',
opacity: 0,
left: -9999,
},
containerWithSpaceBetween: {
justifyContent: 'space-between',
width: '100%',
flex: 1,
},
detailsPageSectionContainer: {
alignSelf: 'flex-start',
},
attachmentCarouselContainer: {
height: '100%',
width: '100%',
display: 'flex',
justifyContent: 'center',
...cursor.cursorUnset,
},
attachmentArrow: {
zIndex: 23,
position: 'absolute',
},
attachmentRevealButtonContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
...spacing.ph4,
},
arrowIcon: {
height: 40,
width: 40,
alignItems: 'center',
paddingHorizontal: 0,
paddingTop: 0,
paddingBottom: 0,
},
switchTrack: {
width: 50,
height: 28,
justifyContent: 'center',
borderRadius: 20,
padding: 15,
backgroundColor: theme.success,
},
switchInactive: {
backgroundColor: theme.border,
},
switchThumb: {
width: 22,
height: 22,
borderRadius: 11,
position: 'absolute',
left: 4,
backgroundColor: theme.appBG,
},
switchThumbTransformation: (translateX) => ({
transform: [{translateX}],
}),
radioButtonContainer: {
backgroundColor: theme.componentBG,
borderRadius: 10,
height: 20,
width: 20,
borderColor: theme.icon,
borderWidth: 1,
justifyContent: 'center',
alignItems: 'center',
},
checkedContainer: {
backgroundColor: theme.checkBox,
},
magicCodeInputContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
minHeight: variables.inputHeight,
},
magicCodeInput: {
fontSize: variables.fontSizeXLarge,
color: theme.heading,
lineHeight: variables.inputHeight,
},
// Manually style transparent, in iOS Safari, an input in a container with its opacity set to
// 0 (completely transparent) cannot handle user interaction, hence the Paste option is never shown
inputTransparent: {
color: 'transparent',
// These properties are available in browser only
...(Browser.getBrowser()
? {
caretColor: 'transparent',
WebkitTextFillColor: 'transparent',
// After setting the input text color to transparent, it acquires the background-color.
// However, it is not possible to override the background-color directly as explained in this resource: https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
// Therefore, the transition effect needs to be delayed.
transitionDelay: '99999s',
transitionProperty: 'background-color',
}
: {}),
},
iouAmountText: {
...headlineFont,
fontSize: variables.iouAmountTextSize,
color: theme.heading,
lineHeight: variables.inputHeight,
},
iouAmountTextInput: addOutlineWidth(
{
...headlineFont,
fontSize: variables.iouAmountTextSize,
color: theme.heading,
padding: 0,
lineHeight: undefined,
},
0,
),
moneyRequestConfirmationAmount: {
...headlineFont,
fontSize: variables.fontSizeh1,
},
moneyRequestMenuItem: {
flexDirection: 'row',
borderRadius: 0,
justifyContent: 'space-between',
width: '100%',
paddingHorizontal: 20,
paddingVertical: 12,
},
requestPreviewBox: {
marginTop: 12,
maxWidth: variables.sideBarWidth,
},
moneyRequestPreviewBox: {
backgroundColor: theme.cardBG,
borderRadius: variables.componentBorderRadiusLarge,
maxWidth: variables.sideBarWidth,
width: '100%',
},
moneyRequestPreviewBoxText: {
padding: 16,
},
amountSplitPadding: {
paddingTop: 2,
},
moneyRequestPreviewBoxLoading: {
// When a new IOU request arrives it is very briefly in a loading state, so set the minimum height of the container to 94 to match the rendered height after loading.
// Otherwise, the IOU request pay button will not be fully visible and the user will have to scroll up to reveal the entire IOU request container.
// See https://github.com/Expensify/App/issues/10283.
minHeight: 94,
width: '100%',
},
moneyRequestPreviewBoxAvatar: {
marginRight: -10,
marginBottom: 0,
},
moneyRequestPreviewAmount: {
...headlineFont,
...whiteSpace.preWrap,
color: theme.heading,
},
defaultCheckmarkWrapper: {
marginLeft: 8,
alignSelf: 'center',
},
codeWordWrapper: {
...codeStyles.codeWordWrapper,
},
codeWordStyle: {
borderLeftWidth: 0,
borderRightWidth: 0,
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
paddingLeft: 0,
paddingRight: 0,
justifyContent: 'center',
...codeStyles.codeWordStyle,
},
codeFirstWordStyle: {
borderLeftWidth: 1,
borderTopLeftRadius: 4,
borderBottomLeftRadius: 4,
paddingLeft: 5,
},
codeLastWordStyle: {
borderRightWidth: 1,
borderTopRightRadius: 4,
borderBottomRightRadius: 4,
paddingRight: 5,
},
fullScreenLoading: {
backgroundColor: theme.componentBG,
opacity: 0.8,
justifyContent: 'center',
alignItems: 'center',
zIndex: 10,
},
reimbursementAccountFullScreenLoading: {
backgroundColor: theme.componentBG,
opacity: 0.8,
justifyContent: 'flex-start',
alignItems: 'center',
zIndex: 10,
},
hiddenElementOutsideOfWindow: {
position: 'absolute',
top: -10000,
left: 0,
opacity: 0,
},
growlNotificationWrapper: {
zIndex: 2,
},
growlNotificationContainer: {
flex: 1,
justifyContent: 'flex-start',
position: 'absolute',
width: '100%',
top: 20,
...spacing.pl5,
...spacing.pr5,
},
growlNotificationDesktopContainer: {
maxWidth: variables.sideBarWidth,
right: 0,
position: 'fixed',
},
growlNotificationTranslateY: (y) => ({
transform: [{translateY: y}],
}),
makeSlideInTranslation: (translationType, fromValue) => ({
from: {
[translationType]: fromValue,
},
to: {
[translationType]: 0,
},
}),
growlNotificationBox: {
backgroundColor: theme.inverse,
borderRadius: variables.componentBorderRadiusNormal,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
shadowColor: theme.shadow,
...spacing.p5,
},
growlNotificationText: {
fontSize: variables.fontSizeNormal,
fontFamily: fontFamily.EXP_NEUE,
width: '90%',
lineHeight: variables.fontSizeNormalHeight,
color: theme.textReversed,
...spacing.ml4,
},
blockquote: {
borderLeftColor: theme.border,
borderLeftWidth: 4,
paddingLeft: 12,
marginVertical: 4,
},
noSelect: {
boxShadow: 'none',
outline: 'none',
},
cardStyleNavigator: {
overflow: 'hidden',
height: '100%',
},
smallEditIcon: {
alignItems: 'center',
backgroundColor: theme.buttonHoveredBG,
borderColor: theme.textReversed,
borderRadius: 14,
borderWidth: 3,
color: theme.textReversed,
height: 28,
width: 28,
justifyContent: 'center',
},
smallAvatarEditIcon: {
position: 'absolute',
right: -4,
bottom: -4,
},
autoGrowHeightMultilineInput: {
maxHeight: 115,
},
peopleRow: {
width: '100%',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
...spacing.ph5,
},
peopleRowBorderBottom: {
borderColor: theme.border,
borderBottomWidth: 1,
...spacing.pb2,
},
peopleBadge: {
backgroundColor: theme.icon,
...spacing.ph3,
},
peopleBadgeText: {
color: theme.textReversed,
fontSize: variables.fontSizeSmall,
lineHeight: variables.lineHeightNormal,
...whiteSpace.noWrap,
},
offlineFeedback: {
deleted: {
textDecorationLine: 'line-through',
textDecorationStyle: 'solid',
},
pending: {
opacity: 0.5,
},
error: {
flexDirection: 'row',
alignItems: 'center',
},
container: {
...spacing.pv2,
},
textContainer: {
flexDirection: 'column',
flex: 1,
},
text: {
color: theme.textSupporting,
textAlignVertical: 'center',
fontSize: variables.fontSizeLabel,
},
errorDot: {
marginRight: 12,
},
},
dotIndicatorMessage: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
},
locationErrorLinkText: {
textAlignVertical: 'center',
fontSize: variables.fontSizeLabel,
},
sidebarPopover: {
width: variables.sideBarWidth - 68,
},
cardOverlay: {
backgroundColor: theme.overlay,
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
opacity: variables.overlayOpacity,
},
shortTermsBorder: {
borderWidth: 1,
borderColor: theme.border,
},
shortTermsHorizontalRule: {
borderBottomWidth: 1,
borderColor: theme.border,
...spacing.mh3,
},
shortTermsLargeHorizontalRule: {
borderWidth: 1,
borderColor: theme.border,
...spacing.mh3,
},
shortTermsRow: {
flexDirection: 'row',
padding: 12,
},
termsCenterRight: {
marginTop: 'auto',
marginBottom: 'auto',
},
shortTermsBoldHeadingSection: {
paddingRight: 12,
paddingLeft: 12,
marginTop: 12,
},
shortTermsHeadline: {
...headlineFont,
...whiteSpace.preWrap,
color: theme.heading,
fontSize: variables.fontSizeXXXLarge,
lineHeight: variables.lineHeightXXXLarge,
},
longTermsRow: {
flexDirection: 'row',
marginTop: 20,
},
collapsibleSectionBorder: {
borderBottomWidth: 2,
borderBottomColor: theme.border,
},
communicationsLinkHeight: {
height: variables.communicationsLinkHeight,
},
floatingMessageCounterWrapper: {
position: 'absolute',
left: '50%',
top: 0,
zIndex: 100,
...visibility.hidden,
},
floatingMessageCounterWrapperAndroid: {
left: 0,
width: '100%',
alignItems: 'center',
position: 'absolute',
top: 0,
zIndex: 100,
...visibility.hidden,
},
floatingMessageCounterSubWrapperAndroid: {
left: '50%',
width: 'auto',
},
floatingMessageCounter: {
left: '-50%',
...visibility.visible,
},
floatingMessageCounterTransformation: (translateY) => ({
transform: [{translateY}],
}),
confirmationAnimation: {
height: 180,
width: 180,
marginBottom: 20,
},
googleSearchTextInputContainer: {
flexDirection: 'column',
},
googleSearchSeparator: {
height: 1,
backgroundColor: theme.border,
},
googleSearchText: {
color: theme.text,
fontSize: variables.fontSizeNormal,
lineHeight: variables.fontSizeNormalHeight,
fontFamily: fontFamily.EXP_NEUE,
flex: 1,
},
threeDotsPopoverOffset: (windowWidth) => ({
...getPopOverVerticalOffset(60),
horizontal: windowWidth - 60,
}),
threeDotsPopoverOffsetNoCloseButton: (windowWidth) => ({
...getPopOverVerticalOffset(60),
horizontal: windowWidth - 10,
}),
threeDotsPopoverOffsetAttachmentModal: (windowWidth) => ({
...getPopOverVerticalOffset(80),
horizontal: windowWidth - 140,
}),
invert: {
// It's important to invert the Y AND X axis to prevent a react native issue that can lead to ANRs on android 13
transform: [{scaleX: -1}, {scaleY: -1}],
},
iPhoneXSafeArea: {
backgroundColor: theme.inverse,
flex: 1,
},
transferBalancePayment: {
borderWidth: 1,
borderRadius: variables.componentBorderRadiusNormal,
borderColor: theme.border,
},
transferBalanceSelectedPayment: {
borderColor: theme.iconSuccessFill,
},
transferBalanceBalance: {
fontSize: 48,
},
imageCropContainer: {
overflow: 'hidden',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: theme.imageCropBackgroundColor,
...cursor.cursorMove,
},
sliderKnobTooltipView: {
height: variables.sliderKnobSize,
width: variables.sliderKnobSize,
borderRadius: variables.sliderKnobSize / 2,
},
sliderKnob: {
backgroundColor: theme.success,
position: 'absolute',
height: variables.sliderKnobSize,
width: variables.sliderKnobSize,
borderRadius: variables.sliderKnobSize / 2,
left: -(variables.sliderKnobSize / 2),
...cursor.cursorPointer,
},
sliderBar: {
backgroundColor: theme.border,
height: variables.sliderBarHeight,
borderRadius: variables.sliderBarHeight / 2,
alignSelf: 'stretch',
justifyContent: 'center',
},
screenCenteredContainer: {
flex: 1,
justifyContent: 'center',
marginBottom: 40,
padding: 16,
},
inlineSystemMessage: {
color: theme.textSupporting,
fontSize: variables.fontSizeLabel,
fontFamily: fontFamily.EXP_NEUE,
marginLeft: 6,
},
fullScreen: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
invisibleOverlay: {
backgroundColor: theme.transparent,
zIndex: 1000,
},
reportDropOverlay: {
backgroundColor: theme.dropUIBG,
zIndex: 2,
},
receiptDropOverlay: {
backgroundColor: theme.receiptDropUIBG,
zIndex: 2,
},
receiptImageWrapper: (receiptImageTopPosition) => ({
position: 'absolute',
top: receiptImageTopPosition,
}),
cardSection: {
backgroundColor: theme.cardBG,
borderRadius: variables.componentBorderRadiusCard,
marginBottom: 20,
marginHorizontal: 16,
padding: 20,
width: 'auto',
textAlign: 'left',
},
cardSectionTitle: {
lineHeight: variables.lineHeightXXLarge,
},
cardMenuItem: {
paddingLeft: 8,
paddingRight: 0,
borderRadius: variables.buttonBorderRadius,
height: variables.componentSizeLarge,
alignItems: 'center',
},
archivedReportFooter: {
borderRadius: variables.componentBorderRadius,
...wordBreak.breakWord,
},
deeplinkWrapperContainer: {
padding: 20,
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: theme.appBG,
},
deeplinkWrapperMessage: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
deeplinkWrapperFooter: {
paddingTop: 80,
paddingBottom: 45,
},
emojiReactionBubble: {
borderRadius: 28,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
alignSelf: 'flex-start',
},
emojiReactionListHeader: {
marginTop: 8,
paddingBottom: 20,
borderBottomColor: theme.border,
borderBottomWidth: 1,
marginHorizontal: 20,
},
emojiReactionListHeaderBubble: {
paddingVertical: 2,
paddingHorizontal: 8,
borderRadius: 28,
backgroundColor: theme.border,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
alignSelf: 'flex-start',
marginRight: 4,
},
reactionListHeaderText: {
color: theme.textSupporting,
marginLeft: 8,
alignSelf: 'center',
},
miniQuickEmojiReactionText: {
fontSize: 15,
lineHeight: 20,
textAlignVertical: 'center',
},
emojiReactionBubbleText: {
textAlignVertical: 'center',
},
reactionCounterText: {
fontSize: 13,
marginLeft: 4,
fontWeight: 'bold',
},
fontColorReactionLabel: {
color: theme.tooltipSupportingText,
},
reactionEmojiTitle: {
fontSize: variables.iconSizeLarge,
lineHeight: variables.iconSizeXLarge,
},
textReactionSenders: {
color: theme.tooltipPrimaryText,
...wordBreak.breakWord,
},
quickReactionsContainer: {
gap: 12,
flexDirection: 'row',
paddingHorizontal: 25,
paddingVertical: 12,
justifyContent: 'space-between',
},
reactionListContainer: {
maxHeight: variables.listItemHeightNormal * 5.75,
...spacing.pv2,
},
reactionListContainerFixedWidth: {
maxWidth: variables.popoverWidth,
},
validateCodeDigits: {
color: theme.text,
fontFamily: fontFamily.EXP_NEUE,
fontSize: variables.fontSizeXXLarge,
letterSpacing: 4,
},
footerWrapper: {
fontSize: variables.fontSizeNormal,
paddingTop: 64,
maxWidth: 1100, // Match footer across all Expensify platforms
},
footerColumnsContainer: {
flex: 1,
flexWrap: 'wrap',
marginBottom: 40,
marginHorizontal: -16,
},
footerTitle: {
fontSize: variables.fontSizeLarge,
color: theme.success,
marginBottom: 16,
},
footerRow: {
paddingVertical: 4,
marginBottom: 8,
color: theme.textLight,
fontSize: variables.fontSizeMedium,
},
footerBottomLogo: {
marginTop: 40,
width: '100%',
},
datePickerRoot: {
position: 'relative',
zIndex: 99,
},
datePickerPopover: {
backgroundColor: theme.appBG,
width: '100%',
alignSelf: 'center',
zIndex: 100,
marginTop: 8,
},
loginHeroHeader: {
fontFamily: fontFamily.EXP_NEW_KANSAS_MEDIUM,
color: theme.success,
fontWeight: '500',
textAlign: 'center',
},
newKansasLarge: {
...headlineFont,
fontSize: variables.fontSizeXLarge,
lineHeight: variables.lineHeightXXLarge,
},
eReceiptAmountLarge: {
...headlineFont,
fontSize: variables.fontSizeEReceiptLarge,
lineHeight: variables.lineHeightXXsLarge,
wordBreak: 'break-word',
textAlign: 'center',
},
eReceiptCurrency: {
...headlineFont,
fontSize: variables.fontSizeXXLarge,
lineHeight: variables.lineHeightXXLarge,
wordBreak: 'break-all',
},
eReceiptMerchant: {
fontFamily: fontFamily.EXP_NEUE,
fontSize: variables.fontSizeXLarge,
lineHeight: variables.lineHeightXXLarge,
color: theme.text,
},
eReceiptWaypointTitle: {
fontFamily: fontFamily.EXP_NEUE,
fontSize: variables.fontSizeSmall,
lineHeight: variables.lineHeightSmall,
},
eReceiptWaypointAddress: {
fontFamily: fontFamily.MONOSPACE,
fontSize: variables.fontSizeNormal,
lineHeight: variables.lineHeightNormal,
color: theme.textColorfulBackground,
},
eReceiptGuaranteed: {
fontFamily: fontFamily.MONOSPACE,
fontSize: variables.fontSizeSmall,
lineHeight: variables.lineHeightSmall,
color: theme.textColorfulBackground,
},
eReceiptBackgroundThumbnail: {
...sizing.w100,
position: 'absolute',
aspectRatio: 335 / 540,
top: 0,
minWidth: 217,
},
eReceiptContainer: {
flex: 1,
width: 335,
minHeight: 540,
borderRadius: 20,
overflow: 'hidden',
},
loginHeroBody: {
fontFamily: fontFamily.EXP_NEUE,
fontSize: variables.fontSizeSignInHeroBody,
color: theme.textLight,
textAlign: 'center',
},
linkPreviewWrapper: {
marginTop: 16,
borderLeftWidth: 4,
borderLeftColor: theme.border,
paddingLeft: 12,
},
linkPreviewImage: {
flex: 1,
resizeMode: 'contain',
borderRadius: 8,
marginTop: 8,
},
linkPreviewLogoImage: {
height: 16,
width: 16,
},
contextMenuItemPopoverMaxWidth: {
maxWidth: 375,
},
formSpaceVertical: {
height: 20,
width: 1,
},
taskCheckbox: {
height: 16,
width: 16,
},
taskTitleMenuItem: {
...writingDirection.ltr,
...headlineFont,
...spacing.flexWrap,
...spacing.flex1,
fontSize: variables.fontSizeXLarge,
maxWidth: '100%',
...wordBreak.breakWord,
},
taskDescriptionMenuItem: {
maxWidth: '100%',
...wordBreak.breakWord,
},
taskTitleDescription: {
fontFamily: fontFamily.EXP_NEUE,
fontSize: variables.fontSizeLabel,
color: theme.textSupporting,
lineHeight: variables.lineHeightNormal,
...spacing.mb1,
},
taskMenuItemCheckbox: {
height: 27,
...spacing.mr3,
},
reportHorizontalRule: {
borderColor: theme.border,
...spacing.mh5,
},
assigneeTextStyle: {
fontFamily: fontFamily.EXP_NEUE_BOLD,
fontWeight: fontWeightBold,
minHeight: variables.avatarSizeSubscript,
},
taskRightIconContainer: {
width: variables.componentSizeNormal,
marginLeft: 'auto',
...spacing.mt1,
...pointerEventsAuto,
...spacing.dFlex,
...spacing.alignItemsCenter,
},
shareCodePage: {
paddingHorizontal: 38.5,
},
shareCodeContainer: {
width: '100%',
alignItems: 'center',
paddingHorizontal: variables.qrShareHorizontalPadding,
paddingVertical: 20,
borderRadius: 20,
overflow: 'hidden',
borderColor: theme.borderFocus,
borderWidth: 2,
backgroundColor: theme.highlightBG,
},
splashScreenHider: {
backgroundColor: theme.splashBG,
alignItems: 'center',
justifyContent: 'center',
},
headerEnvBadge: {
marginLeft: 0,
marginBottom: 2,
height: 12,
paddingLeft: 4,
paddingRight: 4,
alignItems: 'center',
},
headerEnvBadgeText: {
fontSize: 7,
fontWeight: fontWeightBold,
lineHeight: undefined,
},
expensifyQrLogo: {
alignSelf: 'stretch',
height: 27,
marginBottom: 20,
},
qrShareTitle: {
marginTop: 15,
textAlign: 'center',
},
loginButtonRow: {
width: '100%',
gap: 12,
...flex.flexRow,
...flex.justifyContentCenter,
},
loginButtonRowSmallScreen: {
width: '100%',
gap: 12,
...flex.flexRow,
...flex.justifyContentCenter,
marginBottom: 10,
},
desktopSignInButtonContainer: {
width: 40,
height: 40,
},
signInIconButton: {
paddingVertical: 2,
},
googleButtonContainer: {
colorScheme: 'light',
width: 40,
height: 40,
alignItems: 'center',
overflow: 'hidden',
},
googlePillButtonContainer: {
colorScheme: 'light',
height: 40,
width: 219,
},
thirdPartyLoadingContainer: {
alignItems: 'center',
justifyContent: 'center',
height: 450,
},
tabSelectorButton: {
height: variables.tabSelectorButtonHeight,
padding: variables.tabSelectorButtonPadding,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
borderRadius: variables.buttonBorderRadius,
},
tabSelector: {
flexDirection: 'row',
paddingHorizontal: 20,
paddingBottom: 12,
},
tabText: (isSelected) => ({
marginLeft: 8,
fontFamily: fontFamily.EXP_NEUE_BOLD,
fontWeight: fontWeightBold,
color: isSelected ? theme.textLight : theme.textSupporting,
}),
tabBackground: (hovered, isFocused, background) => ({
backgroundColor: hovered && !isFocused ? theme.highlightBG : background,
}),
tabOpacity: (hovered, isFocused, activeOpacityValue, inactiveOpacityValue) => (hovered && !isFocused ? inactiveOpacityValue : activeOpacityValue),
/**
* @param {String} backgroundColor
* @param {Number} height
* @returns {Object}
*/
overscrollSpacer: (backgroundColor, height) => ({
backgroundColor,
height,
width: '100%',
position: 'absolute',
top: -height,
left: 0,
right: 0,
}),
dualColorOverscrollSpacer: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: -1,
},
willChangeTransform: {
willChange: 'transform',
},
dropDownButtonCartIconContainerPadding: {
paddingRight: 0,
paddingLeft: 0,
},
dropDownButtonArrowContain: {
marginLeft: 12,
marginRight: 14,
},
dropDownButtonCartIconView: {
borderTopRightRadius: variables.buttonBorderRadius,
borderBottomRightRadius: variables.buttonBorderRadius,
...flex.flexRow,
...flex.alignItemsCenter,
},
emojiPickerButtonDropdown: {
justifyContent: 'center',
backgroundColor: theme.activeComponentBG,
width: 86,
height: 52,
borderRadius: 26,
alignItems: 'center',
paddingLeft: 10,
paddingRight: 4,
marginBottom: 32,
alignSelf: 'flex-start',
},
emojiPickerButtonDropdownIcon: {
fontSize: 30,
},
moneyRequestImage: {
height: 200,
borderRadius: 16,
margin: 20,
},
reportPreviewBox: {
backgroundColor: theme.cardBG,
borderRadius: variables.componentBorderRadiusLarge,
maxWidth: variables.sideBarWidth,
width: '100%',
},
reportPreviewBoxHoverBorder: {
borderColor: theme.border,
backgroundColor: theme.border,
},
reportContainerBorderRadius: {
borderRadius: variables.componentBorderRadiusLarge,
},
reportPreviewBoxBody: {
padding: 16,
},
reportActionItemImages: {
flexDirection: 'row',
borderWidth: 4,
borderColor: theme.transparent,
borderTopLeftRadius: variables.componentBorderRadiusLarge,
borderTopRightRadius: variables.componentBorderRadiusLarge,
borderBottomLeftRadius: variables.componentBorderRadiusLarge,
borderBottomRightRadius: variables.componentBorderRadiusLarge,
overflow: 'hidden',
height: 200,
},
reportActionItemImage: {
flex: 1,
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
reportActionItemImageBorder: {
borderRightWidth: 2,
borderColor: theme.cardBG,
},
reportActionItemImagesMore: {
position: 'absolute',
borderRadius: 18,
backgroundColor: theme.cardBG,
width: 36,
height: 36,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
moneyRequestHeaderStatusBarBadge: {
paddingHorizontal: 8,
borderRadius: variables.componentBorderRadiusSmall,
height: variables.inputHeightSmall,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: theme.border,
marginRight: 12,
},
staticHeaderImage: {
minHeight: 240,
},
emojiPickerButtonDropdownContainer: {
flexDirection: 'row',
alignItems: 'center',
},
rotate90: {
transform: [{rotate: '90deg'}],
},
emojiStatusLHN: {
fontSize: 22,
},
sidebarStatusAvatarContainer: {
height: 44,
width: 84,
backgroundColor: theme.componentBG,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
borderRadius: 42,
paddingHorizontal: 2,
marginVertical: -2,
marginRight: -2,
},
sidebarStatusAvatar: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
moneyRequestViewImage: {
...spacing.mh5,
...spacing.mv3,
overflow: 'hidden',
borderWidth: 2,
borderColor: theme.cardBG,
borderRadius: variables.componentBorderRadiusLarge,
height: 200,
maxWidth: 400,
},
mapViewContainer: {
...flex.flex1,
...spacing.p4,
...spacing.flex1,
minHeight: 300,
maxHeight: 500,
},
mapView: {
flex: 1,
borderRadius: 16,
overflow: 'hidden',
},
mapViewOverlay: {
flex: 1,
position: 'absolute',
left: 0,
top: 0,
borderRadius: variables.componentBorderRadiusLarge,
overflow: 'hidden',
backgroundColor: theme.highlightBG,
...sizing.w100,
...sizing.h100,
},
confirmationListMapItem: {
...spacing.mv2,
...spacing.mh5,
height: 200,
},
mapDirection: {
lineColor: theme.success,
lineWidth: 7,
},
mapDirectionLayer: {
layout: {'line-join': 'round', 'line-cap': 'round'},
paint: {'line-color': theme.success, 'line-width': 7},
},
mapPendingView: {
backgroundColor: theme.highlightBG,
...flex.flex1,
borderRadius: variables.componentBorderRadiusLarge,
},
userReportStatusEmoji: {
flexShrink: 0,
fontSize: variables.fontSizeNormal,
marginRight: 4,
},
draggableTopBar: {
height: 30,
width: '100%',
},
videoContainer: {
...flex.flex1,
...flex.alignItemsCenter,
...flex.justifyContentCenter,
...objectFit.oFCover,
},
globalNavigation: {
width: variables.globalNavigationWidth,
backgroundColor: theme.highlightBG,
},
globalNavigationMenuContainer: {
marginTop: 13,
},
globalAndSubNavigationContainer: {
backgroundColor: theme.highlightBG,
},
globalNavigationSelectionIndicator: (isFocused) => ({
width: 4,
height: 52,
borderTopRightRadius: variables.componentBorderRadiusRounded,
borderBottomRightRadius: variables.componentBorderRadiusRounded,
backgroundColor: isFocused ? theme.iconMenu : theme.transparent,
}),
globalNavigationMenuItem: (isFocused) => (isFocused ? {color: theme.text, fontWeight: fontWeightBold, fontFamily: fontFamily.EXP_NEUE_BOLD} : {color: theme.icon}),
globalNavigationItemContainer: {
width: variables.globalNavigationWidth,
height: variables.globalNavigationWidth,
},
walletCard: {
borderRadius: variables.componentBorderRadiusLarge,
position: 'relative',
alignSelf: 'center',
overflow: 'hidden',
},
walletCardMenuItem: {
color: theme.text,
fontSize: variables.fontSizeNormal,
},
walletCardHolder: {
position: 'absolute',
left: 16,
bottom: 16,
width: variables.cardNameWidth,
color: theme.text,
fontSize: variables.fontSizeSmall,
lineHeight: variables.lineHeightLarge,
},
aspectRatioLottie: (source) => {
if (!source.uri && typeof source === 'object' && source.w && source.h) {
return {aspectRatio: source.w / source.h};
}
return {};
},
receiptDropHeaderGap: {
backgroundColor: theme.receiptDropUIBG,
},
checkboxWithLabelCheckboxStyle: {
marginLeft: -2,
},
});
// For now we need to export the styles function that takes the theme as an argument
// as something named different than "styles", because a lot of files import the "defaultStyles"
// as "styles", which causes ESLint to throw an error.
// TODO: Remove "stylesGenerator" and instead only return "styles" once the app is migrated to theme switching hooks and HOCs and "styles/theme/default.js" is not used anywhere anymore (GH issue: https://github.com/Expensify/App/issues/27337)
const stylesGenerator = styles;
const defaultStyles = styles(defaultTheme);
export default defaultStyles;
export {stylesGenerator};