feat: add img search & align title

Azordev · Jun 16, 2022 · 4b60066 · 4b60066
1 parent 1c12388
commit 4b60066
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 10 deletions.
diff --git a/src/assets/img_busqueda.png b/src/assets/img_busqueda.png
diff --git a/src/components/Modal/Modal.js b/src/components/Modal/Modal.js
@@ -1,7 +1,17 @@
 import { useEffect } from 'react';
 import PropTypes from 'prop-types'
-import { InfoContainer, ModalButton, ModalContainer, Overlay } from './Modal.styled'
-const Modal = ({ children, isOpen, actionText, toggle, handleClick = () => toggle(false), hasTimeout = false }) => {
+import imgBusqueda from '../../assets/img_busqueda.png'
+import { InfoContainer, ModalButton, ModalContainer, Overlay, ImgBusqueda } from './Modal.styled'
+
+const Modal = ({ 
+  children, 
+  isOpen, 
+  actionText, 
+  toggle, 
+  SearchIcon, 
+  handleClick = () => toggle(false), 
+  hasTimeout = false 
+}) => {
 
   useEffect(() => {
     if (isOpen && hasTimeout) {
@@ -16,6 +26,7 @@ const Modal = ({ children, isOpen, actionText, toggle, handleClick = () => toggl
     {isOpen && (
       <Overlay>
         <ModalContainer>
+          {SearchIcon && <ImgBusqueda src={imgBusqueda} alt="img_busqueda" />}
           <InfoContainer>{children}</InfoContainer>
           {actionText && (<ModalButton onClick={handleClick}>{actionText}</ModalButton>)}
         </ModalContainer>
@@ -30,7 +41,8 @@ Modal.propTypes = {
   isOpen: PropTypes.bool,
   toggle: PropTypes.func,
   handleClick: PropTypes.func,
-  hasTimeout: PropTypes.bool
+  hasTimeout: PropTypes.bool,
+  SearchIcon: PropTypes.bool
 }
 
 export default Modal
diff --git a/src/components/Modal/Modal.styled.jsx b/src/components/Modal/Modal.styled.jsx
@@ -93,3 +93,15 @@ export const ModalButton = styled.button`
   line-height: 24px;
   font-family: 'Poppins', sans-serif;
 `
+export const ImgBusqueda = styled.img`
+  object-fit: cover;
+  width: 357px;
+  z-index: -1;
+  position: absolute;
+  left: -166px;
+  bottom: -93px;
+
+  @media (max-width: 1025px) {
+    display: none;
+  }
+`
diff --git a/src/pages/Check/Check.layout.jsx b/src/pages/Check/Check.layout.jsx
@@ -2,8 +2,8 @@
 import PropTypes from 'prop-types'
 
 import { Container, Header, MainSection } from '../../layouts/Splitted.styled'
-import {BtnBackContainer} from './Check.styled'
-import { Text } from '../../components'
+import { BtnBackContainer, HeaderTitle, HeaderSubtitle } from './Check.styled'
+// import { Text } from '../../components'
 
 import BackButton from '../../components/BackButton'
 
@@ -13,12 +13,12 @@ const Check = ({ headerTitle, headerSubtitle, children, DontForgetModal }) => (
       <BtnBackContainer>
         <BackButton />
       </BtnBackContainer>
-      <Text title>
+      <HeaderTitle title>
         {headerTitle}
-      </Text>
-      <Text subtitle>
+      </HeaderTitle>
+      <HeaderSubtitle subtitle>
         {headerSubtitle}
-      </Text>
+      </HeaderSubtitle>
     </Header>
     <MainSection>{children}</MainSection>
     {DontForgetModal}

diff --git a/src/pages/Check/Check.styled.jsx b/src/pages/Check/Check.styled.jsx
@@ -20,6 +20,24 @@ export const BtnBackContainer = styled.div`
   margin-top: 10px;
 `
 
+export const HeaderTitle = styled(Text)`
+  margin-top: 28px;
+  margin-left: 13px;
+
+  @media (min-width: 1025px) {
+    margin-top: 80px;
+    margin-left: 56px;
+  }
+`
+
+export const HeaderSubtitle = styled(Text)`
+  margin-left: 13px;
+
+  @media (min-width: 1025px) {
+    margin-left: 56px;
+  }
+`
+
 export const CheckTextSubtitle = styled(Text)`
   margin: 0;
   font-weight: bold;

diff --git a/src/pages/Check/index.jsx b/src/pages/Check/index.jsx
@@ -52,7 +52,12 @@ const Check = () => {
       headerTitle="Hola!"
       headerSubtitle="Ingresa tu número de boleta"
       DontForgetModal={
-        <Modal isOpen={isModalOpen} handleClick={() => changeIsModalOpen(false)} actionText="Entendido">
+        <Modal 
+          isOpen={isModalOpen} 
+          handleClick={() => changeIsModalOpen(false)} 
+          actionText="Entendido" 
+          SearchIcon={isModalOpen}
+        >
           <img src={warning}  width='61' height='60' alt="Warning" />
           <Text as="h1">
             Antes de recibir...