Fix: Format-check fail and translations. Feat: added animations to upvote and downvote buttons

src/locales/en/translation.json

@@ -213,7 +213,6 @@
     "leave_a_review": "Leave a Review",
     "write_review_placeholder": "Share your thoughts about this game...",
     "sort_newest": "Newest",
-    "sort_by": "Sort by",
     "no_reviews_yet": "No reviews yet",
     "be_first_to_review": "Be the first to share your thoughts about this game!",
     "sort_oldest": "Oldest",
@@ -226,7 +225,6 @@
     "loading_reviews": "Loading reviews...",
     "loading_more_reviews": "Loading more reviews...",
     "load_more_reviews": "Load More Reviews",
-    "youve_played_for_hours": "You've played for {{hours}} hours",
     "would_you_recommend_this_game": "Would you like to leave a review to this game?",
     "yes": "Yes",
     "maybe_later": "Maybe Later",
@@ -330,8 +328,8 @@
     "delete_review": "Delete review",
     "delete_review_modal_title": "Are you sure you want to delete your review?",
     "delete_review_modal_description": "This action cannot be undone.",
-    "delete_review_button": "Delete",
+    "delete_review_modal_delete_button": "Delete",
-    "delete_review_karma_warning": "You will lose any karma points earned from this review."
+    "delete_review_modal_cancel_button": "Cancel"
   },
   "activation": {
     "title": "Activate Hydra",

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

@@ -4,6 +4,7 @@ import { ThumbsUp, ThumbsDown } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
+import { motion } from "framer-motion";
 import type { GameReview } from "@types";
 
 import { HeroPanel } from "./hero";
@@ -131,7 +132,7 @@ export function GameDetailsContent() {
       },
       handlePaste: (view, event) => {
         // Strip formatting from pasted content to prevent overflow issues
-        const text = event.clipboardData?.getData('text/plain') || '';
+        const text = event.clipboardData?.getData("text/plain") || "";
         const currentText = view.state.doc.textContent;
         const remainingChars = MAX_REVIEW_CHARS - currentText.length;
 
@@ -293,7 +294,12 @@ export function GameDetailsContent() {
     console.log("reviewScore:", reviewScore);
     console.log("submittingReview:", submittingReview);
 
-    if (!objectId || !reviewHtml.trim() || submittingReview || reviewCharCount > MAX_REVIEW_CHARS) {
+    if (
+      !objectId ||
+      !reviewHtml.trim() ||
+      submittingReview ||
+      reviewCharCount > MAX_REVIEW_CHARS
+    ) {
       console.log("Early return - validation failed");
       return;
     }
@@ -584,7 +590,13 @@ export function GameDetailsContent() {
                             </button>
                           </div>
                           <div className="game-details__review-char-counter">
-                            <span className={reviewCharCount > MAX_REVIEW_CHARS ? "over-limit" : ""}>
+                            <span
+                              className={
+                                reviewCharCount > MAX_REVIEW_CHARS
+                                  ? "over-limit"
+                                  : ""
+                              }
+                            >
                               {reviewCharCount}/{MAX_REVIEW_CHARS}
                             </span>
                           </div>
@@ -624,7 +636,9 @@ export function GameDetailsContent() {
                           className="game-details__review-submit-button"
                           onClick={handleSubmitReview}
                           disabled={
-                            !editor?.getHTML().trim() || submittingReview || reviewCharCount > MAX_REVIEW_CHARS
+                            !editor?.getHTML().trim() ||
+                            submittingReview ||
+                            reviewCharCount > MAX_REVIEW_CHARS
                           }
                         >
                           {submittingReview
@@ -739,24 +753,56 @@ export function GameDetailsContent() {
                           />
                           <div className="game-details__review-actions">
                             <div className="game-details__review-votes">
-                              <button
+                              <motion.button
                                 className={`game-details__vote-button game-details__vote-button--upvote ${review.hasUpvoted ? "game-details__vote-button--active" : ""}`}
                                 onClick={() =>
                                   handleVoteReview(review.id, "upvote")
                                 }
+                                whileTap={{
+                                  scale: 0.9,
+                                  transition: { duration: 0.1 },
+                                }}
+                                whileHover={{
+                                  scale: 1.05,
+                                  transition: { duration: 0.2 },
+                                }}
+                                animate={
+                                  review.hasUpvoted
+                                    ? {
+                                        scale: [1, 1.2, 1],
+                                        transition: { duration: 0.3 },
+                                      }
+                                    : {}
+                                }
                               >
                                 <ThumbsUp size={16} />
                                 <span>{review.upvotes || 0}</span>
-                              </button>
+                              </motion.button>
-                              <button
+                              <motion.button
                                 className={`game-details__vote-button game-details__vote-button--downvote ${review.hasDownvoted ? "game-details__vote-button--active" : ""}`}
                                 onClick={() =>
                                   handleVoteReview(review.id, "downvote")
                                 }
+                                whileTap={{
+                                  scale: 0.9,
+                                  transition: { duration: 0.1 },
+                                }}
+                                whileHover={{
+                                  scale: 1.05,
+                                  transition: { duration: 0.2 },
+                                }}
+                                animate={
+                                  review.hasDownvoted
+                                    ? {
+                                        scale: [1, 1.2, 1],
+                                        transition: { duration: 0.3 },
+                                      }
+                                    : {}
+                                }
                               >
                                 <ThumbsDown size={16} />
                                 <span>{review.downvotes || 0}</span>
-                              </button>
+                              </motion.button>
                             </div>
                             {userDetails?.id === review.user?.id && (
                               <button

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

@@ -659,7 +659,7 @@ $hero-height: 300px;
 
     &:hover {
       background-color: rgba(255, 255, 255, 0.1);
-      border-color: globals.$brand-teal;
+      border-color: rgba(255, 255, 255, 0.1);
     }
   }
 

src/renderer/src/pages/game-details/modals/delete-review-modal.scss

@@ -15,5 +15,6 @@
   &__actions {
     display: flex;
     justify-content: flex-end;
+    gap: 8px;
   }
 }

src/renderer/src/pages/game-details/modals/delete-review-modal.tsx

@@ -29,11 +29,11 @@ export function DeleteReviewModal({
     >
       <div className="delete-review-modal__actions">
         <Button onClick={onClose} theme="outline">
-          {t("cancel")}
+          {t("delete_review_modal_cancel_button")}
         </Button>
 
         <Button onClick={handleDeleteReview} theme="danger">
-          {t("delete_review_button")}
+          {t("delete_review_modal_delete_button")}
         </Button>
       </div>
     </Modal>