discount fixes

src/lib/components/Web3Dialog.svelte

@@ -148,23 +148,26 @@
 					group
 				</div>
 			{:else}
+				<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="lg:flex justify-center mb-4 badge {userBadges?.badges &&
+							class="justify-center text-center badge {userBadges?.badges &&
 							userBadges?.badges[badge?.id]?.eligible
 								? 'bg-white text-black eligible'
-							: ' border-gray-800'} p-6"
+								: ' border-gray-800'}"
 							on:mouseenter={animateSection(30)}
 						>
-						<div class="w-24 lg:w-32 mr-6 inline-block xl:block">
+							<div class="mb-6 text-center">
 								<img
 									src={badge.img}
-								class="w-full {connected && userBadges && userBadges.badges[badge.id]?.eligible
+									class="w-20 h-28 lg:w-32 lg:h-32 {connected &&
+									userBadges &&
+									userBadges.badges[badge.id]?.eligible
 										? ''
-									: 'grayscale'} badge-image"
+										: 'grayscale'} badge-image inline-block object-contain"
 								/>
 							</div>
-						<div class="lg:text-left w-full">
+							<div class="w-full">
 								{#if badge.shortname}<div class="uppercase font-bold">{badge.shortname}</div>{/if}
 								<div class={badge.shortname ? '' : 'font-bold'}>
 									<a
@@ -173,8 +176,8 @@
 										class="external animate-section font-mono2 lowercase">{badge.name}</a
 									>
 								</div>
-							<div class="mt-2">
+								<div class="mt-4">
-								Price: <span class="font-bold"
+									Ticket: <span class="font-bold"
 										>€{data.config.ticketBasePrice -
 											data.config.ticketBasePrice * (badge.discount / 100)}</span
 									>
@@ -187,7 +190,8 @@
 												Your personal voucher: <a
 													href={redeemUrl + claimed[badge.id].voucher}
 													target="_blank"
-												class="underline hover:no-underline external">{claimed[badge.id].voucher}</a
+													class="underline hover:no-underline external"
+													>{claimed[badge.id].voucher}</a
 												>
 												<div class="pt-2">
 													<a href={redeemUrl + claimed[badge.id].voucher} target="_blank"
@@ -215,14 +219,15 @@
 									</div>
 								{/if}
 								{#if badge.text}
-								<div class="text-sm leading-6 pt-2 text-mild">{badge.text}</div>
+									<div class="text-sm leading-6 pt-4 text-mild">{badge.text}</div>
 								{/if}
 							</div>
 						</div>
 					{/each}
+				</div>
 			{/if}
 		</div>
-		<div class="text-xl font-mono2 lowercase mb-8" on:mouseenter={animateText}>
+		<div class="text-xl font-mono2 lowercase mt-12 mb-8" on:mouseenter={animateText}>
 			Other discounts (via form)
 		</div>
 		<div class="text-mild">