Update badge styles

src/components/Badge.tsx

@@ -17,6 +17,12 @@ type BadgeProps = {
     /** Is Error type */
     error?: boolean;
 
+    /** Whether badge uses strong (filled) style instead of outlined */
+    isStrong?: boolean;
+
+    /** Whether badge uses condensed (smaller) sizing */
+    isCondensed?: boolean;
+
     /** Whether badge is clickable */
     pressable?: boolean;
 
@@ -51,6 +57,8 @@ type BadgeProps = {
 function Badge({
     success = false,
     error = false,
+    isStrong = false,
+    isCondensed = false,
     pressable = false,
     text,
     environment = CONST.ENVIRONMENT.DEV,
@@ -68,17 +76,20 @@ function Badge({
 
     const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedbackDeleted) : false;
 
-    const iconColor = StyleUtils.getIconColorStyle(success, error);
+    const iconColor = StyleUtils.getIconColorStyle(success, error, isStrong);
+
+    const iconSize = isCondensed || shouldUseXXSmallIcon ? variables.iconSizeXXSmall : variables.iconSizeExtraSmall;
 
     const wrapperStyles: (state: PressableStateCallbackType) => StyleProp<ViewStyle> = useCallback(
         ({pressed}) => [
             styles.defaultBadge,
+            isCondensed && styles.condensedBadge,
             styles.alignSelfCenter,
             styles.ml2,
-            StyleUtils.getBadgeColorStyle(success, error, pressed, environment === CONST.ENVIRONMENT.ADHOC),
+            StyleUtils.getBadgeColorStyle(success, error, pressed, environment === CONST.ENVIRONMENT.ADHOC, isStrong),
             badgeStyles,
         ],
-        [styles.defaultBadge, styles.alignSelfCenter, styles.ml2, StyleUtils, success, error, environment, badgeStyles],
+        [styles.defaultBadge, styles.condensedBadge, styles.alignSelfCenter, styles.ml2, StyleUtils, success, error, environment, badgeStyles, isCondensed, isStrong],
     );
 
     return (
@@ -93,15 +104,25 @@ function Badge({
             {!!icon && (
                 <View style={[styles.mr2, iconStyles]}>
                     <Icon
-                        width={shouldUseXXSmallIcon ? variables.iconSizeXXSmall : variables.iconSizeExtraSmall}
-                        height={shouldUseXXSmallIcon ? variables.iconSizeXXSmall : variables.iconSizeExtraSmall}
+                        width={iconSize}
+                        height={iconSize}
                         src={icon}
                         fill={iconColor}
                     />
                 </View>
             )}
             <Text
-                style={[styles.badgeText, styles.textStrong, textStyles, isDeleted ? styles.offlineFeedbackDeleted : {}]}
+                style={[
+                    styles.badgeText,
+                    styles.textStrong,
+                    isCondensed && styles.condensedBadgeText,
+                    !isStrong && !success && !error && styles.badgeDefaultText,
+                    !isStrong && success && styles.badgeSuccessText,
+                    !isStrong && error && styles.badgeDangerText,
+                    isStrong && (success || error) && styles.badgeStrongText,
+                    textStyles,
+                    isDeleted ? styles.offlineFeedbackDeleted : {},
+                ]}
                 numberOfLines={1}
             >
                 {text}

src/components/Domain/DomainsListRow.tsx

@@ -45,15 +45,15 @@ function DomainsListRow({title, isHovered, badgeText, brickRoadIndicator, menuIt
                 <TextWithTooltip
                     text={title}
                     shouldShowTooltip
-                    style={styles.textStrong}
+                    style={[styles.textStrong, styles.flexShrink1]}
                 />
 
                 {!!badgeText && (
                     <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.justifyContentEnd]}>
                         <Badge
                             text={badgeText}
                             textStyles={styles.textStrong}
-                            badgeStyles={[styles.alignSelfCenter, styles.badgeBordered]}
+                            badgeStyles={styles.alignSelfCenter}
                         />
                     </View>
                 )}

src/components/MenuItem.tsx

@@ -85,7 +85,13 @@ type MenuItemBaseProps = ForwardedFSClassProps &
         badgeIcon?: IconAsset;
 
         /** Whether the badge should be shown as success */
-        badgeSuccess?: boolean;
+        isBadgeSuccess?: boolean;
+
+        /** Whether the badge should use strong (filled) variant */
+        isBadgeStrong?: boolean;
+
+        /** Whether the badge should use condensed (smaller) sizing */
+        isBadgeCondensed?: boolean;
 
         /** Callback to fire when the badge is pressed */
         onBadgePress?: (event?: GestureResponderEvent | KeyboardEvent) => void;
@@ -109,7 +115,7 @@ type MenuItemBaseProps = ForwardedFSClassProps &
         titleStyle?: StyleProp<TextStyle>;
 
         /** Any additional styles to apply on the badge element */
-        badgeStyle?: ViewStyle;
+        badgeStyle?: StyleProp<ViewStyle>;
 
         /** Any additional styles to apply to the label */
         labelStyle?: StyleProp<ViewStyle>;
@@ -451,7 +457,9 @@ function MenuItem({
     onPress,
     badgeText,
     badgeIcon,
-    badgeSuccess,
+    isBadgeSuccess,
+    isBadgeStrong,
+    isBadgeCondensed,
     onBadgePress,
     shouldShowBadgeInSeparateRow = false,
     shouldShowBadgeBelow = false,
@@ -980,8 +988,16 @@ function MenuItem({
                                                             <Badge
                                                                 text={badgeText}
                                                                 icon={badgeIcon}
-                                                                badgeStyles={[badgeStyle, styles.alignSelfStart, styles.ml3, styles.mt2]}
-                                                                success={badgeSuccess}
+                                                                badgeStyles={[
+                                                                    badgeStyle,
+                                                                    styles.alignSelfStart,
+                                                                    styles.ml3,
+                                                                    styles.mt2,
+                                                                    focused && !isBadgeSuccess && styles.badgeDefaultActive,
+                                                                ]}
+                                                                success={isBadgeSuccess}
+                                                                isStrong={isBadgeStrong}
+                                                                isCondensed={isBadgeCondensed}
                                                                 onPress={onBadgePress}
                                                                 pressable={!!onBadgePress}
                                                             />
@@ -996,8 +1012,10 @@ function MenuItem({
                                                     <Badge
                                                         text={badgeText}
                                                         icon={badgeIcon}
-                                                        badgeStyles={badgeStyle}
-                                                        success={badgeSuccess}
+                                                        badgeStyles={[badgeStyle, focused && !isBadgeSuccess && styles.badgeDefaultActive]}
+                                                        success={isBadgeSuccess}
+                                                        isStrong={isBadgeStrong}
+                                                        isCondensed={isBadgeCondensed}
                                                         onPress={onBadgePress}
                                                         pressable={!!onBadgePress}
                                                     />
@@ -1094,8 +1112,10 @@ function MenuItem({
                                             <Badge
                                                 text={badgeText}
                                                 icon={badgeIcon}
-                                                badgeStyles={[badgeStyle, styles.alignSelfStart, styles.ml13, styles.mt2]}
-                                                success={badgeSuccess}
+                                                badgeStyles={[badgeStyle, styles.alignSelfStart, styles.ml13, styles.mt2, focused && !isBadgeSuccess && styles.badgeDefaultActive]}
+                                                success={isBadgeSuccess}
+                                                isStrong={isBadgeStrong}
+                                                isCondensed={isBadgeCondensed}
                                                 onPress={onBadgePress}
                                                 pressable={!!onBadgePress}
                                             />

src/components/ParentNavigationSubtitle.tsx

@@ -21,6 +21,7 @@ import NAVIGATORS from '@src/NAVIGATORS';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
+import StatusBadge from './StatusBadge';
 import Text from './Text';
 import TextLink from './TextLink';
 
@@ -189,18 +190,12 @@ function ParentNavigationSubtitle({
     return (
         <View style={[styles.flexRow, styles.alignItemsCenter, styles.w100]}>
             {!!statusText && (
-                <View
-                    style={[
-                        styles.reportStatusContainer,
-                        styles.mr1,
-                        {
-                            backgroundColor: statusTextBackgroundColor,
-                        },
-                        statusTextContainerStyles,
-                    ]}
-                >
-                    <Text style={[styles.reportStatusText, {color: statusTextColor}]}>{statusText}</Text>
-                </View>
+                <StatusBadge
+                    text={statusText}
+                    backgroundColor={statusTextBackgroundColor}
+                    textColor={statusTextColor}
+                    badgeStyles={[styles.mr1, statusTextContainerStyles]}
+                />
             )}
             <Text
                 style={[styles.optionAlternateText, styles.textLabelSupporting, styles.flexShrink1, styles.mnw0, textStyles]}

src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

@@ -24,6 +24,7 @@ import ExportWithDropdownMenu from '@components/ReportActionItem/ExportWithDropd
 import AnimatedSettlementButton from '@components/SettlementButton/AnimatedSettlementButton';
 import type {PaymentActionParams} from '@components/SettlementButton/types';
 import {showContextMenuForReport} from '@components/ShowContextMenuContext';
+import StatusBadge from '@components/StatusBadge';
 import Text from '@components/Text';
 import useConfirmModal from '@hooks/useConfirmModal';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
@@ -885,26 +886,12 @@ function MoneyRequestReportPreviewContent({
                                                     (shouldShowReportStatus || !shouldShowAccessPlaceHolder) && (
                                                         <View style={[styles.flexRow, styles.justifyContentStart, styles.alignItemsCenter]}>
                                                             {shouldShowReportStatus && (
-                                                                <View
-                                                                    style={[
-                                                                        styles.reportStatusContainer,
-                                                                        styles.mr1,
-                                                                        {
-                                                                            backgroundColor: reportStatusColorStyle?.backgroundColor,
-                                                                        },
-                                                                    ]}
-                                                                >
-                                                                    <Text
-                                                                        style={[
-                                                                            styles.reportStatusText,
-                                                                            {
-                                                                                color: reportStatusColorStyle?.textColor,
-                                                                            },
-                                                                        ]}
-                                                                    >
-                                                                        {reportStatus}
-                                                                    </Text>
-                                                                </View>
+                                                                <StatusBadge
+                                                                    text={reportStatus}
+                                                                    backgroundColor={reportStatusColorStyle?.backgroundColor}
+                                                                    textColor={reportStatusColorStyle?.textColor}
+                                                                    badgeStyles={styles.mr1}
+                                                                />
                                                             )}
                                                             {!shouldShowAccessPlaceHolder && <Text style={[styles.textLabelSupporting, styles.lh16]}>{expenseCount}</Text>}
                                                         </View>

src/components/SelectionListWithSections/Search/ActionCell/BadgeActionCell.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
 import Badge from '@components/Badge';
-import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
@@ -14,19 +13,18 @@ import actionTranslationsMap from './actionTranslationsMap';
 type BadgeActionCellProps = {
     action: SearchTransactionAction;
     isLargeScreenWidth: boolean;
-    isSelected: boolean;
-    extraSmall: boolean;
     shouldDisablePointerEvents?: boolean;
 };
 
-function BadgeActionCell({action, isLargeScreenWidth, isSelected, extraSmall, shouldDisablePointerEvents}: BadgeActionCellProps) {
+function BadgeActionCell({action, isLargeScreenWidth, shouldDisablePointerEvents}: BadgeActionCellProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const expensifyIcons = useMemoizedLazyExpensifyIcons(['Checkmark', 'Checkbox']);
     const text = translate(actionTranslationsMap[action]);
 
+    const badgeTheme = action === CONST.SEARCH.ACTION_TYPES.PAID ? theme.reportStatusBadge.paid : theme.reportStatusBadge.approved;
+
     return (
         <View
             style={[StyleUtils.getHeight(variables.h20), styles.justifyContentCenter, shouldDisablePointerEvents && styles.pointerEventsNone]}
@@ -35,20 +33,14 @@ function BadgeActionCell({action, isLargeScreenWidth, isSelected, extraSmall, sh
         >
             <Badge
                 text={text}
-                icon={action === CONST.SEARCH.ACTION_TYPES.DONE ? expensifyIcons.Checkbox : expensifyIcons.Checkmark}
+                isCondensed
                 badgeStyles={[
                     styles.ml0,
-                    styles.ph2,
-                    styles.gap1,
+                    styles.borderNone,
                     isLargeScreenWidth ? styles.alignSelfCenter : styles.alignSelfEnd,
-                    StyleUtils.getHeight(variables.h20),
-                    StyleUtils.getMinimumHeight(variables.h20),
-                    isSelected ? StyleUtils.getBorderColorStyle(theme.buttonHoveredBG) : StyleUtils.getBorderColorStyle(theme.border),
+                    StyleUtils.getBackgroundColorStyle(badgeTheme.backgroundColor),
                 ]}
-                textStyles={StyleUtils.getFontSizeStyle(extraSmall ? variables.fontSizeExtraSmall : variables.fontSizeSmall)}
-                iconStyles={styles.mr0}
-                success
-                shouldUseXXSmallIcon={extraSmall}
+                textStyles={StyleUtils.getColorStyle(badgeTheme.textColor)}
             />
         </View>
     );

src/components/SelectionListWithSections/Search/ActionCell/index.tsx

@@ -52,8 +52,6 @@ function ActionCell({
             <BadgeActionCell
                 action={action}
                 isLargeScreenWidth={isLargeScreenWidth}
-                isSelected={isSelected}
-                extraSmall={extraSmall}
                 shouldDisablePointerEvents={shouldDisablePointerEvents}
             />
         );

src/components/SelectionListWithSections/Search/StatusCell.tsx

@@ -1,6 +1,6 @@
 import React, {useMemo} from 'react';
 import {View} from 'react-native';
-import Text from '@components/Text';
+import StatusBadge from '@components/StatusBadge';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -25,29 +25,17 @@ function StatusCell({stateNum, statusNum, isPending}: StatusCellProps) {
     const statusText = useMemo(() => getReportStatusTranslation({stateNum, statusNum, translate}), [stateNum, statusNum, translate]);
     const reportStatusColorStyle = useMemo(() => getReportStatusColorStyle(theme, stateNum, statusNum), [theme, stateNum, statusNum]);
 
-    const backgroundColorStyle = useMemo(
-        () => ({
-            backgroundColor: reportStatusColorStyle?.backgroundColor,
-        }),
-        [reportStatusColorStyle?.backgroundColor],
-    );
-
-    const textColorStyle = useMemo(
-        () => ({
-            color: reportStatusColorStyle?.textColor,
-        }),
-        [reportStatusColorStyle?.textColor],
-    );
-
     if (!statusText || !reportStatusColorStyle) {
         return null;
     }
 
     return (
-        <View style={[styles.justifyContentCenter, styles.alignItemsCenter, isPending && styles.offlineFeedbackPending]}>
-            <View style={[styles.reportStatusContainer, backgroundColorStyle]}>
-                <Text style={[styles.reportStatusText, textColorStyle]}>{statusText}</Text>
-            </View>
+        <View style={[styles.w100, styles.justifyContentCenter, isPending && styles.offlineFeedbackPending]}>
+            <StatusBadge
+                text={statusText}
+                backgroundColor={reportStatusColorStyle.backgroundColor}
+                textColor={reportStatusColorStyle.textColor}
+            />
         </View>
     );
 }