fix: jitter due to translucent status bar

Vali-98 · Oct 16, 2024 · 3be2aa3 · 3be2aa3
1 parent 8f035f6
commit 3be2aa3
Showing 1 changed file with 17 additions and 6 deletions.
diff --git a/app/components/ChatMenu/ChatWindow/AvatarViewer.tsx b/app/components/ChatMenu/ChatWindow/AvatarViewer.tsx
@@ -49,7 +49,7 @@ const AvatarViewer = () => {
         <Modal
             style={styles.modal}
             transparent
-            statusBarTranslucent
+            animationType="fade"
             visible={show}
             onRequestClose={() => setShow(false)}>
             <FadeBackrop handleOverlayClick={() => setShow(false)} />
@@ -67,18 +67,26 @@ const AvatarViewer = () => {
                                 router.push(isUser ? '/components/UserEditor' : '/CharInfo')
                                 setShow(false)
                             }}>
+                            <AntDesign
+                                name="edit"
+                                size={18}
+                                color={Style.getColor('primary-text2')}
+                            />
                             <Text style={styles.buttonText}>
-                                <AntDesign name="edit" /> Edit {isUser ? 'User' : 'Character'}
+                                Edit {isUser ? 'User' : 'Character'}
                             </Text>
                         </TouchableOpacity>
                         <TouchableOpacity
                             style={styles.button}
                             onPress={() => {
                                 setShow(false)
                             }}>
-                            <Text style={styles.buttonText}>
-                                <AntDesign name="close" /> Close
-                            </Text>
+                            <AntDesign
+                                name="close"
+                                size={18}
+                                color={Style.getColor('primary-text2')}
+                            />
+                            <Text style={styles.buttonText}>Close</Text>
                         </TouchableOpacity>
                     </View>
                 </Animated.View>
@@ -134,8 +142,11 @@ const styles = StyleSheet.create({
     },
 
     button: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        columnGap: 4,
         paddingVertical: 8,
-        paddingHorizontal: 16,
+        paddingHorizontal: 12,
         borderRadius: 8,
         borderWidth: 1,
         borderColor: Style.getColor('primary-brand'),