Browse Source

google play accessibility issues - modal buttons size

master
analuizaff 3 years ago
parent
commit
cf1d2dd5af
  1. 2
      src/app/components/Button.js
  2. 37
      src/app/components/ConfirmationModal.js
  3. 7
      src/app/components/LoadingMarkersModal.js
  4. 3
      src/app/screens/LoginScreen.js

2
src/app/components/Button.js

@ -23,7 +23,7 @@ const styles = StyleSheet.create({
justifyContent: "center",
alignItems: "center",
width: "100%",
height: 42,
height: 48,
marginVertical: 10,
},
text: {

37
src/app/components/ConfirmationModal.js

@ -4,18 +4,33 @@ import colors from "../config/colors";
import { dimensions } from "../config/dimensions";
import { Ionicons } from "@expo/vector-icons";
function Btn({ label, onPress, bgColor, txtColor, style={} }) {
function Btn({ label, onPress, bgColor, txtColor, style = {} }) {
return (
<TouchableOpacity style={{marginTop: 15}} onPress={onPress}>
<TouchableOpacity style={{ marginTop: 15 }} onPress={onPress}>
<View
style={[style, {
paddingHorizontal: 40,
paddingVertical: 7,
backgroundColor: bgColor,
borderRadius: 6,
}]}
style={[
style,
{
paddingHorizontal: 40,
paddingVertical: 7,
backgroundColor: bgColor,
borderRadius: 6,
height: 48,
flexDirection: "row",
},
]}
>
<Text style={{ color: txtColor, fontWeight: "bold", textTransform: "uppercase" }}>{label}</Text>
<Text
style={{
color: txtColor,
fontWeight: "bold",
textTransform: "uppercase",
textAlignVertical: "center",
alignSelf: "center",
}}
>
{label}
</Text>
</View>
</TouchableOpacity>
);
@ -70,10 +85,10 @@ export default function ConfirmationModal({
justifyContent: "flex-end",
marginTop: 24,
}}
>
>
{onDecline && declineLabel && (
<Btn
style={{marginRight: 16}}
style={{ marginRight: 16 }}
label={declineLabel}
onPress={onDecline}
bgColor={colors.secondary}

7
src/app/components/LoadingMarkersModal.js

@ -22,14 +22,19 @@ export default function LoadingMarkersModal({ show }) {
style={{
justifyContent: "flex-start",
alignSelf: "flex-end",
width: 48,
height: 36,
alignContent:"center",
alignItems: "flex-end"
}}
>
<TouchableOpacity onPress={() => setClosed(true)}>
<MaterialCommunityIcons
name="close"
size={20}
size={26}
color={colors.primary}
alignItems="center"
alignSelf="center"
/>
</TouchableOpacity>
</View>

3
src/app/screens/LoginScreen.js

@ -153,7 +153,7 @@ export default function LoginScreen(props) {
/>
</View>
<SubmitButton title="entrar" backgroundColor={colors.primary} />
<SubmitButton title="entrar" backgroundColor={colors.primary}/>
{/* FIXME: update this in future versions */}
{/* <TouchableNativeFeedback */}
@ -180,6 +180,7 @@ export default function LoginScreen(props) {
/>
<TouchableNativeFeedback
style={{height: 48}}
onPress={() => {
authContext.setUser(true);
}}

Loading…
Cancel
Save