From 109ee7d46e5e834dbecad2d89e036ec5eb015856 Mon Sep 17 00:00:00 2001 From: juliaam Date: Mon, 20 May 2024 12:13:56 -0300 Subject: [PATCH] fix: petvetpage and vacine improvments --- src/components/Vaccine/index.js | 4 +- src/components/Vaccine/index.scss | 20 +++---- src/home/components/PetvetPage/index.js | 61 ++++++++++++--------- src/home/components/PetvetPage/index.scss | 67 +++++++++++++++-------- 4 files changed, 88 insertions(+), 64 deletions(-) diff --git a/src/components/Vaccine/index.js b/src/components/Vaccine/index.js index b408bd6a..f481dc3a 100644 --- a/src/components/Vaccine/index.js +++ b/src/components/Vaccine/index.js @@ -20,8 +20,8 @@ const html = ` -
-
+
+
`; diff --git a/src/components/Vaccine/index.scss b/src/components/Vaccine/index.scss index ea7f4b42..be5792c0 100644 --- a/src/components/Vaccine/index.scss +++ b/src/components/Vaccine/index.scss @@ -3,6 +3,8 @@ @use '~styles/breakpoints.scss' as breakpoints; .vaccine { + overflow: auto; + display: flex; flex-direction: column; @@ -16,14 +18,6 @@ box-shadow: rgb(50, 50, 71); border-radius: 1.8rem; - &__sections { - display: flex; - flex-direction: column; - gap: 2rem; - - margin-right: 1rem; - } - &__header { display: flex; @@ -84,9 +78,13 @@ display: none; } - &__list-group { + &__scroll { overflow-y: auto; } + + &__sections { + margin-right: 2rem; + } } @include breakpoints.from667 { @@ -102,9 +100,5 @@ &__add-vacine-text { display: block; } - - &__sections { - margin-right: 2rem; - } } } diff --git a/src/home/components/PetvetPage/index.js b/src/home/components/PetvetPage/index.js index 6f87acc0..7846e319 100644 --- a/src/home/components/PetvetPage/index.js +++ b/src/home/components/PetvetPage/index.js @@ -2,42 +2,44 @@ import { Component } from 'pet-dex-utilities'; // import TextInput from '../../../components/TextInput'; import Button from '../../../components/Button'; import Radio from '../../../components/RadioButton'; +import Vaccine from '../../../components/Vaccine'; import estetoscopio from './images/estetoscopio.svg'; import cuidadosEspeciais from './images/cuidadosEspeciais.svg'; -import { listenBreakpoint } from '../../../utils/breakpoints/breakpoints'; import './index.scss'; const html = ` -
-
-

Conte-nos um pouco mais do seu animal

-

Seu pet já foi vacinado? Conta pra gente que mês ou ano que você costuma comemorar o aniversário dele!

-
-
-
-
- estetoscopio -

O seu pet amigo foi castrado?

-
-
-
-
-
-
-
- cuidados especiais -
-
-

Cuidados especiais

-
+
+
+

Conte-nos um pouco mais do seu animal

+

Seu pet já foi vacinado? Conta pra gente que mês ou ano que você costuma comemorar o aniversário dele!

+
+
+
+
+
+ estetoscopio +
+
+

O seu pet amigo foi castrado?

+
+
+
+
+
+
+ cuidados especiais +
+
+

Cuidados especiais

+
+
-
-
-
+
+
`; const events = ['value']; @@ -50,9 +52,11 @@ function createAndMount({ name, text, mountTo }) { export default function PetVetPage() { Component.call(this, { html, events }); + const $container = this.selected.get('container'); const $specialCare = this.selected.get('special-care'); const $registered = this.selected.get('registered'); + const $cardGroup = this.selected.get('card-group'); const form = { isRegistered: undefined, @@ -83,9 +87,12 @@ export default function PetVetPage() { }); }); + this.vaccine = new Vaccine(); + this.vaccine.mount($cardGroup); + this.button = new Button({ text: 'Concluir', - isFullWidth: true, + isFullWidth: false, isDisabled: false, }); this.button.mount($container); diff --git a/src/home/components/PetvetPage/index.scss b/src/home/components/PetvetPage/index.scss index 8b11f551..0d39ec6f 100644 --- a/src/home/components/PetvetPage/index.scss +++ b/src/home/components/PetvetPage/index.scss @@ -3,6 +3,8 @@ @use '~styles/breakpoints' as breakpoints; .petvet-page { + height: 100%; + display: flex; flex-direction: column; @@ -17,7 +19,7 @@ font-family: fonts.$primaryFont; color: colors.$gray800; font-size: 1.8rem; - font-weight: fonts.$medium; + font-weight: fonts.$semiBold; line-height: 2.6; } @@ -25,7 +27,7 @@ &--subtext { font-family: fonts.$notoSansFont; color: colors.$gray700; - font-size: fonts.$xs; + font-size: fonts.$sm; font-weight: fonts.$regular; line-height: 2.2; @@ -36,7 +38,9 @@ display: flex; flex-direction: column; - gap: 2.4rem; + gap: 1.6rem; + + margin-bottom: 1rem; } &__card { @@ -48,7 +52,7 @@ padding: 1.6rem; - box-shadow: 0 0 2px 2px rgba(12, 26, 75, 0.08); + box-shadow: 0 0 2px 2px rgba(50, 50, 71, 0.04); border-radius: 1.4rem; } @@ -57,8 +61,16 @@ gap: 1rem; align-items: center; + } + + &__card-content { + width: 100%; + + display: flex; + + flex-direction: column; - justify-content: space-between; + gap: 2rem; } &__img { @@ -69,6 +81,12 @@ align-items: center; } + + &__button { + width: min(100%, 42rem); + + margin-top: auto; + } } @include breakpoints.from667 { @@ -82,35 +100,40 @@ align-items: center; } - &__card-text-icon { + &__card { + padding: 2rem; + + border: 1px solid colors.$gray150; + + box-shadow: none; + border-radius: 1.8rem; + } + + &__card-header { display: flex; gap: 2rem; align-items: center; - - font-family: fonts.$primaryFont; - color: colors.$gray800; - font-size: 1.8rem; - font-weight: fonts.$semiBold; } - &__vaccine { - min-width: 63rem; + &__card-content { + flex-direction: row; - box-sizing: border-box; - } + align-items: center; - &__button { - max-width: 42rem; + justify-content: space-between; } - &__card { - padding: 2rem; + &__header { + &--subtext { + font-size: fonts.$sm; + } + } - border: 1px solid colors.$gray150; + &__card-group { + overflow: auto; - box-shadow: none; - border-radius: 1.8rem; + gap: 2.4rem; } } }