adjusting pinEnter image style

Signed-off-by: Caroline Lucas Calheirani <[email protected]>
openwallet-foundation · Jan 29, 2024 · e56f810 · e56f810
1 parent 04b8be7
commit e56f810
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 15 deletions.
diff --git a/packages/legacy/core/App/screens/PINEnter.tsx b/packages/legacy/core/App/screens/PINEnter.tsx
@@ -44,7 +44,7 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated, usage = PINEntryU
   const [displayNotification, setDisplayNotification] = useState(false)
   const [alertModalVisible, setAlertModalVisible] = useState<boolean>(false)
   const [biometricsEnrollmentChange, setBiometricsEnrollmentChange] = useState<boolean>(false)
-  const { ColorPallet, TextTheme, Assets } = useTheme()
+  const { ColorPallet, TextTheme, Assets, PINEnterTheme } = useTheme()
   const { ButtonLoading } = useAnimatedComponents()
 
   const style = StyleSheet.create({
@@ -70,6 +70,12 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated, usage = PINEntryU
       ...TextTheme.popupModalText,
       marginVertical: 5,
     },
+    image: {
+      ...PINEnterTheme.image,
+      height: Assets.img.logoSecondary.height,
+      width: Assets.img.logoSecondary.width,
+      resizeMode: Assets.img.logoSecondary.resizeMode,
+    },
   })
 
   // listen for biometrics error event
@@ -294,17 +300,7 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated, usage = PINEntryU
       <StatusBar barStyle={StatusBarStyles.Light} />
       <View style={style.screenContainer}>
         <View style={style.contentContainer}>
-          <Image
-            source={Assets.img.logoSecondary.src}
-            style={{
-              height: Assets.img.logoSecondary.height,
-              width: Assets.img.logoSecondary.width,
-              resizeMode: Assets.img.logoSecondary.resizeMode,
-              alignSelf: 'center',
-              marginBottom: 20,
-              marginTop: 30,
-            }}
-          />
+          <Image source={Assets.img.logoSecondary.src} style={style.image} />
           {biometricsEnrollmentChange ? (
             <>
               <Text style={[TextTheme.normal, { alignSelf: 'center', textAlign: 'center' }]}>

diff --git a/packages/legacy/core/App/theme.ts b/packages/legacy/core/App/theme.ts
@@ -786,7 +786,12 @@ export const DialogTheme = {
 const LoadingTheme = {
   backgroundColor: ColorPallet.brand.modalPrimaryBackground,
 }
-
+const PINEnterTheme = {
+  image: {
+    alignSelf: 'center',
+    marginBottom: 20,
+  },
+}
 const PINInputTheme = {
   cell: {
     backgroundColor: ColorPallet.brand.secondaryBackground,
@@ -858,6 +863,7 @@ export interface ITheme {
   OnboardingTheme: any
   DialogTheme: any
   LoadingTheme: any
+  PINEnterTheme: any
   PINInputTheme: any
   heavyOpacity: any
   borderRadius: any
@@ -879,6 +885,7 @@ export const theme: ITheme = {
   OnboardingTheme,
   DialogTheme,
   LoadingTheme,
+  PINEnterTheme,
   PINInputTheme,
   heavyOpacity,
   borderRadius,

diff --git a/packages/legacy/core/__tests__/screens/__snapshots__/PINEnter.test.tsx.snap b/packages/legacy/core/__tests__/screens/__snapshots__/PINEnter.test.tsx.snap
@@ -61,7 +61,6 @@ exports[`displays a PIN Enter screen PIN Enter renders correctly 1`] = `
                   "alignSelf": "center",
                   "height": 120,
                   "marginBottom": 20,
-                  "marginTop": 30,
                   "resizeMode": "contain",
                   "width": 120,
                 }
@@ -527,7 +526,6 @@ exports[`displays a PIN Enter screen PIN Enter renders correctly when logged out
                   "alignSelf": "center",
                   "height": 120,
                   "marginBottom": 20,
-                  "marginTop": 30,
                   "resizeMode": "contain",
                   "width": 120,
                 }