imagem de fundo na pagina de login

Cristian5 months ago

e você também deve mover o logotipo,

Unknown5 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

Unknown5 months ago
Cristian5 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>

Unknown5 months ago

qual caminho até esse código ?

Cristian5 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

Unknown5 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

Cristian5 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',
Unknown5 months ago

Infelizmente continuou do msm jeito

Unknown5 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!

Cristian5 months ago

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

Unknown5 months ago
  form: {
    justifyContent: 'center',
    alignItems: 'center',
    maxWidth: theme.spacing(52),
    padding: theme.spacing(5),
    width: '100%',
  },
}));
Cristian5 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