bug/9302-HSPButtonsActiveColor (#9436)

department-of-veterans-affairs · Aug 26, 2024 · fa02a8a · fa02a8a
1 parent eb38d19
commit fa02a8a
Show file tree

Hide file tree

Showing 8 changed files with 217 additions and 234 deletions.
diff --git a/VAMobile/src/components/ActivityButton.tsx b/VAMobile/src/components/ActivityButton.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
-import { Linking, Platform, Pressable, ViewStyle } from 'react-native'
+import { Linking, Platform, Pressable, PressableStateCallbackType, ViewStyle } from 'react-native'
 
-import { BackgroundVariant, Box, BoxProps, TextView, VAIcon } from 'components'
+import { Box, TextView, VAIcon } from 'components'
 import { useTheme } from 'utils/hooks'
 import { WaygateToggleType, waygateNativeAlert } from 'utils/waygateConfig'
 
@@ -22,29 +22,24 @@ interface ActivityButtonProps {
 const ActivityButton: FC<ActivityButtonProps> = ({ title, subText, deepLink }: ActivityButtonProps) => {
   const theme = useTheme()
 
-  const boxProps: BoxProps = {
-    borderRadius: 8,
-    py: theme.dimensions.cardPadding,
-    px: theme.dimensions.buttonPadding,
-    backgroundColor: theme.colors.buttonBackground.activityButton as BackgroundVariant,
-    style: {
-      shadowColor: colors.black,
-      ...Platform.select({
-        ios: {
-          shadowOffset: { width: 0, height: 6 },
-          shadowOpacity: 0.4,
-          shadowRadius: 8,
-        },
-        android: {
-          elevation: 8,
-        },
-      }),
-    },
-  }
-
-  const pressableStyles: ViewStyle = {
+  const pressableStyle = ({ pressed }: PressableStateCallbackType): ViewStyle => ({
     flexDirection: 'row',
-  }
+    borderRadius: 8,
+    backgroundColor: pressed
+      ? theme.colors.buttonBackground.activityButtonActive
+      : theme.colors.buttonBackground.activityButton,
+    shadowColor: colors.black,
+    ...Platform.select({
+      ios: {
+        shadowOffset: { width: 0, height: 6 },
+        shadowOpacity: 0.4,
+        shadowRadius: 8,
+      },
+      android: {
+        elevation: 8,
+      },
+    }),
+  })
 
   const onActivityPress = () => {
     let useCaseOneString = ''
@@ -63,41 +58,36 @@ const ActivityButton: FC<ActivityButtonProps> = ({ title, subText, deepLink }: A
   }
 
   return (
-    <Box {...boxProps}>
-      <Pressable
-        style={pressableStyles}
-        onPress={onActivityPress}
-        accessible={true}
-        accessibilityRole={'link'}
-        accessibilityLabel={title}
-        accessibilityValue={{ text: subText }}
-        testID={title}>
-        <Box flex={1}>
-          <Box
-            flexDirection={'row'}
-            flexWrap={'wrap'}
-            mb={subText ? theme.dimensions.standardMarginBetween : undefined}>
-            <TextView variant="ActivityButtonHeader">{title}</TextView>
-          </Box>
-          {!!subText && (
-            <Box flexDirection={'row'} alignItems="center">
-              <Box flex={1}>
-                <TextView variant={'ActivityButtonSubtext'}>{subText}</TextView>
-              </Box>
-              <VAIcon
-                width={24}
-                height={24}
-                name="RightArrowInCircle"
-                fill={theme.colors.icon.activityButton}
-                fill2={theme.colors.icon.transparent}
-                ml={theme.dimensions.listItemDecoratorMarginLeft}
-                preventScaling={true}
-              />
-            </Box>
-          )}
+    <Pressable
+      style={pressableStyle}
+      onPress={onActivityPress}
+      accessible={true}
+      accessibilityRole={'link'}
+      accessibilityLabel={title}
+      accessibilityValue={{ text: subText }}
+      testID={title}>
+      <Box flex={1} my={theme.dimensions.cardPadding} mx={theme.dimensions.buttonPadding}>
+        <Box flexDirection={'row'} flexWrap={'wrap'} mb={subText ? theme.dimensions.standardMarginBetween : undefined}>
+          <TextView variant="ActivityButtonHeader">{title}</TextView>
         </Box>
-      </Pressable>
-    </Box>
+        {!!subText && (
+          <Box flexDirection={'row'} alignItems="center">
+            <Box flex={1}>
+              <TextView variant={'ActivityButtonSubtext'}>{subText}</TextView>
+            </Box>
+            <VAIcon
+              width={24}
+              height={24}
+              name="RightArrowInCircle"
+              fill={theme.colors.icon.activityButton}
+              fill2={theme.colors.icon.transparent}
+              ml={theme.dimensions.listItemDecoratorMarginLeft}
+              preventScaling={true}
+            />
+          </Box>
+        )}
+      </Box>
+    </Pressable>
   )
 }
 

diff --git a/VAMobile/src/components/AnnouncementBanner.tsx b/VAMobile/src/components/AnnouncementBanner.tsx
@@ -1,9 +1,9 @@
 import React, { FC } from 'react'
-import { Platform, Pressable, ViewStyle } from 'react-native'
+import { Platform, Pressable, PressableStateCallbackType, ViewStyle } from 'react-native'
 
 import { Icon } from '@department-of-veterans-affairs/mobile-component-library/src/components/Icon/Icon'
 
-import { BackgroundVariant, Box, BoxProps, TextView } from 'components'
+import { Box, TextView } from 'components'
 import { useExternalLink, useTheme } from 'utils/hooks'
 
 import colors from '../styles/themes/VAColors'
@@ -21,46 +21,39 @@ const AnnouncementBanner: FC<AnnouncementBannerProps> = ({ title, link, a11yLabe
   const theme = useTheme()
   const launchExternalLink = useExternalLink()
 
-  const boxProps: BoxProps = {
-    py: theme.dimensions.formMarginBetween,
-    px: theme.dimensions.cardPadding,
-    backgroundColor: theme.colors.buttonBackground.announcementBanner as BackgroundVariant,
-    style: {
-      shadowColor: colors.black,
-      ...Platform.select({
-        ios: {
-          shadowOffset: { width: 0, height: 6 },
-          shadowOpacity: 0.15,
-          shadowRadius: 8,
-        },
-        android: {
-          elevation: 8,
-        },
-      }),
-    },
-  }
-
-  const pressableStyles: ViewStyle = {
+  const pressableStyle = ({ pressed }: PressableStateCallbackType): ViewStyle => ({
     flexDirection: 'row',
-  }
+    paddingVertical: theme.dimensions.formMarginBetween,
+    paddingHorizontal: theme.dimensions.cardPadding,
+    backgroundColor: pressed ? theme.colors.background.listActive : theme.colors.buttonBackground.announcementBanner,
+    shadowColor: colors.black,
+    ...Platform.select({
+      ios: {
+        shadowOffset: { width: 0, height: 6 },
+        shadowOpacity: 0.15,
+        shadowRadius: 8,
+      },
+      android: {
+        elevation: 8,
+      },
+    }),
+  })
 
   return (
-    <Box {...boxProps}>
-      <Pressable
-        style={pressableStyles}
-        onPress={() => launchExternalLink(link)}
-        accessible={true}
-        accessibilityRole={'link'}
-        accessibilityLabel={a11yLabel}
-        testID={title}>
-        <Box flexDirection={'row'} flex={1}>
-          <Box flex={1}>
-            <TextView variant="AnnouncementBannerTitle">{title}</TextView>
-          </Box>
-          <Icon preventScaling={true} name={'Launch'} fill={theme.colors.icon.announcementBanner} />
+    <Pressable
+      style={pressableStyle}
+      onPress={() => launchExternalLink(link)}
+      accessible={true}
+      accessibilityRole={'link'}
+      accessibilityLabel={a11yLabel}
+      testID={title}>
+      <Box flexDirection={'row'} flex={1}>
+        <Box flex={1}>
+          <TextView variant="AnnouncementBannerTitle">{title}</TextView>
         </Box>
-      </Pressable>
-    </Box>
+        <Icon preventScaling={true} name={'Launch'} fill={theme.colors.icon.announcementBanner} />
+      </Box>
+    </Pressable>
   )
 }
 

diff --git a/VAMobile/src/components/CrisisLineButton.tsx b/VAMobile/src/components/CrisisLineButton.tsx
@@ -1,42 +1,44 @@
 import React, { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { TouchableWithoutFeedback, TouchableWithoutFeedbackProps } from 'react-native'
+import { Pressable, PressableProps } from 'react-native'
 
-import { Box, BoxProps, TextView } from 'components/index'
+import { Box, TextView } from 'components/index'
 import { NAMESPACE } from 'constants/namespaces'
 import { useRouteNavigation, useTheme } from 'utils/hooks'
 
 /**
  * Crisis Line Button component
  */
 const CrisisLineButton: FC = () => {
-  const { t } = useTranslation(NAMESPACE.COMMON)
   const theme = useTheme()
+  const { t } = useTranslation(NAMESPACE.COMMON)
   const navigateTo = useRouteNavigation()
 
-  const touchableProps: TouchableWithoutFeedbackProps = {
+  const pressableProps: PressableProps = {
     accessible: true,
     accessibilityRole: 'link',
-  }
-
-  const boxProps: BoxProps = {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    backgroundColor: 'ctaButton',
-    minHeight: theme.dimensions.touchableMinHeight,
-    mx: theme.dimensions.gutter,
-    my: theme.dimensions.standardMarginBetween,
-    py: theme.dimensions.headerLeftButtonFromTextPadding,
-    px: theme.dimensions.cardPadding,
-    borderRadius: 40,
+    onPress: () => navigateTo('VeteransCrisisLine'),
+    style: ({ pressed }) => [
+      {
+        backgroundColor: pressed
+          ? theme.colors.buttonBackground.crisisLineActive
+          : theme.colors.buttonBackground.crisisLine,
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: theme.dimensions.touchableMinHeight,
+        borderRadius: 40,
+      },
+    ],
   }
 
   return (
-    <TouchableWithoutFeedback onPress={() => navigateTo('VeteransCrisisLine')} {...touchableProps}>
-      <Box {...boxProps}>
-        <TextView variant={'CrisisLineButton'}>{t('crisisLineButton.label')}</TextView>
-      </Box>
-    </TouchableWithoutFeedback>
+    <Box mx={theme.dimensions.gutter} my={theme.dimensions.standardMarginBetween}>
+      <Pressable {...pressableProps}>
+        <TextView variant={'CrisisLineButton'} py={14}>
+          {t('crisisLineButton.label')}
+        </TextView>
+      </Pressable>
+    </Box>
   )
 }