10313-MoreIconConversionsAgain

VAMobile/src/components/AttachmentLink.tsx

@@ -1,14 +1,15 @@
 import React, { FC } from 'react'
 import { AccessibilityProps, Pressable, PressableProps } from 'react-native'
 
+import { Icon } from '@department-of-veterans-affairs/mobile-component-library'
+
 import { a11yHintProp } from 'utils/accessibility'
 import { useTheme } from 'utils/hooks'
 import { featureEnabled } from 'utils/remoteConfig'
 
 import Box from './Box'
 import LinkWithAnalytics from './LinkWithAnalytics'
 import TextView from './TextView'
-import VAIcon from './VAIcon'
 
 export type AttachmentLinkProps = {
   /** Name of link/attachment */
@@ -57,7 +58,7 @@ const AttachmentLink: FC<AttachmentLinkProps> = ({
       <Pressable {...a11yProps} {...pressableProps}>
         <Box flexDirection={'row'} mr={theme.dimensions.gutter}>
           <Box mt={theme.dimensions.attachmentIconTopMargin} mr={theme.dimensions.textIconMargin}>
-            <VAIcon name="PaperClip" width={16} height={16} fill={'link'} />
+            <Icon name="AttachFile" width={20} height={20} fill={theme.colors.icon.link} />
           </Box>
           <TextView mr={theme.dimensions.textIconMargin} variant={'MobileBodyLink'}>
             {text}

VAMobile/src/components/FormWrapper/FormFields/FormAttachments.tsx

@@ -2,10 +2,10 @@ import React, { FC, ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ImagePickerResponse } from 'react-native-image-picker/src/types'
 
-import { Button, ButtonVariants } from '@department-of-veterans-affairs/mobile-component-library'
+import { Button, ButtonVariants, Icon } from '@department-of-veterans-affairs/mobile-component-library'
 import _ from 'underscore'
 
-import { Box, TextView, VAIcon } from 'components/index'
+import { Box, TextView } from 'components/index'
 import { NAMESPACE } from 'constants/namespaces'
 import { DocumentPickerResponse } from 'screens/BenefitsScreen/BenefitsStackScreens'
 import { getFileDisplay } from 'utils/common'
@@ -45,21 +45,19 @@ const FormAttachments: FC<FormAttachmentsProps> = ({
       return (
         <Box key={index}>
           <Box
-            display="flex"
-            flexDirection="row"
-            justifyContent="space-between"
-            alignItems="center"
-            flexWrap="wrap"
-            mt={index !== 0 ? theme.dimensions.condensedMarginBetween : 0}>
-            <Box display="flex" flexDirection="row" alignItems="center" flexWrap="wrap" justifyContent="space-between">
-              <VAIcon name="PaperClip" width={16} height={16} fill="spinner" />
-              <TextView
-                variant="MobileBodyBold"
-                ml={theme.dimensions.textIconMargin}
-                accessibilityLabel={fileSizeA11y ? [fileName, fileSizeA11y].join(' ').trim() : undefined}>
-                {text}
-              </TextView>
+            flexDirection={'row'}
+            mr={theme.dimensions.gutter}
+            mt={index !== 0 ? theme.dimensions.condensedMarginBetween : 0}
+            mb={theme.dimensions.condensedMarginBetween}>
+            <Box mt={theme.dimensions.attachmentIconTopMargin} mr={theme.dimensions.textIconMargin}>
+              <Icon name="AttachFile" width={20} height={20} fill={theme.colors.icon.spinner} />
             </Box>
+            <TextView
+              variant="MobileBodyBold"
+              ml={theme.dimensions.textIconMargin}
+              accessibilityLabel={fileSizeA11y ? [fileName, fileSizeA11y].join(' ').trim() : undefined}>
+              {text}
+            </TextView>
           </Box>
           <Button
             onPress={() => removeOnPress?.(attachment)}

VAMobile/src/components/LabelTag.tsx

@@ -1,11 +1,12 @@
 import React, { FC } from 'react'
 import { AccessibilityRole, Pressable, PressableProps, useWindowDimensions } from 'react-native'
 
+import { Icon, IconProps } from '@department-of-veterans-affairs/mobile-component-library'
+
 import { useTheme } from 'utils/hooks'
 
 import Box, { BoxProps } from './Box'
 import TextView from './TextView'
-import VAIcon, { VAIconProps } from './VAIcon'
 
 export const LabelTagTypeConstants: {
   tagBlue: LabelTagTypes
@@ -104,20 +105,20 @@ const LabelTag: FC<LabelTagProps> = ({ text, labelType, onPress, a11yHint, a11yL
       }
     }
 
-    const infoIconProps: VAIconProps = {
+    const infoIconProps: IconProps = {
       name: 'Info',
-      fill: 'tagInfoIcon',
-      fill2: 'transparent',
-      height: adjustSize ? 10 : 16,
-      width: adjustSize ? 10 : 16,
-      mr: adjustSize ? 5 : 10,
+      fill: theme.colors.icon.tagInfoIcon,
+      height: adjustSize ? 13 : 20,
+      width: adjustSize ? 13 : 20,
     }
 
     return (
       <Pressable {...pressableProps}>
         <Box {...wrapperProps}>
           {textView}
-          <VAIcon {...infoIconProps} />
+          <Box mr={adjustSize ? 5 : 10}>
+            <Icon {...infoIconProps} />
+          </Box>
         </Box>
       </Pressable>
     )

VAMobile/src/components/LargeNavButton.tsx

@@ -3,9 +3,10 @@ import ContentLoader, { Rect } from 'react-content-loader/native'
 import { useTranslation } from 'react-i18next'
 import { Platform, Pressable, PressableStateCallbackType, ViewStyle } from 'react-native'
 
+import { Icon } from '@department-of-veterans-affairs/mobile-component-library'
 import { colors } from '@department-of-veterans-affairs/mobile-tokens'
 
-import { Box, TextView, VAIcon } from 'components'
+import { Box, TextView } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { a11yHintProp } from 'utils/accessibility'
 import { useTheme } from 'utils/hooks'
@@ -100,17 +101,15 @@ const LargeNavButton: FC<HomeNavButtonProps> = ({
             <></>
           )}
         </Box>
-        <VAIcon
-          flexDirection="row"
-          alignItems="flex-end"
-          width={24}
-          height={24}
-          name="RightArrowInCircle"
-          fill={theme.colors.icon.largeNavButton}
-          fill2={'transparent'}
-          ml={theme.dimensions.listItemDecoratorMarginLeft}
-          preventScaling={true}
-        />
+        <Box flexDirection="row" alignItems="flex-end">
+          <Icon
+            width={30}
+            height={30}
+            name="ArrowCircleRight"
+            fill={theme.colors.icon.largeNavButton}
+            preventScaling={true}
+          />
+        </Box>
       </Box>
     </Pressable>
   )

VAMobile/src/components/PhotoPreview.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { Image, Pressable, PressableProps } from 'react-native'
 import { Asset } from 'react-native-image-picker/src/types'
 
+import { Icon } from '@department-of-veterans-affairs/mobile-component-library'
 import styled from 'styled-components'
 
 import { NAMESPACE } from 'constants/namespaces'
@@ -12,7 +13,6 @@ import { themeFn } from 'utils/theme'
 
 import Box, { BoxProps } from './Box'
 import TextView, { TextViewProps } from './TextView'
-import { VAIcon } from './index'
 
 type PhotoPreviewProps = {
   /** width of the photo */
@@ -119,21 +119,21 @@ const PhotoPreview: FC<PhotoPreviewProps> = ({ width, height, image, onDeleteCal
         {selected && <Box {...blueOpacity} />}
         <Box pt={photoPreviewIconPadding} pr={photoPreviewIconPadding} position="absolute" alignSelf="flex-end">
           {selected && (
-            <VAIcon
-              name={'Minus'}
+            <Icon
+              name={'RemoveCircle'}
               width={photoPreviewIconSize}
               height={photoPreviewIconSize}
               maxWidth={photoPreviewMaxIconSize}
               fill={themeColor.icon.photoAdd}
             />
           )}
           {!selected && (
-            <VAIcon
-              name={'Remove'}
+            <Icon
+              name={'Cancel'}
               width={photoPreviewIconSize}
               height={photoPreviewIconSize}
               maxWidth={photoPreviewMaxIconSize}
-              fill={themeColor.icon.deleteFill}
+              fill={themeColor.icon.error}
             />
           )}
         </Box>

VAMobile/src/components/TextLineWithIcon.test.tsx

@@ -12,7 +12,7 @@ context('TextLineWithIcon', () => {
   beforeEach(() => {
     const testLine1 = {
       text: 'line1',
-      iconProps: { name: 'PaperClip', width: 16, height: 16, testID: 'PaperClip' } as VAIconProps,
+      iconProps: { name: 'Trash', width: 16, height: 16, testID: 'Trash' } as VAIconProps,
     }
     const testLine2 = {
       text: 'another line2',
@@ -30,7 +30,7 @@ context('TextLineWithIcon', () => {
   })
 
   it('renders correct VAIcons', () => {
-    expect(screen.getByTestId('PaperClip')).toBeTruthy()
+    expect(screen.getByTestId('Trash')).toBeTruthy()
     expect(screen.getByTestId('Unread')).toBeTruthy()
   })
 

VAMobile/src/screens/HealthScreen/SecureMessaging/ViewMessage/CollapsibleMessage.tsx

@@ -4,6 +4,8 @@ import { View, ViewStyle } from 'react-native'
 
 import { useIsFocused } from '@react-navigation/native'
 
+import { Icon } from '@department-of-veterans-affairs/mobile-component-library'
+
 import { useDownloadFileAttachment, useMessage } from 'api/secureMessaging'
 import { SecureMessagingAttachment, SecureMessagingMessageAttributes } from 'api/types'
 import {
@@ -15,7 +17,6 @@ import {
   LabelTagTypeConstants,
   LoadingComponent,
   TextView,
-  VAIcon,
 } from 'components'
 import { NAMESPACE } from 'constants/namespaces'
 import { bytesToFinalSizeDisplay, bytesToFinalSizeDisplayA11y } from 'utils/common'
@@ -164,7 +165,7 @@ function CollapsibleMessage({ message, isInitialMessage, collapsibleMessageRef }
         <Box flexDirection={'row'} mr={theme.dimensions.textIconMargin}>
           {attachmentBoolean && (
             <Box mt={theme.dimensions.attachmentIconTopMargin} mr={theme.dimensions.textIconMargin}>
-              <VAIcon name={'PaperClip'} fill={'spinner'} width={16} height={16} />
+              <Icon name={'AttachFile'} fill={theme.colors.icon.spinner} width={20} height={20} />
             </Box>
           )}
           {sentDate && sentDate.length > 1 ? (

VAMobile/src/styles/themes/standardTheme.ts

@@ -255,7 +255,7 @@ let theme: VATheme = {
     ...colorScheme,
   },
   dimensions: {
-    attachmentIconTopMargin: 8,
+    attachmentIconTopMargin: 6,
     borderWidth: 1,
     focusedInputBorderWidth: 2,
     buttonBorderWidth: 2,