UI Updates and Bug Fixes

src/components/ui/Button.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { TouchableOpacity, TouchableOpacityProps, ActivityIndicator, GestureResponderEvent, StyleProp, ViewStyle, StyleSheet } from 'react-native';
+import { Typography } from './Typography';
+
+interface ButtonProps extends TouchableOpacityProps {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  title: string;
+  loading?: boolean;
+  onPress?: (event: GestureResponderEvent) => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = 'primary',
+  title,
+  loading = false,
+  disabled,
+  style,
+  ...props
+}) => {
+  const getBackgroundStyle = () => {
+    if (disabled) return styles.bgDisabled;
+    switch (variant) {
+      case 'primary':
+        return styles.bgPrimary;
+      case 'secondary':
+        return styles.bgSecondary;
+      case 'outline':
+        return styles.bgOutline;
+      case 'ghost':
+        return styles.bgGhost;
+      default:
+        return styles.bgPrimary;
+    }
+  };
+
+  const getTextStyle = () => {
+    if (disabled) return styles.textDisabled;
+    switch (variant) {
+      case 'primary':
+      case 'secondary':
+        return styles.textWhite;
+      case 'outline':
+      case 'ghost':
+        return styles.textPrimary;
+      default:
+        return styles.textWhite;
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      style={[styles.container, getBackgroundStyle(), style]}
+      disabled={disabled || loading}
+      activeOpacity={0.8}
+      {...props}
+    >
+      {loading ? (
+        <ActivityIndicator color={variant === 'outline' || variant === 'ghost' ? '#4F46E5' : '#FFFFFF'} />
+      ) : (
+        <Typography weight="medium" style={getTextStyle()}>
+          {title}
+        </Typography>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 12,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  bgDisabled: {
+    backgroundColor: '#D1D5DB',
+  },
+  bgPrimary: {
+    backgroundColor: '#4F46E5',
+  },
+  bgSecondary: {
+    backgroundColor: '#10B981',
+  },
+  bgOutline: {
+    backgroundColor: 'transparent',
+    borderColor: '#4F46E5',
+    borderWidth: 2,
+  },
+  bgGhost: {
+    backgroundColor: 'transparent',
+  },
+  textDisabled: {
+    color: '#6B7280',
+  },
+  textWhite: {
+    color: '#FFFFFF',
+  },
+  textPrimary: {
+    color: '#4F46E5',
+  },
+});