sync ui after modify solve options

bryanlundberg · Sep 14, 2024 · 085b725 · 085b725
1 parent 1e190ad
commit 085b725
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/src/components/menu-solve-options/menu-solve-options.tsx b/src/components/menu-solve-options/menu-solve-options.tsx
@@ -8,7 +8,12 @@ import {
 import { Solve } from "@/interfaces/Solve";
 import updateSolve from "@/lib/updateSolve";
 import { useTimerStore } from "@/store/timerStore";
-import { BookmarkIcon, CopyIcon, Cross1Icon } from "@radix-ui/react-icons";
+import {
+  BookmarkFilledIcon,
+  BookmarkIcon,
+  CopyIcon,
+  Cross1Icon,
+} from "@radix-ui/react-icons";
 
 export default function MenuSolveOptions({ solve }: { solve: Solve | null }) {
   const { selectedCube, cubes, mergeUpdateSelectedCube } = useTimerStore();
@@ -81,7 +86,7 @@ export default function MenuSolveOptions({ solve }: { solve: Solve | null }) {
           <Tooltip>
             <TooltipTrigger asChild>
               <Button variant={"ghost"} onClick={handleBookmarkSolve}>
-                <BookmarkIcon />
+                {!solve?.bookmark ? <BookmarkIcon /> : <BookmarkFilledIcon />}
               </Button>
             </TooltipTrigger>
             <TooltipContent>

diff --git a/src/components/sheets/sheet-solve-details/SheetSolveDetails.tsx b/src/components/sheets/sheet-solve-details/SheetSolveDetails.tsx
@@ -30,6 +30,9 @@ export default function SheetSolveDetails() {
           <p className="flex items-center gap-1 font-medium mx-auto">
             <CodeSandboxLogoIcon />
             {selectedCube?.name}
+            {solve?.plus2 && (
+              <span className="text-destructive text-sm font-black">+2</span>
+            )}
           </p>
         </SheetTitle>
 

diff --git a/src/components/solves/SolvesArea.tsx b/src/components/solves/SolvesArea.tsx
@@ -5,17 +5,17 @@ import { VirtualizedGrid } from "@mierak/react-virtualized-grid";
 import formatTime from "@/lib/formatTime";
 import formatDate from "@/lib/formatDate";
 import { useTranslations } from "next-intl";
-import {
-  ChatBubbleBottomCenterTextIcon,
-  StarIcon,
-} from "@heroicons/react/24/solid";
 import { Card } from "../ui/card";
 import { useDialogSolve } from "@/store/DialogSolve";
 import { sort } from "fast-sort";
 import { useSolveFiltersStore } from "@/store/SolvesFilters";
 import { filterData, SearchType } from "filter-data";
 import useRemoveGridHeight from "@/hooks/useRemoveGridHeight";
-import { CubeIcon } from "@radix-ui/react-icons";
+import {
+  BookmarkFilledIcon,
+  ChatBubbleIcon,
+  CubeIcon,
+} from "@radix-ui/react-icons";
 import Image from "next/image";
 
 interface SolvesArea {
@@ -107,20 +107,20 @@ export function SolvesArea({ displaySolves }: SolvesArea) {
             </span>
           </div>
           {sortedSolves[index].plus2 ? (
-            <span className="text-sm text-red-600">+2</span>
+            <span className="text-xs font-black text-red-600 ms-1">+2</span>
           ) : null}
           <div className="absolute z-20 text-xs top-1 left-1">
             {formatDate(sortedSolves[index].endTime).slice(0, 5)}
           </div>
           {sortedSolves[index].bookmark && (
             <div className="absolute z-20 text-xs right-1 top-1 text-yellow-500">
-              <StarIcon className="w-4 h-4" />
+              <BookmarkFilledIcon />
             </div>
           )}
 
           {sortedSolves[index].comment && (
             <div className="absolute z-20 text-xs bottom-1 left-1">
-              <ChatBubbleBottomCenterTextIcon className="w-4 h-4" />
+              <ChatBubbleIcon />
             </div>
           )}
         </Card>