fix: size of league name and spacing

This commit is contained in:
botprzemek 2025-10-20 04:09:12 +02:00
parent 522d011618
commit d85e27bce0

View file

@ -5,9 +5,9 @@
<div
ref="leagueBorder"
:style="{ backgroundColor: colorBorder }"
class="percentage-circle relative flex h-12 w-12 items-center justify-center rounded-full"
class="percentage-circle flex size-12 items-center justify-center rounded-full"
>
<div class="relative h-11 w-11 rounded-full bg-blue-900 p-1">
<div class="relative size-11 rounded-full bg-blue-900 p-1">
<div
class="mt-0.5 h-full bg-cover bg-center"
:style="{ backgroundImage: `url(${selectedLeague.rankImgLink})` }"
@ -16,8 +16,8 @@
</div>
<div class="ml-2 text-3xl font-bold uppercase text-teal-500">
{{ selectedLeague.fullRank }}
<span class="ml-2 text-2xl text-white">{{ selectedLeague.leaguePoints }} LP</span>
</div>
<div class="ml-4 text-2xl font-bold">{{ selectedLeague.leaguePoints }} LP</div>
<div
v-if="selectedLeague.miniSeries"
class="ml-2 flex items-center rounded bg-blue-800 p-2"
@ -30,11 +30,11 @@
></div>
</div>
</div>
<div class="mt-2 flex items-center">
<div class="relative inline-block text-white">
<div class="mt-2 flex items-center gap-2">
<div class="relative inline text-white shadow-sm">
<select
v-model="selectedKey"
class="block w-full cursor-pointer appearance-none rounded-md bg-blue-800 px-4 py-2 pr-8 text-lg font-bold leading-tight hover:bg-blue-700 focus:outline-none"
class="block w-full cursor-pointer appearance-none rounded-md bg-blue-800 py-2 pl-4 pr-8 font-bold leading-tight hover:bg-blue-700 focus:outline-none"
>
<option v-for="(data, leagueName) in ranked" :key="leagueName" :value="leagueName">
{{ data.name }}
@ -43,16 +43,16 @@
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
>
<svg class="h-5 w-5 text-white">
<svg class="size-5 text-white">
<use xlink:href="#chevron-down" />
</svg>
</div>
</div>
<div class="ml-2 flex items-center rounded bg-blue-800 p-2">
<div class="flex items-center rounded bg-blue-800 px-4 py-2 shadow-sm">
<div class="text-base font-semibold uppercase">Record</div>
<div class="ml-2 font-semibold text-green-400">{{ selectedLeague.wins }}</div>
<div class="ml-2 font-semibold text-green-400">{{ selectedLeague.wins }}W</div>
<span class="mx-1">-</span>
<div class="font-semibold text-red-400">{{ selectedLeague.losses }}</div>
<div class="font-semibold text-red-400">{{ selectedLeague.losses }}L</div>
<div class="ml-3 text-base font-semibold uppercase">Winrate</div>
<div
:class="[