@bifold/core 2.2.1 → 2.4.0

package/src/components/tour/HomeTourSteps.tsx

@@ -12,7 +12,7 @@ export const homeTourSteps: TourStep[] = [
     Render: (props: RenderProps) => {
       const { currentTour, currentStep, next, stop, previous } = props
       const { t } = useTranslation()
-      const { ColorPallet, TextTheme } = useTheme()
+      const { ColorPalette, TextTheme } = useTheme()
       return (
         <TourBox
           title={t('Tour.AddAndShare')}
@@ -29,7 +29,7 @@ export const homeTourSteps: TourStep[] = [
           <Text
             style={{
               ...TextTheme.normal,
-              color: ColorPallet.notification.infoText,
+              color: ColorPalette.notification.infoText,
             }}
             allowFontScaling={false}
           >
@@ -43,7 +43,7 @@ export const homeTourSteps: TourStep[] = [
     Render: (props: RenderProps) => {
       const { currentTour, currentStep, next, stop, previous } = props
       const { t } = useTranslation()
-      const { ColorPallet, TextTheme } = useTheme()
+      const { ColorPalette, TextTheme } = useTheme()
       return (
         <TourBox
           title={t('Tour.Notifications')}
@@ -60,7 +60,7 @@ export const homeTourSteps: TourStep[] = [
           <Text
             style={{
               ...TextTheme.normal,
-              color: ColorPallet.notification.infoText,
+              color: ColorPalette.notification.infoText,
             }}
             allowFontScaling={false}
           >
@@ -74,7 +74,7 @@ export const homeTourSteps: TourStep[] = [
     Render: (props: RenderProps) => {
       const { currentTour, currentStep, next, stop, previous } = props
       const { t } = useTranslation()
-      const { ColorPallet, TextTheme } = useTheme()
+      const { ColorPalette, TextTheme } = useTheme()
       return (
         <TourBox
           title={t('Tour.YourCredentials')}
@@ -91,7 +91,7 @@ export const homeTourSteps: TourStep[] = [
           <Text
             style={{
               ...TextTheme.normal,
-              color: ColorPallet.notification.infoText,
+              color: ColorPalette.notification.infoText,
             }}
             allowFontScaling={false}
           >

package/src/components/tour/ProofRequestTourSteps.tsx

@@ -12,7 +12,7 @@ export const proofRequestTourSteps: TourStep[] = [
     Render: (props: RenderProps) => {
       const { currentTour, currentStep, next, stop, previous } = props
       const { t } = useTranslation()
-      const { ColorPallet, TextTheme } = useTheme()
+      const { ColorPalette, TextTheme } = useTheme()
       return (
         <TourBox
           title={t('Tour.ProofRequests')}
@@ -28,7 +28,7 @@ export const proofRequestTourSteps: TourStep[] = [
           <Text
             style={{
               ...TextTheme.normal,
-              color: ColorPallet.notification.infoText,
+              color: ColorPalette.notification.infoText,
             }}
             allowFontScaling={false}
           >

package/src/components/tour/TourBox.tsx

@@ -73,18 +73,18 @@ export function TourBox(props: TourBoxProps): ReactElement {
     stepOn,
     stepsOutOf,
   } = props
-  const { TextTheme, ColorPallet, OnboardingTheme } = useTheme()
+  const { TextTheme, ColorPalette, OnboardingTheme } = useTheme()
   const iconSize = 30
   const dismissIconName = 'clear'
-  const iconColor = ColorPallet.notification.infoIcon
+  const iconColor = ColorPalette.notification.infoIcon
   const [paginationDots, setPaginationDots] = useState<PaginationDotTypes[]>([])
   const [xPos, setXPos] = useState(0)
   const swipeThreshold = 75
 
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: ColorPallet.notification.info,
-      borderColor: ColorPallet.notification.infoBorder,
+      backgroundColor: ColorPalette.notification.info,
+      borderColor: ColorPalette.notification.infoBorder,
       borderRadius: 5,
       borderWidth: 1,
       padding: 20,
@@ -101,7 +101,7 @@ export function TourBox(props: TourBoxProps): ReactElement {
     headerText: {
       ...TextTheme.headingThree,
       alignSelf: 'flex-start',
-      color: ColorPallet.notification.infoText,
+      color: ColorPalette.notification.infoText,
     },
     dismissIcon: {
       alignSelf: 'flex-end',
@@ -116,7 +116,7 @@ export function TourBox(props: TourBoxProps): ReactElement {
     },
     navText: {
       ...TextTheme.bold,
-      color: ColorPallet.brand.primary,
+      color: ColorPalette.brand.primary,
     },
     pagerContainer: {
       flexDirection: 'row',

package/src/components/views/Banner.tsx

@@ -23,10 +23,12 @@ export interface BannerSectionProps extends BannerMessage {
 }
 
 export const Banner: React.FC = () => {
+  const { t } = useTranslation()
+  const { ColorPalette } = useTheme()
   const [store, dispatch] = useStore()
   const [expanded, setExpanded] = useState(false)
+
   const bannerMessages = store.preferences.bannerMessages
-  const { t } = useTranslation()
   const alertMessage: BannerMessage = {
     id: 'alertMessage',
     title: t('Banner.AlertsLength', { alerts: bannerMessages.length }),
@@ -40,6 +42,7 @@ export const Banner: React.FC = () => {
       payload: [key],
     })
   }
+
   if (!bannerMessages || bannerMessages.length == 0) {
     return null
   }
@@ -72,15 +75,19 @@ export const Banner: React.FC = () => {
       />
       {expanded &&
         bannerMessages.map((message) => (
-          <BannerSection
-            id={message.id}
-            key={message.id}
-            title={message.title}
-            type={message.type}
-            variant="detail"
-            onDismiss={() => dismissBanner(message.id)}
-            dismissible={message.dismissible}
-          />
+          <React.Fragment key={message.id}>
+            {/* Render a divider between the banners when multiple banners exist */}
+            <View style={{ height: 2, backgroundColor: ColorPalette.brand.primaryBackground }} />
+            <BannerSection
+              id={message.id}
+              key={message.id}
+              title={message.title}
+              type={message.type}
+              variant="detail"
+              onDismiss={() => dismissBanner(message.id)}
+              dismissible={message.dismissible}
+            />
+          </React.Fragment>
         ))}
     </View>
   )
@@ -95,10 +102,10 @@ export const BannerSection: React.FC<BannerSectionProps> = ({
   expanded,
   onToggle,
 }) => {
-  const { Spacing, ColorPallet } = useTheme()
+  const { Spacing, ColorPalette } = useTheme()
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: ColorPallet.brand.primary,
+      backgroundColor: ColorPalette.brand.primary,
       flexDirection: 'row',
       alignItems: 'center',
       padding: Spacing.md,
@@ -154,14 +161,14 @@ export const BannerSection: React.FC<BannerSectionProps> = ({
       <Icon
         name={iconName(type)}
         size={24}
-        color={type === 'warning' ? ColorPallet.brand.secondaryBackground : ColorPallet.grayscale.white}
+        color={type === 'warning' ? ColorPalette.brand.secondaryBackground : ColorPalette.grayscale.white}
         style={styles.icon}
         testID={testIdWithKey(`icon-${type}`)}
       />
       <ThemedText
         variant={'bold'}
         style={{
-          color: type === 'warning' ? ColorPallet.brand.secondaryBackground : ColorPallet.grayscale.white,
+          color: type === 'warning' ? ColorPalette.brand.secondaryBackground : ColorPalette.grayscale.white,
           flex: 1,
         }}
         testID={testIdWithKey(`text-${type}`)}

package/src/components/views/CredentialDetailPrimaryHeader.tsx

@@ -26,7 +26,7 @@ const CredentialDetailPrimaryHeader: React.FC<CredentialDetailPrimaryHeaderProps
   credential,
 }: CredentialDetailPrimaryHeaderProps) => {
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { width, height } = useWindowDimensions()
   const isBranding11 = brandingOverlayType === BrandingOverlayType.Branding11
   const styles = StyleSheet.create({
@@ -38,8 +38,8 @@ const CredentialDetailPrimaryHeader: React.FC<CredentialDetailPrimaryHeaderProps
     textContainer: {
       color:
         brandingOverlayType === BrandingOverlayType.Branding10
-          ? credentialTextColor(ColorPallet, overlay.brandingOverlay?.primaryBackgroundColor)
-          : ColorPallet.brand.primary,
+          ? credentialTextColor(ColorPalette, overlay.brandingOverlay?.primaryBackgroundColor)
+          : ColorPalette.brand.primary,
     },
   })
 
@@ -92,7 +92,7 @@ const CredentialDetailPrimaryHeader: React.FC<CredentialDetailPrimaryHeaderProps
                 lineHeight: 24,
                 marginTop: 8,
                 fontSize: 14,
-                color: ColorPallet.grayscale.mediumGrey,
+                color: ColorPalette.grayscale.mediumGrey,
               },
             ]}
           >

package/src/components/views/KeyboardView.tsx

@@ -16,11 +16,11 @@ const KeyboardView: React.FC<{ children: React.ReactNode; keyboardAvoiding?: boo
   children,
   keyboardAvoiding = true,
 }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const headerHeight = useSafeHeaderHeight()
   return (
     <SafeAreaView
-      style={{ flex: 1, backgroundColor: ColorPallet.brand.primaryBackground }}
+      style={{ flex: 1, backgroundColor: ColorPalette.brand.primaryBackground }}
       edges={['bottom', 'left', 'right']}
     >
       {keyboardAvoiding ? (

package/src/components/views/ProgressBar.tsx

@@ -9,7 +9,7 @@ export type ProgressBarProps = {
 }
 
 const ProgressBar: React.FC<ProgressBarProps> = ({ progressPercent }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { width: windowWidth } = useWindowDimensions()
   const [progressBarScale] = useState(new Animated.Value(0))
 
@@ -25,12 +25,12 @@ const ProgressBar: React.FC<ProgressBarProps> = ({ progressPercent }) => {
     progressBarContainer: {
       width: '100%',
       height: 8,
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
     },
     progressBar: {
       height: '100%',
       width: '100%',
-      backgroundColor: ColorPallet.brand.highlight,
+      backgroundColor: ColorPalette.brand.highlight,
     },
   })
   // scaleX rather than width is used for the progress bar as this allows useNativeDriver to be true

package/src/contexts/reducers/store.ts

@@ -28,7 +28,6 @@ enum OnboardingDispatchAction {
   DID_NAME_WALLET = 'onboarding/didNameWallet',
   DID_COMPLETE_ONBOARDING = 'onboarding/didCompleteOnboarding',
   ONBOARDING_VERSION = 'onboarding/onboardingVersion',
-  SET_POST_AUTH_SCREENS = 'onboarding/postAuthScreens',
 }
 
 enum MigrationDispatchAction {
@@ -566,10 +565,13 @@ export const reducer = <S extends State>(state: S, action: ReducerAction<Dispatc
     case PreferencesDispatchAction.BANNER_MESSAGES: {
       const bannerMessageToAdd = action?.payload ?? []
       const newBannerMessages = [...state.preferences.bannerMessages, ...bannerMessageToAdd]
+      const uniqueBannerMessages = Array.from(new Set(newBannerMessages))
+
       const preferences: Preferences = {
         ...state.preferences,
-        bannerMessages: newBannerMessages,
+        bannerMessages: uniqueBannerMessages,
       }
+
       PersistentStorage.storeValueForKey(LocalStorageKeys.Preferences, preferences)
       return {
         ...state,
@@ -708,18 +710,6 @@ export const reducer = <S extends State>(state: S, action: ReducerAction<Dispatc
 
       return newState
     }
-    case OnboardingDispatchAction.SET_POST_AUTH_SCREENS: {
-      const value = (action?.payload || []).pop()
-      const onboarding = {
-        ...state.onboarding,
-        postAuthScreens: value,
-      }
-      const newState = {
-        ...state,
-        onboarding,
-      }
-      return newState
-    }
     case MigrationDispatchAction.DID_MIGRATE_TO_ASKAR: {
       const migration: MigrationState = {
         ...state.migration,

package/src/contexts/store.tsx

@@ -25,7 +25,6 @@ export const defaultState: State = {
     didNameWallet: false,
     onboardingVersion: 0,
     didCompleteOnboarding: false,
-    postAuthScreens: [],
   },
   authentication: {
     didAuthenticate: false,

package/src/hooks/chat-messages.tsx

@@ -75,7 +75,7 @@ export const useChatMessagesByConnection = (connection: ConnectionRecord): Exten
   const [messages, setMessages] = useState<Array<ExtendedChatMessage>>([])
   const [store] = useStore()
   const { t } = useTranslation()
-  const { ChatTheme: theme, ColorPallet } = useTheme()
+  const { ChatTheme: theme, ColorPalette } = useTheme()
   const navigation = useNavigation<StackNavigationProp<RootStackParams | ContactStackParams>>()
   const basicMessages = useBasicMessagesByConnectionId(connection?.id)
   const credentials = useCredentialsByConnectionId(connection?.id)
@@ -111,7 +111,7 @@ export const useChatMessagesByConnection = (connection: ConnectionRecord): Exten
                   <ThemedText>{split}</ThemedText>
                   <ThemedText
                     onPress={() => handleLinkPress(link)}
-                    style={{ color: ColorPallet.brand.link, textDecorationLine: 'underline' }}
+                    style={{ color: ColorPalette.brand.link, textDecorationLine: 'underline' }}
                     accessibilityRole={'link'}
                   >
                     {link}
@@ -257,7 +257,7 @@ export const useChatMessagesByConnection = (connection: ConnectionRecord): Exten
         ? [...transformedMessages.sort((a: any, b: any) => b.createdAt - a.createdAt), connectedMessage]
         : transformedMessages.sort((a: any, b: any) => b.createdAt - a.createdAt)
     )
-  }, [ColorPallet, basicMessages, theme, credentials, t, navigation, proofs, theirLabel, connection])
+  }, [ColorPalette, basicMessages, theme, credentials, t, navigation, proofs, theirLabel, connection])
 
   return messages
 }

package/src/hooks/credential-card-styles.ts

@@ -10,7 +10,7 @@ const useCredentialCardStyles = (
   brandingOverlayType: BrandingOverlayType,
   proof?: boolean
 ) => {
-  const { ColorPallet, TextTheme, ListItems, CredentialCardShadowTheme } = useTheme()
+  const { ColorPalette, TextTheme, ListItems, CredentialCardShadowTheme } = useTheme()
   const { width, fontScale } = useWindowDimensions()
   const padding = width * 0.05
   const logoHeight = width * 0.12
@@ -91,7 +91,7 @@ const useCredentialCardStyles = (
       color:
         proof && brandingOverlayType === BrandingOverlayType.Branding10
           ? TextTheme.normal.color
-          : credentialTextColor(ColorPallet, overlay.brandingOverlay?.primaryBackgroundColor),
+          : credentialTextColor(ColorPalette, overlay.brandingOverlay?.primaryBackgroundColor),
       flexShrink: 1,
       ...(brandingOverlayType === BrandingOverlayType.Branding11 && {
         fontSize: 16,
@@ -125,12 +125,12 @@ const useCredentialCardStyles = (
     selectedCred: {
       borderWidth: 5,
       borderRadius: 15,
-      borderColor: ColorPallet.semantic.focus,
+      borderColor: ColorPalette.semantic.focus,
     },
     credActionText: {
       fontSize: 20,
       fontWeight: TextTheme.bold.fontWeight,
-      color: ColorPallet.brand.link,
+      color: ColorPalette.brand.link,
     },
     cardAttributeContainer: {
       marginVertical: 16,

package/src/index.ts

@@ -63,6 +63,7 @@ import { defaultConfig, defaultHistoryEventsLogger } from './container-impl'
 import useBifoldAgentSetup from './hooks/useBifoldAgentSetup'
 import usePreventScreenCapture from './hooks/screen-capture'
 import { DefaultScreenLayoutOptions } from './navigators/defaultLayoutOptions'
+import { ThemeBuilder } from './theme-builder'
 
 export * from './navigators'
 export * from './services/storage'
@@ -77,7 +78,7 @@ export { useDeepLinks } from './hooks/deep-links'
 export { Assets as ImageAssets } from './theme'
 export { ThemeProvider, useTheme } from './contexts/theme'
 export { AnimatedComponentsProvider, useAnimatedComponents } from './contexts/animated-components'
-export { ColorPallet } from './theme'
+export { ColorPalette } from './theme'
 export { animatedComponents } from './animated-components'
 export { bifoldTheme } from './theme'
 export { useAuth } from './contexts/auth'
@@ -115,7 +116,7 @@ export type {
   INotificationColors,
   IErrorColors,
   IGrayscaleColors,
-  IColorPallet,
+  IColorPalette,
   IAssets,
   ITheme,
 } from './theme'
@@ -226,5 +227,6 @@ export {
   tours,
   DefaultScreenOptionsDictionary,
   DefaultScreenLayoutOptions,
+  ThemeBuilder,
 }
 export type { IButton }

package/src/localization/fr/fr.json

@@ -50,7 +50,6 @@
     "Send": "Envoyer",
     "Reset": "Reset (FR)",
     "ViewJSON": "View JSON Details (FR)"
-
   },
   "Date": {
     "ShortFormat": "D MMM",

package/src/localization/pt-br/pt-br.json

@@ -49,7 +49,6 @@
     "Send": "Enviar",
     "Reset": "Reset (PT-BR)",
     "ViewJSON": "View JSON Details (PT-BR)"
-
   },
   "Date": {
     "ShortFormat": "D MMM",
@@ -906,7 +905,7 @@
     "UpdateNow": "Update the app (PT-BR)",
     "UpdateLater": "Do this later (PT-BR)"
   },
-   "Banner": {
+  "Banner": {
     "AlertsLength": "You have {{ alerts }} alerts (PT-BR)"
   }
 }

package/src/modules/history/ui/HistoryPage.tsx

@@ -23,7 +23,7 @@ const HistoryPage: React.FC<HistoryPageProps> = () => {
   const [historyItems, setHistoryItems] = useState<CustomRecord[]>()
   const { t } = useTranslation()
   const { agent } = useAgent()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { ButtonLoading } = useAnimatedComponents()
 
   const actionButtonLabel = t('Global.SaveSettings')
@@ -37,7 +37,7 @@ const HistoryPage: React.FC<HistoryPageProps> = () => {
   const style = StyleSheet.create({
     screenContainer: {
       height: '100%',
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       padding: 20,
       justifyContent: 'space-between',
     },

package/src/modules/history/ui/HistorySettings.tsx

@@ -1,5 +1,4 @@
 import { useAgent } from '@credo-ts/react-hooks'
-import { ParamListBase } from '@react-navigation/core'
 import { StackScreenProps } from '@react-navigation/stack'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -11,21 +10,21 @@ import KeyboardView from '../../../components/views/KeyboardView'
 import { TOKENS, useServices } from '../../../container-api'
 import { useAnimatedComponents } from '../../../contexts/animated-components'
 import { useTheme } from '../../../contexts/theme'
-import { Screens } from '../../../types/navigators'
+import { Screens, SettingStackParams } from '../../../types/navigators'
 import { testIdWithKey } from '../../../utils/testable'
 import { HistoryBlockSelection, IHistoryManager } from '../types'
 
 import SingleSelectBlock from './components/SingleSelectBlock'
 import { ThemedText } from '../../../components/texts/ThemedText'
 
-interface HistorySettingsProps extends StackScreenProps<ParamListBase, Screens.HistorySettings> {}
+interface HistorySettingsProps extends StackScreenProps<SettingStackParams, Screens.HistorySettings> {}
 
 const HistorySettings: React.FC<HistorySettingsProps> = () => {
   const [continueEnabled] = useState(true)
   const [isLoading] = useState(false)
   const { t } = useTranslation()
 
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { ButtonLoading } = useAnimatedComponents()
   const actionButtonLabel = t('Global.SaveSettings')
   const actionButtonTestId = testIdWithKey('Save')
@@ -40,7 +39,7 @@ const HistorySettings: React.FC<HistorySettingsProps> = () => {
   const style = StyleSheet.create({
     screenContainer: {
       height: '100%',
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       padding: 20,
       justifyContent: 'space-between',
     },

package/src/modules/history/ui/components/HistoryListItem.tsx

@@ -49,7 +49,7 @@ const styles = StyleSheet.create({
 
 const HistoryListItem: React.FC<Props> = ({ item }) => {
   const { t } = useTranslation()
-  const { Assets, ColorPallet } = useTheme()
+  const { Assets, ColorPalette } = useTheme()
   //TODO: navigate to history details
   //   const navigation = useNavigation<StackNavigationProp<RootStackParams, 'HistoryDetails'>>()
 
@@ -229,7 +229,7 @@ const HistoryListItem: React.FC<Props> = ({ item }) => {
             {renderCardDate(item.content.createdAt)}
           </View>
           <View style={styles.arrowContainer}>
-            <Assets.svg.iconChevronRight color={ColorPallet.brand.primary} />
+            <Assets.svg.iconChevronRight color={ColorPalette.brand.primary} />
           </View>
         </View>
         <View style={styles.cardBottomBorder} />

package/src/modules/openid/components/OpenIDCredentialCard.tsx

@@ -44,7 +44,7 @@ const OpenIDCredentialCard: React.FC<CredentialCardProps> = ({
   onPress = undefined,
 }) => {
   const { t } = useTranslation()
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
 
   const display = useMemo((): CredentialDisplay | undefined => {
     if (credentialDisplay) return credentialDisplay.display
@@ -119,7 +119,7 @@ const OpenIDCredentialCard: React.FC<CredentialCardProps> = ({
       borderBottomRightRadius: borderRadius,
     },
     revokedFooter: {
-      backgroundColor: ColorPallet.notification.error,
+      backgroundColor: ColorPalette.notification.error,
       flexGrow: 1,
       marginHorizontal: -1 * paddingHorizontal,
       marginVertical: -1 * paddingVertical,
@@ -139,13 +139,13 @@ const OpenIDCredentialCard: React.FC<CredentialCardProps> = ({
     credentialInfoContainer: {},
     titleFontCredentialName: {
       ...TextTheme.labelTitle,
-      color: display?.textColor ?? credentialTextColor(ColorPallet, display?.backgroundColor),
+      color: display?.textColor ?? credentialTextColor(ColorPalette, display?.backgroundColor),
       textAlignVertical: 'center',
       marginBottom: 8,
     },
     titleFontCredentialDescription: {
       ...TextTheme.label,
-      color: display?.textColor ?? credentialTextColor(ColorPallet, display?.backgroundColor),
+      color: display?.textColor ?? credentialTextColor(ColorPalette, display?.backgroundColor),
       textAlignVertical: 'center',
     },
   })
@@ -221,7 +221,7 @@ const OpenIDCredentialCard: React.FC<CredentialCardProps> = ({
           style={[
             TextTheme.caption,
             {
-              color: display?.textColor ?? credentialTextColor(ColorPallet, display?.backgroundColor),
+              color: display?.textColor ?? credentialTextColor(ColorPalette, display?.backgroundColor),
             },
           ]}
           testID={testIdWithKey('CredentialIssued')}

package/src/modules/openid/screens/OpenIDCredentialDetails.tsx

@@ -42,7 +42,7 @@ const OpenIDCredentialDetails: React.FC<OpenIDCredentialDetailsProps> = ({ navig
   const [credential, setCredential] = useState<W3cCredentialRecord | SdJwtVcRecord | undefined>(undefined)
   const [credentialDisplay, setCredentialDisplay] = useState<W3cCredentialDisplay>()
   const { t, i18n } = useTranslation()
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const { agent } = useAgent()
   const { removeCredential, getW3CCredentialById, getSdJwtCredentialById } = useOpenIDCredentials()
   const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
@@ -180,7 +180,7 @@ const OpenIDCredentialDetails: React.FC<OpenIDCredentialDetailsProps> = ({ navig
       <View style={{ marginBottom: 50 }}>
         <View
           style={{
-            backgroundColor: ColorPallet.brand.secondaryBackground,
+            backgroundColor: ColorPalette.brand.secondaryBackground,
             marginTop: paddingVertical,
             paddingHorizontal,
             paddingVertical,

package/src/modules/openid/screens/OpenIDCredentialOffer.tsx

@@ -32,7 +32,7 @@ const OpenIDCredentialOffer: React.FC<OpenIDCredentialDetailsProps> = ({ navigat
 
   // console.log('$$ ====> Credential Display', JSON.stringify(credentialDisplay))
   const { t } = useTranslation()
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const { agent } = useAgent()
   const { storeCredential, resolveBundleForCredential } = useOpenIDCredentials()
 
@@ -152,7 +152,7 @@ const OpenIDCredentialOffer: React.FC<OpenIDCredentialDetailsProps> = ({ navigat
             paddingHorizontal: paddingHorizontal,
             paddingVertical: paddingVertical,
             paddingBottom: paddingBottom,
-            backgroundColor: ColorPallet.brand.secondaryBackground,
+            backgroundColor: ColorPalette.brand.secondaryBackground,
           }}
         >
           {footerButton(

package/src/modules/openid/screens/OpenIDProofChangeCredential.tsx

@@ -27,7 +27,7 @@ const OpenIDProofCredentialSelect: React.FC<Props> = ({ route, navigation }: Pro
   const selectedCredentialID = route.params.selectedCredID
   const altCredentials = route.params.altCredIDs
   const onCredChange = route.params.onCredChange
-  const { ColorPallet, SelectedCredTheme } = useTheme()
+  const { ColorPalette, SelectedCredTheme } = useTheme()
   const { getW3CCredentialById, getSdJwtCredentialById } = useOpenIDCredentials()
 
   const { t } = useTranslation()
@@ -71,7 +71,7 @@ const OpenIDProofCredentialSelect: React.FC<Props> = ({ route, navigation }: Pro
       marginHorizontal: 20,
     },
     cardLoading: {
-      backgroundColor: ColorPallet.brand.secondaryBackground,
+      backgroundColor: ColorPalette.brand.secondaryBackground,
       flex: 1,
       flexGrow: 1,
       marginVertical: 35,
@@ -97,7 +97,7 @@ const OpenIDProofCredentialSelect: React.FC<Props> = ({ route, navigation }: Pro
             <RecordLoading />
           </View>
         ) : (
-          <ThemedText variant='bold'>{t('ProofRequest.AvailableCards')}</ThemedText>
+          <ThemedText variant={'bold'}>{t('ProofRequest.AvailableCards')}</ThemedText>
         )}
       </View>
     )

package/src/modules/openid/screens/OpenIDProofPresentation.tsx

@@ -62,7 +62,7 @@ const OpenIDProofPresentation: React.FC<OpenIDProofPresentationProps> = ({
 
   const { getW3CCredentialById, getSdJwtCredentialById } = useOpenIDCredentials()
 
-  const { ColorPallet, ListItems, TextTheme } = useTheme()
+  const { ColorPalette, ListItems, TextTheme } = useTheme()
   const { t } = useTranslation()
   const { agent } = useAgent()
 
@@ -91,13 +91,13 @@ const OpenIDProofPresentation: React.FC<OpenIDProofPresentationProps> = ({
     cardContainer: {
       paddingHorizontal: 25,
       paddingVertical: 16,
-      backgroundColor: ColorPallet.brand.secondaryBackground,
+      backgroundColor: ColorPalette.brand.secondaryBackground,
       marginBottom: 20,
     },
     cardAttributes: {
       flexDirection: 'row',
       flexWrap: 'wrap',
-      borderColor: ColorPallet.grayscale.lightGrey,
+      borderColor: ColorPalette.grayscale.lightGrey,
       borderWidth: 1,
       borderRadius: 8,
       padding: 8,
@@ -364,7 +364,7 @@ const OpenIDProofPresentation: React.FC<OpenIDProofPresentationProps> = ({
           paddingHorizontal: 25,
           paddingVertical: 16,
           paddingBottom: 26,
-          backgroundColor: ColorPallet.brand.secondaryBackground,
+          backgroundColor: ColorPalette.brand.secondaryBackground,
         }}
       >
         {selectedCredentialsSubmission && Object.keys(selectedCredentialsSubmission).length > 0 ? (