INJIMOB-3604: changes according to new style guide (#2121)

* [injimob-3604]: changes according to new style guide Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [injimob-3604]: changes according to new style guide Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> # Conflicts: # components/KebabPopUp.tsx # components/VC/common/VCItemField.tsx # components/ui/svg.tsx # components/ui/themes/DefaultTheme.ts # locales/ara.json # locales/en.json # locales/fil.json # locales/hin.json # locales/kan.json # locales/tam.json * [injimob-3604]: changes according to review comments Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [injimob-3604]: changes according to review comments Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [injimob-3604]: changes according to review comments Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [injimob-3604]: changes according to review comments Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> * [injimob-3604]: removed the debug.keystore file Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> --------- Signed-off-by: jaswanthkumarpolisetty <jaswanthkumar.p@thoughtworks.com> Signed-off-by: jaswanthkumartw <jaswanthkumar.p@thoughtworks.com>
2026-01-09 05:27:57 -05:00 · 2025-11-07 11:28:36 +05:30
parent 33c6caa08a
commit a7e9d99076
48 changed files with 1212 additions and 776 deletions
--- a/components/BannerNotification.tsx
+++ b/components/BannerNotification.tsx
@@ -1,30 +1,36 @@
 import React from 'react';
-import {Pressable, View} from 'react-native';
+import {Pressable, StatusBar, View} from 'react-native';
 import {Column, Row, Text} from './ui';
 import {Theme} from './ui/styleUtils';
 import {Icon} from 'react-native-elements';
 import testIDProps from '../shared/commonUtil';
+import ErrorToastIcon from '../assets/Error_Toast_Icon.svg';
+import InfoToastIcon from '../assets/Info_Toast_Icon.svg';
+import SuccessToastIcon from '../assets/Success_Toast_Icon.svg';

 export const BannerNotification: React.FC<BannerNotificationProps> = props => {
  return (
    <View {...testIDProps(props.testId)}>
      <Row
        style={[Theme.BannerStyles.container, Theme.BannerStyles[props.type]]}>
-        <Column fill>
+        <Row fill>
+          {props.type === BannerStatusType.SUCCESS && <SuccessToastIcon />}
+          {props.type === BannerStatusType.ERROR && <ErrorToastIcon />}
+          {props.type === BannerStatusType.IN_PROGRESS && <InfoToastIcon />}
          <Text
            testID={`${props.testId}Text`}
-            color={Theme.Colors.whiteText}
+            color={Theme.Colors.PopupText}
            weight="semibold"
            style={Theme.BannerStyles.text}>
            {props.message}
          </Text>
-        </Column>
+        </Row>
        <Column>
          <Pressable
            style={Theme.BannerStyles.dismiss}
            {...testIDProps('close')}
            onPress={props.onClosePress}>
-            <Icon name="close" color={Theme.Colors.whiteText} size={19} />
+            <Icon name="close" color={Theme.Colors.PopupText} size={19} />
          </Pressable>
        </Column>
      </Row>
--- a/components/BannerNotificationContainer.tsx
+++ b/components/BannerNotificationContainer.tsx
@@ -30,7 +30,7 @@ export const BannerNotificationContainer: React.FC<
  const verificationStatus = bannerNotificationController.verificationStatus || null;

  return (
-    <>
+    <View style={[{position: 'absolute', zIndex: 100}]}>
      <BackupAndRestoreBannerNotification />

      {settingsScreenController.isKeyOrderSet === true && (
@@ -145,7 +145,7 @@ export const BannerNotificationContainer: React.FC<
          testId={'downloadingVcSuccessPopup'}
        />
      )}
-    </>
+    </View>
  );
 };

--- a/components/BiometricIcon.tsx
+++ b/components/BiometricIcon.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import {isIOS} from '../shared/constants';
+import {SvgImage} from './ui/svg';
+import {View} from 'react-native';
+
+interface BiometricIconProps {
+  size?: number;
+}
+
+const BiometricIcon: React.FC<BiometricIconProps> = ({size = 66}) => {
+  const Icon = isIOS()
+    ? SvgImage.faceBiometicIcon(size)
+    : SvgImage.fingerprintIcon(size);
+
+  return <View>{Icon}</View>;
+};
+
+export default BiometricIcon;
--- a/components/KebabPopUp.tsx
+++ b/components/KebabPopUp.tsx
@@ -59,7 +59,7 @@ export const KebabPopUp: React.FC<KebabPopUpProps> = props => {
                  {item.icon}
                </View>
                <Text
-                  style={{ fontFamily: 'Inter_600SemiBold' }}
+                  style={{fontFamily: 'Montserrat_600SemiBold'}}
                  color={
                    item.testID === 'removeFromWallet'
                      ? Theme.Colors.warningText
--- a/components/Toggle.tsx
+++ b/components/Toggle.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import {View} from 'react-native';
+import SwitchToggle from 'react-native-switch-toggle';
+import {Theme} from './ui/styleUtils';
+import testIDProps from '../shared/commonUtil';
+
+interface ShareToggleProps {
+  value: boolean;
+  onToggle: (value: boolean) => void;
+  testID?: string;
+}
+
+const Toggle: React.FC<ShareToggleProps> = ({value, onToggle, testID}) => {
+  return (
+    <View
+      style={[
+        Theme.Styles.wrapper,
+        {
+          borderColor: value ? 'transparent' : Theme.Colors.switchHead,
+          backgroundColor: value
+            ? Theme.Colors.switchHead
+            : Theme.Colors.switchCircleOff,
+        },
+      ]}>
+      <SwitchToggle
+        {...testIDProps(testID || 'shareToggle')}
+        switchOn={value}
+        onPress={() => onToggle(value)}
+        circleColorOff={Theme.Colors.switchHead}
+        circleColorOn={Theme.Colors.switchCircleOff}
+        backgroundColorOn={Theme.Colors.switchHead}
+        backgroundColorOff={Theme.Colors.whiteBackgroundColor}
+        containerStyle={Theme.Styles.container}
+        circleStyle={Theme.Styles.circle}
+      />
+    </View>
+  );
+};
+
+export default Toggle;
--- a/components/VC/Views/VCDetailView.tsx
+++ b/components/VC/Views/VCDetailView.tsx
@@ -302,7 +302,7 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = (
                      <Text
                        testID="offlineAuthDisabledHeader"
                        style={{
-                          fontFamily: 'Inter_600SemiBold',
+                          fontFamily: 'Montserrat_600SemiBold',
                          fontSize: 14,
                        }}
                        color={Theme.Colors.statusLabel}
@@ -312,7 +312,7 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = (
                      <Text
                        testID="offlineAuthDisabledMessage"
                        style={{
-                          fontFamily: 'Inter_400Regular',
+                          fontFamily: 'Montserrat_400Regular',
                          fontSize: 12,
                        }}
                        color={Theme.Colors.statusMessage}
@@ -345,7 +345,7 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = (
                        testID="profileAuthenticated"
                        color={Theme.Colors.statusLabel}
                        style={{
-                          fontFamily: 'Inter_600SemiBold',
+                          fontFamily: 'Montserrat_600SemiBold',
                          fontSize: 14,
                        }}
                        margin={'0 18 0 0'}>
@@ -379,7 +379,7 @@ export const VCDetailView: React.FC<VCItemDetailsProps> = (
              style={{
                color: '#007AFF',
                fontSize: 16,
-                fontFamily: 'Inter_500Medium',
+                fontFamily: 'Montserrat_500Medium',
              }}>
              {t('View Shareable Information')}
            </Text>
--- a/components/VC/common/VCItemField.tsx
+++ b/components/VC/common/VCItemField.tsx
@@ -1,13 +1,13 @@
-import { Dimensions, View } from 'react-native';
-import { Column, Row, Text } from '../../ui';
-import { CustomTooltip } from '../../ui/ToolTip';
-import { Theme } from '../../ui/styleUtils';
+import {Dimensions, View} from 'react-native';
+import {Column, Row, Text} from '../../ui';
+import {CustomTooltip} from '../../ui/ToolTip';
+import {Theme} from '../../ui/styleUtils';
 import React from 'react';
-import { SvgImage } from '../../ui/svg';
-import { useTranslation } from 'react-i18next';
+import {SvgImage} from '../../ui/svg';
+import {useTranslation} from 'react-i18next';
 import Icon from 'react-native-vector-icons/FontAwesome';
-import { STATUS_FIELD_NAME } from './VCUtils';
-import { StatusTooltipContent } from './VcStatustooTip';
+import {STATUS_FIELD_NAME} from './VCUtils';
+import {StatusTooltipContent} from './VcStatustooTip';

 export const VCItemFieldName = ({
  fieldName,
@@ -20,7 +20,7 @@ export const VCItemFieldName = ({
  fieldNameColor?: string;
  isDisclosed?: boolean;
 }) => {
-  const { t } = useTranslation('ViewVcModal');
+  const {t} = useTranslation('ViewVcModal');
  return (
    <Row>
      {fieldName && (
@@ -38,14 +38,17 @@ export const VCItemFieldName = ({
          width={Dimensions.get('screen').width * 0.8}
          height={Dimensions.get('screen').height * 0.28}
          triggerComponent={SvgImage.info()}
-          triggerComponentStyles={{ marginLeft: 2, marginTop: 2 }}
-          toolTipContent={
-            <StatusTooltipContent />
-          }
+          triggerComponentStyles={{marginLeft: 2, marginTop: 2}}
+          toolTipContent={<StatusTooltipContent />}
        />
      )}
      {isDisclosed && (
-        <Icon name="share-square-o" size={10} color="#666" style={{ marginLeft: 5, marginTop: 3 }} />
+        <Icon
+          name="share-square-o"
+          size={10}
+          color="#666"
+          style={{marginLeft: 5, marginTop: 3}}
+        />
      )}
    </Row>
  );
@@ -61,14 +64,7 @@ export const VCItemFieldValue = ({
  fieldValueColor?: string;
 }) => {
  if (React.isValidElement(fieldValue)) {
-
-    return (
-      <View
-        testID={`${testID}Value`}
-      >
-        {fieldValue}
-      </View>
-    );
+    return <View testID={`${testID}Value`}>{fieldValue}</View>;
  }

  return (
--- a/components/VCVerification.tsx
+++ b/components/VCVerification.tsx
@@ -1,20 +1,20 @@
 import React from 'react';
-import { View } from 'react-native';
+import {View} from 'react-native';
 import testIDProps from '../shared/commonUtil';
-import { Display } from './VC/common/VCUtils';
+import {Display} from './VC/common/VCUtils';
 import VerifiedIcon from './VerifiedIcon';
 import PendingIcon from './PendingIcon';
-import { Row, Text } from './ui';
-import { Theme } from './ui/styleUtils';
-import { useTranslation } from 'react-i18next';
-import { VCMetadata } from '../shared/VCMetadata';
+import {Row, Text} from './ui';
+import {Theme} from './ui/styleUtils';
+import {useTranslation} from 'react-i18next';
+import {VCMetadata} from '../shared/VCMetadata';

 export const VCVerification: React.FC<VCVerificationProps> = ({
  vcMetadata,
  display,
  showLastChecked = true,
 }) => {
-  const { t } = useTranslation('VcDetails');
+  const {t} = useTranslation('VcDetails');

  let statusText: string;
  let statusIcon: JSX.Element;
@@ -36,44 +36,48 @@ export const VCVerification: React.FC<VCVerificationProps> = ({
  }

  return (
-  <View
-    {...testIDProps('verified')}
-    style={{
-      flexDirection: 'column',
-      alignItems: 'flex-start',
-      paddingVertical: 6,
-    }}>
-    
-    {/* First Row: Status Icon + Text */}
-    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-      {statusIcon}
-      <Text
-        testID="verificationStatus"
-        color={display.getTextColor(Theme.Colors.Details)}
-        style={Theme.Styles.verificationStatus}>
-        {statusText}
-      </Text>
-    </View>
-
-    {showLastChecked && vcMetadata.lastKnownStatusTimestamp && (
-      <View style={{ marginTop: 4 }}>
+    <View
+      {...testIDProps('verified')}
+      style={{
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        paddingVertical: 6,
+      }}>
+      {/* First Row: Status Icon + Text */}
+      <View style={{flexDirection: 'row', alignItems: 'center'}}>
+        {statusIcon}
        <Text
-          testID='lastCheckedLabel'
+          testID="verificationStatus"
          color={display.getTextColor(Theme.Colors.Details)}
-          style={[Theme.Styles.verificationStatus, { fontFamily: 'Inter_400' }]}>
-          {t('lastChecked')}
-        </Text>
-        <Text
-          testID="lastKnownStatusTimestamp"
-          color={display.getTextColor(Theme.Colors.Details)}
-          style={[Theme.Styles.verificationStatus,{ fontFamily: 'Inter_400' }]}>
-          {new Date(vcMetadata.lastKnownStatusTimestamp).toLocaleString()}
+          style={Theme.Styles.verificationStatus}>
+          {statusText}
        </Text>
      </View>
-    )}
-  </View>
-);

+      {showLastChecked && vcMetadata.lastKnownStatusTimestamp && (
+        <View style={{marginTop: 4}}>
+          <Text
+            testID="lastCheckedLabel"
+            color={display.getTextColor(Theme.Colors.Details)}
+            style={[
+              Theme.Styles.verificationStatus,
+              {fontFamily: 'Montserrat_400Regular'},
+            ]}>
+            {t('lastChecked')}
+          </Text>
+          <Text
+            testID="lastKnownStatusTimestamp"
+            color={display.getTextColor(Theme.Colors.Details)}
+            style={[
+              Theme.Styles.verificationStatus,
+              {fontFamily: 'Montserrat_400Regular'},
+            ]}>
+            {new Date(vcMetadata.lastKnownStatusTimestamp).toLocaleString()}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
 };

 export interface VCVerificationProps {
--- a/components/ui/Header.tsx
+++ b/components/ui/Header.tsx
@@ -4,8 +4,10 @@ import {Column, Row} from './Layout';
 import {Theme} from './styleUtils';
 import testIDProps from '../../shared/commonUtil';
 import {BackButton} from './backButton/BackButton';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';

 export const Header: React.FC<HeaderProps> = ({goBack, title, testID}) => {
+  const insets = useSafeAreaInsets();
  return (
    <Column safe align="center" testID={testID}>
      <Row elevation={2}>
@@ -18,6 +20,7 @@ export const Header: React.FC<HeaderProps> = ({goBack, title, testID}) => {
            marginBottom: 22,
            marginVertical: 16,
            marginLeft: 10,
+            paddingTop: insets.top,
          }}>
          <BackButton onPress={goBack} />
          <Row fill align={'center'}>
--- a/components/ui/Picker.tsx
+++ b/components/ui/Picker.tsx
@@ -4,6 +4,7 @@ import {Icon, ListItem, Overlay} from 'react-native-elements';
 import {Column} from './Layout';
 import {Text} from './Text';
 import testIDProps from '../../shared/commonUtil';
+import {Theme} from './styleUtils';

 interface Picker extends React.VFC<PickerProps<unknown>> {
  <T>(props: PickerProps<T>): ReturnType<React.FC>;
@@ -33,23 +34,41 @@ export const Picker: Picker = (props: PickerProps<unknown>) => {
      <Overlay
        isVisible={isContentVisible}
        onBackdropPress={toggleContent}
-        overlayStyle={{padding: 1}}>
+        overlayStyle={Theme.Styles.overlay}>
        <Column
          testID={props.testID}
          width={Dimensions.get('window').width * 0.8}>
-          {props.items.map((item, index) => (
-            <ListItem
-              topDivider={index !== 0}
-              onPress={() => selectItem(index)}
-              key={index}>
-              <ListItem.Content>
-                <ListItem.Title {...testIDProps(item.value as string)}>
-                  <Text>{item.label}</Text>
-                </ListItem.Title>
-              </ListItem.Content>
-              {selectedIndex === index && <Icon name="check" />}
-            </ListItem>
-          ))}
+          {props.items.map((item, index) => {
+            const isSelected = selectedIndex === index;
+            return (
+              <ListItem
+                key={String(item.value ?? index)}
+                topDivider={index !== 0}
+                onPress={() => selectItem(index)}
+                containerStyle={
+                  isSelected
+                    ? Theme.Styles.listItemSelectedContainer
+                    : Theme.Styles.listItemUnselectedContainer
+                }>
+                <ListItem.Content>
+                  <ListItem.Title {...testIDProps(item.value as string)}>
+                    <Text
+                      style={
+                        isSelected
+                          ? Theme.Styles.listItemSelectedText
+                          : Theme.Styles.listItemUnselectedText
+                      }>
+                      {item.label}
+                    </Text>
+                  </ListItem.Title>
+                </ListItem.Content>
+
+                {isSelected && (
+                  <Icon name="check" color={Theme.Colors.ListSelectedIcon} />
+                )}
+              </ListItem>
+            );
+          })}
        </Column>
      </Overlay>
    </React.Fragment>
--- a/components/ui/SearchBar.tsx
+++ b/components/ui/SearchBar.tsx
@@ -1,44 +1,45 @@
 import React from 'react';
-import {TextInput, View} from 'react-native';
+import {TextInput} from 'react-native';
 import {Icon} from 'react-native-elements';
 import {Row} from './Layout';
 import {Theme} from './styleUtils';
-import {SvgImage} from './svg';

-export const SearchBar = ({ isVcSearch = false, searchIconTestID, searchBarTestID, placeholder, search, onFocus, onChangeText, onLayout, editable = true }: SearchBarProps) => {
+export const SearchBar = ({
+  searchIconTestID,
+  searchBarTestID,
+  placeholder,
+  search,
+  onFocus,
+  onChangeText,
+  onLayout,
+  editable = true,
+}: SearchBarProps) => {
  return (
-    <Row>
-      {isVcSearch ? (
-        <View
-          testID={searchIconTestID}
-          style={Theme.SearchBarStyles.vcSearchIcon}>
-          {SvgImage.SearchIcon()}
-        </View>
-      ) : (
-        <Icon
-          testID={searchIconTestID}
-          name="search"
-          color={Theme.Colors.Icon}
-          size={27}
-          style={Theme.SearchBarStyles.searchIcon}
-        />
-      )}
+    <Row style={Theme.SearchBarStyles.innerSearchBarContainer}>
      <TextInput
        testID={searchBarTestID}
        style={Theme.SearchBarStyles.searchBar}
        placeholder={placeholder}
+        placeholderTextColor={Theme.Colors.SearchBarPlaceholderColor}
        value={search}
        onFocus={onFocus}
        onChangeText={searchText => onChangeText(searchText)}
        onLayout={onLayout}
        editable={editable ?? true}
      />
+      <Icon
+        testID={searchIconTestID}
+        name="search"
+        type="material"
+        color={Theme.Colors.SearchIcon}
+        size={27}
+        style={Theme.SearchBarStyles.searchIcon}
+      />
    </Row>
  );
 };

 interface SearchBarProps {
-  isVcSearch: Boolean;
  searchIconTestID: string;
  searchBarTestID: string;
  search: string;
--- a/components/ui/SetupPicker.tsx
+++ b/components/ui/SetupPicker.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import {Dimensions} from 'react-native';
+import {Dimensions, View} from 'react-native';
 import {Icon, ListItem} from 'react-native-elements';
 import {Column} from './Layout';
 import {Text} from './Text';
@@ -33,30 +33,35 @@ export const SetupPicker: Picker = (props: PickerProps<unknown>) => {
      testID={props.testID}
      width={Dimensions.get('window').width * 0.8}
      backgroundColor={Theme.Colors.whiteBackgroundColor}>
-      {props.items.map((item, index) => (
-        <ListItem
-          bottomDivider
-          topDivider={index !== 0}
-          onPress={() => selectItem(index)}
-          key={index}>
-          <ListItem.Content>
-            <ListItem.Title
-              {...testIDProps(item.value)}
-              style={{paddingTop: 3}}>
-              <Text
-                color={selectedIndex === index ? Theme.Colors.Icon : null}
-                weight={selectedIndex === index ? 'semibold' : 'regular'}>
-                {item.label}
-              </Text>
-            </ListItem.Title>
-          </ListItem.Content>
-          {selectedIndex === index ? (
-            <Icon name="radio-button-checked" color={Theme.Colors.Icon} />
-          ) : (
-            <Icon name="radio-button-unchecked" color={Theme.Colors.GrayIcon} />
-          )}
-        </ListItem>
-      ))}
+      {props.items.map((item, index) => {
+        const isSelected = selectedIndex === index;
+        return (
+          <ListItem
+            bottomDivider
+            topDivider={index !== 0}
+            onPress={() => selectItem(index)}>
+            <ListItem.Content>
+              <ListItem.Title
+                {...testIDProps(item.value)}
+                style={{paddingTop: 3}}>
+                <Text
+                  color={isSelected ? Theme.Colors.Icon : null}
+                  weight={isSelected ? 'semibold' : 'regular'}>
+                  {item.label}
+                </Text>
+              </ListItem.Title>
+            </ListItem.Content>
+            {isSelected ? (
+              <View style={Theme.Styles.listItemSelectedCircle} />
+            ) : (
+              <Icon
+                name="radio-button-unchecked"
+                color={Theme.Colors.GrayIcon}
+              />
+            )}
+          </ListItem>
+        );
+      })}
    </Column>
  );
 };
--- a/components/ui/Timestamp.tsx
+++ b/components/ui/Timestamp.tsx
@@ -23,7 +23,7 @@ export const Timestamp: React.FC<TimestampProps> = props => {
        testID={`${props.testId}Time`}
        size="regular"
        style={{
-          fontFamily: 'Inter_500Medium',
+          fontFamily: 'Montserrat_500Medium',
          fontWeight: '600',
          fontSize: 14,
          letterSpacing: 0,
--- a/components/ui/svg.tsx
+++ b/components/ui/svg.tsx
@@ -60,6 +60,7 @@ import QuestionIcon from '../../assets/questionIcon.svg';
 import CopyIcon from '../../assets/file_copy.svg';
 import StarIcon from '../../assets/credentialRegestryStar.svg';
 import SelectedCheckBox from '../../assets/Selected_Check_Box.svg';
+import FaceBiometric from '../../assets/Icon.svg';
 import ReverifyIcon from '../../assets/Reverify.svg';
 export class SvgImage {
  static selectedCheckBox() {
@@ -100,8 +101,8 @@ export class SvgImage {
  }

  static defaultIssuerLogo(defaultLogo: any) {
-    const DefaultLogo=defaultLogo
-    return <DefaultLogo/>
+    const DefaultLogo = defaultLogo;
+    return <DefaultLogo />;
  }

  static starIcon() {
@@ -557,10 +558,6 @@ export class SvgImage {
    );
  }

-  static SearchIcon() {
-    return <Search {...testIDProps('searchIcon')} />;
-  }
-
  static settingsLanguageIcon(size) {
    return (
      <SettingsLanguage
@@ -583,6 +580,17 @@ export class SvgImage {
    );
  }

+  static faceBiometicIcon(size?: number | undefined) {
+    return (
+      <FaceBiometric
+        height={size}
+        width={size}
+        color1={Theme.Colors.linearIconGradientStart}
+        color2={Theme.Colors.linearIconGradientEnd}
+      />
+    );
+  }
+
  static abotInjiIcon() {
    return (
      <SettingsAboutInji
--- a/components/ui/themes/DefaultTheme.ts
+++ b/components/ui/themes/DefaultTheme.ts
@@ -31,7 +31,8 @@ const Colors = {
  DimGray: '#737373',
  DarkGray: '#A5A5A5',
  platinumGrey: '#EDEDED',
-  Orange: '#951F6F',
+  Orange: '#F37321',
+  DarkMagenta: '#951F6F',
  OrangeBrown: '#D9822B',
  Blue: '#0000FF',
  LightGrey: '#F8F8F8',
@@ -45,12 +46,13 @@ const Colors = {
  Warning: '#f0ad4e',
  GrayText: '#6F6F6F',
  mediumLightGrayText: '#A7A7A7',
+  veryLightBluishGray: '#D9E1E7',
  dorColor: '#CBCBCB',
  plainText: '#FFFFFF',
  walletbindingLabel: '#000000',
  LightOrange: '#F7EDF3',
  GradientColors: ['#FF5300', '#5B03AD'],
-  GradientColorsLight: ['#FF5300' + 14, '#5B03AD' + 14],
+  GradientColorsLight: ['#FF5300' + 14, '#FF5300' + 14],
  DisabledColors: ['#C7C7C7', '#C7C7C7'],
  TimeoutHintBoxColor: '#FFF7E5',
  TimeoutHintBoxBorder: '#FFF2D6',
@@ -68,6 +70,16 @@ const Colors = {
  Mercury: '#E6E6E6',
  Yellow: '#E8A94F',
  selectIDTextGradient: ['#F5F5F5', '#FFFFFF'],
+  brandPrimary: '#F37321',
+  brandPrimaryLight: '#FCEFE6',
+  brandPrimaryDark: '#D65F17',
+  DeepPurple: '#290B45',
+  RoyalPurple: '#451691',
+  LightMintGreen: '#9DCFBB',
+  CharcoalBlue: '#384455',
+  LightRose: '#EFB3B5',
+  LightYellow: '#FFE799',
+  SteelBlue: '#809FB8',
 };

 export type ElevationLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -81,7 +93,7 @@ export const DefaultTheme = {
    DetailsLabel: Colors.Gray40,
    LoadingDetailsLabel: Colors.Gray40,
    AddIdBtnBg: Colors.Orange,
-    AddIdBtnTxt: Colors.Orange,
+    AddIdBtnTxt: Colors.DarkMagenta,
    DownloadIdBtnTxt: Colors.White,
    Loading: Colors.Orange,
    Cursor: Colors.Orange,
@@ -89,6 +101,7 @@ export const DefaultTheme = {
    IconBg: Colors.Orange,
    popUp: Colors.Green,
    Icon: Colors.Orange,
+    SearchIcon: Colors.veryLightBluishGray,
    GrayIcon: Colors.Gray50,
    helpText: Colors.Gray44,
    borderBottomColor: Colors.Grey6,
@@ -98,6 +111,7 @@ export const DefaultTheme = {
    switchHead: Colors.Orange,
    switchTrackTrue: Colors.LightOrange,
    switchTrackFalse: Colors.Grey,
+    switchCircleOff: Colors.White,
    overlayBackgroundColor: Colors.White,
    rotatingIcon: Colors.Grey5,
    loadingLabel: Colors.Grey6,
@@ -139,10 +153,10 @@ export const DefaultTheme = {
    uncheckedIcon: Colors.uncheckedIcon,
    settingsLabel: Colors.Black,
    chevronRightColor: Colors.Grey,
-    linearGradientStart: Colors.startColor,
-    linearGradientEnd: Colors.endColor,
-    linearIconGradientStart: Colors.startColor,
-    linearIconGradientEnd: Colors.endColor,
+    linearGradientStart: Colors.brandPrimary,
+    linearGradientEnd: Colors.brandPrimary,
+    linearIconGradientStart: Colors.brandPrimary,
+    linearIconGradientEnd: Colors.brandPrimary,
    LinearGradientStroke: Colors.stroke,
    warningLogoBgColor: Colors.warningLogoBg,
    tooltipIcon: Colors.toolTip,
@@ -151,6 +165,16 @@ export const DefaultTheme = {
    warningText: Colors.Red,
    PendingIcon: Colors.Yellow,
    selectIDTextGradient: ['#F5F5F5', '#FFFFFF'],
+    ListSelectedBackground: Colors.brandPrimaryLight,
+    ListSelectedText: Colors.brandPrimary,
+    ListSelectedIcon: Colors.brandPrimary,
+    ListUnselectedBackground: Colors.White,
+    ListUnselectedText: Colors.Black,
+    SearchBarPlaceholderColor: Colors.veryLightBluishGray,
+    PopupText: Colors.CharcoalBlue,
+    TransactionCodeBackgroundColor: Colors.White,
+    TransactionCodeBorderColor: Colors.veryLightBluishGray,
+    TransactionCodePlaceholderColor: Colors.SteelBlue,
  },
  Styles: StyleSheet.create({
    title: {
@@ -169,12 +193,12 @@ export const DefaultTheme = {
    fieldItemTitle: {
      backgroundColor: Colors.Transparent,
      fontSize: 11,
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
    },
    fieldItemValue: {
      backgroundColor: Colors.Transparent,
      fontSize: 12,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      marginTop: 3,
    },
    loadingSubtitle: {
@@ -183,7 +207,7 @@ export const DefaultTheme = {
    },
    verificationStatus: {
      fontSize: 12,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    statusLabel: {
      color: Colors.Gray30,
@@ -574,7 +598,7 @@ export const DefaultTheme = {
    detailsText: {
      fontWeight: 'bold',
      fontSize: 15,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
    },
    idInputContainer: {
      width: Dimensions.get('window').width * 0.86,
@@ -587,9 +611,51 @@ export const DefaultTheme = {
      height: isIOS() ? 100 : 'auto',
    },
    picker: {
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 18,
    },
+    overlay: {
+      padding: 1,
+      borderRadius: 12,
+      overflow: 'hidden',
+    },
+    listItemSelectedText: {
+      color: Colors.brandPrimary,
+      fontWeight: '600',
+      fontFamily: 'Montserrat_500Medium',
+    },
+    listItemUnselectedText: {
+      color: Colors.Black,
+      fontWeight: '400',
+      fontFamily: 'Montserrat_500Medium',
+    },
+    listItemSelectedContainer: {backgroundColor: Colors.brandPrimaryLight},
+    listItemUnselectedContainer: {backgroundColor: Colors.White},
+    listItemSelectedCircle: {
+      width: 22,
+      height: 22,
+      borderRadius: 11,
+      borderWidth: 7,
+      borderColor: Colors.brandPrimary,
+      backgroundColor: Colors.White,
+    },
+    wrapper: {
+      borderWidth: 2,
+      borderRadius: 16,
+      padding: 2,
+    },
+    container: {
+      width: 48,
+      height: 22,
+      borderRadius: 16,
+      padding: 3,
+    },
+    circle: {
+      width: 18,
+      height: 18,
+      borderRadius: 9,
+      elevation: 2,
+    },
    idInputBottom: {
      position: 'relative',
      bottom: 18,
@@ -608,7 +674,7 @@ export const DefaultTheme = {
      marginVertical: 6,
    },
    placeholder: {
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    hrLine: {
      borderBottomColor: Colors.Gray44,
@@ -656,13 +722,16 @@ export const DefaultTheme = {
    },
    boxShadow: generateBoxShadowStyle(),
    tooltipContainerStyle: {
-      backgroundColor: '#FAFAFA',
-      borderWidth: 1,
+      backgroundColor: '#EBE6F3',
+      borderWidth: 2,
      borderColor: '#E0E0E0',
-      marginLeft: 15,
+      maxWidth: '90%',
+    },
+    tooltipContentTitle: {
+      color: Colors.DeepPurple,
    },
    tooltipContentDescription: {
-      color: Colors.toolTipContent,
+      color: Colors.RoyalPurple,
      marginTop: 10,
    },
    tooltipHrLine: {
@@ -698,7 +767,7 @@ export const DefaultTheme = {
      maxHeight: 20,
      borderRadius: 4,
      fontSize: 10,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      lineHeight: 12,
    },
    scanLayoutHeaderContainer: {
@@ -709,7 +778,7 @@ export const DefaultTheme = {
    },
    scanLayoutHeaderTitle: {
      fontSize: 26,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      paddingTop: isIOS() ? 10 : 20,
      paddingBottom: 10,
    },
@@ -726,18 +795,18 @@ export const DefaultTheme = {
    },
    sendVPHeaderTitle: {
      fontSize: 18,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    sendVPHeaderSubTitle: {
      fontSize: 13,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      color: Colors.Orange,
      maxWidth: '80%',
      overflow: 'hidden',
    },
    HistoryHeaderTitleStyle: {
      fontSize: 26,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      marginTop: isIOS() ? 5 : 15,
    },
    tabBarIconCopilot: {
@@ -774,7 +843,7 @@ export const DefaultTheme = {
      backgroundColor: '#DADADA',
    },
    disclosureTitle: {
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 15,
      color: Colors.Black,
    },
@@ -785,20 +854,22 @@ export const DefaultTheme = {
    },
    disclosureSelectButton: {
      fontSize: 14,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
    },
  }),
  BannerStyles: StyleSheet.create({
    container: {
-      alignItems: 'flex-start',
+      alignItems: 'center',
      justifyContent: 'space-between',
      backgroundColor: '#DB2E2E',
      width: '100%',
+      height: 70,
      position: 'relative',
      paddingHorizontal: 18,
      paddingVertical: 12,
      marginVertical: 1,
      columnGap: 7,
+      borderRadius: 10,
    },
    topBanner: {
      marginTop: 10,
@@ -806,20 +877,24 @@ export const DefaultTheme = {
    },
    text: {
      textAlignVertical: 'center',
-      fontSize: 12,
+      fontSize: 14,
      lineHeight: 15,
      padding: 1,
-      fontFamily: 'Inter_600SemiBold',
+      marginHorizontal: 8,
+      fontFamily: 'Montserrat_600SemiBold',
    },
    dismiss: {paddingLeft: 9},
    inProgress: {
-      backgroundColor: Colors.OrangeBrown,
+      backgroundColor: Colors.LightYellow,
+      color: Colors.CharcoalBlue,
    },
    success: {
-      backgroundColor: Colors.Green,
+      backgroundColor: Colors.LightMintGreen,
+      color: Colors.CharcoalBlue,
    },
    error: {
-      backgroundColor: Colors.LightRed,
+      backgroundColor: Colors.LightRose,
+      color: Colors.CharcoalBlue,
    },
  }),
  QrCodeStyles: StyleSheet.create({
@@ -845,7 +920,7 @@ export const DefaultTheme = {
      borderTopLeftRadius: 21,
      borderTopRightRadius: 21,
      justifyContent: 'space-between',
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      paddingBottom: 10,
      paddingRight: 15,
      paddingLeft: 130,
@@ -881,7 +956,7 @@ export const DefaultTheme = {
      color: Colors.Black,
      flex: 1,
      fontSize: 33,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      height: 50,
      lineHeight: 28,
      margin: 8,
@@ -892,7 +967,7 @@ export const DefaultTheme = {
      borderColor: Colors.Orange,
      color: Colors.Black,
      flex: 1,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 29,
      height: 50,
      margin: 8,
@@ -902,33 +977,33 @@ export const DefaultTheme = {
  TextStyles: StyleSheet.create({
    header: {
      color: Colors.Black,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 18,
      lineHeight: 19,
      paddingTop: 5,
    },
    subHeader: {
      color: Colors.mediumLightGrayText,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      lineHeight: 19,
      fontSize: 13,
      paddingTop: 4,
    },
    semiBoldHeader: {
      color: Colors.Black,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 18,
      lineHeight: 21,
      paddingTop: 4,
    },
    retrieveIdLabel: {
      color: Colors.ShadeOfGrey,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      lineHeight: 18,
    },
    helpHeader: {
      color: Colors.Black,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 18,
      lineHeight: 19,
      paddingTop: 5,
@@ -937,11 +1012,11 @@ export const DefaultTheme = {
    helpDetails: {
      margin: 5,
      color: Colors.Gray44,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    urlLinkText: {
      color: Colors.Orange,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    aboutDetails: {
      color: Colors.Black,
@@ -954,7 +1029,7 @@ export const DefaultTheme = {
      top: 65,
      left: 5,
      color: Colors.Red,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 12,
      minWidth: 200,
    },
@@ -964,21 +1039,21 @@ export const DefaultTheme = {
      lineHeight: 18,
    },
    regular: {
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      fontSize: 14,
    },
    regularGrey: {
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      fontSize: 15,
      lineHeight: 19,
      color: Colors.ShadeOfGrey,
    },
    semibold: {
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 15,
    },
    bold: {
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 15,
      justifyContent: 'center',
    },
@@ -1052,23 +1127,21 @@ export const DefaultTheme = {
    },
  }),
  SearchBarStyles: StyleSheet.create({
-    idleSearchBarBottomLine: {
-      alignItems: 'center',
-      borderBottomWidth: 1,
-      borderBottomColor: Colors.Gray40,
-    },
    searchBarContainer: {
      alignItems: 'center',
-      borderBottomWidth: 1,
-      borderBottomColor: Colors.Orange,
    },
-    vcSearchBarContainer: {
+    vcSearchBarContainer: {},
+    innerSearchBarContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
      alignItems: 'center',
-      borderBottomWidth: 0.5,
-      borderTopWidth: 0.5,
-      borderColor: Colors.DimGray,
-      width: Dimensions.get('window').width,
+      width: '100%',
      backgroundColor: Colors.White,
+      borderColor: Colors.veryLightBluishGray,
+      borderRadius: 18,
+      borderWidth: 2,
+      marginTop: 10,
+      paddingHorizontal: 20,
    },
    vcSearchIcon: {
      justifyContent: 'center',
@@ -1080,14 +1153,14 @@ export const DefaultTheme = {
      justifyContent: 'center',
      height: Dimensions.get('window').height * 0.055,
      width: Dimensions.get('window').width * 0.1,
+      fontFamily: 'Montserrat_500Medium',
    },
    searchBar: {
      textAlign: I18nManager.isRTL ? 'right' : 'left',
      height: Dimensions.get('window').height * 0.055,
      width: Dimensions.get('window').width * 0.75,
-    },
-    clearSearch: {
-      padding: 10,
+      fontFamily: 'Montserrat_500Medium',
+      fontSize: 17,
    },
  }),
  ButtonStyles: StyleSheet.create({
@@ -1168,7 +1241,7 @@ export const DefaultTheme = {
      backgroundColor: Colors.White,
      borderWidth: 0,
      marginTop: -15,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      padding: 0,
    },
    timeoutHintContainer: {
@@ -1271,7 +1344,7 @@ export const DefaultTheme = {
  }),
  BackupAndRestoreStyles: StyleSheet.create({
    backupProgressText: {
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      fontSize: 14,
      color: Colors.Gray44,
    },
@@ -1281,7 +1354,7 @@ export const DefaultTheme = {
      textAlign: 'center',
      lineHeight: 22,
      fontSize: 17,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      marginHorizontal: 30,
    },
    actionOrLoaderContainer: {
@@ -1298,7 +1371,7 @@ export const DefaultTheme = {
      paddingHorizontal: 10,
      textAlign: 'center',
      paddingTop: 15,
-      fontFamily: 'Inter_500Medium',
+      fontFamily: 'Montserrat_500Medium',
      fontSize: 14,
      letterSpacing: 0,
      lineHeight: 17,
@@ -1316,7 +1389,7 @@ export const DefaultTheme = {
    headerText: {
      justifyContent: 'center',
      paddingLeft: 12,
-      fontFamily: 'Inter_500Medium',
+      fontFamily: 'Montserrat_500Medium',
      fontWeight: '600',
      fontSize: 14,
      letterSpacing: 0,
@@ -1377,7 +1450,7 @@ export const DefaultTheme = {
    },
    kebabHeaderStyle: {
      justifyContent: 'space-between',
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
    },
  }),
  MessageOverlayStyles: StyleSheet.create({
@@ -1397,6 +1470,7 @@ export const DefaultTheme = {
    button: {
      borderTopLeftRadius: 0,
      borderTopRightRadius: 0,
+      fontSize: 16,
    },
    halfButton: {
      borderRadius: 8,
@@ -1475,7 +1549,7 @@ export const DefaultTheme = {
    sliderTitle: {
      color: Colors.White,
      marginBottom: 20,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
    },
    text: {
      color: Colors.White,
@@ -1556,7 +1630,7 @@ export const DefaultTheme = {
      marginHorizontal: 9,
    },
    issuerHeading: {
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 14,
      paddingHorizontal: 3,
      marginBottom: 2,
@@ -1582,7 +1656,7 @@ export const DefaultTheme = {
    image: {marginTop: -60, paddingBottom: 26},
    title: {
      color: Colors.Black,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 18,
      lineHeight: 21,
      paddingTop: 4,
@@ -1591,7 +1665,7 @@ export const DefaultTheme = {
    },
    message: {
      textAlign: 'center',
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      fontSize: 14,
      lineHeight: 20,
      marginTop: 6,
@@ -1601,7 +1675,7 @@ export const DefaultTheme = {
    },
    additionalMessage: {
      color: Colors.Black,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 18,
      lineHeight: 21,
      paddingTop: 4,
@@ -1646,7 +1720,7 @@ export const DefaultTheme = {
    },
    heading: {
      color: 'black',
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 18,
      lineHeight: 19,
      padding: 10,
@@ -1793,16 +1867,16 @@ export const DefaultTheme = {
    purposeText: {
      fontSize: 13,
      position: 'relative',
-      fontFamily: 'Inter_500Medium',
+      fontFamily: 'Montserrat_500Medium',
    },
    cardsSelectedText: {
-      fontFamily: 'Inter_500Medium',
+      fontFamily: 'Montserrat_500Medium',
      color: '#000000',
      fontSize: 14,
    },
    selectIDText: {
      position: 'relative',
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 16,
    },
  }),
@@ -1822,11 +1896,11 @@ export const DefaultTheme = {
      justifyContent: 'space-between',
    },
    bannerTitle: {
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    bannerGuide: {
      opacity: 0.8,
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
    },
    bannerEnablePermissionContainer: {
      marginTop: 15,
@@ -1834,7 +1908,7 @@ export const DefaultTheme = {
    bannerEnablePermission: {
      borderBottomWidth: 1.5,
      borderBottomColor: Colors.White,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    scannerContainer: {
      borderRadius: 24,
@@ -1889,14 +1963,18 @@ export const DefaultTheme = {
    },
    holdPhoneSteadyText: {
      color: Colors.Black,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 15,
    },
    cameraFlipIcon: {
      height: 50,
      width: 50,
    },
-    iconText: {fontFamily: 'Inter_600SemiBold', fontSize: 12, marginTop: 6},
+    iconText: {
+      fontFamily: 'Montserrat_600SemiBold',
+      fontSize: 12,
+      marginTop: 6,
+    },
  }),

  BottomTabBarStyle: StyleSheet.create({
@@ -1904,7 +1982,7 @@ export const DefaultTheme = {
    headerLeftContainerStyle: {paddingEnd: 13},
    tabBarLabelStyle: {
      fontSize: 12,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    tabBarStyle: {
      display: 'flex',
@@ -2000,6 +2078,26 @@ export const DefaultTheme = {
      marginTop: 10,
      width: '80%',
    },
+    transactionGradientContainer: {
+      width: Dimensions.get('window').width - 100,
+      alignSelf: 'center',
+      borderRadius: 18,
+      padding: 2,
+      marginTop: 10,
+      marginBottom: 25,
+    },
+    inputContainer: {
+      borderBottomWidth: 0,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      width: '100%',
+      backgroundColor: Colors.White,
+      borderRadius: 18,
+      paddingHorizontal: 20,
+      overflow: 'hidden',
+      height: 60,
+    },
    inputStyle: {
      fontSize: 20,
      fontWeight: '500',
@@ -2162,7 +2260,7 @@ export const DefaultTheme = {
    titleText: {
      fontSize: 17,
      textAlign: 'left',
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      paddingTop: 20,
    },
    titleDescription: {
@@ -2173,14 +2271,14 @@ export const DefaultTheme = {
    },
    noteTitleText: {
      fontSize: 14,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      color: '#973C00',
      marginBottom: 5,
    },
    noteDescriptionText: {
      fontSize: 13,
      color: '#973C00',
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      lineHeight: 18,
      textAlign: 'left',
      marginLeft: -25,
@@ -2199,7 +2297,7 @@ export const DefaultTheme = {
    },
    text: {
      fontSize: 14,
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      color: 'black',
      flex: 1,
    },
--- a/components/ui/themes/PurpleTheme.ts
+++ b/components/ui/themes/PurpleTheme.ts
@@ -45,6 +45,7 @@ const Colors = {
  Warning: '#f0ad4e',
  GrayText: '#6F6F6F',
  mediumLightGrayText: '#A7A7A7',
+  veryLightBluishGray: '#D9E1E7',
  dorColor: '#CBCBCB',
  plainText: '#F3E2FF',
  walletbindingLabel: '#000000',
@@ -70,6 +71,16 @@ const Colors = {
  Mercury: '#E6E6E6',
  Yellow: '#E8A94F',
  selectIDTextGradient: ['#F5F5F5', '#FFFFFF'],
+  brandPrimary: '#5B03AD',
+  brandPrimaryLight: '#F2E6FA',
+  brandPrimaryDark: '#4A028F',
+  DeepPurple: '#290B45',
+  RoyalPurple: '#451691',
+  LightMintGreen: '#9DCFBB',
+  CharcoalBlue: '#384455',
+  LightRose: '#EFB3B5',
+  LightYellow: '#FFE799',
+  SteelBlue: '#809FB8',
 };

 export type ElevationLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -91,6 +102,7 @@ export const PurpleTheme = {
    IconBg: Colors.Purple,
    popUp: Colors.Green,
    Icon: Colors.Purple,
+    SearchIcon: Colors.veryLightBluishGray,
    GrayIcon: Colors.Gray50,
    helpText: Colors.Gray44,
    borderBottomColor: Colors.Grey6,
@@ -101,6 +113,7 @@ export const PurpleTheme = {
    switchHead: Colors.Purple,
    switchTrackTrue: Colors.LightPurple,
    switchTrackFalse: Colors.Grey,
+    switchCircleOff: Colors.White,
    overlayBackgroundColor: Colors.White,
    rotatingIcon: Colors.Grey5,
    loadingLabel: Colors.Grey6,
@@ -142,10 +155,10 @@ export const PurpleTheme = {
    uncheckedIcon: Colors.uncheckedIcon,
    settingsLabel: Colors.Black,
    chevronRightColor: Colors.Grey,
-    linearGradientStart: Colors.startColor,
-    linearGradientEnd: Colors.endColor,
-    linearIconGradientStart: Colors.startColor,
-    linearIconGradientEnd: Colors.startColor,
+    linearGradientStart: Colors.brandPrimary,
+    linearGradientEnd: Colors.brandPrimary,
+    linearIconGradientStart: Colors.brandPrimary,
+    linearIconGradientEnd: Colors.brandPrimary,
    LinearGradientStroke: Colors.stroke,
    warningLogoBgColor: Colors.warningLogoBg,
    tooltipIcon: Colors.tooltip,
@@ -153,6 +166,16 @@ export const PurpleTheme = {
    urlLink: Colors.Purple,
    warningText: Colors.Red,
    PendingIcon: Colors.Yellow,
+    ListSelectedBackground: Colors.brandPrimaryLight,
+    ListSelectedText: Colors.brandPrimary,
+    ListSelectedIcon: Colors.brandPrimary,
+    ListUnselectedBackground: Colors.White,
+    ListUnselectedText: Colors.Black,
+    SearchBarPlaceholderColor: Colors.veryLightBluishGray,
+    PopupText: Colors.CharcoalBlue,
+    TransactionCodeBackgroundColor: Colors.White,
+    TransactionCodeBorderColor: Colors.veryLightBluishGray,
+    TransactionCodePlaceholderColor: Colors.SteelBlue,
  },
  Styles: StyleSheet.create({
    title: {
@@ -171,12 +194,12 @@ export const PurpleTheme = {
    fieldItemTitle: {
      backgroundColor: Colors.Transparent,
      fontSize: 11,
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
    },
    fieldItemValue: {
      backgroundColor: Colors.Transparent,
      fontSize: 12,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      marginTop: 3,
    },
    loadingSubtitle: {
@@ -185,7 +208,7 @@ export const PurpleTheme = {
    },
    verificationStatus: {
      fontSize: 12,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    statusLabel: {
      color: Colors.Gray30,
@@ -580,7 +603,7 @@ export const PurpleTheme = {
    detailsText: {
      fontWeight: 'bold',
      fontSize: 15,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
    },
    idInputContainer: {
      width: Dimensions.get('window').width * 0.86,
@@ -593,9 +616,51 @@ export const PurpleTheme = {
      height: isIOS() ? 100 : 'auto',
    },
    picker: {
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 18,
    },
+    overlay: {
+      padding: 1,
+      borderRadius: 12,
+      overflow: 'hidden',
+    },
+    listItemSelectedText: {
+      color: Colors.brandPrimary,
+      fontWeight: '600',
+      fontFamily: 'Montserrat_500Medium',
+    },
+    listItemUnselectedText: {
+      color: Colors.Black,
+      fontWeight: '400',
+      fontFamily: 'Montserrat_500Medium',
+    },
+    listItemSelectedContainer: {backgroundColor: Colors.brandPrimaryLight},
+    listItemUnselectedContainer: {backgroundColor: Colors.White},
+    listItemSelectedCircle: {
+      width: 22,
+      height: 22,
+      borderRadius: 11,
+      borderWidth: 7,
+      borderColor: Colors.brandPrimary,
+      backgroundColor: Colors.White,
+    },
+    wrapper: {
+      borderWidth: 2,
+      borderRadius: 16,
+      padding: 2,
+    },
+    container: {
+      width: 48,
+      height: 22,
+      borderRadius: 16,
+      padding: 3,
+    },
+    circle: {
+      width: 18,
+      height: 18,
+      borderRadius: 9,
+      elevation: 2,
+    },
    idInputBottom: {
      position: 'relative',
      bottom: 18,
@@ -614,7 +679,7 @@ export const PurpleTheme = {
      marginVertical: 6,
    },
    placeholder: {
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    hrLine: {
      borderBottomColor: Colors.Gray44,
@@ -662,13 +727,16 @@ export const PurpleTheme = {
    },
    boxShadow: generateBoxShadowStyle(),
    tooltipContainerStyle: {
-      backgroundColor: '#FAFAFA',
-      borderWidth: 1,
+      backgroundColor: '#EBE6F3',
+      borderWidth: 2,
      borderColor: '#E0E0E0',
-      marginLeft: 15,
+      maxWidth: '90%',
+    },
+    tooltipContentTitle: {
+      color: Colors.DeepPurple,
    },
    tooltipContentDescription: {
-      color: Colors.toolTipContent,
+      color: Colors.RoyalPurple,
      marginTop: 10,
    },
    tooltipHrLine: {
@@ -678,8 +746,8 @@ export const PurpleTheme = {
    },
    introSliderHeader: {
      marginTop: isIOS()
-          ? Constants.statusBarHeight + 40
-          : StatusBar.currentHeight + 40,
+        ? Constants.statusBarHeight + 40
+        : StatusBar.currentHeight + 40,
      width: '100%',
      marginBottom: 50,
    },
@@ -706,7 +774,7 @@ export const PurpleTheme = {
      marginTop: 10,
      borderRadius: 4,
      fontSize: 10,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      lineHeight: 12,
    },
    scanLayoutHeaderContainer: {
@@ -717,7 +785,7 @@ export const PurpleTheme = {
    },
    scanLayoutHeaderTitle: {
      fontSize: 26,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      paddingTop: isIOS() ? 10 : 20,
      paddingBottom: 10,
    },
@@ -734,18 +802,18 @@ export const PurpleTheme = {
    },
    sendVPHeaderTitle: {
      fontSize: 18,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    sendVPHeaderSubTitle: {
      fontSize: 13,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      color: Colors.LightPurple,
      maxWidth: '80%',
      overflow: 'hidden',
    },
    HistoryHeaderTitleStyle: {
      fontSize: 26,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      marginTop: isIOS() ? 5 : 15,
    },
    tabBarIconCopilot: {
@@ -777,58 +845,64 @@ export const PurpleTheme = {
      flex: 1,
      justifyContent: 'space-around',
    },
-    horizontalSeparator:{
+    horizontalSeparator: {
      height: 1,
      backgroundColor: '#DADADA',
      marginBottom: 12,
    },
-    disclosureTitle:{
-      fontFamily: 'Inter_700Bold',
+    disclosureTitle: {
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 15,
      color: Colors.Black,
    },
-    disclosureSubtitle:{
+    disclosureSubtitle: {
      fontSize: 13,
      color: '#747474',
      marginTop: 4,
    },
-    disclosureSelectButton:{
+    disclosureSelectButton: {
      fontSize: 14,
-      fontFamily: 'Inter_700Bold',
-    }
+      fontFamily: 'Montserrat_700Bold',
+    },
  }),
  BannerStyles: StyleSheet.create({
    container: {
-      alignItems: 'flex-start',
+      alignItems: 'center',
      justifyContent: 'space-between',
      backgroundColor: '#DB2E2E',
      width: '100%',
+      height: 70,
      position: 'relative',
      paddingHorizontal: 18,
      paddingVertical: 12,
      marginVertical: 1,
      columnGap: 7,
-    },
-    text: {
-      textAlignVertical: 'center',
-      fontSize: 12,
-      lineHeight: 15,
-      padding: 1,
-      fontFamily: 'Inter_600SemiBold',
+      borderRadius: 10,
    },
    topBanner: {
      marginTop: 10,
      marginBottom: 10,
    },
+    text: {
+      textAlignVertical: 'center',
+      fontSize: 14,
+      lineHeight: 15,
+      padding: 1,
+      marginHorizontal: 8,
+      fontFamily: 'Montserrat_600SemiBold',
+    },
    dismiss: {paddingLeft: 9},
    inProgress: {
-      backgroundColor: Colors.OrangeBrown,
+      backgroundColor: Colors.LightYellow,
+      color: Colors.CharcoalBlue,
    },
    success: {
-      backgroundColor: Colors.Green,
+      backgroundColor: Colors.LightMintGreen,
+      color: Colors.CharcoalBlue,
    },
    error: {
-      backgroundColor: Colors.LightRed,
+      backgroundColor: Colors.LightRose,
+      color: Colors.CharcoalBlue,
    },
  }),
  QrCodeStyles: StyleSheet.create({
@@ -854,7 +928,7 @@ export const PurpleTheme = {
      borderTopLeftRadius: 21,
      borderTopRightRadius: 21,
      justifyContent: 'space-between',
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      paddingBottom: 10,
      paddingRight: 15,
      paddingLeft: 130,
@@ -890,7 +964,7 @@ export const PurpleTheme = {
      color: Colors.Black,
      flex: 1,
      fontSize: 33,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      height: 40,
      lineHeight: 28,
      margin: 8,
@@ -901,7 +975,7 @@ export const PurpleTheme = {
      borderColor: Colors.Purple,
      color: Colors.Black,
      flex: 1,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 29,
      height: 40,
      margin: 8,
@@ -911,33 +985,33 @@ export const PurpleTheme = {
  TextStyles: StyleSheet.create({
    header: {
      color: Colors.Black,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 18,
      lineHeight: 19,
      paddingTop: 5,
    },
    subHeader: {
      color: Colors.mediumLightGrayText,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      lineHeight: 19,
      fontSize: 13,
      paddingTop: 4,
    },
    semiBoldHeader: {
      color: Colors.Black,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 18,
      lineHeight: 21,
      paddingTop: 4,
    },
    retrieveIdLabel: {
      color: Colors.ShadeOfGrey,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      lineHeight: 18,
    },
    helpHeader: {
      color: Colors.Black,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 18,
      lineHeight: 19,
      paddingTop: 5,
@@ -946,11 +1020,11 @@ export const PurpleTheme = {
    helpDetails: {
      margin: 5,
      color: Colors.Gray44,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    urlLinkText: {
      color: Colors.Purple,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    aboutDetails: {
      color: Colors.Black,
@@ -963,7 +1037,7 @@ export const PurpleTheme = {
      top: 65,
      left: 5,
      color: Colors.Red,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 12,
      minWidth: 200,
    },
@@ -973,21 +1047,21 @@ export const PurpleTheme = {
      lineHeight: 18,
    },
    regular: {
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      fontSize: 14,
    },
    regularGrey: {
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      fontSize: 15,
      lineHeight: 19,
      color: Colors.ShadeOfGrey,
    },
    semibold: {
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 15,
    },
    bold: {
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 15,
      justifyContent: 'center',
    },
@@ -1061,23 +1135,21 @@ export const PurpleTheme = {
    },
  }),
  SearchBarStyles: StyleSheet.create({
-    idleSearchBarBottomLine: {
-      alignItems: 'center',
-      borderBottomWidth: 1,
-      borderBottomColor: Colors.Gray40,
-    },
    searchBarContainer: {
      alignItems: 'center',
-      borderBottomWidth: 1,
-      borderBottomColor: Colors.Purple,
    },
-    vcSearchBarContainer: {
+    vcSearchBarContainer: {},
+    innerSearchBarContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
      alignItems: 'center',
-      borderBottomWidth: 0.5,
-      borderTopWidth: 0.5,
-      borderColor: Colors.DimGray,
-      width: Dimensions.get('window').width,
+      width: '100%',
      backgroundColor: Colors.White,
+      borderColor: Colors.veryLightBluishGray,
+      borderRadius: 18,
+      borderWidth: 2,
+      marginTop: 10,
+      paddingHorizontal: 20,
    },
    vcSearchIcon: {
      justifyContent: 'center',
@@ -1089,14 +1161,14 @@ export const PurpleTheme = {
      justifyContent: 'center',
      height: Dimensions.get('window').height * 0.055,
      width: Dimensions.get('window').width * 0.1,
+      fontFamily: 'Montserrat_500Medium',
    },
    searchBar: {
      textAlign: I18nManager.isRTL ? 'right' : 'left',
      height: Dimensions.get('window').height * 0.055,
      width: Dimensions.get('window').width * 0.75,
-    },
-    clearSearch: {
-      padding: 10,
+      fontFamily: 'Montserrat_500Medium',
+      fontSize: 17,
    },
  }),
  ButtonStyles: StyleSheet.create({
@@ -1174,7 +1246,7 @@ export const PurpleTheme = {
      backgroundColor: Colors.White,
      borderWidth: 0,
      marginTop: -15,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      padding: 0,
    },
    timeoutHintContainer: {
@@ -1197,7 +1269,7 @@ export const PurpleTheme = {
      borderColor: Colors.Purple,
      borderRadius: 30,
    },
-    sharedSuccessfullyVerifierInfo:{
+    sharedSuccessfullyVerifierInfo: {
      alignSelf: 'center',
      backgroundColor: '#F5F5F5',
      borderRadius: 16,
@@ -1211,7 +1283,7 @@ export const PurpleTheme = {
      height: 40,
      borderRadius: 8,
      marginRight: 12,
-    }
+    },
  }),
  AppMetaDataStyles: StyleSheet.create({
    buttonContainer: {
@@ -1277,7 +1349,7 @@ export const PurpleTheme = {
  }),
  BackupAndRestoreStyles: StyleSheet.create({
    backupProgressText: {
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      fontSize: 14,
      color: Colors.Gray44,
    },
@@ -1291,7 +1363,7 @@ export const PurpleTheme = {
      textAlign: 'center',
      lineHeight: 22,
      fontSize: 17,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      marginHorizontal: 30,
    },
    cloudInfo: {
@@ -1304,7 +1376,7 @@ export const PurpleTheme = {
      paddingHorizontal: 10,
      textAlign: 'center',
      paddingTop: 15,
-      fontFamily: 'Inter_500Medium',
+      fontFamily: 'Montserrat_500Medium',
      fontSize: 14,
      letterSpacing: 0,
      lineHeight: 17,
@@ -1322,7 +1394,7 @@ export const PurpleTheme = {
    headerText: {
      justifyContent: 'center',
      paddingLeft: 12,
-      fontFamily: 'Inter_500Medium',
+      fontFamily: 'Montserrat_500Medium',
      fontWeight: '600',
      fontSize: 14,
      letterSpacing: 0,
@@ -1383,7 +1455,7 @@ export const PurpleTheme = {
    },
    kebabHeaderStyle: {
      justifyContent: 'space-between',
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
    },
  }),
  MessageOverlayStyles: StyleSheet.create({
@@ -1482,7 +1554,7 @@ export const PurpleTheme = {
    sliderTitle: {
      color: Colors.White,
      marginBottom: 20,
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
    },
    text: {
      color: Colors.White,
@@ -1564,7 +1636,7 @@ export const PurpleTheme = {
      marginHorizontal: 9,
    },
    issuerHeading: {
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 14,
      paddingHorizontal: 3,
      marginBottom: 2,
@@ -1588,7 +1660,7 @@ export const PurpleTheme = {
    image: {marginTop: -60, paddingBottom: 26},
    title: {
      color: Colors.Black,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 18,
      lineHeight: 21,
      paddingTop: 4,
@@ -1597,7 +1669,7 @@ export const PurpleTheme = {
    },
    message: {
      textAlign: 'center',
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      fontSize: 14,
      lineHeight: 20,
      marginTop: 6,
@@ -1607,7 +1679,7 @@ export const PurpleTheme = {
    },
    additionalMessage: {
      color: Colors.Black,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 18,
      lineHeight: 21,
      paddingTop: 4,
@@ -1656,7 +1728,7 @@ export const PurpleTheme = {
    },
    heading: {
      color: 'black',
-      fontFamily: 'Inter_700Bold',
+      fontFamily: 'Montserrat_700Bold',
      fontSize: 18,
      lineHeight: 19,
      padding: 10,
@@ -1800,16 +1872,16 @@ export const PurpleTheme = {
    purposeText: {
      fontSize: 13,
      position: 'relative',
-      fontFamily: 'Inter_500Medium',
+      fontFamily: 'Montserrat_500Medium',
    },
    cardsSelectedText: {
-      fontFamily: 'Inter_500Medium',
+      fontFamily: 'Montserrat_500Medium',
      color: '#000000',
      fontSize: 14,
    },
    selectIDText: {
      position: 'relative',
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 16,
    },
  }),
@@ -1829,11 +1901,11 @@ export const PurpleTheme = {
      justifyContent: 'space-between',
    },
    bannerTitle: {
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    bannerGuide: {
      opacity: 0.8,
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
    },
    bannerEnablePermissionContainer: {
      marginTop: 15,
@@ -1841,7 +1913,7 @@ export const PurpleTheme = {
    bannerEnablePermission: {
      borderBottomWidth: 1.5,
      borderBottomColor: Colors.White,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    scannerContainer: {
      borderRadius: 24,
@@ -1895,21 +1967,25 @@ export const PurpleTheme = {
    },
    holdPhoneSteadyText: {
      color: Colors.Black,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      fontSize: 15,
    },
    cameraFlipIcon: {
      height: 50,
      width: 50,
    },
-    iconText: {fontFamily: 'Inter_600SemiBold', fontSize: 12, marginTop: 6},
+    iconText: {
+      fontFamily: 'Montserrat_600SemiBold',
+      fontSize: 12,
+      marginTop: 6,
+    },
  }),
  BottomTabBarStyle: StyleSheet.create({
    headerRightContainerStyle: {paddingEnd: 13},
    headerLeftContainerStyle: {paddingEnd: 13},
    tabBarLabelStyle: {
      fontSize: 12,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
    },
    tabBarStyle: {
      display: 'flex',
@@ -2004,6 +2080,26 @@ export const PurpleTheme = {
      marginTop: 10,
      width: '80%',
    },
+    transactionGradientContainer: {
+      width: Dimensions.get('window').width - 100,
+      alignSelf: 'center',
+      borderRadius: 18,
+      padding: 2,
+      marginTop: 10,
+      marginBottom: 25,
+    },
+    inputContainer: {
+      borderBottomWidth: 0,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      width: '100%',
+      backgroundColor: Colors.White,
+      borderRadius: 18,
+      paddingHorizontal: 20,
+      overflow: 'hidden',
+      height: 60,
+    },
    inputStyle: {
      fontSize: 20,
      fontWeight: '500',
@@ -2126,7 +2222,7 @@ export const PurpleTheme = {
    },
  }),
  DisclosureOverlayStyles: StyleSheet.create({
-    overlay:{
+    overlay: {
      padding: 0,
      borderTopLeftRadius: 20,
      borderTopRightRadius: 20,
@@ -2135,7 +2231,7 @@ export const PurpleTheme = {
      bottom: 0,
      backgroundColor: '#fff',
    },
-    outerView:{
+    outerView: {
      padding: 16,
      borderBottomWidth: 1,
      borderBottomColor: Colors.LightGrey,
@@ -2143,14 +2239,14 @@ export const PurpleTheme = {
      alignItems: 'center',
      justifyContent: 'space-between',
    },
-    listView:{
+    listView: {
      marginHorizontal: 16,
      marginVertical: 6,
      padding: 12,
      borderRadius: 10,
      borderWidth: 1,
    },
-    noteView:{
+    noteView: {
      marginHorizontal: 16,
      marginBottom: 30,
      padding: 12,
@@ -2164,7 +2260,7 @@ export const PurpleTheme = {
    titleText: {
      fontSize: 17,
      textAlign: 'left',
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      paddingTop: 20,
    },
    titleDescription: {
@@ -2175,23 +2271,23 @@ export const PurpleTheme = {
    },
    noteTitleText: {
      fontSize: 14,
-      fontFamily: 'Inter_600SemiBold',
+      fontFamily: 'Montserrat_600SemiBold',
      color: '#973C00',
      marginBottom: 5,
    },
-    noteDescriptionText:{
+    noteDescriptionText: {
      fontSize: 13,
      color: '#973C00',
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      lineHeight: 18,
      textAlign: 'left',
-      marginLeft: -25
-    }
+      marginLeft: -25,
+    },
  }),
  DisclosureInfo: StyleSheet.create({
-    view:{
+    view: {
      marginTop: -16,
-      marginBottom:16,
+      marginBottom: 16,
      marginHorizontal: 10,
      padding: 12,
      backgroundColor: '#EFF6FF',
@@ -2199,12 +2295,12 @@ export const PurpleTheme = {
      borderWidth: 1,
      borderColor: '#BEDBFF',
    },
-    text:{
+    text: {
      fontSize: 14,
-      fontFamily: 'Inter_400Regular',
+      fontFamily: 'Montserrat_400Regular',
      color: 'black',
      flex: 1,
-    }
+    },
  }),

  ICON_SMALL_SIZE: 16,
@@ -2246,7 +2342,7 @@ export const PurpleTheme = {
    }

    const [top, end, bottom, start] =
-        typeof values === 'string' ? values.split(' ').map(Number) : values;
+      typeof values === 'string' ? values.split(' ').map(Number) : values;

    return {
      [`${type}Top`]: top,
@@ -2274,4 +2370,4 @@ function generateBoxShadowStyle() {
    elevation: 4,
    shadowColor: '#000',
  };
-}
+}