Merge pull request #158 from bryanlundberg/responsive-solve-modal

improve modal solve for mobile size
bryanlundberg · Nov 4, 2023 · 0414a01 · 0414a01
2 parents 30dc389 + c60bce9
commit 0414a01
Showing 1 changed file with 20 additions and 8 deletions.
diff --git 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 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">
                 {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="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"
               show={status}
@@ -91,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