From 0a97e06818630658bab573c35bd1f1469a2a6b5c Mon Sep 17 00:00:00 2001
From: Dylanson25 <dylanson25@users.noreply.github.com>
Date: Wed, 6 Nov 2024 15:22:17 -0800
Subject: [PATCH 1/8] [#47] - Agrega media queries utils

---
 src/styles/utils/helpers.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/styles/utils/helpers.js

diff --git a/src/styles/utils/helpers.js b/src/styles/utils/helpers.js
new file mode 100644
index 0000000..4d1ec33
--- /dev/null
+++ b/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}px)`;
+
+  return maxObject;
+}, {});

From b4770e19c862336b97c429dd792f758be7175298 Mon Sep 17 00:00:00 2001
From: dylanson25 <dylanson25@users.noreply.github.com>
Date: Wed, 6 Nov 2024 19:07:04 -0800
Subject: [PATCH 2/8] [#47] - Eliminar imagen en formato tablet

---
 src/pages/Login.jsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index f9ce557..648fa5b 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -6,9 +6,14 @@ 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`
+  display: none;
   width: 49rem;
+  ${mediaMinwidth.lg} {
+    display: block;
+  }
 `;
 
 const LayoutLogin = styled.div`

From 48849249cc2659a0c37ac064b6f0f755ed9d3a53 Mon Sep 17 00:00:00 2001
From: dylanson25 <dylanson25@users.noreply.github.com>
Date: Wed, 6 Nov 2024 19:26:50 -0800
Subject: [PATCH 3/8] [#47] - Diferencia de - 0.02px para MaxWidth

---
 src/styles/utils/helpers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/utils/helpers.js b/src/styles/utils/helpers.js
index 4d1ec33..55b6a6b 100644
--- a/src/styles/utils/helpers.js
+++ b/src/styles/utils/helpers.js
@@ -14,7 +14,7 @@ export const mediaMinwidth = breakpoints.reduce((minObject, {key, value}) => {
 }, {});
 
 export const mediaMaxwidth = breakpoints.reduce((maxObject, {key, value}) => {
-  maxObject[key] = `@media (max-width: ${value}px)`;
+  maxObject[key] = `@media (max-width: ${value - 0.2}px)`;
 
   return maxObject;
 }, {});

From c290a413f4205442368119f9d60334a85c7f7fad Mon Sep 17 00:00:00 2001
From: Dylanson25 <dylanson25@users.noreply.github.com>
Date: Mon, 11 Nov 2024 08:54:10 -0800
Subject: [PATCH 4/8] [#47] - Ajuste del header (Textos y posiciones)

---
 src/atoms/CoffeeBanner.jsx | 12 ++++++++++--
 src/molecules/Header.jsx   | 10 +++++++++-
 src/molecules/TopMenu.jsx  | 11 +++++++++++
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/atoms/CoffeeBanner.jsx b/src/atoms/CoffeeBanner.jsx
index 006e0f2..1f842c2 100644
--- a/src/atoms/CoffeeBanner.jsx
+++ b/src/atoms/CoffeeBanner.jsx
@@ -3,12 +3,20 @@ 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;
-  justify-content: space-between;
+  align-items: center;
   gap: 1rem;
+  ${H1} {
+    font-size: 2rem;
+    line-height: 1.75rem;
+    ${mediaMinwidth.md} {
+      line-height: 3.5rem;
+      font-size: 2.8rem;
+    }
+  }
 `;
 
 const LogoIcon = styled.img`
diff --git a/src/molecules/Header.jsx b/src/molecules/Header.jsx
index 72dea0d..5779883 100644
--- a/src/molecules/Header.jsx
+++ b/src/molecules/Header.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 
 import {CoffeeBanner} from '../atoms/CoffeeBanner';
+import {mediaMinwidth} from '../styles/utils/helpers';
 
 import {TopMenu} from './TopMenu';
 
@@ -9,7 +10,14 @@ const Container = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 2rem;
+  flex-direction: column;
+  padding: 0 1.6rem;
+  ${mediaMinwidth.sm} {
+    flex-direction: row;
+  }
+  ${mediaMinwidth.md} {
+    padding: 0 2rem;
+  }
 `;
 
 export const Header = () => {
diff --git a/src/molecules/TopMenu.jsx b/src/molecules/TopMenu.jsx
index 406b0a9..069ba5c 100644
--- a/src/molecules/TopMenu.jsx
+++ b/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;
   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 = () => {

From 9c28f5e86deff2fe9e14d93fd1066e0f9a729c5c Mon Sep 17 00:00:00 2001
From: Dylanson25 <dylanson25@users.noreply.github.com>
Date: Mon, 11 Nov 2024 08:56:13 -0800
Subject: [PATCH 5/8] [#47] - Imagen desde medida tablet  md: 768px

---
 src/pages/Login.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index 648fa5b..dafbf43 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -10,8 +10,9 @@ import {mediaMinwidth} from '../styles/utils/helpers';
 
 const Image = styled.img`
   display: none;
-  width: 49rem;
-  ${mediaMinwidth.lg} {
+  width: 50%;
+  max-width: 49rem;
+  ${mediaMinwidth.md} {
     display: block;
   }
 `;

From 15c5ffabd832128a6fe780542e8b3f2a129ade76 Mon Sep 17 00:00:00 2001
From: sarganar <sarganar@gmail.com>
Date: Mon, 25 Nov 2024 21:44:01 -0300
Subject: [PATCH 6/8] fix prop type in vscode settings

---
 .vscode/settings.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1ef2fcf..7d0a596 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.bracketPairColorization.enabled": true,
   "editor.guides.bracketPairs": "active"

From 7982966b00154cbf071ae13a9a808f9a13f19dc5 Mon Sep 17 00:00:00 2001
From: sarganar <sarganar@gmail.com>
Date: Mon, 25 Nov 2024 21:54:45 -0300
Subject: [PATCH 7/8] Upgrade install instructions in Readme

With |npm install| the package-lock.json will be altered
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d66f4f3..9ff8a32 100644
--- a/README.md
+++ b/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.
 

From 9f9070be3239c596c5dfd5ee032a2ecfcc585812 Mon Sep 17 00:00:00 2001
From: sarganar <sarganar@gmail.com>
Date: Wed, 27 Nov 2024 16:13:18 -0300
Subject: [PATCH 8/8] Fix in Recepit example, element p inside element p

---
 src/molecules/HeadearPurchaseReceipt.jsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/molecules/HeadearPurchaseReceipt.jsx b/src/molecules/HeadearPurchaseReceipt.jsx
index 7e059e9..6554210 100644
--- a/src/molecules/HeadearPurchaseReceipt.jsx
+++ b/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>