Você está certo, Pedro! Parece que houve uma pequena discrepância entre o enunciado do exercício e a paleta de cores apresentada. A questão solicita uma cor vermelha para o fundo, mas a resposta utiliza a cor do theme.colors.warning.x500, que, como você mencionou, está relacionada a tons de amarelo, não vermelho.
Esse tipo de detalhe é importante para garantir que a implementação esteja de acordo com o que foi solicitado. Porém, como você observou, o mais importante aqui é entender como o código foi estruturado e como a paleta de cores do tema está sendo aplicada no componente.
Como corrigir:
Se o objetivo é usar uma cor vermelha como fundo, você precisaria garantir que o tema tenha uma cor vermelha ou, se não tiver, definir uma cor personalizada. Um exemplo de como poderia ser feito é:
import Box from "@src/components/Box/Box";
import Text from "@src/components/Text/Text";
import { useTheme } from "@src/theme/ThemeProvider";
export default function AboutScreen() {
const theme = useTheme();
return (
<Box
tag="main"
styleSheet={{
backgroundColor: theme.colors.danger.x500, // Aqui, substitua para a cor vermelha
alignItems: 'center',
justifyContent: 'center', // Para centralizar o conteúdo
minHeight: '100vh', // Para garantir que o Box ocupe toda a altura da tela
}}
>
<Text>
Sobre
</Text>
</Box>
);
}
Mudança de cor:
theme.colors.danger.x500 (geralmente vermelho em muitos temas) pode ser um bom candidato, mas isso depende de como o tema foi configurado.- Se não houver uma cor vermelha já no tema, você pode definir diretamente a cor como
#FF0000 (vermelho puro) ou qualquer outro tom de vermelho.
O que importa aqui é entender como trabalhar com o tema e a paleta de cores para configurar visualmente os componentes. Isso é fundamental para uma abordagem coesa e escalável em projetos Front-End.
Boa observação!
