From a598b575cb72aac4b328d91bde6f93d41d5028a9 Mon Sep 17 00:00:00 2001
From: Casey Dyer <dyersituations@gmail.com>
Date: Tue, 15 Oct 2024 15:18:56 -0700
Subject: [PATCH] fix: random issues resolved with my kiva work

---
 src/components/MyKiva/BorrowerCarousel.vue   | 25 ++++++++++++++---
 src/components/MyKiva/BorrowerStatusCard.vue | 14 +++++++---
 src/components/MyKiva/MyKivaHero.vue         |  4 +--
 src/components/MyKiva/MyKivaNavigation.vue   | 28 +++++++++++---------
 src/components/MyKiva/MyKivaProfile.vue      |  6 ++---
 src/components/Thanks/LoanNextSteps.vue      |  6 +----
 src/pages/Portfolio/MyKiva/MyKivaPage.vue    |  2 +-
 7 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/src/components/MyKiva/BorrowerCarousel.vue b/src/components/MyKiva/BorrowerCarousel.vue
index 07df28bbcd..9a1014f3ca 100644
--- a/src/components/MyKiva/BorrowerCarousel.vue
+++ b/src/components/MyKiva/BorrowerCarousel.vue
@@ -37,7 +37,7 @@
 									tw-rounded-full tw-shadow"
 							>
 								<BorrowerImage
-									class="tw-w-full tw-rounded-full tw-bg-brand"
+									class="tw-w-full tw-rounded-full"
 									:alt="getBorrowerName(loan)"
 									:aspect-ratio="1"
 									:default-image="{ width: 80, faceZoom: 50 }"
@@ -49,7 +49,7 @@
 									]"
 								/>
 							</div>
-							<h5 class="tw-text-center tw-text-ellipsis tw-line-clamp-2 tw-whitespace-normal">
+							<h5 class="tw-text-center tw-text-ellipsis tw-line-clamp-2 tw-whitespace-normal tw-pt-0.5">
 								{{ getBorrowerName(loan) }}
 							</h5>
 						</div>
@@ -102,6 +102,7 @@
 </template>
 
 <script setup>
+import _throttle from 'lodash/throttle';
 import KvTabs from '@kiva/kv-components/vue/KvTabs';
 import KvTab from '@kiva/kv-components/vue/KvTab';
 import KvTabPanel from '@kiva/kv-components/vue/KvTabPanel';
@@ -115,7 +116,8 @@ import {
 	computed,
 	toRefs,
 	inject,
-	onMounted
+	onMounted,
+	onBeforeUnmount
 } from 'vue';
 import {
 	PAYING_BACK,
@@ -147,6 +149,7 @@ const emit = defineEmits(['selected-loan']);
 
 const { loans } = toRefs(props);
 const carousel = ref(null);
+const windowWidth = ref(0);
 
 const hasActiveLoans = computed(() => {
 	return loans.value.some(loan => [FUNDED, FUNDRAISING, PAYING_BACK, RAISED].includes(loan?.status));
@@ -204,7 +207,7 @@ const filteredLoans = computed(() => {
 });
 
 const singleSlideWidth = computed(() => {
-	const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : 520;
+	const viewportWidth = typeof window !== 'undefined' ? windowWidth.value : 520;
 
 	if (viewportWidth < 768) {
 		return '288px';
@@ -218,12 +221,26 @@ const hasCompletedBorrowers = computed(() => {
 	return loans.value.some(loan => loan?.status === ENDED || loan?.status === DEFAULTED);
 });
 
+const handleResize = () => {
+	windowWidth.value = window.innerWidth;
+};
+
+const throttledResize = _throttle(handleResize, 200);
+
 onMounted(() => {
 	if (!hasActiveLoans.value) {
 		$kvTrackEvent('portfolio', 'view', 'no-active-borrowers');
 	} else {
 		$kvTrackEvent('portfolio', 'view', 'active-borrowers', loans.value.length);
 	}
+
+	window.addEventListener('resize', throttledResize);
+
+	handleResize();
+});
+
+onBeforeUnmount(() => {
+	window.removeEventListener('resize', throttledResize);
 });
 
 </script>
diff --git a/src/components/MyKiva/BorrowerStatusCard.vue b/src/components/MyKiva/BorrowerStatusCard.vue
index aab9424e5e..e568f78951 100644
--- a/src/components/MyKiva/BorrowerStatusCard.vue
+++ b/src/components/MyKiva/BorrowerStatusCard.vue
@@ -12,7 +12,7 @@
 							tw-rounded-full tw-shadow tw--mt-5"
 					>
 						<BorrowerImage
-							class="tw-w-full tw-rounded-full tw-bg-brand"
+							class="tw-w-full tw-rounded-full"
 							:alt="borrowerName"
 							:aspect-ratio="1"
 							:default-image="{ width: 80, faceZoom: 50 }"
@@ -29,8 +29,9 @@
 					</h3>
 					<p class="tw-text-center md:tw-text-left">
 						{{ description }}
+						<br>
 						<a
-							class="tw-w-full md:tw-w-auto tw-text-action"
+							class="tw-text-action"
 							:href="`/lend/${loan.id}`"
 							variant="primary"
 							v-kv-track-event="['portfolio', 'click', 'view-details', borrowerName, loan.id]"
@@ -54,7 +55,7 @@
 							:icon="open ? mdiChevronUp : mdiChevronDown"
 						/>
 					</button>
-					<kv-expandable easing="ease-in-out">
+					<kv-expandable easing="ease-in-out" class="tw-block md:tw-hidden">
 						<div v-show="open">
 							<LoanNextSteps
 								class="tw-mb-5"
@@ -65,6 +66,13 @@
 							/>
 						</div>
 					</kv-expandable>
+					<LoanNextSteps
+						class="tw-hidden md:tw-block tw-mb-5"
+						:weeks-to-repay="weeksToRepay"
+						:current-step="currentStep"
+						:repayments-started="!isFundraising"
+						no-animation
+					/>
 				</div>
 			</div>
 		</div>
diff --git a/src/components/MyKiva/MyKivaHero.vue b/src/components/MyKiva/MyKivaHero.vue
index 4f1bc176df..2566d1d040 100644
--- a/src/components/MyKiva/MyKivaHero.vue
+++ b/src/components/MyKiva/MyKivaHero.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="tw-w-full landscape tw-relative">
 		<MyKivaContainer>
-			<div class="tw-bg-white tw-rounded-b tw-absolute tw-top-0 tw-px-1 tw-py-2">
+			<div class="tw-bg-white tw-rounded-b tw-absolute tw-top-0 tw-px-1.5 tw-py-2">
 				<h3>Welcome back 👋</h3>
 				<div
 					v-if="isBorrower || isTrustee"
@@ -37,7 +37,7 @@
 				@click="$emit('show-navigation')"
 			>
 				<kv-material-icon
-					class="tw-absolute tw-right-0 tw-bg-white tw-p-1 tw-rounded-full tw-mt-2"
+					class="tw-absolute tw-right-0 tw-bg-white tw-p-0.5 tw-rounded-full tw-mt-2 tw-shadow-lg"
 					name="settings"
 					:icon="mdiCogOutline"
 				/>
diff --git a/src/components/MyKiva/MyKivaNavigation.vue b/src/components/MyKiva/MyKivaNavigation.vue
index 864f54304f..f8d052ce7c 100644
--- a/src/components/MyKiva/MyKivaNavigation.vue
+++ b/src/components/MyKiva/MyKivaNavigation.vue
@@ -1,19 +1,22 @@
 <template>
 	<div
 		v-if="visible"
-		class="tw-absolute tw-inset-0 tw-bg-black tw-transition-all tw-duration-150 tw-z-modal
-            tw-mt-8 md:tw-mt-9 tw-pt-0.5"
-		:class="{
-			'tw-bg-opacity-0 tw-delay-300': !open,
-			'tw-bg-opacity-low': open,
-		}"
-		@click.self="closeSideSheet"
+		class="tw-absolute tw-inset-0 tw-z-modal tw-mt-8 md:tw-mt-9 tw-pt-0.5 tw-overflow-hidden"
 	>
 		<div
-			class="tw-absolute tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-rounded-l-lg"
+			class="tw-absolute tw-inset-0 tw-bg-black tw-transition-all tw-duration-150"
 			:class="{
-				'tw-w-0 tw-p-0 tw-delay-200': !open,
-				'is-open tw-p-3': open,
+				'tw-bg-opacity-0 tw-delay-300': !open,
+				'tw-bg-opacity-low': open,
+			}"
+			@click.self="closeSideSheet"
+		></div>
+		<div
+			class="my-kiva-navigation tw-absolute tw-right-0 tw-transition-all tw-duration-300 tw-bg-white
+				tw-rounded-l-lg tw-p-3"
+			:class="{
+				'tw-translate-x-full tw-delay-200': !open,
+				'tw-translate-x-0 tw-p-3': open,
 			}"
 		>
 			<div
@@ -54,7 +57,7 @@
 								hover:tw-translate-x-1 hover:lg:tw-translate-x-2 tw-duration-300 tw-delay-100"
 						>
 							<router-link
-								class="tw-text-primary tw-font-medium"
+								class="tw-text-primary tw-font-medium tw-block"
 								:to="setting.link"
 								v-kv-track-event="[
 									'SecondaryNav links',
@@ -198,8 +201,9 @@ watch(visible, () => {
 </script>
 
 <style lang="postcss" scoped>
-.is-open {
+.my-kiva-navigation {
 	width: 20rem;
+
 	@screen md {
 		width: 25rem;
 	}
diff --git a/src/components/MyKiva/MyKivaProfile.vue b/src/components/MyKiva/MyKivaProfile.vue
index f09401d121..355d16460c 100644
--- a/src/components/MyKiva/MyKivaProfile.vue
+++ b/src/components/MyKiva/MyKivaProfile.vue
@@ -1,12 +1,12 @@
 <template>
 	<MyKivaContainer>
-		<div class="profile tw-flex tw-items-end tw-justify-end tw-gap-3">
+		<div class="profile tw-flex tw-items-end tw-justify-end tw-gap-4">
 			<KvLoadingPlaceholder
 				v-if="isLoading"
-				class="!tw-h-5 tw-mt-6 md:tw-mt-0"
+				class="!tw-h-5 tw-mt-6 md:tw-mt-0 tw-mr-auto md:tw-mr-0"
 				:style="{ width: '10rem' }"
 			/>
-			<h2 v-else>
+			<h2 v-else class="tw-mr-auto md:tw-mr-0">
 				{{ lenderName }}
 			</h2>
 			<a
diff --git a/src/components/Thanks/LoanNextSteps.vue b/src/components/Thanks/LoanNextSteps.vue
index d31e90d732..823f283d97 100644
--- a/src/components/Thanks/LoanNextSteps.vue
+++ b/src/components/Thanks/LoanNextSteps.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="steps-container">
+	<div class="tw-flex tw-flex-col">
 		<ul class="steps-list tw-flex tw-flex-col tw-justify-end tw-gap-1">
 			<li
 				v-for="(step, index) in steps"
@@ -82,10 +82,6 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
-.steps-container {
-	@apply tw-flex tw-flex-col;
-}
-
 .steps-list {
 	@apply tw-list-none tw-p-0 tw-relative;
 }
diff --git a/src/pages/Portfolio/MyKiva/MyKivaPage.vue b/src/pages/Portfolio/MyKiva/MyKivaPage.vue
index 2bd06205d3..25047cddf0 100644
--- a/src/pages/Portfolio/MyKiva/MyKivaPage.vue
+++ b/src/pages/Portfolio/MyKiva/MyKivaPage.vue
@@ -1,5 +1,5 @@
 <template>
-	<www-page main-class="tw-bg-secondary">
+	<www-page main-class="tw-bg-secondary tw-overflow-hidden" class="tw-relative">
 		<MyKivaNavigation
 			:visible="showNavigation"
 			:user-balance="userBalance"