fix: avatar sizes, borders and animation error

src/components/Thanks/MyKiva/OptInModule.vue

@@ -9,8 +9,11 @@
 						:key="loan.id"
 						:lender-name="loan?.name"
 						:lender-image-url="loan?.image?.url"
-						class="borrower-image tw-rounded-full tw-shadow tw-border-white tw-border-2"
-						:class="{'centered-borrower-image' : index === 1 && loansToDisplay.length === 3}"
+						class="borrower-image tw-rounded-full tw-shadow"
+						:class="{
+							'centered-borrower-image' : index === 1 && loansToDisplay.length === 3,
+							'pair-loans': loansToDisplay.length === 2
+						}"
 						:style="{
 							marginRight: getMarginRight(index),
 							marginLeft: getMarginLeft(index),
@@ -110,6 +113,9 @@ const loansToDisplay = computed(() => props.loans.slice(0, 3));
 
 const getMarginRight = index => {
 	if (loansToDisplay.value.length > 2 && index === 0) {
+		if (isMobile.value) {
+			return '-81.5px';
+		}
 		return '-100px';
 	}
 
@@ -118,6 +124,13 @@ const getMarginRight = index => {
 
 const getMarginLeft = index => {
 	if (loansToDisplay.value.length > 1 && index === loansToDisplay.value.length - 1) {
+		if (loansToDisplay.value.length === 2) {
+			return '-63px';
+		}
+
+		if (isMobile.value) {
+			return '-81.5px';
+		}
 		return '-100px';
 	}
 
@@ -185,31 +198,45 @@ const updateOptIn = value => {
 
 .borrower-image, .borrower-image :deep(img) {
 	width: 124px;
-	height: 120px;
+	height: 124px;
 
 	@screen md {
-		width: 164px;
+		width: 160px;
 		height: 160px;
 	}
 }
 
+.pair-loans, .pair-loans :deep(img) {
+	width: 148px !important;
+	height: 148px !important;
+
+	@screen md {
+		width: 200px !important;
+		height: 200px !important;
+	}
+}
+
 .centered-borrower-image, .centered-borrower-image :deep(img) {
 	width: 164px !important;
 	height: 160px !important;
 
 	@screen md {
-		width: 204px !important;
+		width: 200px !important;
 		height: 200px !important;
 	}
 }
 
+.borrower-image :deep(img), .centered-borrower-image :deep(img) {
+	@apply tw-border-4 tw-border-white;
+}
+
 .ghost-button :deep(span) {
 	@apply tw-bg-transparent;
 }
 
 .collapse-enter-active,
 .collapse-leave-active {
-  transition: max-height 1s ease, opacity 1s ease, padding 1s ease;
+  transition: max-height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
   overflow: hidden;
 }
 

src/components/Thanks/MyKiva/OptInNotification.vue

@@ -6,7 +6,7 @@
 	>
 		<div
 			v-if="receiveNews"
-			class="avatars-container tw-flex tw-items-center"
+			class="avatars-container tw-flex tw-items-center tw-flex-2"
 		>
 			<KvUserAvatar
 				v-for="loan, index in loansToDisplay"
@@ -59,18 +59,9 @@ const notificationMsg = computed(() => {
 
 <style lang="postcss" scoped>
 
-.container {
-	@media screen and (width <= 422px ) {
-		display: block;
-		margin: 0 auto;
-		text-align: center;
-		width: 100%;
-	}
-}
-
-.container > .avatars-container {
-	@media screen and (width <= 422px ) {
-		justify-content: center;
+.avatars-container {
+	@media screen and (width <= 420px ) {
+		width: 120px;
 	}
 }