Refresh home and more navigation

components/ui/Button.tsx

@@ -17,6 +17,7 @@ type ButtonProps = PressableProps & {
   loading?: boolean;
   variant?: "primary" | "secondary" | "danger" | "ghost";
   style?: ViewStyle;
+  leftIcon?: keyof typeof Ionicons.glyphMap;
   showArrow?: boolean;
 };
 
@@ -26,6 +27,7 @@ export function Button({
   variant = "primary",
   disabled,
   style,
+  leftIcon,
   showArrow = false,
   ...props
 }: ButtonProps) {
@@ -44,7 +46,11 @@ export function Button({
       borderWidth: 1,
       borderColor: colors.destructive,
     },
-    ghost: { backgroundColor: "transparent" },
+    ghost: {
+      backgroundColor: colors.cardGlass,
+      borderWidth: 1,
+      borderColor: colors.borderGlass,
+    },
   } as const;
 
   const labelStyles = {
@@ -73,7 +79,16 @@ export function Button({
         />
       ) : (
         <View style={styles.content}>
-          <Text style={[styles.label, labelStyles[variant]]}>{title}</Text>
+          {leftIcon ? (
+            <Ionicons
+              name={leftIcon}
+              size={16}
+              color={labelStyles[variant].color}
+            />
+          ) : null}
+          <Text style={[styles.label, labelStyles[variant]]} numberOfLines={1}>
+            {title}
+          </Text>
           {showArrow ? (
             <Ionicons
               name="arrow-forward"
@@ -99,7 +114,9 @@ const styles = StyleSheet.create({
   content: {
     flexDirection: "row",
     alignItems: "center",
+    justifyContent: "center",
     gap: spacing.sm,
+    minWidth: 0,
   },
   arrow: {
     marginTop: 1,
@@ -113,5 +130,6 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 14,
     fontFamily: fonts.bodyMedium,
+    flexShrink: 1,
   },
 });