Firehawk52-backup/hydra
28
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2026-01-15 16:33:02 -03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Moyasee
2025-10-02 01:30:44 +03:00
parent 461da55070
commit 19cf24ef48
4 changed files with 47 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/src/pages/game-details/game-details-content.tsx
View File

@@ -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}`);

2
src/renderer/src/pages/game-details/game-details.scss
View File

@@ -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);
}

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

@@ -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;

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

@@ -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>