@bifold/core 2.3.0 → 2.4.1

package/src/components/misc/CredentialCard11.tsx

@@ -103,7 +103,7 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
 }) => {
   const [dimensions, setDimensions] = useState({ cardWidth: 0, cardHeight: 0 })
   const { i18n, t } = useTranslation()
-  const { ColorPallet, ListItems } = useTheme()
+  const { ColorPalette, ListItems } = useTheme()
   const [flaggedAttributes, setFlaggedAttributes] = useState<string[]>()
   const [allPI, setAllPI] = useState<boolean>()
   const credentialConnectionLabel = useCredentialConnectionLabel(credential)
@@ -152,18 +152,18 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
   const navigation = useNavigation()
 
   const backgroundColorIfRevoked = (backgroundColor?: string) =>
-    credentialErrors.includes(CredentialErrors.Revoked) ? ColorPallet.notification.errorBorder : backgroundColor
+    credentialErrors.includes(CredentialErrors.Revoked) ? ColorPalette.notification.errorBorder : backgroundColor
 
   const fontColorWithHighContrast = () => {
     if (proof && brandingOverlayType === BrandingOverlayType.Branding10) {
-      return ColorPallet.grayscale.mediumGrey
+      return ColorPalette.grayscale.mediumGrey
     }
 
     const c =
-      backgroundColorIfRevoked(overlay.brandingOverlay?.primaryBackgroundColor) ?? ColorPallet.grayscale.lightGrey
+      backgroundColorIfRevoked(overlay.brandingOverlay?.primaryBackgroundColor) ?? ColorPalette.grayscale.lightGrey
     const shade = shadeIsLightOrDark(c)
 
-    return shade == Shade.Light ? ColorPallet.grayscale.darkGrey : ColorPallet.grayscale.lightGrey
+    return shade == Shade.Light ? ColorPalette.grayscale.darkGrey : ColorPalette.grayscale.lightGrey
   }
 
   const parseAttribute = useCallback(
@@ -317,7 +317,7 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
             variant="bold"
             style={[
               styles.textContainer,
-              { color: warn ? ColorPallet.notification.warnText : styles.textContainer.color },
+              { color: warn ? ColorPalette.notification.warnText : styles.textContainer.color },
             ]}
             testID={testIdWithKey('AttributeValue')}
           >
@@ -354,7 +354,7 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
                 testID={testIdWithKey('AttributeNameWarningIcon')}
                 style={{ paddingTop: 2, paddingHorizontal: 2 }}
                 name="warning"
-                color={ColorPallet.notification.warnIcon}
+                color={ColorPalette.notification.warnIcon}
                 size={ListItems.recordAttributeText.fontSize}
               />
             )}
@@ -385,7 +385,9 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
           text={t('ProofRequest.ChangeCredential')}
           testID={'ChangeCredential'}
           textColor={
-            isBranding11 ? credentialTextColor(ColorPallet, overlay.brandingOverlay?.primaryBackgroundColor) : undefined
+            isBranding11
+              ? credentialTextColor(ColorPalette, overlay.brandingOverlay?.primaryBackgroundColor)
+              : undefined
           }
         />
       )
@@ -397,7 +399,9 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
           text={t('ProofRequest.GetThisCredential')}
           testID={'GetThisCredential'}
           textColor={
-            isBranding11 ? credentialTextColor(ColorPallet, overlay.brandingOverlay?.primaryBackgroundColor) : undefined
+            isBranding11
+              ? credentialTextColor(ColorPalette, overlay.brandingOverlay?.primaryBackgroundColor)
+              : undefined
           }
         />
       )
@@ -425,7 +429,7 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
               styles.textContainer,
               styles.credentialName,
               {
-                color: allPI && proof ? ColorPallet.notification.warnText : styles.textContainer.color,
+                color: allPI && proof ? ColorPalette.notification.warnText : styles.textContainer.color,
               },
             ]}
           >
@@ -578,13 +582,13 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
             style={[
               styles.statusContainer,
               {
-                backgroundColor: status === 'error' ? ColorPallet.notification.error : ColorPallet.notification.warn,
+                backgroundColor: status === 'error' ? ColorPalette.notification.error : ColorPalette.notification.warn,
               },
             ]}
           >
             <Icon
               size={0.7 * logoHeight}
-              style={{ color: status === 'error' ? ColorPallet.semantic.error : ColorPallet.notification.warnIcon }}
+              style={{ color: status === 'error' ? ColorPalette.semantic.error : ColorPalette.notification.warnIcon }}
               name={status}
             />
           </View>

package/src/components/misc/CredentialCard11ActionFooter.tsx

@@ -15,13 +15,13 @@ interface CredentialActionFooterProps {
 }
 
 const CredentialActionFooter = ({ onPress, text, testID, textColor }: CredentialActionFooterProps) => {
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const styles = StyleSheet.create({
     seperator: {
       width: '100%',
       height: 2,
       marginVertical: 10,
-      backgroundColor: ColorPallet.grayscale.lightGrey,
+      backgroundColor: ColorPalette.grayscale.lightGrey,
     },
     touchable: {
       display: 'flex',
@@ -32,7 +32,7 @@ const CredentialActionFooter = ({ onPress, text, testID, textColor }: Credential
     credActionText: {
       fontSize: 20,
       fontWeight: TextTheme.bold.fontWeight,
-      color: textColor ?? ColorPallet.brand.link,
+      color: textColor ?? ColorPalette.brand.link,
     },
   })
 

package/src/components/misc/EmptyList.tsx

@@ -12,10 +12,10 @@ export interface EmptyListProps {
 
 const EmptyList: React.FC<EmptyListProps> = ({ message }) => {
   const { t } = useTranslation()
-  const { ListItems, Assets, ColorPallet } = useTheme()
+  const { ListItems, Assets, ColorPalette } = useTheme()
 
   return (
-    <View style={{ paddingTop: 100, height: '100%', backgroundColor: ColorPallet.brand.primaryBackground }}>
+    <View style={{ paddingTop: 100, height: '100%', backgroundColor: ColorPalette.brand.primaryBackground }}>
       <Assets.svg.emptyWallet fill={ListItems.emptyList.color} height={100} />
       <ThemedText style={[ListItems.emptyList, { textAlign: 'center' }]} testID={testIdWithKey('NoneYet')}>
         {message || t('Global.NoneYet!')}

package/src/components/misc/EmptyListContacts.tsx

@@ -14,7 +14,7 @@ export interface EmptyListProps {
 
 const EmptyListContacts: React.FC<EmptyListProps> = ({ navigation }) => {
   const { t } = useTranslation()
-  const { ListItems, Assets, ColorPallet } = useTheme()
+  const { ListItems, Assets, ColorPalette } = useTheme()
   const styles = StyleSheet.create({
     container: {
       flex: 1,
@@ -23,7 +23,7 @@ const EmptyListContacts: React.FC<EmptyListProps> = ({ navigation }) => {
       alignItems: 'center',
       padding: 40,
       paddingTop: 100,
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
     },
     text: {
       textAlign: 'center',

package/src/components/misc/FauxHeader.tsx

@@ -14,7 +14,7 @@ interface FauxHeaderProps {
 
 // Used for modals that we want to look like regular screens
 const FauxHeader: React.FC<FauxHeaderProps> = ({ title, onBackPressed }) => {
-  const { ColorPallet, Spacing, NavigationTheme } = useTheme()
+  const { ColorPalette, Spacing, NavigationTheme } = useTheme()
   const { t } = useTranslation()
   const styles = StyleSheet.create({
     header: {
@@ -22,7 +22,7 @@ const FauxHeader: React.FC<FauxHeaderProps> = ({ title, onBackPressed }) => {
       elevation: 0,
       shadowOffset: { width: 0, height: 6 },
       shadowRadius: 6,
-      shadowColor: ColorPallet.grayscale.black,
+      shadowColor: ColorPalette.grayscale.black,
       shadowOpacity: 0.15,
       zIndex: 2,
       borderWidth: 0,

package/src/components/misc/InfoBox.tsx

@@ -61,13 +61,13 @@ const InfoBox: React.FC<InfoBoxProps> = ({
 }) => {
   const { width } = useWindowDimensions()
   const { t } = useTranslation()
-  const { TextTheme, ColorPallet } = useTheme()
+  const { TextTheme, ColorPalette } = useTheme()
   const [showDetails, setShowDetails] = useState<boolean>(renderShowDetails)
   const [{ showDetailsInfo }] = useServices([TOKENS.CONFIG])
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: ColorPallet.brand.modalPrimaryBackground,
-      borderColor: ColorPallet.notification.infoBorder,
+      backgroundColor: ColorPalette.brand.modalPrimaryBackground,
+      borderColor: ColorPalette.notification.infoBorder,
       borderRadius: 5,
       borderWidth: 1,
       padding: 10,
@@ -89,12 +89,12 @@ const InfoBox: React.FC<InfoBoxProps> = ({
       marginLeft: 7,
       flexShrink: 1,
       alignSelf: 'center',
-      color: ColorPallet.notification.infoText,
+      color: ColorPalette.notification.infoText,
     },
     bodyText: {
       flexShrink: 1,
       marginVertical: 16,
-      color: ColorPallet.notification.infoText,
+      color: ColorPalette.notification.infoText,
     },
     icon: {
       marginRight: 10,
@@ -102,82 +102,82 @@ const InfoBox: React.FC<InfoBoxProps> = ({
     },
     showDetailsText: {
       fontWeight: TextTheme.normal.fontWeight,
-      color: ColorPallet.brand.link,
+      color: ColorPalette.brand.link,
     },
   })
   let iconName = 'info'
-  let iconColor = ColorPallet.notification.infoIcon
+  let iconColor = ColorPalette.notification.infoIcon
 
   switch (notificationType) {
     case InfoBoxType.Info:
       iconName = 'info'
-      iconColor = ColorPallet.notification.infoIcon
+      iconColor = ColorPalette.notification.infoIcon
       styles.container = {
         ...styles.container,
-        backgroundColor: ColorPallet.notification.info,
-        borderColor: ColorPallet.notification.infoBorder,
+        backgroundColor: ColorPalette.notification.info,
+        borderColor: ColorPalette.notification.infoBorder,
       }
       styles.headerText = {
         ...styles.headerText,
-        color: ColorPallet.notification.infoText,
+        color: ColorPalette.notification.infoText,
       }
       styles.bodyText = {
         ...styles.bodyText,
-        color: ColorPallet.notification.infoText,
+        color: ColorPalette.notification.infoText,
       }
       break
 
     case InfoBoxType.Success:
       iconName = 'check-circle'
-      iconColor = ColorPallet.notification.successIcon
+      iconColor = ColorPalette.notification.successIcon
       styles.container = {
         ...styles.container,
-        backgroundColor: ColorPallet.notification.success,
-        borderColor: ColorPallet.notification.successBorder,
+        backgroundColor: ColorPalette.notification.success,
+        borderColor: ColorPalette.notification.successBorder,
       }
       styles.headerText = {
         ...styles.headerText,
-        color: ColorPallet.notification.successText,
+        color: ColorPalette.notification.successText,
       }
       styles.bodyText = {
         ...styles.bodyText,
-        color: ColorPallet.notification.successText,
+        color: ColorPalette.notification.successText,
       }
       break
 
     case InfoBoxType.Warn:
       iconName = 'warning'
-      iconColor = ColorPallet.notification.warnIcon
+      iconColor = ColorPalette.notification.warnIcon
       styles.container = {
         ...styles.container,
-        backgroundColor: ColorPallet.notification.warn,
-        borderColor: ColorPallet.notification.warnBorder,
+        backgroundColor: ColorPalette.notification.warn,
+        borderColor: ColorPalette.notification.warnBorder,
       }
       styles.headerText = {
         ...styles.headerText,
-        color: ColorPallet.notification.warnText,
+        color: ColorPalette.notification.warnText,
       }
       styles.bodyText = {
         ...styles.bodyText,
-        color: ColorPallet.notification.warnText,
+        color: ColorPalette.notification.warnText,
       }
       break
 
     case InfoBoxType.Error:
       iconName = 'error'
-      iconColor = ColorPallet.notification.errorIcon
+      iconColor = ColorPalette.notification.errorIcon
       styles.container = {
         ...styles.container,
-        backgroundColor: ColorPallet.notification.error,
-        borderColor: ColorPallet.notification.errorBorder,
+        backgroundColor: ColorPalette.notification.error,
+        borderColor: ColorPalette.notification.errorBorder,
       }
       styles.headerText = {
         ...styles.headerText,
-        color: ColorPallet.notification.errorText,
+        color: ColorPalette.notification.errorText,
       }
       styles.bodyText = {
         ...styles.bodyText,
-        color: ColorPallet.notification.errorText,
+        color: ColorPalette.notification.errorText,
       }
       break
 
@@ -207,7 +207,7 @@ const InfoBox: React.FC<InfoBoxProps> = ({
               onPress={onClosePressed}
               hitSlop={hitSlop}
             >
-              <Icon name={'close'} size={iconSize} color={ColorPallet.notification.infoIcon} />
+              <Icon name={'close'} size={iconSize} color={ColorPalette.notification.infoIcon} />
             </TouchableOpacity>
           </View>
         )}
@@ -233,7 +233,7 @@ const InfoBox: React.FC<InfoBoxProps> = ({
                 <ThemedText variant="title" style={styles.showDetailsText}>
                   {t('Global.ShowDetails')}{' '}
                 </ThemedText>
-                <Icon name="chevron-right" size={iconSize} color={ColorPallet.brand.link} />
+                <Icon name="chevron-right" size={iconSize} color={ColorPalette.brand.link} />
               </View>
             </TouchableOpacity>
           )}

package/src/components/misc/NoNewUpdates.tsx

@@ -9,12 +9,12 @@ import { ThemedText } from '../texts/ThemedText'
 
 const NoNewUpdates: React.FC = () => {
   const { t } = useTranslation()
-  const { HomeTheme, ColorPallet } = useTheme()
+  const { HomeTheme, ColorPalette } = useTheme()
   const styles = StyleSheet.create({
     noNewUpdatesContainer: {
       paddingHorizontal: 20,
       paddingVertical: 20,
-      backgroundColor: ColorPallet.brand.secondaryBackground,
+      backgroundColor: ColorPalette.brand.secondaryBackground,
     },
     noNewUpdatesText: {
       ...HomeTheme.noNewUpdatesText,

package/src/components/misc/PINValidationHelper.tsx

@@ -15,7 +15,7 @@ const iconSize = 24
 
 const PINValidationHelper: React.FC<PINValidationHelperProps> = ({ validations }) => {
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
 
   return (
     <View style={{ marginBottom: 16 }}>
@@ -26,14 +26,14 @@ const PINValidationHelper: React.FC<PINValidationHelperProps> = ({ validations }
               accessibilityLabel={t('PINCreate.Helper.ClearIcon')}
               name="clear"
               size={iconSize}
-              color={ColorPallet.notification.errorIcon}
+              color={ColorPalette.notification.errorIcon}
             />
           ) : (
             <Icon
               accessibilityLabel={t('PINCreate.Helper.CheckIcon')}
               name="check"
               size={iconSize}
-              color={ColorPallet.notification.successIcon}
+              color={ColorPalette.notification.successIcon}
             />
           )}
           <ThemedText style={{ paddingLeft: 4 }}>

package/src/components/misc/QRRenderer.tsx

@@ -17,7 +17,7 @@ interface QRRendererProps {
 const QRRenderer: React.FC<QRRendererProps> = ({ value, onError, size }) => {
   const { width } = useWindowDimensions()
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
 
   const styles = StyleSheet.create({
     container: {
@@ -26,7 +26,7 @@ const QRRenderer: React.FC<QRRendererProps> = ({ value, onError, size }) => {
       backgroundColor: 'white',
     },
     errorMessage: {
-      color: ColorPallet.semantic.error,
+      color: ColorPalette.semantic.error,
       textAlign: 'center',
     },
   })

package/src/components/misc/QRScanner.tsx

@@ -50,7 +50,7 @@ const QRScanner: React.FC<Props> = ({
   const { agent } = useAgent()
   const { width } = useWindowDimensions()
   const { t } = useTranslation()
-  const { ColorPallet, TextTheme, TabTheme } = useTheme()
+  const { ColorPalette, TextTheme, TabTheme } = useTheme()
   const [store] = useStore()
   const [{ showScanHelp, showScanButton, showScanErrorButton = true }] = useServices([TOKENS.CONFIG])
   const [firstTabActive, setFirstTabActive] = useState(!defaultToConnect)
@@ -69,7 +69,7 @@ const QRScanner: React.FC<Props> = ({
     },
     mainSafeArea: {
       flex: 1,
-      backgroundColor: ColorPallet.brand.secondaryBackground,
+      backgroundColor: ColorPalette.brand.secondaryBackground,
     },
     bottomSafeArea: {
       flex: 0,
@@ -121,7 +121,7 @@ const QRScanner: React.FC<Props> = ({
     // no properties needed, this is just a helpful label
     bottomButtonsContainer: {},
     icon: {
-      color: ColorPallet.grayscale.white,
+      color: ColorPalette.grayscale.white,
       padding: 4,
     },
     textStyle: {

package/src/components/misc/QRScannerTorch.tsx

@@ -13,7 +13,7 @@ interface Props extends React.PropsWithChildren {
   onPress?: () => void
 }
 
-function createStyles({ ColorPallet }: ITheme) {
+function createStyles({ ColorPalette }: ITheme) {
   return StyleSheet.create({
     container: {
       width: 24,
@@ -21,7 +21,7 @@ function createStyles({ ColorPallet }: ITheme) {
       justifyContent: 'center',
       alignItems: 'center',
       borderWidth: 1,
-      borderColor: ColorPallet.grayscale.white,
+      borderColor: ColorPalette.grayscale.white,
       borderRadius: 24,
       marginBottom: 50,
     },
@@ -41,7 +41,7 @@ const TorchButton: React.FC<Props> = ({ active, onPress, children }) => {
       accessibilityLabel={active ? t('Scan.TorchOn') : t('Scan.TorchOff')}
       accessibilityRole={'button'}
       testID={testIdWithKey('ScanTorch')}
-      style={[styles.container, { backgroundColor: active ? theme.ColorPallet.grayscale.white : undefined }]}
+      style={[styles.container, { backgroundColor: active ? theme.ColorPalette.grayscale.white : undefined }]}
       onPress={onPress}
       hitSlop={hitSlop}
     >
@@ -56,7 +56,7 @@ const TorchIcon: React.FC<Props> = ({ active }) => {
   return (
     <Icon
       name={active ? 'flash-on' : 'flash-off'}
-      color={active ? theme.ColorPallet.grayscale.black : theme.ColorPallet.grayscale.white}
+      color={active ? theme.ColorPalette.grayscale.black : theme.ColorPalette.grayscale.white}
       size={24}
       style={styles.icon}
     />

package/src/components/misc/SharedProofData.tsx

@@ -16,7 +16,7 @@ interface SharedProofDataProps {
 }
 
 const SharedDataCard: React.FC<{ sharedData: GroupedSharedProofDataItem }> = ({ sharedData }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const [attributes, setAttributes] = useState<Field[]>([])
   useEffect(() => {
     const attributes = buildFieldsFromSharedAnonCredsProof(sharedData.data)
@@ -30,7 +30,7 @@ const SharedDataCard: React.FC<{ sharedData: GroupedSharedProofDataItem }> = ({
         displayItems={attributes}
         style={
           bundleResolver.getBrandingOverlayType() === BrandingOverlayType.Branding10
-            ? { backgroundColor: ColorPallet.brand.secondaryBackground }
+            ? { backgroundColor: ColorPalette.brand.secondaryBackground }
             : undefined
         }
         credDefId={sharedData.identifiers.cred_def_id}

package/src/components/misc/UnorderedList.tsx

@@ -9,15 +9,15 @@ type UnorderedListProps = {
 }
 
 const UnorderedList: React.FC<UnorderedListProps> = ({ unorderedListItems }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
 
   return (
     <>
       {unorderedListItems.map((item: string, i: number) => {
         return (
           <View key={i} style={{ display: 'flex', flexDirection: 'row', marginBottom: 5 }}>
-            <ThemedText style={{ color: ColorPallet.brand.unorderedList, paddingLeft: 5 }}>{`\u2022`}</ThemedText>
-            <ThemedText style={{ color: ColorPallet.brand.unorderedList, paddingLeft: 5, flex: 1 }}>{item}</ThemedText>
+            <ThemedText style={{ color: ColorPalette.brand.unorderedList, paddingLeft: 5 }}>{`\u2022`}</ThemedText>
+            <ThemedText style={{ color: ColorPalette.brand.unorderedList, paddingLeft: 5, flex: 1 }}>{item}</ThemedText>
           </View>
         )
       })}

package/src/components/misc/VerifierCredentialCard.tsx

@@ -57,7 +57,7 @@ const VerifierCredentialCard: React.FC<VerifierCredentialCardProps> = ({
 }) => {
   const [dimensions, setDimensions] = useState({ cardWidth: 0, cardHeight: 0 })
   const { i18n, t } = useTranslation()
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
   const [overlay, setOverlay] = useState<CredentialOverlay<BrandingOverlay>>({})
   const isBranding10 = brandingOverlayType === BrandingOverlayType.Branding10
@@ -74,9 +74,9 @@ const VerifierCredentialCard: React.FC<VerifierCredentialCardProps> = ({
     }, {})
 
   const getCardWatermarkTextColor = (background?: string) => {
-    if (isBranding10) return ColorPallet.grayscale.mediumGrey
-    const shade = shadeIsLightOrDark(background ?? ColorPallet.grayscale.lightGrey)
-    return shade == Shade.Light ? ColorPallet.grayscale.darkGrey : ColorPallet.grayscale.lightGrey
+    if (isBranding10) return ColorPalette.grayscale.mediumGrey
+    const shade = shadeIsLightOrDark(background ?? ColorPalette.grayscale.lightGrey)
+    return shade == Shade.Light ? ColorPalette.grayscale.darkGrey : ColorPalette.grayscale.lightGrey
   }
 
   const parseAttribute = (item: (Attribute & Predicate) | undefined) => {
@@ -160,7 +160,7 @@ const VerifierCredentialCard: React.FC<VerifierCredentialCardProps> = ({
   const PredicateItem: React.FC<{
     item: Predicate
   }> = ({ item }) => {
-    const { ColorPallet } = useTheme()
+    const { ColorPalette } = useTheme()
     const label = (item.label || item.name)!
     const ylabel = overlay.bundle?.labelOverlay?.attributeLabels[label] ?? startCase(label)
     const [currentValue, setCurrentValue] = useState(`${item.pValue ?? ''}`)
@@ -169,7 +169,7 @@ const VerifierCredentialCard: React.FC<VerifierCredentialCardProps> = ({
       input: {
         textAlign: 'center',
         textAlignVertical: 'bottom',
-        borderBottomColor: ColorPallet.grayscale.black,
+        borderBottomColor: ColorPalette.grayscale.black,
         backgroundColor: 'rgba(255, 255, 255, 0.2)',
         borderBottomWidth: 1,
         lineHeight: 19,
@@ -196,7 +196,7 @@ const VerifierCredentialCard: React.FC<VerifierCredentialCardProps> = ({
         </ThemedText>
         <View style={{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'flex-end' }}>
           {item.satisfied && !preview ? (
-            <Icon style={{ marginRight: 5 }} size={24} name={'check-circle'} color={ColorPallet.semantic.success} />
+            <Icon style={{ marginRight: 5 }} size={24} name={'check-circle'} color={ColorPalette.semantic.success} />
           ) : null}
           <ThemedText variant="bold" style={[styles.textContainer, predicateStyles.predicateType]}>
             {item.pType}

package/src/components/modals/AppGuideModal.tsx

@@ -32,24 +32,24 @@ const AppGuideModal: React.FC<AppGuideModalProps> = ({
 }) => {
   const { height, width } = useWindowDimensions()
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const iconSize = 30
   const dismissIconName = 'clear'
-  const iconColor = ColorPallet.notification.infoIcon
+  const iconColor = ColorPalette.notification.infoIcon
 
   const styles = StyleSheet.create({
     modalCenter: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
-      backgroundColor: ColorPallet.notification.popupOverlay,
+      backgroundColor: ColorPalette.notification.popupOverlay,
       padding: 10,
       minHeight: height,
       minWidth: width,
     },
     container: {
-      backgroundColor: ColorPallet.notification.info,
-      borderColor: ColorPallet.notification.infoBorder,
+      backgroundColor: ColorPalette.notification.info,
+      borderColor: ColorPalette.notification.infoBorder,
       borderRadius: 5,
       borderWidth: 1,
       padding: 20,
@@ -66,12 +66,12 @@ const AppGuideModal: React.FC<AppGuideModalProps> = ({
     headerText: {
       alignSelf: 'flex-start',
       flexWrap: 'wrap',
-      color: ColorPallet.notification.infoText,
+      color: ColorPalette.notification.infoText,
     },
     bodyText: {
       flexShrink: 1,
       marginVertical: 16,
-      color: ColorPallet.notification.infoText,
+      color: ColorPalette.notification.infoText,
     },
     dismissIcon: {
       alignSelf: 'center',

package/src/components/modals/CameraDisclosureModal.tsx

@@ -24,19 +24,19 @@ const CameraDisclosureModal: React.FC<CameraDisclosureModalProps> = ({ requestCa
   const [modalVisible, setModalVisible] = useState(true)
   const [showSettingsPopup, setShowSettingsPopup] = useState(false)
   const [requestInProgress, setRequestInProgress] = useState(false)
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
 
   const styles = StyleSheet.create({
     container: {
       height: '100%',
-      backgroundColor: ColorPallet.brand.modalPrimaryBackground,
+      backgroundColor: ColorPalette.brand.modalPrimaryBackground,
       padding: 20,
     },
     messageText: {
       marginTop: 30,
     },
     controlsContainer: {
-      backgroundColor: ColorPallet.brand.modalPrimaryBackground,
+      backgroundColor: ColorPalette.brand.modalPrimaryBackground,
       marginTop: 'auto',
       margin: 20,
     },
@@ -85,7 +85,7 @@ const CameraDisclosureModal: React.FC<CameraDisclosureModalProps> = ({ requestCa
           onDismissPressed={onOpenSettingsDismissed}
         />
       )}
-      <SafeAreaView style={{ backgroundColor: ColorPallet.brand.modalPrimaryBackground }}>
+      <SafeAreaView style={{ backgroundColor: ColorPalette.brand.modalPrimaryBackground }}>
         <ScrollView style={styles.container}>
           <ThemedText variant="modalHeadingOne" testID={testIdWithKey('AllowCameraUse')} accessibilityRole="header">
             {t('CameraDisclosure.AllowCameraUse')}