fix: hold to reveal UI/UX (#10607)

Fixes the UI/UX related to "Hold to reveal"
MetaMask · Aug 13, 2024 · a42d97f · a42d97f
1 parent 0ba2cbf
commit a42d97f
Showing 1 changed file with 16 additions and 9 deletions.
diff --git a/app/components/UI/ButtonReveal/index.tsx b/app/components/UI/ButtonReveal/index.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
-import Icon from 'react-native-vector-icons/FontAwesome5';
+import Icon, {
+  IconSize,
+  IconName,
+} from '../../../component-library/components/Icons/Icon';
 import { fontStyles } from '../../../styles/common';
 import Svg, { Circle } from 'react-native-svg';
 import Animated, {
@@ -19,7 +22,6 @@ const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 
 const radius = 14;
 const strokeWidth = 2;
-const iconSize = radius - 4;
 const innerRadius = radius - strokeWidth / 2;
 const circumference = 2 * Math.PI * innerRadius;
 const animationDuration = 1200;
@@ -219,7 +221,6 @@ const ButtonReveal = ({ onLongPress, label }: Props) => {
 
   const lockIconStyle = useAnimatedStyle(() => ({
     opacity: pressControl.value,
-    // transform: [{ scale: pressControl.value }],
   }));
 
   const checkIconStyle = useAnimatedStyle(() => ({
@@ -255,9 +256,9 @@ const ButtonReveal = ({ onLongPress, label }: Props) => {
       </Animated.View>
       <Animated.View style={[styles.absoluteFillWithCenter, checkIconStyle]}>
         <Icon
-          name={'check'}
+          name={IconName.Check}
           color={colors.primary.inverse}
-          size={iconSize * 1.5}
+          size={IconSize.Lg}
         />
       </Animated.View>
     </View>
@@ -267,9 +268,6 @@ const ButtonReveal = ({ onLongPress, label }: Props) => {
     <Animated.View
       style={[styles.preCompletedContainerStyle, preCompletedContainerStyle]}
     >
-      <Animated.View style={[styles.absoluteFillWithCenter, lockIconStyle]}>
-        <Icon name={'lock'} color={colors.primary.inverse} size={iconSize} />
-      </Animated.View>
       <Svg style={styles.absoluteFill}>
         <Circle
           cx={radius}
@@ -278,6 +276,7 @@ const ButtonReveal = ({ onLongPress, label }: Props) => {
           stroke={colors.primary.alternative}
           strokeWidth={strokeWidth}
           strokeLinecap={'round'}
+          fill={colors.primary.inverse}
         />
       </Svg>
       <Svg style={[styles.absoluteFill, styles.animatedCircle]}>
@@ -286,12 +285,20 @@ const ButtonReveal = ({ onLongPress, label }: Props) => {
           cx={radius}
           cy={radius}
           r={innerRadius}
-          stroke={colors.primary.inverse}
+          stroke={colors.primary.alternative}
           strokeWidth={strokeWidth}
           strokeLinecap={'round'}
           strokeDasharray={`${circumference} ${circumference}`}
+          fill={colors.primary.inverse}
         />
       </Svg>
+      <Animated.View style={[styles.absoluteFillWithCenter, lockIconStyle]}>
+        <Icon
+          name={IconName.Lock}
+          color={colors.primary.default}
+          size={IconSize.Sm}
+        />
+      </Animated.View>
     </Animated.View>
   );