From 19cf24ef489e04045c9b9d3c8e3facb8e4c23f06 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Thu, 2 Oct 2025 01:30:44 +0300
Subject: [PATCH] feat: changed profile pictures in reviews to squares, changed
 sorting buttons

---
 .../game-details/game-details-content.tsx     |  2 +-
 .../src/pages/game-details/game-details.scss  |  2 +-
 .../game-details/review-sort-options.scss     | 15 +++++
 .../game-details/review-sort-options.tsx      | 59 ++++++++++---------
 4 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/src/renderer/src/pages/game-details/game-details-content.tsx b/src/renderer/src/pages/game-details/game-details-content.tsx
index 0c53177f..6f2558ef 100644
--- a/src/renderer/src/pages/game-details/game-details-content.tsx
+++ b/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}`);
diff --git a/src/renderer/src/pages/game-details/game-details.scss b/src/renderer/src/pages/game-details/game-details.scss
index f6b724ab..fe097839 100644
--- a/src/renderer/src/pages/game-details/game-details.scss
+++ b/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);
   }
diff --git a/src/renderer/src/pages/game-details/review-sort-options.scss b/src/renderer/src/pages/game-details/review-sort-options.scss
index 5b374728..eafe9972 100644
--- a/src/renderer/src/pages/game-details/review-sort-options.scss
+++ b/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;
diff --git a/src/renderer/src/pages/game-details/review-sort-options.tsx b/src/renderer/src/pages/game-details/review-sort-options.tsx
index 858faefd..fc7f431a 100644
--- a/src/renderer/src/pages/game-details/review-sort-options.tsx
+++ b/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" : ""}`}
-          onClick={() => onSortChange("newest")}
+          className={`review-sort-options__option review-sort-options__toggle-option ${isDateActive ? "active" : ""}`}
+          onClick={handleDateToggle}
         >
-          <CalendarIcon size={16} />
-          <span>{t("sort_newest")}</span>
+          {sortBy === "newest" ? <ChevronDownIcon size={16} /> : <ChevronUpIcon size={16} />}
+          <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" : ""}`}
-          onClick={() => onSortChange("oldest")}
+          className={`review-sort-options__option review-sort-options__toggle-option ${isScoreActive ? "active" : ""}`}
+          onClick={handleScoreToggle}
         >
-          <ClockIcon size={16} />
-          <span>{t("sort_oldest")}</span>
+          {sortBy === "score_high" ? <ChevronDownIcon size={16} /> : <ChevronUpIcon size={16} />}
+          <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" : ""}`}
-          onClick={() => onSortChange("score_high")}
-        >
-          <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")}
+          className={`review-sort-options__option ${isMostVotedActive ? "active" : ""}`}
+          onClick={handleMostVotedClick}
         >
           <ThumbsupIcon size={16} />
           <span>{t("sort_most_voted")}</span>