//styles/login.scss
// para Login.jsx
@import 'vars';
  
  .login {
    width: 100%;
    height: 100vh;
    display: grid;
    place-items: center;
  }
  .form-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 300px;
  }
  .logo {
    width: 150px;
    margin-bottom: 48px;
    justify-self: center;
    display: none;
  }
  .title {
    font-size: var(--lg);
    margin-bottom: 12px;
    text-align: center;
  }
  .subtitle {
    color: var(--very-light-pink);
    font-size: var(--md);
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 32px;
    text-align: center;
  }
  .form {
    display: flex;
    flex-direction: column;
  }
  .label {
    font-size: var(--sm);
    font-weight: bold;
    margin-bottom: 4px;
  }
  .input {
    background-color: var(--text-input-field);
    border: none;
    border-radius: 8px;
    height: 30px;
    font-size: var(--md);
    padding: 6px;
    margin-bottom: 12px;
  }
  .primary-button {
    background-color: var(--hospital-green);
    border-radius: 8px;
    border: none;
    color: var(--white);
    width: 100%;
    cursor: pointer;
    font-size: var(--md);
    font-weight: bold;
    height: 50px;
  }
  .login-button {
    margin-top: 14px;
    margin-bottom: 30px;
  }
  @media (max-width: 640px) {
    .logo {
      display: block;
    }
  }

// styles/global.css
body {
    margin: 0;
    font-family: 'Quicksand', sans-serif;
  }

// styles/_vars.scss
// scss las guarda como variables globales

:root {
    --white: #FFFFFF;
    --black: #000000;
    --very-light-pink: #C7C7C7;
    --text-input-field: #F7F7F7;
    --hospital-green: #ACD9B2;
    --sm: 14px;
    --md: 16px;
    --lg: 18px;
  }
//para ello en webpack

{ // para que reconozca las variables globales
	test: /\\.(css|scss)$/,
		use: [
			"style-loader",
      "css-loader",
      "sass-loader"
		]
},

// login.jsx
import '../styles/Login.scss';

// en app.jsx
import Layout from '../containers/Layout';
import Login from '../containers/Login';
import '../styles/global.css';

<aside> 💡 ¿Qué es Layout.jsx? Es la manera en la que regresamos de manera "modular" diferentes etiquetas pero en una misma base. Osea, es tipo una "función" dónde por ejemplo podemos pasar etiquetas que sean por ejemplo ⇒ un artículo en venta, pero queremos ponerlos a todos en una misma estructura. Para ello, creamos otros contenedor al cual le pasaremos después una etiqueta hija "children" la cual podrá variar en contenido, pero la ubicación en Layout siempre es la misma. Piensa como si fuese una plantilla.

</aside>

import React from 'react';

const Layout = ({children}) => {
    return (
        <div className="Layout"> // ahora cuando queramos usar la etiqueta, la 
//llamamos como <Layout>
            {children}
        </div>
    );
}

export default Layout;

const App = () => {
    return (
        <Layout>
            <Login />
        </Layout>
    );
}
// a esto nos referimos
export default App;

<aside> 💡 En este caso, anteriormente habíamos creado el contenedor login, el cuál tiene una lógica por dentro. Después, la pasamos como etiqueta hija para Layout. Por ello, está dentro. Ahora, cuando queramos indicar que pasará una etiqueta hija, siempre hay etiqueta de apertura y cierre. En cambio, para login, es una solo etiqueta que cierra, porque no le pasaremos ninguna etiqueta hija.

</aside>

Al momento de pasar un html a jsx ⇒ cambiar class por className para evitar problemas con la palabra reservada class