Merge pull request #83811 from samranahm/79767/add-verified-badge

feat: Add verified badge in domains list row after verifying the domain

Author: marcochavezf

src/components/Domain/DomainMenuItem.tsx

@@ -56,6 +56,11 @@ function DomainMenuItem({item, index}: DomainMenuItemProps) {
     const {translate} = useLocalize();
     const {isAdmin, isValidated, action} = item;
 
+    let badgeText: string | undefined;
+    if (isAdmin) {
+        badgeText = isValidated ? translate('common.verified') : translate('domain.notVerified');
+    }
+
     const threeDotsMenuItems: PopoverMenuItem[] | undefined = useMemo(
         () =>
             isAdmin
@@ -93,7 +98,8 @@ function DomainMenuItem({item, index}: DomainMenuItemProps) {
                 {({hovered}) => (
                     <DomainsListRow
                         title={item.title}
-                        badgeText={isAdmin && !isValidated ? translate('domain.notVerified') : undefined}
+                        badgeText={badgeText}
+                        isBadgeSuccess={isValidated}
                         isHovered={hovered}
                         menuItems={threeDotsMenuItems}
                         brickRoadIndicator={item.brickRoadIndicator}

src/components/Domain/DomainsListRow.tsx

@@ -22,14 +22,17 @@ type DomainsListRowProps = {
     /** The text to display inside a badge next to the title */
     badgeText?: string;
 
+    /** Whether the badge should use success styling */
+    isBadgeSuccess?: boolean;
+
     /** Items for the three dots menu */
     menuItems?: PopoverMenuItem[];
 
     /** The type of brick road indicator to show */
     brickRoadIndicator?: ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS>;
 };
 
-function DomainsListRow({title, isHovered, badgeText, brickRoadIndicator, menuItems}: DomainsListRowProps) {
+function DomainsListRow({title, isHovered, badgeText, isBadgeSuccess, brickRoadIndicator, menuItems}: DomainsListRowProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
 
@@ -53,6 +56,7 @@ function DomainsListRow({title, isHovered, badgeText, brickRoadIndicator, menuIt
                     <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.justifyContentEnd]}>
                         <Badge
                             text={badgeText}
+                            success={isBadgeSuccess}
                             textStyles={styles.textStrong}
                             badgeStyles={styles.alignSelfCenter}
                         />