borders

src/app.css

@@ -199,6 +199,6 @@
 		@apply transition-all duration-200;
 	}
 	.person-item {
-		@apply cursor-help transition-all duration-1000;
+		@apply cursor-help transition-all duration-500;
 	}
 }

src/lib/components/PeopleList.svelte

@@ -22,7 +22,10 @@
 
 <div class="grid gap-4 grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
 	{#each items.map(getPerson) as item}
-		<div class=" hover:bg-white hover:text-black person-item" on:mouseenter={animateSpeaker}>
+		<div
+			class=" hover:bg-white hover:text-black person-item border border-white/30"
+			on:mouseenter={animateSpeaker}
+		>
 			<div>
 				<img src="/people/{item.img}" class="grayscale invert aspect-square object-cover w-full" />
 			</div>

src/lib/components/Web3Dialog.svelte

@@ -151,16 +151,16 @@
 				<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 lg:gap-12">
 					{#each badges as badge}
 						<div
-							class="justify-center text-center badge pt-4 {userBadges?.badges &&
+							class="justify-center text-center badge p-4 border border-white/30 hover:border-white border-dashed {userBadges?.badges &&
 							userBadges?.badges[badge?.id]?.eligible
 								? 'bg-white text-black eligible'
-								: ' border-gray-800'}"
+								: ''}"
 							on:mouseenter={animateSection(30)}
 						>
 							<div class="mb-6 text-center">
 								<img
 									src={badge.img}
-									class="w-20 h-28 lg:w-32 lg:h-32 {connected &&
+									class="w-2/5 aspect-square {connected &&
 									userBadges &&
 									userBadges.badges[badge.id]?.eligible
 										? ''