feat: teams page tweaks (#5054)

* feat: team leader board updated

* feat: loan because text hidden when field is empty

* fix: checkout fo loanbecause text instead of the truncation method

src/pages/LendingTeams/TeamLeaderboard.vue

@@ -10,7 +10,11 @@
 				Member Count:
 			</template>
 		</h4>
-		<kv-tabs class="tw-px-1" @tab-changed="handleTabChanged">
+		<kv-tabs
+			class="tw-px-1"
+			:class="{ 'members-tabs' : showMembersText, 'tw-pb-2' : showMembersText && isLoading }"
+			@tab-changed="handleTabChanged"
+		>
 			<template #tabNav>
 				<kv-tab
 					for-panel="thisMonth"
@@ -35,6 +39,9 @@
 				</kv-tab>
 			</template>
 			<template #tabPanels>
+				<p v-if="showMembersText" class="tw-text-small tw-my-0.5">
+					Only members who have lent at least once are counted
+				</p>
 				<kv-tab-panel
 					v-for="timeFrame in ['thisMonth', 'lastMonth', 'allTime']"
 					:id="timeFrame"
@@ -72,7 +79,7 @@
 							tw-overflow-hidden tw-whitespace-nowrap"
 						>
 							<div
-								class="tw-flex tw-flex-nowrap tw-flex-none tw-w-full"
+								class="tw-flex tw-flex-col tw-flex-nowrap tw-flex-none tw-w-full"
 							>
 								<div class="tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-text-base">
 									<router-link
@@ -87,10 +94,10 @@
 								</div>
 								<div class="tw-flex-none tw-ml-1">
 									<template v-if="!isNewMembers">
-										{{ numeral(leaderboardTeam.value).format('$0,0a') }}
+										{{ numeral(leaderboardTeam.value).format('$0,0') }}
 									</template>
 									<template v-else>
-										{{ numeral(leaderboardTeam.value).format('0,0a') }}
+										{{ numeral(leaderboardTeam.value).format('0,0') }}
 									</template>
 								</div>
 							</div>
@@ -176,6 +183,9 @@ export default {
 			if (this.isNewMembers) {
 				return 'Total Amount of Members the Team has';
 			} return 'Total Amount the Team has lent';
+		},
+		showMembersText() {
+			return this.isNewMembers && [0, 1].includes(this.selectedTabIndex);
 		}
 	},
 	methods: {
@@ -207,3 +217,9 @@ export default {
 	},
 };
 </script>
+
+<style scoped lang="postcss">
+	.members-tabs >>> div {
+		@apply tw-mb-0;
+	}
+</style>

src/pages/LendingTeams/TeamListing.vue

@@ -161,6 +161,7 @@
 			>
 				<p
 					class="tw-text-small tw-text-primary tw-flex-1"
+					v-if="team.loanBecause"
 				>
 					We loan because: {{ shortLoanBecause(team.loanBecause) }}
 				</p>