style: modified entire layout.

bryanlundberg · Dec 20, 2023 · 92f2389 · 92f2389
1 parent 328901f
commit 92f2389
Show file tree

Hide file tree

Showing 11 changed files with 226 additions and 67 deletions.
diff --git a/src/app/solves/page.tsx b/src/app/solves/page.tsx
@@ -36,7 +36,11 @@ export default function SolvesPage() {
             />
             <Button
               onClick={() => handleTrashAll()}
-              icon={<Trash />}
+              icon={
+                <div className="w-4 h-4">
+                  <Trash />
+                </div>
+              }
               label={translation.inputs["trash-all"][lang]}
             />
           </ButtonsSection>

diff --git a/src/components/solves/ModalSolve.tsx b/src/components/solves/ModalSolve.tsx
@@ -1,8 +1,5 @@
-import Check from "@/icons/Check";
-import NoSymbol from "@/icons/NoSymbol";
 import deleteSolve from "@/lib/deleteSolve";
 import findCube from "@/lib/findCube";
-import formatDate from "@/lib/formatDate";
 import updateSolve from "@/lib/updateSolve";
 import { useSolvesStore } from "@/store/SolvesStore";
 import { useTimerStore } from "@/store/timerStore";
@@ -12,6 +9,15 @@ import { ScrambleDisplay } from "@/components/scramble-display/index";
 import { cubeCollection } from "@/lib/cubeCollection";
 import CalendarDays from "@/icons/CalentarDays";
 import useEscape from "@/hooks/useEscape";
+import { format } from "date-fns";
+import CubeTransparent from "@/icons/CubeTransparent";
+import ChevronDown from "@/icons/ChevronDown";
+import ChatBubble from "@/icons/ChatBubble";
+import FlagModal from "@/icons/FlagModal";
+import ElipsisHorizontal from "@/icons/ElipsisHorizontal";
+import ArchiveBox from "@/icons/ArchiveBox";
+import DocumentDuplicate from "@/icons/DocumentDuplicate";
+import Trash from "@/icons/Trash";
 
 export default function ModalSolve() {
   const { status, solve, setStatus } = useSolvesStore();
@@ -36,10 +42,8 @@ export default function ModalSolve() {
       if (updatedCube) {
         setSelectedCube(updatedCube);
       }
-
       setCubes(newCubes);
     }
-
     setStatus(false);
   };
 
@@ -70,94 +74,101 @@ 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 justify-center"
+        className="fixed backdrop-blur-[2px] top-0 left-0 z-50 w-full px-8 py-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-neutral-400">
-            <div className="flex items-center text-lg font-medium">
+        <div className="relative w-full h-auto text-xs bg-white rounded-md sm:w-96">
+          <div className="flex items-center justify-between px-3 py-2 border-b border-neutral-200">
+            <div className="flex items-center ">
               <div className="tracking-wider">
-                <span className="text-xl">
+                <span className="text-3xl font-semibold">
                   {formatTime(solve.time).split(".")[0]}
                 </span>
-                <span className="text-sm">
+                <span className="text-2xl font-semibold">
                   .{formatTime(solve.time).split(".")[1]}
                 </span>
               </div>
-              <span className="text-xs text-red-500">
+              <span className="text-sm font-bold text-red-500">
                 {solve.plus2 ? "+2" : null}
               </span>
             </div>
-            <div className="flex items-center gap-3">
-              <div className="text-neutral-600">
-                <CalendarDays />
-              </div>
+            <div className="flex items-center gap-3 text-neutral-500">
+              <CalendarDays />
               <div className="flex flex-col text-end">
-                <div>{formatDate(solve.endTime)}</div>
                 <div>
+                  {format(solve.endTime, "dd/MMM/yyyy").replace(/\//g, " ")}
+                </div>
+                <div className="text-start">
                   {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-neutral-400 text-md">
-            <div className="text-md">{solve.scramble}</div>
-            <ScrambleDisplay
+          <div className="flex flex-col items-center justify-between p-3 font-medium border-b border-neutral-200 text-md">
+            <div className="flex items-center justify-center gap-5">
+              <div className="w-4 h-4">
+                <CubeTransparent />
+              </div>
+              <div className="font-medium text-md">{solve.scramble}</div>
+              <div className="w-4 h-4 transition duration-200 hover:text-neutral-500 hover:cursor-pointer">
+                <ChevronDown />
+              </div>
+            </div>
+
+            {/* <ScrambleDisplay
               className="w-full h-32 my-3"
               show={status}
               scramble={solve.scramble}
               event={cubeObj?.event || ""}
-            ></ScrambleDisplay>
+            ></ScrambleDisplay> */}
+          </div>
+
+          <div className="flex items-center justify-between gap-3 px-3 py-2 text-black">
+            <div>
+              <div className="w-5 h-5 transition duration-200 hover:text-neutral-500 hover:cursor-pointer">
+                <ElipsisHorizontal />
+              </div>
+            </div>
+            <div className="flex gap-3">
+              <div className="w-5 h-5 transition duration-200 hover:text-neutral-500 hover:cursor-pointer">
+                <ChatBubble />
+              </div>
+              <div className="w-5 h-5 transition duration-200 hover:text-neutral-500 hover:cursor-pointer">
+                <FlagModal />
+              </div>
+            </div>
           </div>
+          <Options />
+        </div>
+      </div>
+    </>
+  );
+}
 
-          <div className="flex items-center justify-center gap-3 p-3 border-b light border-zinc-800">
-            {!isAllSolve() && (
-              <button
-                type="button"
-                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
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  strokeWidth={1.5}
-                  stroke="currentColor"
-                  className="w-4 h-4"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"
-                  />
-                </svg>
-              </button>
-            )}
-            <button
-              type="button"
-              className="flex items-center justify-center w-12 h-8 p-1 transition duration-500 bg-red-500 border rounded-md hover:text-neutral-800 hover:border-zinc-400 border-zinc-600"
-              onClick={() => handleDelete()}
-            >
-              <NoSymbol />
-            </button>
-            <button
-              type="button"
-              className="w-12 h-8 p-1 font-medium transition duration-500 bg-yellow-500 border rounded-md hover:text-neutral-800 hover:border-zinc-400 border-zinc-600"
-              onClick={() => handlePlusTwo()}
-            >
-              +2
-            </button>
-            <button
-              type="button"
-              className="flex items-center justify-center w-12 h-8 p-1 transition duration-500 bg-green-500 border rounded-md hover:border-zinc-400 border-zinc-600 hover:text-neutral-800"
-              onClick={() => setStatus(false)}
-            >
-              <Check />
-            </button>
+function Options() {
+  return (
+    <>
+      <div className="absolute flex flex-col w-32 gap-3 py-2 mt-1 bg-white rounded-md">
+        <div className="flex items-center gap-1 py-1 transition duration-200 ps-2 hover:text-neutral-500 hover:cursor-pointer">
+          <div className="w-4 h-4">
+            <ArchiveBox />
+          </div>
+          <div>Archive</div>
+        </div>
+        <div className="flex items-center gap-1 py-1 transition duration-200 ps-2 hover:text-neutral-500 hover:cursor-pointer">
+          <div className="w-4 h-4">
+            <DocumentDuplicate />
+          </div>
+          <div>Copy</div>
+        </div>
+        <div className="flex items-center gap-1 py-1 transition duration-200 ps-2 hover:text-neutral-500 hover:cursor-pointer">
+          <div className="w-4 h-4">
+            <Trash />
           </div>
+          <div>Remove</div>
         </div>
       </div>
     </>

diff --git a/src/icons/ArchiveBox.tsx b/src/icons/ArchiveBox.tsx
@@ -0,0 +1,18 @@
+export default function ArchiveBox() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="w-auto h-auto"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5m8.25 3v6.75m0 0-3-3m3 3 3-3M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/ChatBubble.tsx b/src/icons/ChatBubble.tsx
@@ -0,0 +1,18 @@
+export default function ChatBubble() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="w-auto h-auto"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/ChevronDown.tsx b/src/icons/ChevronDown.tsx
@@ -0,0 +1,18 @@
+export default function ChevronDown() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="w-auto h-auto"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m19.5 8.25-7.5 7.5-7.5-7.5"
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/ChevronUp.tsx b/src/icons/ChevronUp.tsx
@@ -0,0 +1,18 @@
+export default function ChevronUp() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="w-6 h-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m4.5 15.75 7.5-7.5 7.5 7.5"
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/CubeTransparent.tsx b/src/icons/CubeTransparent.tsx
@@ -0,0 +1,18 @@
+export default function CubeTransparent() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="w-auto h-auto"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m21 7.5-2.25-1.313M21 7.5v2.25m0-2.25-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3 2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75 2.25-1.313M12 21.75V19.5m0 2.25-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25"
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/DocumentDuplicate.tsx b/src/icons/DocumentDuplicate.tsx
@@ -0,0 +1,18 @@
+export default function DocumentDuplicate() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="w-auto h-auto"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/ElipsisHorizontal.tsx b/src/icons/ElipsisHorizontal.tsx
@@ -0,0 +1,18 @@
+export default function ElipsisHorizontal() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="w-auto h-auto"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/FlagModal.tsx b/src/icons/FlagModal.tsx
@@ -0,0 +1,18 @@
+export default function FlagModal() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="w-auto h-auto"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/Trash.tsx b/src/icons/Trash.tsx
@@ -7,7 +7,7 @@ export default function Trash() {
         viewBox="0 0 24 24"
         strokeWidth={1.5}
         stroke="currentColor"
-        className="w-4 h-4"
+        className="w-auto h-auto"
       >
         <path
           strokeLinecap="round"