From 72562b13efaf2329f3410d9674e008417fe88252 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Sat, 4 Oct 2025 20:14:27 +0300
Subject: [PATCH] Feat: Rating score display redesign, Rating choosing
 redesign, added avg rating on the game page

---
 .../game-details/game-details-content.tsx     | 35 ++++++++++++-------
 .../src/pages/game-details/game-details.scss  |  4 ++-
 .../pages/game-details/sidebar/sidebar.scss   |  1 -
 3 files changed, 26 insertions(+), 14 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 03959506..9e0ea490 100644
--- a/src/renderer/src/pages/game-details/game-details-content.tsx
+++ b/src/renderer/src/pages/game-details/game-details-content.tsx
@@ -615,13 +615,20 @@ export function GameDetailsContent() {
                             </span>
                           </div>
                         </div>
-                        <div 
+                        <div
                           className="game-details__review-input"
                           onClick={() => editor?.commands.focus()}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                              e.preventDefault();
+                              editor?.commands.focus();
+                            }
+                          }}
+                          role="textbox"
+                          tabIndex={0}
+                          aria-label={t("write_review_placeholder")}
                         >
-                          <EditorContent
-                            editor={editor}
-                          />
+                          <EditorContent editor={editor} />
                         </div>
                       </div>
 
@@ -632,17 +639,19 @@ export function GameDetailsContent() {
                           </label>
                           <select
                             className={`game-details__review-score-select ${
-                              reviewScore 
-                                ? reviewScore <= 3 
-                                  ? 'game-details__review-score-select--red'
+                              reviewScore
+                                ? reviewScore <= 3
+                                  ? "game-details__review-score-select--red"
                                   : reviewScore <= 7
-                                  ? 'game-details__review-score-select--yellow'
-                                  : 'game-details__review-score-select--green'
-                                : ''
+                                    ? "game-details__review-score-select--yellow"
+                                    : "game-details__review-score-select--green"
+                                : ""
                             }`}
                             value={reviewScore || ""}
                             onChange={(e) =>
-                              setReviewScore(e.target.value ? Number(e.target.value) : null)
+                              setReviewScore(
+                                e.target.value ? Number(e.target.value) : null
+                              )
                             }
                           >
                             <option value="" disabled>
@@ -762,7 +771,9 @@ export function GameDetailsContent() {
                                 </div>
                               </div>
                             </div>
-                            <div className={`game-details__review-score ${getScoreColorClass(review.score)}`}>
+                            <div
+                              className={`game-details__review-score ${getScoreColorClass(review.score)}`}
+                            >
                               {review.score}/10
                             </div>
                           </div>
diff --git a/src/renderer/src/pages/game-details/game-details.scss b/src/renderer/src/pages/game-details/game-details.scss
index 76b6cdcb..83758524 100644
--- a/src/renderer/src/pages/game-details/game-details.scss
+++ b/src/renderer/src/pages/game-details/game-details.scss
@@ -75,7 +75,9 @@ $hero-height: 300px;
     padding: 6px 12px;
     font-size: 14px;
     cursor: pointer;
-    transition: border-color 0.2s ease, background-color 0.2s ease;
+    transition:
+      border-color 0.2s ease,
+      background-color 0.2s ease;
 
     &:focus {
       outline: none;
diff --git a/src/renderer/src/pages/game-details/sidebar/sidebar.scss b/src/renderer/src/pages/game-details/sidebar/sidebar.scss
index b48e8a8f..1330d278 100755
--- a/src/renderer/src/pages/game-details/sidebar/sidebar.scss
+++ b/src/renderer/src/pages/game-details/sidebar/sidebar.scss
@@ -115,7 +115,6 @@
     @media (min-width: 1024px) {
       flex-direction: column;
     }
-
   }
 
   &__category-title {