Merge pull request #223 from Azordev/fix/#151

Fixed styles on Confirm Modal
Azordev · Feb 17, 2022 · 03cfdcd · 03cfdcd
2 parents 722c929 + bad8bb8
commit 03cfdcd
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/src/components/Modal/Modal.styled.jsx b/src/components/Modal/Modal.styled.jsx
@@ -47,12 +47,11 @@ export const InfoContainer = styled.div`
 
   p {
     font-size: 16px;
-    color: gray;
     padding-left: 16px;
     padding-right: 16px;
   }
 
-  h4{
+  h4 {
     margin-top: 0;
     margin-bottom: 2rem;
   }

diff --git a/src/pages/Confirm/Confirm.styled.jsx b/src/pages/Confirm/Confirm.styled.jsx
@@ -1,9 +1,21 @@
 import styled from 'styled-components'
+import { Text } from '../../components'
 
 export const RatingImg = styled.img`
   max-width: 100px;
   height: auto;
-  margin: auto;
+  margin: 1rem auto;
+`
+
+export const ConfirmText = styled(Text)`
+  margin: 0px;
+  line-height: 1.5;
+  text-align: center;
+  font-size: 18px !important;
+
+  &:nth-child(2) {
+    margin: 0px 0px 15px;
+  }
 `
 
 export const CheckImg = styled.img`

diff --git a/src/pages/Confirm/index.jsx b/src/pages/Confirm/index.jsx
@@ -5,7 +5,7 @@ import handshake from '../../assets/handshake.png'
 import RatingMan from '../../assets/man-rate.png'
 import { InsertClientRate, useConfirmPackage } from '../../hooks'
 import Layout from './Confirm.layout'
-import { RatingImg } from './Confirm.styled'
+import { RatingImg, ConfirmText } from './Confirm.styled'
 import warning from '../../assets/warning.png'
 
 const Confirm = () => {
@@ -87,11 +87,15 @@ const Confirm = () => {
       headerSubTitle="Inserta tus datos para finalizar"
       RatingModal={
         <Modal isOpen={isRatingModalOpen} handleClick={e => submitRating(e)} actionText="Aceptar">
+          <ConfirmText small bold color="primary">
+            La propina esta en tus manos
+          </ConfirmText>
+          <ConfirmText margin="0px 0px 15px" bold color="gray">
+            Si deseas, puedes compartirla.
+          </ConfirmText>
           <Text as="h1" color="primary">
             ¿Qué tal tu experiencia?
           </Text>
-          <Text small>La propina esta en tus manos</Text>
-          <Text>Si deseas, puedes compartirla.</Text>
           <RatingImg src={RatingMan} alt="Delivery man" />
           <Rating setRating={setRating} />
         </Modal>