Fascinated/scoresaber-reloaded-v2
1
2
Fork 0
Code Issues 1 Pull Requests 10 Actions Activity

update pp-blue and more accessibility stuff
All checks were successful
deploy / deploy (push) Successful in 53s
Details

Browse Source
This commit is contained in:
Lee 2023-10-27 23:16:31 +01:00
parent 2f333e26b8
commit 91a88d8f28
4 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Avatar.tsx
View File

@ -22,6 +22,7 @@ export default function Avatar({
src={url}
width={size}
height={size}
priority
/>
</>
);

8
src/components/Pagination.tsx
View File

@ -31,7 +31,7 @@ export default function Pagination(props: PaginationProps) {
<button
className="px-3 py-1"
onClick={() => onPageChange(currentPage - 1)}
aria-label="Previous Page"
aria-label={`Page ${currentPage - 1} (previous page)`}
>
<ArrowUturnLeftIcon width={20} height={20} />
</button>
@ -44,7 +44,7 @@ export default function Pagination(props: PaginationProps) {
<button
className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80"
onClick={() => onPageChange(1)}
aria-label="First Page"
aria-label="Page 1 (first page)"
>
1
</button>
@ -81,7 +81,7 @@ export default function Pagination(props: PaginationProps) {
<button
className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80"
onClick={() => onPageChange(totalPages)}
aria-label="Last Page"
aria-label={`Page ${totalPages} (last page)`}
>
{totalPages}
</button>
@ -94,7 +94,7 @@ export default function Pagination(props: PaginationProps) {
<button
className="px-3 py-1"
onClick={() => onPageChange(currentPage + 1)}
aria-label="Next Page"
aria-label={`Page ${currentPage + 1} (next page)`}
>
<ArrowUturnRightIcon width={20} height={20} />
</button>

9
src/components/player/PlayerInfo.tsx
View File

@ -192,13 +192,14 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
countryCode={playerData.country}
svg
className="!h-7 !w-7"
alt="Country Flag"
/>
<p>#{formatNumber(playerData.countryRank)}</p>
</a>
</div>
{/* PP */}
<div className="text-pp-blue flex items-center">
<div className="flex items-center text-pp-blue">
<p>{formatNumber(playerData.pp)}pp</p>
</div>
</div>
@ -237,7 +238,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
<>
<Label
title="Top PP"
className="bg-[#8992e8]"
className="bg-pp-blue"
hoverValue="Highest pp play"
value={`${formatNumber(
getHighestPpPlay(playerId)?.toFixed(2),
@ -245,7 +246,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
/>
<Label
title="Avg PP"
className="bg-[#8992e8]"
className="bg-pp-blue"
hoverValue="Average amount of pp per play (best 20 scores)"
value={`${formatNumber(
getAveragePp(playerId)?.toFixed(2),
@ -253,7 +254,7 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
/>
<Label
title="+ 1pp"
className="bg-[#8992e8]"
className="bg-pp-blue"
hoverValue="Amount of raw pp required to increase your global pp by 1pp"
value={`${formatNumber(
calcPpBoundary(playerId, 1)?.toFixed(2),

3
tailwind.config.ts
View File

@ -15,6 +15,9 @@ const config: Config = {
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
backgroundColor: {
"pp-blue": "#5763c9",
},
textColor: {
"pp-blue": "#9fa8f3",
},