From e3a37769f0d39627d0048006b9e8c80f8c5bc544 Mon Sep 17 00:00:00 2001
From: rojonaitor <bryanlundberg@outlook.com>
Date: Sat, 4 Nov 2023 13:31:11 -0600
Subject: [PATCH 1/2] add icon and time

---
 src/components/solves/ModalSolve.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/solves/ModalSolve.tsx b/src/components/solves/ModalSolve.tsx
index 81291f84..5daa594d 100644
--- a/src/components/solves/ModalSolve.tsx
+++ b/src/components/solves/ModalSolve.tsx
@@ -10,6 +10,7 @@ import formatTime from "@/lib/formatTime";
 import moveSolve from "@/lib/moveSolve";
 import { ScrambleDisplay } from "../scramble-display";
 import { cubeCollection } from "@/lib/cubeCollection";
+import CalendarDays from "@/icons/CalentarDays";
 
 export default function ModalSolve() {
   const { status, solve, setStatus } = useSolvesStore();
@@ -66,23 +67,34 @@ export default function ModalSolve() {
   return (
     <>
       <div
-        className="fixed backdrop-blur-[2px] top-0 left-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-screen flex flex-col items-center text-neutral-950"
+        className="fixed backdrop-blur-[2px] top-0 left-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-screen flex flex-col items-center text-neutral-950 justify-center"
         onClick={(e) => {
           if (e.target === e.currentTarget) setStatus(false);
         }}
       >
         <div className="w-full h-auto text-xs border rounded-md sm:w-96 bg-neutral-200 border-neutral-800 ">
           <div className="flex items-center justify-between p-3 border-b border-zinc-800">
-            <div className="flex items-center text-lg font-medium">
+            <div className="flex items-center text-lg font-bold">
               {formatTime(solve.time)}
               <span className="text-xs text-red-500">
                 {solve.plus2 ? "+2" : null}
               </span>
             </div>
-            <div>{formatDate(solve.endTime)}</div>
+            <div className="flex items-center gap-3">
+              <div className="text-neutral-600">
+                <CalendarDays />
+              </div>
+              <div className="flex flex-col text-end">
+                <div>{formatDate(solve.endTime)}</div>
+                <div>
+                  {new Date(solve.endTime).getHours()}:
+                  {new Date(solve.endTime).getMinutes()}
+                </div>
+              </div>
+            </div>
           </div>
           <div className="flex flex-col items-center justify-between p-3 font-medium border-b border-zinc-800 text-md">
-            <div>{solve.scramble}</div>
+            <div className="text-md">{solve.scramble}</div>
             <ScrambleDisplay
               className="w-full h-32 my-3"
               show={status}

From c60bce9e825eb35aef7df657930688d2b3b55a67 Mon Sep 17 00:00:00 2001
From: rojonaitor <bryanlundberg@outlook.com>
Date: Sat, 4 Nov 2023 13:35:30 -0600
Subject: [PATCH 2/2] color borders

---
 src/components/solves/ModalSolve.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/solves/ModalSolve.tsx b/src/components/solves/ModalSolve.tsx
index 5daa594d..9b7ed937 100644
--- a/src/components/solves/ModalSolve.tsx
+++ b/src/components/solves/ModalSolve.tsx
@@ -73,7 +73,7 @@ export default function ModalSolve() {
         }}
       >
         <div className="w-full h-auto text-xs border rounded-md sm:w-96 bg-neutral-200 border-neutral-800 ">
-          <div className="flex items-center justify-between p-3 border-b border-zinc-800">
+          <div className="flex items-center justify-between p-3 border-b border-neutral-400">
             <div className="flex items-center text-lg font-bold">
               {formatTime(solve.time)}
               <span className="text-xs text-red-500">
@@ -93,7 +93,7 @@ export default function ModalSolve() {
               </div>
             </div>
           </div>
-          <div className="flex flex-col items-center justify-between p-3 font-medium border-b border-zinc-800 text-md">
+          <div className="flex flex-col items-center justify-between p-3 font-medium border-b border-neutral-400 text-md">
             <div className="text-md">{solve.scramble}</div>
             <ScrambleDisplay
               className="w-full h-32 my-3"
@@ -103,11 +103,11 @@ export default function ModalSolve() {
             ></ScrambleDisplay>
           </div>
 
-          <div className="relative flex items-center justify-center gap-3 p-3 border-b light border-zinc-800">
+          <div className="flex items-center justify-center gap-3 p-3 border-b light border-zinc-800">
             {!isAllSolve() && (
               <button
                 type="button"
-                className="absolute flex items-center justify-center w-12 h-8 p-1 transition duration-500 border rounded-md left-3 top-3 hover:text-neutral-800 bg-neutral-300 hover:border-zinc-400 border-zinc-600"
+                className="flex items-center justify-center w-12 h-8 p-1 transition duration-500 border rounded-md left-3 top-3 hover:text-neutral-800 bg-neutral-300 hover:border-zinc-400 border-zinc-600"
                 onClick={() => handleMove()}
               >
                 <svg