imagem de fundo na pagina de login

Cristian7 months ago

e você também deve mover o logotipo,

Unknown7 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

Unknown7 months ago
Cristian7 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>

Unknown7 months ago

qual caminho até esse código ?

Cristian7 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

Unknown7 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

Cristian7 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',
Unknown7 months ago

Infelizmente continuou do msm jeito

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

Cristian7 months ago

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

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