Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Meu projeto está com a paleta de cores num local diferente

Neste curso eu optei por usar o meu próprio projeto, criado com o auxílio do curso "React: Desenvolvendo com Javascript", ao invés de usar o projeto do professor. Consegui fazer algumas mudanças para me adaptar ao projeto das aulas, mas não estou conseguindo fazer a paleta de cores ficar no mesmo lugar que o input mostrado no vídeo. O professor colocou as cores no canto superior direito, mas no meu código ele está situado à esquerda do título do time, como na imagem abaixo.

Captura de tela do projeto, onde o input das cores está à esquerda do título do Time

Gostaria de saber como faço para que ele fique no canto superior direito dos times. Os códigos index.js e Time.css estão assim:

Javascript:

import Colaborador from "../Colaborador"
import "./Time.css"

const Time = (props) => {
    const cssEstilo = {backgroundColor: props.corSecundaria}

    return (
        (props.colaboradores.length > 0) ? <section className="time" style={cssEstilo}>
            <input value={props.corSecundaria} type="color" className="input-cor" />
            <h3 style={{borderColor: props.corPrimaria}}>{props.nome}</h3>
            <div className="colaboradores">
            {props.colaboradores.map (colaborador => {

                return <Colaborador
                key={colaborador.nome}
                nome={colaborador.nome}
                cargo={colaborador.cargo}
                imagem={colaborador.imagem}
                corDeFundo={props.corPrimaria}
                aoDeletar = {props.aoDeletar}
            
                />
            })}.
            </div>

        </section>
        : ""
    )
}

export default Time

CSS:

.time {
    text-align: center;
    padding: 32px;
    position: relative;
}

.time h3 {
    font-size: 32px;
    border-bottom: 4px solid;
    display: inline-block;
    padding-bottom: 8px;
}

.time .colaboradores {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    
    margin-top: 32px;
}

.input-color {
    position: absolute;
    top: 20px;
    right: 50px;
}

Acrescento também que a posição da paleta de cores não está mudando quando eu altero os valores de top e right do .input-color.

1 resposta
solução!

Olá, Eduardo! Tudo ok?

O problema está na forma que você nomeou a classe no arquivo JavaScirpt e como chamou ele no arquivo CSS, sugiro que você altere a classe no CSS para .input-cor em vez de .input-color. Ou no arquivo JavaScirpt altere no nome da classe da tag de input de input-cor para input-color para ficar igual ao do CSS. Assim, o CSS será aplicado corretamente ao input de cor e ele será posicionado no canto superior direito dos times.

Se tiver mais alguma dúvida, é só me dizer!

Espero ter ajudado, abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓