imagem de fundo na pagina de login

Cristian2 months ago

e você também deve mover o logotipo,

Unknown2 months ago

te agradeço muito até aqui, você realmente me ajudou muito,
mas meu formulário de login, ficou muito colado no lado esquerdo, e a logo não foi para cima do formulário igual ao seu.
mesmo assim te agradeço muito

Unknown2 months ago
Cristian2 months ago

look

original code:
<main className={classes.root}>


{!useMediaQuery(theme.breakpoints.down('lg')) && <LogoImage color={theme.palette.secondary.contrastText} />}

<Paper className={classes.paper}>
<form className={classes.form}>
{children}
</form>
</Paper>
</main>

move the logo
<main className={classes.root}>


{!useMediaQuery(theme.breakpoints.down('lg'))

<Paper className={classes.paper}>

{!useMediaQuery(theme.breakpoints.down('lg')) && <LogoImage color={theme.palette.secondary.contrastText} />}

<form className={classes.form}>
{children}
</form>
</Paper>
</main>

Unknown2 months ago

qual caminho até esse código ?

Cristian2 months ago

deixe o logotipo no lado direito, acima da entrada de login e senha
https://github.com/traccar/traccar-web/blob/master/src/login/LoginLayout.jsx#L49

Unknown2 months ago

você é um ótimo professor, ficou assim https://i.imgur.com/n3WsSOV.png
como afasto o logo e formulário pro lado direito ? pois achei muito colado na divisão

Cristian2 months ago

Após essa linha https://github.com/traccar/traccar-web/blob/9463e50333e17595c8c5d39c62075eacce835d3e/src/login/LoginLayout.jsx#L37
adicione este código

  justifyContent: 'center',
  alignItems: 'center',
Unknown2 months ago

Infelizmente continuou do msm jeito

Unknown2 months ago

agradeço muito pela sua ajuda, irei buscar mais ajuda no forum pra conseguir deixar centralizado na parte dark. de qualquer forma estou muito feliz com o resultado obtido, e mais uma vez obrigado!

Cristian2 months ago

cole aqui o código da parte que você deve modificar, para verificá-lo.

Unknown2 months ago
  form: {
    justifyContent: 'center',
    alignItems: 'center',
    maxWidth: theme.spacing(52),
    padding: theme.spacing(5),
    width: '100%',
  },
}));
Cristian2 months ago

esquecer esse código, você pode deixá-lo sem as modificações.

Fiz os testes e, no meu caso, eles são centralizados com a alteração dessa linha.
https://github.com/traccar/traccar-web/blob/9463e50333e17595c8c5d39c62075eacce835d3e/src/login/LoginLayout.jsx#L30