Uma discrepância no enunciado | Next.js Full stack: arquitetura de componentes Front-end

No curso de Next.js Full satck teve uma pergunta com o seguinte enunciado:

"De acordo com o que vimos em aula, como fazer para que as cores do background desse componente sejam vermelhas e o texto fique alinhado ao centro da página?"

e a resposta do exercicío foi:

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.warning.x500, alignItems: 'center', }} > Sobre ) }

porém a paleta de cores do "warning" é amarela e não vermelha.

Só um detalhe mesmo, mas o importante é entender o que foi feito.

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!