From e0e7914baad0ffa91fa238c48cc5b2f1000fda68 Mon Sep 17 00:00:00 2001
From: Christian Bedon <christian.bedon@contractors.kiva.org>
Date: Tue, 12 Nov 2024 13:05:01 -0500
Subject: [PATCH] fix: update notification avatar sizes for mobile and desktop

---
 .../Thanks/MyKiva/OptInNotification.vue        | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/Thanks/MyKiva/OptInNotification.vue b/src/components/Thanks/MyKiva/OptInNotification.vue
index 9cbf359bfa..900cd54613 100644
--- a/src/components/Thanks/MyKiva/OptInNotification.vue
+++ b/src/components/Thanks/MyKiva/OptInNotification.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="tw-flex tw-mx-auto tw-items-center tw-justify-start tw-gap-0.5 md:tw-gap-2
+		class="tw-flex tw-mx-auto tw-items-center tw-justify-start tw-gap-1 md:tw-gap-2
 			tw-bg-white tw-rounded tw-px-1.5 md:tw-px-3 tw-py-1.5 container"
 		:style="{maxWidth: '620px'}"
 	>
@@ -13,12 +13,12 @@
 				:key="loan.id"
 				:lender-name="loan?.name"
 				:lender-image-url="loan?.image?.url"
-				class="avatar tw-rounded-full tw-shadow tw-border-white tw-border-2 tw-w-auto"
+				class="avatar tw-rounded-full tw-shadow tw-w-auto"
 				:class="{'smaller-borrower-avatar' : loansToDisplay.length > 2 && index !== 1 }"
 				:style="{
 					zIndex: index === 1 ? 2 : 1,
-					marginRight: loansToDisplay.length > 2 && index === 0 ? '-30px' : '0',
-					marginLeft: loansToDisplay.length > 1 && index === loansToDisplay.length - 1 ? '-30px' : '0',
+					marginRight: loansToDisplay.length > 2 && index === 0 ? '-18px' : '0',
+					marginLeft: loansToDisplay.length > 1 && index === loansToDisplay.length - 1 ? '-18px' : '0',
 				}"
 			/>
 		</div>
@@ -59,9 +59,13 @@ const notificationMsg = computed(() => {
 
 <style lang="postcss" scoped>
 
-.smaller-borrower-avatar :deep(img) {
-	height: 36px;
-	width: 36px;
+.avatar :deep(img) {
+	@apply tw-w-4.5 tw-h-4.5 md:tw-h-6 md:tw-w-6 tw-border-2 tw-border-white;
+}
+
+.smaller-borrower-avatar, .smaller-borrower-avatar :deep(img) {
+	height: 30px;
+	width: 30px;
 }
 
 .message {