From 91a88d8f28b1610037f4e827c85d0f58dfc6cc5a Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Fri, 27 Oct 2023 23:16:31 +0100
Subject: [PATCH] update pp-blue and more accessibility stuff

---
 src/components/Avatar.tsx            | 1 +
 src/components/Pagination.tsx        | 8 ++++----
 src/components/player/PlayerInfo.tsx | 9 +++++----
 tailwind.config.ts                   | 3 +++
 4 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 95ba2bd..38f777c 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -22,6 +22,7 @@ export default function Avatar({
         src={url}
         width={size}
         height={size}
+        priority
       />
     </>
   );
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index 7f681b6..7b8c55a 100644
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@@ -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>
diff --git a/src/components/player/PlayerInfo.tsx b/src/components/player/PlayerInfo.tsx
index 6962dab..9e7efb9 100644
--- a/src/components/player/PlayerInfo.tsx
+++ b/src/components/player/PlayerInfo.tsx
@@ -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),
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 843b05b..273055e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -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",
       },