frontend: slight adjust input borders and colors

Pedro Lucas Porcellis porcellis@eletrotupi.com 1 month ago 7a3f55eecfa08deb3999c41491c051ffe6a85ebe

Parents: 220d161

2 file(s) changed

frontend/components/ui/Input.tsx +3 -3
frontend/constants/theme.ts +4 -1

frontend/components/ui/Input.tsx

@@ -1,4 +1,4 @@
  - import React from 'react';
  + import React, { useState } from 'react';
    import {
      TextInput,
      TextInputProps,

@@ -26,12 +26,12 @@ showPasswordToggle = false,
      style,
      ...props
    }) => {
  -   const [showPassword, setShowPassword] = React.useState(false);
  +   const [showPassword, setShowPassword] = useState(false);
      const textColor = useThemeColor({}, 'text');
      const backgroundColor = useThemeColor({}, 'inputBackgroundColor');
      const borderColor = useThemeColor({}, 'inputBorderColor');
      const errorColor = '#ef4444';
  -   const placeholderColor = useThemeColor({ light: '#9ca3af', dark: '#6b7280' }, 'placeholder');
  +   const placeholderColor = useThemeColor({}, 'inputPlaceholderColor');
    
      const keyboardType = type === 'email' ? 'email-address' : 'default';
      const secureTextEntry = type === 'password' && !showPassword;

frontend/constants/theme.ts

@@ -16,9 +16,11 @@
    // Text Colors
    const TEXT_PRIMARY = '#0f172a';
    const TEXT_SECONDARY = '#64748b';
  + const TEXT_PLACEHOLDER = '#94A3B8';
    
    // Borders & Accents
    const BORDER_SUBTLE = '#f1f5f9';
  + const BORDER_SUBTLE_GRAY = '#E5E7EB';
    const STATUS_ACTIVE_BG = 'rgba(19, 236, 91, 0.1)';
    
    // Semantic Color Pills and stuff

@@ -48,8 +50,9 @@ tabIconSelected: NEON_GREEN,
    
        // Form Inputs
        inputBackgroundColor: SURFACE_LIGHT,
  -     inputBorderColor: BORDER_SUBTLE,
  +     inputBorderColor: BORDER_SUBTLE_GRAY,
        inputFocusBorderColor: NEON_GREEN,
  +     inputPlaceholderColor: TEXT_PLACEHOLDER,
    
        // Cards & Containers
        cardBackground: SURFACE_LIGHT,