frontend: slight adjust input borders and colors
Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago
7a3f55eecfa08deb3999c41491c051ffe6a85ebe Browse filesParents
220d161Changed files
2
Additions
+7
Deletions
-4
frontend/components/ui/Input.tsx
1 -
import React from 'react';
1 +
import React, { useState } from 'react';
2 2
import {
3 3
TextInput,
4 4
TextInputProps,
5 5
StyleSheet,
6 6
View,
24 24
type = 'text',
25 25
showPasswordToggle = false,
26 26
style,
27 27
...props
28 28
}) => {
29 -
const [showPassword, setShowPassword] = React.useState(false);
29 +
const [showPassword, setShowPassword] = useState(false);
30 30
const textColor = useThemeColor({}, 'text');
31 31
const backgroundColor = useThemeColor({}, 'inputBackgroundColor');
32 32
const borderColor = useThemeColor({}, 'inputBorderColor');
33 33
const errorColor = '#ef4444';
34 -
const placeholderColor = useThemeColor({ light: '#9ca3af', dark: '#6b7280' }, 'placeholder');
34 +
const placeholderColor = useThemeColor({}, 'inputPlaceholderColor');
35 35
36 36
const keyboardType = type === 'email' ? 'email-address' : 'default';
37 37
const secureTextEntry = type === 'password' && !showPassword;
38 38
39 39
return (
107 107
error: {
108 108
fontSize: 12,
109 109
marginTop: 4,
110 110
},
111 111
});
frontend/constants/theme.ts
1 1
/**
2 2
* Below are the colors that are used in the app. The colors are defined in the light and dark mode.
3 3
* There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
4 4
*/
5 5
14 14
const SURFACE_LIGHT = '#ffffff';
15 15
16 16
// Text Colors
17 17
const TEXT_PRIMARY = '#0f172a';
18 18
const TEXT_SECONDARY = '#64748b';
19 +
const TEXT_PLACEHOLDER = '#94A3B8';
19 20
20 21
// Borders & Accents
21 22
const BORDER_SUBTLE = '#f1f5f9';
23 +
const BORDER_SUBTLE_GRAY = '#E5E7EB';
22 24
const STATUS_ACTIVE_BG = 'rgba(19, 236, 91, 0.1)';
23 25
24 26
// Semantic Color Pills and stuff
25 27
const PILL_BLUE = '#dbeafe';
26 28
const PILL_INDIGO = '#e0e7ff';
46 48
tabIconDefault: TEXT_SECONDARY,
47 49
tabIconSelected: NEON_GREEN,
48 50
49 51
// Form Inputs
50 52
inputBackgroundColor: SURFACE_LIGHT,
51 -
inputBorderColor: BORDER_SUBTLE,
53 +
inputBorderColor: BORDER_SUBTLE_GRAY,
52 54
inputFocusBorderColor: NEON_GREEN,
55 +
inputPlaceholderColor: TEXT_PLACEHOLDER,
53 56
54 57
// Cards & Containers
55 58
cardBackground: SURFACE_LIGHT,
56 59
cardBorder: BORDER_SUBTLE,
57 60
cardShadow: 'rgba(0, 0, 0, 0.05)',
132 135
serif: 'serif',
133 136
rounded: 'Inter',
134 137
mono: 'monospace',
135 138
},
136 139
});