@bifold/core 2.3.0 → 2.4.0

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

@@ -565,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,

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/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

@@ -24,7 +24,7 @@ const HistorySettings: React.FC<HistorySettingsProps> = () => {
   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')
@@ -39,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,

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 ? (

package/src/navigators/TabStack.tsx

@@ -61,7 +61,7 @@ const TabStack: React.FC = () => {
   const { t } = useTranslation()
   const Tab = createBottomTabNavigator<TabStackParams>()
   const { assertNetworkConnected } = useNetwork()
-  const { ColorPallet, TabTheme, TextTheme, Assets, NavigationTheme } = useTheme()
+  const { ColorPalette, TabTheme, TextTheme, Assets, NavigationTheme } = useTheme()
   const [orientation, setOrientation] = useState(OrientationType.PORTRAIT)
   const [store, dispatch] = useStore()
   const { agent } = useAgent()
@@ -179,7 +179,7 @@ const TabStack: React.FC = () => {
             tabBarBadge: notifications.length || undefined,
             tabBarBadgeStyle: {
               marginLeft: leftMarginForDevice(),
-              backgroundColor: ColorPallet.semantic.error,
+              backgroundColor: ColorPalette.semantic.error,
               ...badgeFontSize,
             },
           }}

package/src/navigators/defaultStackOptions.tsx

@@ -71,13 +71,13 @@ export const DefaultScreenOptionsDictionary: ScreenOptionsType = {
   },
 }
 
-export function useDefaultStackOptions({ ColorPallet }: ITheme): StackNavigationOptions {
+export function useDefaultStackOptions({ ColorPalette }: ITheme): StackNavigationOptions {
   const { t } = useTranslation()
   const [{ globalScreenOptions }] = useServices([TOKENS.CONFIG])
 
   return (
     globalScreenOptions ?? {
-      headerTintColor: ColorPallet.brand.headerIcon,
+      headerTintColor: ColorPalette.brand.headerIcon,
       headerShown: true,
       headerBackTitleVisible: false,
       headerTitleContainerStyle: {
@@ -89,7 +89,7 @@ export function useDefaultStackOptions({ ColorPallet }: ITheme): StackNavigation
         elevation: 0,
         shadowOffset: { width: 0, height: 6 },
         shadowRadius: 6,
-        shadowColor: ColorPallet.grayscale.black,
+        shadowColor: ColorPalette.grayscale.black,
         shadowOpacity: 0.15,
         borderBottomWidth: 0,
       },

package/src/screens/AttemptLockout.tsx

@@ -19,7 +19,7 @@ interface Timer {
 }
 
 const AttemptLockout: React.FC = () => {
-  const { ColorPallet, Assets, Spacing } = useTheme()
+  const { ColorPalette, Assets, Spacing } = useTheme()
   const { t } = useTranslation()
   const [state, dispatch] = useStore()
   const [time, setTime] = useState<Timer>()
@@ -27,7 +27,7 @@ const AttemptLockout: React.FC = () => {
   const styles = StyleSheet.create({
     container: {
       flex: 1,
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       paddingHorizontal: Spacing.lg,
     },
     title: {

package/src/screens/AutoLock.tsx

@@ -26,11 +26,11 @@ type LockoutRowProps = AutoLockListItem & {
 const AutoLock: React.FC = () => {
   const { t } = useTranslation()
   const [store, dispatch] = useStore()
-  const { ColorPallet, SettingsTheme } = useTheme()
+  const { ColorPalette, SettingsTheme } = useTheme()
   const currentLockoutTime = store.preferences.autoLockTime ?? AutoLockTime.FiveMinutes
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       width: '100%',
     },
     section: {
@@ -45,7 +45,7 @@ const AutoLock: React.FC = () => {
     },
     itemSeparator: {
       borderBottomWidth: 1,
-      borderBottomColor: ColorPallet.brand.primaryBackground,
+      borderBottomColor: ColorPalette.brand.primaryBackground,
       marginHorizontal: 25,
     },
     checkboxContainer: {
@@ -72,11 +72,11 @@ const AutoLock: React.FC = () => {
         <BouncyCheckbox
           accessibilityLabel={String(AutoLockTime.FiveMinutes)}
           disableText
-          fillColor={ColorPallet.brand.secondaryBackground}
-          unfillColor={ColorPallet.brand.secondaryBackground}
+          fillColor={ColorPalette.brand.secondaryBackground}
+          unfillColor={ColorPalette.brand.secondaryBackground}
           size={36}
-          innerIconStyle={{ borderColor: ColorPallet.brand.primary, borderWidth: 2 }}
-          ImageComponent={() => <Icon name="circle" size={18} color={ColorPallet.brand.primary} />}
+          innerIconStyle={{ borderColor: ColorPalette.brand.primary, borderWidth: 2 }}
+          ImageComponent={() => <Icon name="circle" size={18} color={ColorPalette.brand.primary} />}
           onPress={() => onPress(value)}
           isChecked={selected}
           disableBuiltInState

package/src/screens/ConfigureMediator.tsx

@@ -27,7 +27,7 @@ type ConfigureMediatorProps = StackScreenProps<SettingStackParams, Screens.Confi
 const ConfigureMediator = ({ route }: ConfigureMediatorProps) => {
   const [store, dispatch] = useStore()
   const { agent } = useAgent()
-  const { ColorPallet, SettingsTheme } = useTheme()
+  const { ColorPalette, SettingsTheme } = useTheme()
   const { t } = useTranslation()
   const { lockOutUser } = useAuth()
   const supportedMediators = store.preferences.availableMediators
@@ -50,7 +50,7 @@ const ConfigureMediator = ({ route }: ConfigureMediatorProps) => {
   }))
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       width: '100%',
     },
     section: {
@@ -65,7 +65,7 @@ const ConfigureMediator = ({ route }: ConfigureMediatorProps) => {
     },
     itemSeparator: {
       borderBottomWidth: 1,
-      borderBottomColor: ColorPallet.brand.primaryBackground,
+      borderBottomColor: ColorPalette.brand.primaryBackground,
       marginHorizontal: 25,
     },
     checkboxContainer: {
@@ -116,11 +116,11 @@ const ConfigureMediator = ({ route }: ConfigureMediatorProps) => {
       >
         <BouncyCheckbox
           disableText
-          fillColor={ColorPallet.brand.secondaryBackground}
-          unfillColor={ColorPallet.brand.secondaryBackground}
+          fillColor={ColorPalette.brand.secondaryBackground}
+          unfillColor={ColorPalette.brand.secondaryBackground}
           size={36}
-          innerIconStyle={{ borderColor: ColorPallet.brand.primary, borderWidth: 2 }}
-          ImageComponent={() => <Icon name="circle" size={18} color={ColorPallet.brand.primary} />}
+          innerIconStyle={{ borderColor: ColorPalette.brand.primary, borderWidth: 2 }}
+          ImageComponent={() => <Icon name="circle" size={18} color={ColorPalette.brand.primary} />}
           onPress={() => onPress(id)}
           isChecked={selected}
           disableBuiltInState