feat: icon buttons for page turner

src/app/page.tsx

@@ -20,7 +20,6 @@ import { debounce } from 'lodash';
 import { useRef, useState } from 'react';
 import { Link } from '../components/Link';
 import { NAVBAR_HEIGHT } from '../components/Navbar';
-import PageWrapper from '../components/PageWrapper';
 import { UNLOCALIZED_REGION_NAMES_SHORT } from '../constants/regions';
 import searchPlayersAcrossRegions, {
   AccountListWithServer,
@@ -346,10 +345,6 @@ export default function Page() {
         </Flex>
       </Flex>
 
-      <PageWrapper noFlex1>
-        {/* hello there! ignore my existence pretty please :&#41; */}
-      </PageWrapper>
-
       <div style={{ flex: 1 }} />
     </>
   );

src/app/tools/rating/components/PageTurner/index.tsx

@@ -3,7 +3,7 @@ import {
   CaretRightIcon,
   SymbolIcon,
 } from '@radix-ui/react-icons';
-import { Button, Flex, TextField } from '@radix-ui/themes';
+import { Flex, IconButton, TextField } from '@radix-ui/themes';
 import { range } from 'lodash';
 import { useEffect, useRef } from 'react';
 import { infiniteSpin } from './index.css';
@@ -42,7 +42,7 @@ export function PageTurner({
   return (
     <Flex justify="center" wrap="wrap" gap="2">
       <Flex gap="2">
-        <Button
+        <IconButton
           variant="soft"
           onClick={() => onPageChange(Math.max(page - 1, 0), true)}
           disabled={page === 0 || leftLoading}
@@ -52,7 +52,7 @@ export function PageTurner({
           ) : (
             <CaretLeftIcon />
           )}
-        </Button>
+        </IconButton>
 
         <TextField.Root
           type="number"
@@ -75,7 +75,7 @@ export function PageTurner({
           <TextField.Slot>Page</TextField.Slot>
           <TextField.Slot>out of {pages}</TextField.Slot>
         </TextField.Root>
-        <Button
+        <IconButton
           variant="soft"
           onClick={() => {
             onPageChange(Math.min(page + 1, pages - 1), true);
@@ -87,7 +87,7 @@ export function PageTurner({
           ) : (
             <CaretRightIcon />
           )}
-        </Button>
+        </IconButton>
       </Flex>
     </Flex>
   );

src/app/tools/tankopedia/components/PageTurner.tsx

@@ -1,5 +1,5 @@
 import { CaretLeftIcon, CaretRightIcon } from '@radix-ui/react-icons';
-import { Button, Flex, TextField } from '@radix-ui/themes';
+import { Flex, IconButton, TextField } from '@radix-ui/themes';
 import { useEffect, useRef } from 'react';
 import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
 import mutateTankopediaPersistent, {
@@ -21,7 +21,7 @@ export function PageTurner({ searchedList, tanksPerPage }: PageTurnerProps) {
 
   return (
     <Flex align="center" justify="center" gap="2">
-      <Button
+      <IconButton
         variant="soft"
         disabled={page === 0}
         onClick={() => {
@@ -31,7 +31,7 @@ export function PageTurner({ searchedList, tanksPerPage }: PageTurnerProps) {
         }}
       >
         <CaretLeftIcon />
-      </Button>
+      </IconButton>
       <TextField.Root
         defaultValue={1}
         type="number"
@@ -61,7 +61,7 @@ export function PageTurner({ searchedList, tanksPerPage }: PageTurnerProps) {
           out of {Math.floor(searchedList.length / tanksPerPage) + 1}
         </TextField.Slot>
       </TextField.Root>
-      <Button
+      <IconButton
         variant="soft"
         disabled={Math.floor(searchedList.length / tanksPerPage) === page}
         onClick={() => {
@@ -74,7 +74,7 @@ export function PageTurner({ searchedList, tanksPerPage }: PageTurnerProps) {
         }}
       >
         <CaretRightIcon />
-      </Button>
+      </IconButton>
     </Flex>
   );
 }