Merge branch 'dev' into dev

README.md

@@ -5,7 +5,7 @@ Proyecto react creado con vitejs.
 ## Intrucciones
 
 - Clonar el repo
-- Ejecutar *npm install* dentro del folder del repo clonado
+- Ejecutar *npm ci* dentro del folder del repo clonado
 - Instalar la extensión VSCode: ESLint.
 - También es recomendable tener seteado VSCode para formatear el código al grabar.
 

src/atoms/CoffeeBanner.jsx

@@ -3,12 +3,21 @@ import styled from '@emotion/styled';
 
 import H1 from '../atoms/H1';
 import IconCoffee from '../image/IconCoffee.svg';
+import {mediaMinwidth} from '../styles/utils/helpers';
 
 const Logo = styled.div`
   display: flex;
-  align-items: flex-start;
+
+  align-items: center;
   gap: 1rem;
-  grid-area: banner;
+  ${H1} {
+    font-size: 2rem;
+    line-height: 1.75rem;
+    ${mediaMinwidth.md} {
+      line-height: 3.5rem;
+      font-size: 2.8rem;
+    }
+  }
 `;
 
 const LogoIcon = styled.img`

src/molecules/HeadearPurchaseReceipt.jsx

@@ -8,7 +8,7 @@ const HeaderOneDouble = styled.h1`
 
 const BlockLeft = styled.p`
   font-size: 2rem;
-  > p {
+  > span {
     margin: 1rem 0;
   }
 `;
@@ -29,8 +29,9 @@ export const HeadearPurchaseReceipt = ({paymentDate, paymentHour, paymentNumber}
       <HeaderOneDouble>Recibo</HeaderOneDouble>
       <FlexContainer>
         <BlockLeft>
-          <p>{paymentDate}</p>
-          <p>{paymentHour}</p>
+          <span>{paymentDate}</span>
+          <br />
+          <span>{paymentHour}</span>
         </BlockLeft>
         <BlockRight>Orden No. {paymentNumber}</BlockRight>
       </FlexContainer>

src/molecules/Header.jsx

@@ -2,13 +2,22 @@ import React from 'react';
 import styled from '@emotion/styled';
 
 import {CoffeeBanner} from '../atoms/CoffeeBanner';
+import {mediaMinwidth} from '../styles/utils/helpers';
 
 import {TopMenu} from './TopMenu';
 
 const Container = styled.div`
-  display: grid;
-  grid-template-columns: 5% 35% 30% 30%;
-  grid-template-areas: 'blank banner separator nav';
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: column;
+  padding: 0 1.6rem;
+  ${mediaMinwidth.sm} {
+    flex-direction: row;
+  }
+  ${mediaMinwidth.md} {
+    padding: 0 2rem;
+  }
 `;
 
 export const Header = () => {

src/molecules/TopMenu.jsx

@@ -2,18 +2,29 @@ import React from 'react';
 import styled from '@emotion/styled';
 
 import H3 from '../atoms/H3';
+import {mediaMinwidth} from '../styles/utils/helpers';
 
 const Nav = styled.div`
   display: flex;
   align-items: center;
-  gap: 5rem;
-  grid-area: nav;
+  justify-content: space-between;
+  gap: 4rem;
+  margin-top: 1rem;
+  ${mediaMinwidth.md} {
+    margin-top: 0;
+  }
 `;
 
 const NavItem = styled.a`
   color: 'inherit';
   text-decoration: none;
   cursor: pointer;
+  ${H3} {
+    font-size: 1.8rem;
+    ${mediaMinwidth.lg} {
+      font-size: 2rem;
+    }
+  }
 `;
 
 export const TopMenu = () => {

src/pages/Login.jsx

@@ -6,9 +6,15 @@ import {Header} from '../molecules/Header';
 import {LoginForm} from '../molecules/LoginForm';
 import HomeImage from '../image/homeImage.svg';
 import BackgroundCoffee from '../image/backgroundCoffee.svg';
+import {mediaMinwidth} from '../styles/utils/helpers';
 
 const Image = styled.img`
-  width: 49rem;
+  display: none;
+  width: 50%;
+  max-width: 49rem;
+  ${mediaMinwidth.md} {
+    display: block;
+  }
 `;
 
 const LayoutLogin = styled.div`

src/styles/utils/helpers.js

@@ -0,0 +1,20 @@
+export const breakpoints = [
+  {key: 'xs', value: 0},
+  {key: 'sm', value: 576},
+  {key: 'md', value: 768},
+  {key: 'lg', value: 992},
+  {key: 'xl', value: 1200},
+  {key: 'xxl', value: 1400},
+];
+
+export const mediaMinwidth = breakpoints.reduce((minObject, {key, value}) => {
+  minObject[key] = `@media (min-width: ${value}px)`;
+
+  return minObject;
+}, {});
+
+export const mediaMaxwidth = breakpoints.reduce((maxObject, {key, value}) => {
+  maxObject[key] = `@media (max-width: ${value - 0.2}px)`;
+
+  return maxObject;
+}, {});