From 23bb1c03968e56d56d97182b9c6200ea262eefb9 Mon Sep 17 00:00:00 2001
From: Sylwia <mangoweb@wp.pl>
Date: Mon, 3 Jan 2022 06:06:08 +0100
Subject: [PATCH 1/2] Making the adoption bubble behave like the fact bubble

---
 src/views/MainPage/MainPage.js | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/views/MainPage/MainPage.js b/src/views/MainPage/MainPage.js
index 8bc0d69..b4f2091 100644
--- a/src/views/MainPage/MainPage.js
+++ b/src/views/MainPage/MainPage.js
@@ -75,7 +75,7 @@ function createFactBubble() {
 
 function createAdoptionBubble() {
   const bubbleAdoption = Bubble('higher', AdoptionBubbleContent.HEADER_TEXT, AdoptionBubbleContent.SENTENCES, true);
-  bubbleAdoption.classList.add('adoption');
+  bubbleAdoption.classList.add('adoption', 'invisible');
   return bubbleAdoption;
 }
 
@@ -90,10 +90,8 @@ async function renderFactBubbleContent() {
   imageObject.addEventListener(
     'load',
     () => {
-      const factBubble = document.querySelector('.bubble.fact');
       renderAnimalFact(imageFact);
-      factBubble.classList.remove('invisible');
-      factBubble.classList.add('fade-in');
+      fadeInBubble('fact');
     },
     false,
   );
@@ -102,7 +100,21 @@ async function renderFactBubbleContent() {
 }
 
 function renderAdoptionBubbleContent() {
-  renderAnimalAdoptionImg();
+  const imageObject = new Image();
+  imageObject.addEventListener(
+    'load',
+    () => {
+      fadeInBubble('adoption');
+    },
+    false,
+  );
+  renderAnimalAdoptionImg(imageObject);
+}
+
+function fadeInBubble(bubbleClass) {
+  const bubble = document.querySelector(`.bubble.${bubbleClass}`);
+  bubble.classList.remove('invisible');
+  bubble.classList.add('fade-in');
 }
 
 function renderAnimalFact(fact) {
@@ -120,9 +132,9 @@ function renderAnimalFactImg(imageFact, imageObject) {
   createImage(factImageSpace, imageFact, imageObject);
 }
 
-function renderAnimalAdoptionImg() {
+function renderAnimalAdoptionImg(imageObject) {
   const adoptionImageSpace = document.querySelector('.bubble.adoption .bubble-img');
-  createImage(adoptionImageSpace, AdoptionBubbleContent.IMG);
+  createImage(adoptionImageSpace, AdoptionBubbleContent.IMG, imageObject);
 }
 
 function createImage(domElement, imageData, imageElement) {

From 1f092cb3957e7773800c9260adf6bfed16d2fa5f Mon Sep 17 00:00:00 2001
From: Sylwia <mangoweb@wp.pl>
Date: Tue, 4 Jan 2022 03:34:46 +0100
Subject: [PATCH 2/2] better image proportions in bubbles

---
 src/components/Bubble/Bubble.css | 2 +-
 src/views/MainPage/MainPage.js   | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Bubble/Bubble.css b/src/components/Bubble/Bubble.css
index a578841..07f418a 100644
--- a/src/components/Bubble/Bubble.css
+++ b/src/components/Bubble/Bubble.css
@@ -10,7 +10,7 @@
 
   padding: 20px;
   margin-bottom: 30px;
-  min-height: 200px;
+  min-height: 180px;
 
   background: var(--bubble-color);
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
diff --git a/src/views/MainPage/MainPage.js b/src/views/MainPage/MainPage.js
index b4f2091..4542ce7 100644
--- a/src/views/MainPage/MainPage.js
+++ b/src/views/MainPage/MainPage.js
@@ -9,7 +9,7 @@ const PAGE_TITLE = 'ANIMALIADA';
 const MAIN_ANIMAL_IMG = { pathOrUrl: './kangoroo.png', alt: 'kangoroo that tells informations' };
 const FACT_HEADER = 'Did you know?';
 const AdoptionBubbleContent = {
-  IMG: { pathOrUrl: 'https://placedog.net/300/400?random', alt: 'the animal to adoption' },
+  IMG: { pathOrUrl: 'https://placedog.net/150/150?random', alt: 'the animal to adoption' },
   HEADER_TEXT: "Maybe you'd like to adopt your own pet?",
   SENTENCES: ['This one is looking for home', 'See more here: <a href="#adoption-page">Adoption Page</a>'],
 };
@@ -108,6 +108,7 @@ function renderAdoptionBubbleContent() {
     },
     false,
   );
+
   renderAnimalAdoptionImg(imageObject);
 }