Browse Source

Refactoring all string colors to use app/config/colors constants instead of string

literals.
master
GabrielTrettel 4 years ago
parent
commit
de2ee99511
  1. 6
      src/app/components/Icon.js
  2. 25
      src/app/components/ImageInput.js
  3. 3
      src/app/components/forms/FormImagePicker.js
  4. 1
      src/app/config/colors.js
  5. 4
      src/app/screens/RainSharingDataScreen.js
  6. 4
      src/app/screens/RiverFloodSharingDataScreen.js

6
src/app/components/Icon.js

@ -1,12 +1,12 @@
import React from "react"; import React from "react";
import { View } from "react-native"; import { View } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons"; import { MaterialCommunityIcons } from "@expo/vector-icons";
import colors from "../config/colors";
function Icon({ function Icon({
name, name,
size = 40, size = 40,
backgroundColor = "#000",
iconColor = "#fff",
backgroundColor = colors.black,
iconColor = colors.white,
}) { }) {
return ( return (
<View <View

25
src/app/components/ImageInput.js

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useState } from "react";
import { import {
View, View,
StyleSheet, StyleSheet,
@ -20,7 +20,7 @@ function ImageInput({ imageUri, onChangeImage }) {
//requestPermissionCamera(); //requestPermissionCamera();
}, []); }, []);
/* const requestPermissionCamera = async () => {
/* const requestPermissionCamera = async () => {
const { granted } = await Permissions.askAsync(Permissions.CAMERA); const { granted } = await Permissions.askAsync(Permissions.CAMERA);
if(granted) { if(granted) {
launchCamera(); launchCamera();
@ -42,7 +42,8 @@ function ImageInput({ imageUri, onChangeImage }) {
const requestPermission = async () => { const requestPermission = async () => {
const { granted } = await ImagePicker.requestCameraRollPermissionsAsync(); const { granted } = await ImagePicker.requestCameraRollPermissionsAsync();
if (!granted) alert("Você precisa habilitar permissão para acessar a biblioteca.");
if (!granted)
alert("Você precisa habilitar permissão para acessar a biblioteca.");
}; };
const handlePress = () => { const handlePress = () => {
@ -77,7 +78,9 @@ function ImageInput({ imageUri, onChangeImage }) {
size={40} size={40}
/> />
)} )}
{imageUri && <Image source={{ uri: imageUri }} style={styles.image} />}
{imageUri && (
<Image source={{ uri: imageUri }} style={styles.image} />
)}
</View> </View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
</View> </View>
@ -101,17 +104,17 @@ const styles = StyleSheet.create({
}, },
centeredView: { centeredView: {
flex: 1, flex: 1,
justifyContent: 'center',
alignItems: 'center',
justifyContent: "center",
alignItems: "center",
marginTop: 22, marginTop: 22,
}, },
modalView: { modalView: {
margin: 20, margin: 20,
backgroundColor: '#d3d3d3',
backgroundColor: colors.lightGray,
borderRadius: 20, borderRadius: 20,
padding: 30, padding: 30,
alignItems: 'center',
shadowColor: 'grey',
alignItems: "center",
shadowColor: "grey",
shadowOffset: { shadowOffset: {
width: 10, width: 10,
height: 2, height: 2,
@ -123,7 +126,7 @@ const styles = StyleSheet.create({
}, },
modalText: { modalText: {
marginTop: 15, marginTop: 15,
textAlign: 'center',
textAlign: "center",
fontSize: 16, fontSize: 16,
color: colors.primary, color: colors.primary,
}, },
@ -135,7 +138,7 @@ const styles = StyleSheet.create({
fontSize: 18, fontSize: 18,
textAlign: "center", textAlign: "center",
fontWeight: "bold", fontWeight: "bold",
height: 35
height: 35,
}, },
}); });

3
src/app/components/forms/FormImagePicker.js

@ -4,6 +4,7 @@ import { useFormikContext } from "formik";
import ErrorMessage from "./ErrorMessage"; import ErrorMessage from "./ErrorMessage";
import ImageInputList from "../ImageInputList"; import ImageInputList from "../ImageInputList";
import { View, Text, StyleSheet } from "react-native"; import { View, Text, StyleSheet } from "react-native";
import colors from "../../config/colors";
function FormImagePicker({ name }) { function FormImagePicker({ name }) {
const { errors, setFieldValue, touched, values } = useFormikContext(); const { errors, setFieldValue, touched, values } = useFormikContext();
@ -38,7 +39,7 @@ const styles = StyleSheet.create({
fontSize: 16, fontSize: 16,
fontWeight: "bold", fontWeight: "bold",
textAlign: "left", textAlign: "left",
color: "#1976D2",
color: colors.primary,
marginBottom: 5, marginBottom: 5,
marginTop: 15, marginTop: 15,
}, },

1
src/app/config/colors.js

@ -7,4 +7,5 @@ export default {
light: "#f8f4f4", light: "#f8f4f4",
dark: "#0c0c0c", dark: "#0c0c0c",
danger: "#ff5252", danger: "#ff5252",
lightGray: "#d3d3d3",
}; };

4
src/app/screens/RainSharingDataScreen.js

@ -30,7 +30,7 @@ function RainSharingDataScreen(props) {
style={{ style={{
fontSize: 18, fontSize: 18,
fontWeight: "bold", fontWeight: "bold",
color: "#1976D2",
color: colors.primary,
textAlign: "center", textAlign: "center",
marginBottom: 30, marginBottom: 30,
}} }}
@ -138,7 +138,7 @@ function RainSharingDataScreen(props) {
</TouchableNativeFeedback> </TouchableNativeFeedback>
</View> </View>
</View> </View>
<FormImagePicker backgroundColor="#1976D2" name="images" />
<FormImagePicker backgroundColor={colors.primary} name="images" />
<SubmitButton title="Enviar" backgroundColor={colors.primary} /> <SubmitButton title="Enviar" backgroundColor={colors.primary} />
</Form> </Form>

4
src/app/screens/RiverFloodSharingDataScreen.js

@ -30,7 +30,7 @@ function RiverFloodSharingDataScreen(props) {
style={{ style={{
fontSize: 18, fontSize: 18,
fontWeight: "bold", fontWeight: "bold",
color: "#1976D2",
color: colors.primary,
textAlign: "center", textAlign: "center",
marginBottom: 30, marginBottom: 30,
}} }}
@ -124,7 +124,7 @@ function RiverFloodSharingDataScreen(props) {
</View> </View>
</View> </View>
<FormImagePicker backgroundColor="#1976D2" name="images" />
<FormImagePicker backgroundColor={colors.primary} name="images" />
<SubmitButton title="Enviar" backgroundColor={colors.primary} /> <SubmitButton title="Enviar" backgroundColor={colors.primary} />
</Form> </Form>

Loading…
Cancel
Save