Skip to content

Commit

Permalink
fix: update notification avatar sizes for mobile and desktop
Browse files Browse the repository at this point in the history
  • Loading branch information
Christian Bedon committed Nov 12, 2024
1 parent 9012158 commit e0e7914
Showing 1 changed file with 11 additions and 7 deletions.
18 changes: 11 additions & 7 deletions src/components/Thanks/MyKiva/OptInNotification.vue
Original file line number Diff line number Diff line change
@@ -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'}"
>
Expand All @@ -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>
Expand Down Expand Up @@ -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 {
Expand Down

0 comments on commit e0e7914

Please sign in to comment.