UI Issues: Border Radius, Button Functionality, Alignment, and Color Theory Implementation, Enter_container radius

Question

I want to align the borders where it says 'Entrar,' and the 'Entrar' button also needs to log in if the user exists. The 'Novo Aqui?' button doesn't redirect to another page called 'Cadastro' and doesn't look like a button; when someone hovers over it, it only changes the color of the letters. I want it to redirect to another page, which in this case would be 'Register,' and use color theory to change the color when the user hovers over it.

I tried to align the 'Novo Aqui?' button to the right, but I got lost because there are too many divs and rules. On this button, I tried to redirect to another page like a button, but it still didn't look like a button; it appeared as an unformatted redirect link. I tried to round the right corner border, but I didn't succeed. I attempted to use !important, but it was unsuccessful. The 'Entrar' button doesn't have rounded borders on the left, only on the right, and it should log in if a user with that email and password exists.

I tried to align the 'Novo Aqui?' button to the right, but I got lost because there are too many divs and rules. On this button, I tried to redirect to another page like a button, but it still didn't look like a button; it appeared as an unformatted redirect link. I tried to round the right corner border, where the 'enter_container' is located, but I didn't succeed. I attempted to use !important, but it was unsuccessful. Everything was written in Portuguese (pt-br): 'Entrar' is the same as 'Sign in,' 'Novo Aqui?' is the same as 'New Here?'

import { useState } from 'react';
import { Link } from 'react-router-dom';
import styles from './Entrar.module.css';

const Entrar = () => {
  const [dados, setDados] = useState({
    email: '',
    senha: '',
  });

  const [erro, setErro] = useState("");

  const handleMudar = ({ currentTarget: input }) => {
    setDados({ ...dados, [input.name]: input.value });
  };

  const handleEnviar = async (e) => {
    e.preventDefault();
    try {
      const url = 'http://localhost:5555/autenticarRotas';
      const { data: resultado } = await axios.post(url, dados);
      localStorage.setItem('token', resultado.token);
      window.location = "/";
    } catch (erro) {
      if (
        erro.response && erro.response.status >= 400 &&
        erro.response.status <= 500
      ) {
        setErro(erro.response.data.message);
      }
    }
  }

  return (
    <div className={styles.entrar_container}>
      <div className={styles.entrar}>
        <div className={styles.left}>
          <form onSubmit={handleEnviar} className={styles.form}>
            <h1>Entrar</h1>
            <input
              type="email"
              placeholder="Email"
              name='email'
              onChange={handleMudar}
              value={dados.email}
              required
              className={styles.input}
            />
            <input
              type="password"
              placeholder="Senha"
              name='senha' // Changed to 'senha' from 'password'
              onChange={handleMudar}
              value={dados.senha}
              required
              className={styles.input}
            />
            {erro && <div className={styles.erro_msg}>{erro}</div>}
            <div className={styles.button_container}>
              <button type="submit" className={styles.entrar_btn}>
                Entrar
              </button>
            </div>
            <div className={styles.button_container}>
              <button className={styles.novo_aqui_btn} onClick={() => navigate("/cadastrar")}>
                Novo Aqui?
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

export default Entrar;

    /* Create all the fields components that exist in the file Entrar.jsx */
/* General Styles */
.entrar_container {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
  }
  
  /* Left Side - Introduction */
  .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background: linear-gradient(to bottom, #3bb19b, #318994);
    color: #fff;
    padding: 30px;
  }
  
  .left h1 {
    font-size: 3rem;
    margin-top: 0;
    text-align: center;
    border-radius: 20px;
  }
  
  /* Right Side - Registration Form */
  .right {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 10px;
    /* Changed to top-left */
    border-bottom-left-radius: 10px;
    /* Changed to bottom-left */
    background-color: #fff;
    padding: 30px;
  }
  
  .right form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  /* Input Styles */
  .input {
    outline: none;
    border: 2px solid #ccc;
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    margin: 10px 0;
    font-size: 1.1rem;
  }
  
  .form input {
    color: black;
  }
  
  /* Error Message Styles */
  .erro_msg {
    width: 100%;
    padding: 15px;
    margin: 10px 0;
    font-size: 1rem;
    background-color: #f34646;
    color: #fff;
    border-radius: 5px;
    text-align: center;
  }
  
  .button_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  /* Button Styles */
  .entrar_btn {
    color: white;
    background-color: #007bff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px; /* Rounded edges */
  }
  
  .entrar_btn:hover {
    background-color: #0056b3;
  }
  
  .novo_aqui_btn {
    color: white; /* Text color is white */
    text-decoration: none;
    transition: color 0.3s ease;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px; /* Rounded edges */
  }
  
  .novo_aqui_btn:hover {
    color: #0056b3;
  }

Answer 1

I fixed the UI problem of the buttons being more specific here is the code below

Entrar.jsx
import { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import styles from './Entrar.module.css';
import axios from 'axios';

const Entrar = () => {
  const navigate = useNavigate();

  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      navigate('/');
    }
  }, [navigate]);

  const [dados, setDados] = useState({
    email: '',
    senha: '',
  });

  const [erro, setErro] = useState("");

  const handleMudar = ({ currentTarget: input }) => {
    setDados({ ...dados, [input.name]: input.value });
  };

  const handleEnviar = async (e) => {
    e.preventDefault();
    try {
      const url = 'http://localhost:5555/autenticar/';
      const { data: resultado } = await axios.post(url, dados);
      localStorage.setItem('token', resultado.token);
      window.location = "/entrar/home";
    } catch (erro) {
      if (
        erro.response && erro.response.status >= 400 &&
        erro.response.status <= 500
      ) {
        setErro(erro.response.data.message);
      }
    }
  }

  return (
    <div className={styles.entrar_container}>
      <div className={styles.entrar}>
        <div className={styles.left}>
          <form onSubmit={handleEnviar} className={styles.form}>
            <h1>Entrar</h1>
            <input
              type="email"
              placeholder="Email"
              name='email'
              onChange={handleMudar}
              value={dados.email}
              required
              className={styles.input}
            />
            <input
              type="password"
              placeholder="Senha"
              name='senha' // Changed to 'senha' from 'password'
              onChange={handleMudar}
              value={dados.senha}
              required
              className={styles.input}
            />
            {erro && <div className={styles.erro_msg}>{erro}</div>}
            <div className={styles.button_container}>
              <button type="submit" className={styles.entrar_btn}>
                Entrar
              </button>
              <Link to="/entrar/cadastrar">
              <button className={styles.novo_aqui_btn}>
                Novo Aqui?
              </button>
              </Link>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

export default Entrar;

Entrar.module.css
/* Create all the fields components that exist in the file Entrar.jsx */
/* General Styles */
.entrar_container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}

/* Left Side - Introduction */
.left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(to bottom, #3bb19b, #318994);
  color: #fff;
  padding: 30px;
}

.left h1 {
  font-size: 3rem;
  margin-top: 0;
  text-align: center;
  border-radius: 20px;
}

/* Right Side - Registration Form */
.right {
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 10px;
  /* Changed to top-left */
  border-bottom-left-radius: 10px;
  /* Changed to bottom-left */
  background-color: #fff;
  padding: 30px;
}

.right form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Input Styles */
.input {
  outline: none;
  border: 2px solid #ccc;
  width: 100%;
  padding: 15px;
  border-radius: 10px;
  margin: 10px 0;
  font-size: 1.1rem;
}

.form input {
  color: black;
}

/* Error Message Styles */
.erro_msg {
  width: 100%;
  padding: 15px;
  margin: 10px 0;
  font-size: 1rem;
  background-color: #f34646;
  color: #fff;
  border-radius: 5px;
  text-align: center;
}

.button_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

div .entrar_btn {
  border: none;
  padding: 15px;
  border-radius: 10px;
  margin: 10px 0;
  font-size: 1.1rem;
  cursor: pointer;
  background-color: #3bb19b;
}

.entrar_btn:hover {
  background-color: rgb(51, 49, 47);
}

div .novo_aqui_btn {
  background-color: #3bb19b;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.novo_aqui_btn:hover {
  background-color:  rgb(51, 49, 47);
}