update pp-blue and more accessibility stuff

src/components/Avatar.tsx

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

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>

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),

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",
       },