make icons larger on navbar

src/components/GlobalRanking.tsx

@@ -146,10 +146,7 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
                   </thead>
                   <tbody className="border-none">
                     {players.map((player) => (
-                      <tr
-                        key={player.rank}
-                        className="border-b border-gray-700"
-                      >
+                      <tr key={player.rank} className="border-b border-border">
                         <PlayerRanking
                           showCountryFlag={country ? false : true}
                           player={player}
@@ -165,7 +162,7 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
                   {players.map((player) => (
                     <div
                       key={player.rank}
-                      className="flex flex-col gap-2 rounded-md bg-gray-700 hover:bg-gray-600"
+                      className="flex flex-col gap-2 rounded-md bg-background"
                     >
                       <Link href={`/player/${player.id}/top/1`}>
                         <PlayerRankingMobile player={player} />

src/components/Navbar.tsx

@@ -46,7 +46,7 @@ function FriendsButton() {
         <NavbarButton
           ariaLabel="View your friends"
           text="Friends"
-          icon={<UserIcon height={20} width={20} />}
+          icon={<UserIcon height={23} width={23} />}
         />
       </PopoverTrigger>
       <PopoverContent className="p-2">
@@ -107,7 +107,7 @@ export default function Navbar() {
               <Avatar
                 url={settingsStore.player.profilePicture}
                 label="Your avatar"
-                size={20}
+                size={23}
               />
             }
             href={`/player/${settingsStore.player.id}/top/1`}
@@ -126,13 +126,13 @@ export default function Navbar() {
         <NavbarButton
           ariaLabel="View the global ranking"
           text="Ranking"
-          icon={<GlobeAltIcon height={20} width={20} />}
+          icon={<GlobeAltIcon height={23} width={23} />}
           href="/ranking/global/1"
         />
         <NavbarButton
           ariaLabel="View analytics for Scoresaber"
           text="Analytics"
-          icon={<ServerIcon height={20} width={20} />}
+          icon={<ServerIcon height={23} width={23} />}
           href="/analytics"
         />
 
@@ -141,13 +141,13 @@ export default function Navbar() {
         <NavbarButton
           ariaLabel="Search for a player"
           text="Search"
-          icon={<MagnifyingGlassIcon height={20} width={20} />}
+          icon={<MagnifyingGlassIcon height={23} width={23} />}
           href="/search"
         />
         <NavbarButton
           ariaLabel="View your settings"
           text="Settings"
-          icon={<CogIcon height={20} width={20} />}
+          icon={<CogIcon height={23} width={23} />}
           href="/settings"
         />
       </Card>

src/components/player/Scores.tsx

@@ -128,7 +128,7 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
             <Spinner />
           </div>
         ) : (
-          <div className="grid grid-cols-1 divide-y divide-gray-700">
+          <div className="grid grid-cols-1 divide-y divide-border">
             {!scores.loading && scores.scores.length == 0 ? (
               <p className="text-red-400">{errorMessage}</p>
             ) : (