Validaciones de UI

Estilos del botón:

.button {
  background-color: rgba(255, 255, 255, .3);
  border: none;
  border-radius: 25px;
  color: white;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  font-family: 'Muli', sans-serif;
  height: 50px;
  letter-spacing: 1px;
  margin: 10px 0;
}

PARA TODOS AQUELLOS QUE NO SABEN EN QUE MOMENTO HIZO EL CAMBIO DEL HEADER

Eso también explica porque en el video anterior vi la etiqueta <Header /> encima de <Search isHome/> en Home.jsx

AQUÍ ESTÁ EL COMMIT EN EL QUE SUCEDE ESO

https://github.com/platzi/PlatziVideo/commit/b88411eac8dfd31df54f2f10fb681f9e6119d600

No entiendo porque no hay clase de aquello?

Mi solución para poner los estilos adecuados al Header en la página de Login y Register fue usar withRouter de “react-router-dom” para de esta manera obtener la ubicación del path en el que nos encontramos y según el path poner el estilo adecuado.

En el componente de Layout:

const Layout = withRouter(({ children, location }) => (
  <div className="app">
    <Header location={location} />
    {children}
    <Footer />
  </div>
));

En el componente Header:

<header
      className={
        location.pathname === "/login" || location.pathname === "/register"
          ? "header header__login-register"
          : "header"
      }
>

Para instalar classnames solo necesitan usar el comando

npm install classnames --save

Recuerden que es necesario importar classnames con

npm install --save classnames

Me fascina el curso, cada día estoy más enamorado de React pero quisiera agregar algo y es que a lo largo del curso el profesor Oscar no pronuncia correctamente las palabras en inglés y me parece que es vítal en el mundo de la tecnología, no se pronuncia ainput, sino input como suena, y así hay otras palabras que pude notar que las pronuncia mal como: output o public y otras más que está de más mencionarlas, solo como consejo por favor

Use entidades para agregar ese pequeño espacio en el login.

<p className='login__container--register'>
    No tienes ninguna cuenta, &thinsp;
    <Link to='register'>Regístrate</Link>
</p>

Alguien me recuerda cuando utilizamos import classNames from ‘classnames’, no recuerdo haberlo utilizado antes

Con poner el border-radius: 50% es suficiente para que se redondee.
El espacio se puede arreglar con un margin, padding o agregando esto al jsx

<p className = "login__container--register" > No tienes ninguna cuenta &nbsp;

hacer el npm install classnames --save antes de correr!

 

Tampoco entiendo de dónde sale el isHome, en qué clase se vio eso?

Para arreglar el color del header lo que hice fue crear una validación para verificar en que pagina nos encontramos, y dependiendo de eso mostrar el header morado o verde:

...
let headerClass = ''
    if (path === '/login' || path === '/register') {
        headerClass = 'header__green'
    } else if (path === '/') {
        headerClass = 'header'
    }
    else {
        headerClass = 'd-none'
    }

    return (
        <header className={headerClass}>
            <Link to="/">
                <img className="header__img" src={logo} alt="Platzi Video" />
            </Link>
...

Lo que hago es consultar desde el estado una variable path, la que me indica en que pagina me encuentro actualmente, ya que no puedo acceder al location.pathname desde header, para que esto funcione hice un action y un reducer que actualice el pathname actual, y llamarlo en cada pagina en la que navega, no se si sea la solucion más eficaz pero me ayudo a practicar un estado global de mi sitio web utilizando redux

Error de compilacion… ¿que es classnames?

ERROR in ./src/components/Search.jsx
Module not found: Error: Can't resolve 'classnames' in '/home/leonardo/Documentos/GitHub/Platzi/curso practico de React/PlatziVideo/src/components'
 @ ./src/components/Search.jsx 2:0-36 7:19-29
 @ ./src/containers/Home.jsx
 @ ./src/routes/App.js
 @ ./src/index.js

🦄 Acá el código del proyecto al momento:

https://github.com/AndresCampuzano/React-Router-and-Redux/commits/master

Yo solucioné los diferentes colores del Header de la siguiente manera:

Login.jsx:

import Header from '../components/Header';
...
<Header setColor='green' />

Register.jsx:

import Header from '../components/Header';
...
<Header setColor='green' />

Header.jsx:

const { user, setColor } = props;
const inputStyle = classNames('header', setColor); //style header

Header.scss

// Dynamic CSS
.green {
	background: #21c08b;
}

.red {
	background: #ff1100;
}
// -----------

Noten que pueden usar diferentes colores como .red usando <Header setColor='red ’ />

Yo no tuve ningún problema con los estilos, ya que hice un buen sass desde el curso de frontend developer, con mejores practicas y pensando en componentes, e implemente react Helmet para unos cunatos bugs que se me generaban principalmente con el background del body.

Para ser honestos, React le falta mucho soporte en este sentido. Es horrenda esta forma.

Se me hace innecesario la validación del input del Search, a mi nunca me afecto eso el tamaño, solo los borders de los inputs del Login y Register los tomo el Search, pero agregue otro nombre a la clase ej: input-login, input-register y ya.
Aunque como enseñanza esta perfecto.

En qué curso se ve esto de classnames?? Porque empieza diciendo que lo vimos, y yo no lo recuerdo

Uncaught Error: Cannot find module 'classnames’
at webpackMissingModule (Search.jsx:6)
at eval (Search.jsx:6)
at Module…/src/components/Search.jsx (bundle.js:1462)
at webpack_require (bundle.js:20)
at eval (Home.jsx:5)
at Module…/src/containers/Home.jsx (bundle.js:1474)
at webpack_require (bundle.js:20)
at eval (App.js:5)
at Module…/src/routes/App.js (bundle.js:1558)
at webpack_require (bundle.js:20)

me aarece ese error al declarar el classnames de search.jsx

alguien sabe que puede ser

Se puede separa con un padding-left: 1rem y ya no?

JSX no maneja espacios en los textos

Si pulsan Alt + 255 si lo reconocera como un caracter distinto y funcionara

Para agregar un espacio vació solo usen la siguiente entidad de html.

 

Se que a la mayoría no les agrada dar este tipo de soluciones a los estilos css desde el Javascript, claro que es mucho mejor corregir el problema desde css. pero piensen en situaciones donde sea muy difícil hacerlo, como los Templates de terceros. Justo en esos momentos; estas soluciones te salvan la vida.

Yo lo que hice fue anexar otra propiedad a mi initialState llamado el cual es modificado por un action que se ejecuta cada vez que entro a home, login o register y modifica el valor de mi state
luego dentro de header use classNames y le asigne el valor de mi state, de esta manera sin importar desde que ruta entra el usuario siempre se renderizara la que le asigne el action dentro de mi componente

Me parece interesante el tema de classname, sin embargo los errores que preseta el proyecto se pueden arreglar usando especificidad en las clases asi como una buena metodología de construcción (como BEM).

.button {
background-color: rgba(255, 255, 255, .3);
border: none;
border-radius: 25px;
color: white;
cursor: pointer;
font-size: 16px;
font-weight: bold;
font-family: ‘Muli’, sans-serif;
height: 50px;
letter-spacing: 1px;
margin: 10px 0;
}

Un pequeño aporte, cuando usan el autocompletado en chrome para el login y el register cambia los estilos y genera un fondo de color blanco, yo lo solucione así:

    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff;

Y para la clase del input válide que fuera diferente a isHome para agregar los estilos al input del login y register
con la pseudo-clase :not ese lo agregue en el app.scss, ya que si mira el curso de frontend developer los inputs del login y register solo tienen border-bottom y en esta clase quedo con todos los bordes.

Al final quedo:

App.scss

.input:not(.isHome) {
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff;
    border-bottom: 2px solid white;
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
}

Y en el .input quedo con los siguientes estilos:

.input {
    font-family: 'Muli', sans-serif;
    height: 50px;
    outline: none;
    color: white;
    margin-bottom: 20px;
    padding: 0px 20px;
    font-size: 16px;
}

Search.scss

.input.isHome {
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid white;
    border-radius: 25px;
    width: 70%;
}

Hola Todos, como estan??? Queria preguntarles si ustedes me podrian ayudar con la parte de “Olvide mi Contraseña” ya que no me sale lo que necesito!!! se los agradeceria mucho!

 

otra forma de dar espacio es  

<p className="login__container--register">
   No tienes ninguna cuenta&nbsp;
   <Link to="/register">
      Regístrate
   </Link>
</p>

.button__index{
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 25px;
    color: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    font-family: 'Muli', sans-serif;
    height: 50px;
    letter-spacing: 1px;
    margin: 0px 10px;
}```

Nunca vi cuando cambio el header de color 😦

Wuau qyue genial proyecto, Genial curso y un exc elente profesor 💪💪

Un problema que tuve con mis estilos fué que no cargaban bien, especialmente en los inputs no me tomaba bien los borders.

No hallaba la solución, pero me di cuenta que tenía que ver con el nombre de las clases, ya que les tenía asignado input como nombre de clase, al parecer esto causa algún conflicto, así que con solo cambiarlo quedó solucionado. 😄

Usaría mejor el <br /> al final que el { ’ ’ } para separar el regístrate

Añadiendo padding en Link se puede dar el espacio requerido

.login__container–register {
font-size: 14px;
display: flex;
justify-content: space-between;
}

<code>

Mi solución para el maquetado.

paddind-left:5px; al register para separarlo

En mi caso ya los pude alinear con lo hecho en el curso de Frontend. Allí si tuve que hacer una separación de input para el login y el del search!
login color.PNG

const Header = (props) => {

    const { user, isLogin, isRegister } = props;
    const hasUser = Object.keys(user).length > 0;

    const handleLogout = () => {
        props.logoutRequest({});
    }

    const headerClass = classNames('header', {
        isLogin,
        isRegister,
    });
    
    return (
        <header className={headerClass}>

Espacio en blnaco con html:

 

Solamente le agregue una clase al regístrate de register–button y en el scss del login puse

.register--button {
  margin-left: 10px;
}

Mi solución para la separación:

Login.jsx

<<Link to="/register" className="margin-left-10">
              Regístrate
            </Link>>

App.scss

<.margin-left-10{
  margin-left:10px;
}>

Sencillo pero necesario

yo ya lo tenia separado de es manera jeje

Agregue unas líneas de mas para que se viera mas como lo traíamos de el curso de frontend-developer aquí las dejo.
por que en este curso quedo todo muy pegadito y no me gusto :b.

Register.scss

.register__container{
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
  min-height: 700px;
}

Login.scss

.login__container {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
  min-height: 700px;
}

.login__container--remember-me {
  margin-top: 15px;
  align-items: center;
 }

.login__container--remember-me a {
 margin-left: 20px;
}

Cuando separa el registrate es xq cuando hace el salto de linea para identar el code, de alguna manera no toma los espacios, para ahorrar código pongan todo junto… ej:

<p className="login__container--register">No tienes ninguna cuenta <Link to="/register">Regístrate</Link></p>

en Login.scss

.login__container–register {
font-size: 14px;
text-align: center;
}

.login__container–register a {
color: white;
font-weight: bold;
font-size: 16px;
text-decoration: none;
display: block;
}

Es necesario instalar classnames?

Buena clase

I am using <br/> to separate REGISTER

El espacio lo genere colocando   en el html.

a

Gracias por el aporte

Práctica: