feat: changed profile pictures in reviews to squares, changed sorting buttons

src/renderer/src/pages/game-details/game-details-content.tsx

@@ -666,7 +666,7 @@ export function GameDetailsContent() {
                                   navigate(`/profile/${review.user.id}`)
                                 }
                                 onKeyDown={(e) => {
-                                  if (e.key === 'Enter' || e.key === ' ') {
+                                  if (e.key === "Enter" || e.key === " ") {
                                     e.preventDefault();
                                     review.user?.id &&
                                       navigate(`/profile/${review.user.id}`);

src/renderer/src/pages/game-details/game-details.scss

@@ -252,7 +252,7 @@ $hero-height: 300px;
   &__review-avatar {
     width: 32px;
     height: 32px;
-    border-radius: 50%;
+    border-radius: 4px;
     object-fit: cover;
     border: 2px solid rgba(255, 255, 255, 0.1);
   }

src/renderer/src/pages/game-details/review-sort-options.scss

@@ -61,6 +61,21 @@
     }
   }
 
+  &__toggle-option {
+    &.active {
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 4px;
+      padding: 6px 8px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    &:hover:not(:disabled) {
+      background: rgba(255, 255, 255, 0.03);
+      border-radius: 4px;
+      padding: 6px 8px;
+    }
+  }
+
   &__separator {
     color: rgba(255, 255, 255, 0.3);
     font-size: 14px;

src/renderer/src/pages/game-details/review-sort-options.tsx

@@ -1,8 +1,7 @@
 import {
-  CalendarIcon,
-  StarIcon,
   ThumbsupIcon,
-  ClockIcon,
+  ChevronUpIcon,
+  ChevronDownIcon,
 } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
 import "./review-sort-options.scss";
@@ -25,44 +24,46 @@ export function ReviewSortOptions({
 }: ReviewSortOptionsProps) {
   const { t } = useTranslation("game_details");
 
+  const handleDateToggle = () => {
+    const newSort = sortBy === "newest" ? "oldest" : "newest";
+    onSortChange(newSort);
+  };
+
+  const handleScoreToggle = () => {
+    const newSort = sortBy === "score_high" ? "score_low" : "score_high";
+    onSortChange(newSort);
+  };
+
+  const handleMostVotedClick = () => {
+    onSortChange("most_voted");
+  };
+
+  const isDateActive = sortBy === "newest" || sortBy === "oldest";
+  const isScoreActive = sortBy === "score_high" || sortBy === "score_low";
+  const isMostVotedActive = sortBy === "most_voted";
+
   return (
     <div className="review-sort-options__container">
       <div className="review-sort-options__options">
         <button
-          className={`review-sort-options__option ${sortBy === "newest" ? "active" : ""}`}
+          className={`review-sort-options__option review-sort-options__toggle-option ${isDateActive ? "active" : ""}`}
-          onClick={() => onSortChange("newest")}
+          onClick={handleDateToggle}
         >
-          <CalendarIcon size={16} />
+          {sortBy === "newest" ? <ChevronDownIcon size={16} /> : <ChevronUpIcon size={16} />}
-          <span>{t("sort_newest")}</span>
+          <span>{sortBy === "oldest" ? t("sort_oldest") : t("sort_newest")}</span>
         </button>
         <span className="review-sort-options__separator">|</span>
         <button
-          className={`review-sort-options__option ${sortBy === "oldest" ? "active" : ""}`}
+          className={`review-sort-options__option review-sort-options__toggle-option ${isScoreActive ? "active" : ""}`}
-          onClick={() => onSortChange("oldest")}
+          onClick={handleScoreToggle}
         >
-          <ClockIcon size={16} />
+          {sortBy === "score_high" ? <ChevronDownIcon size={16} /> : <ChevronUpIcon size={16} />}
-          <span>{t("sort_oldest")}</span>
+          <span>{sortBy === "score_low" ? t("sort_lowest_score") : t("sort_highest_score")}</span>
         </button>
         <span className="review-sort-options__separator">|</span>
         <button
-          className={`review-sort-options__option ${sortBy === "score_high" ? "active" : ""}`}
+          className={`review-sort-options__option ${isMostVotedActive ? "active" : ""}`}
-          onClick={() => onSortChange("score_high")}
+          onClick={handleMostVotedClick}
-        >
-          <StarIcon size={16} />
-          <span>{t("sort_highest_score")}</span>
-        </button>
-        <span className="review-sort-options__separator">|</span>
-        <button
-          className={`review-sort-options__option ${sortBy === "score_low" ? "active" : ""}`}
-          onClick={() => onSortChange("score_low")}
-        >
-          <StarIcon size={16} />
-          <span>{t("sort_lowest_score")}</span>
-        </button>
-        <span className="review-sort-options__separator">|</span>
-        <button
-          className={`review-sort-options__option ${sortBy === "most_voted" ? "active" : ""}`}
-          onClick={() => onSortChange("most_voted")}
         >
           <ThumbsupIcon size={16} />
           <span>{t("sort_most_voted")}</span>