fix: simplebutton cutting off text

HathorNetwork · Nov 9, 2024 · 3c45cbe · 3c45cbe
1 parent 9c3d5d6
commit 3c45cbe
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 18 deletions.
diff --git a/src/components/Reown/WarnDisclaimer.js b/src/components/Reown/WarnDisclaimer.js
@@ -71,13 +71,17 @@ const styles = StyleSheet.create({
     marginRight: 'auto',
   },
   learnMoreContainer: {
-    justifyContent: 'flex-start',
-    borderBottomWidth: 1,
+    minHeight: 'auto',
+    padding: 0,
+    paddingHorizontal: 0,
+    alignItems: 'flex-start',
   },
   learnMoreText: {
     fontSize: 12,
     lineHeight: 16,
     fontWeight: 'bold',
     color: 'hsla(0, 0%, 25%, 1)',
+    textAlign: 'left',
+    textDecorationLine: 'underline',
   },
 });
diff --git a/src/components/SimpleButton.js b/src/components/SimpleButton.js
@@ -4,13 +4,11 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
 import React from 'react';
 import {
   Image, StyleSheet, Text, TouchableOpacity, View,
 } from 'react-native';
 import { PRIMARY_COLOR } from '../constants';
-
 /**
  * Simple button component.
  *
@@ -28,7 +26,7 @@ import { PRIMARY_COLOR } from '../constants';
  */
 const SimpleButton = ({
   title,
-  textStyle,
+  textStyle = {},
   color,
   icon,
   iconStyle,
@@ -42,48 +40,75 @@ const SimpleButton = ({
       if (color) {
         textStyles.push({ color });
       }
-      return <Text style={textStyles}>{title}</Text>;
+      return (
+        <Text
+          numberOfLines={1}
+          adjustsFontSizeToFit
+          style={textStyles}
+        >
+          {title}
+        </Text>
+      );
     }
-
     return null;
   };
-
   const renderIcon = () => {
     if (icon) {
       return (
-        <View style={[styles.icon, iconStyle]}>
-          <Image source={icon} />
+        <View style={[styles.icon, title ? styles.iconWithTitle : null, iconStyle]}>
+          <Image
+            source={icon}
+            resizeMode='contain'
+            style={styles.iconImage}
+          />
         </View>
       );
     }
-
     return null;
   };
-
   return (
-    <TouchableOpacity onPress={onPress} style={[styles.container, containerStyle]}>
-      {renderTitle()}
-      {renderIcon()}
-      {children}
+    <TouchableOpacity
+      onPress={onPress}
+      style={[styles.container, containerStyle]}
+    >
+      <View style={styles.contentContainer}>
+        {renderTitle()}
+        {renderIcon()}
+        {children}
+      </View>
     </TouchableOpacity>
   );
 };
-
 const styles = StyleSheet.create({
   container: {
+    minHeight: 48,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
     justifyContent: 'center',
   },
   text: {
     fontSize: 14,
     lineHeight: 24,
     color: PRIMARY_COLOR,
+    textAlign: 'center',
   },
   icon: {
     justifyContent: 'center',
     alignItems: 'center',
     width: 24,
     height: 24,
   },
+  iconWithTitle: {
+    marginLeft: 8,
+  },
+  iconImage: {
+    width: '100%',
+    height: '100%',
+  },
 });
-
 export default SimpleButton;