From b546c63c38c608cfbbf68ddd1aa4d1327489d91c Mon Sep 17 00:00:00 2001
From: Factiven <dabinaya.fathan@gmail.com>
Date: Fri, 28 Apr 2023 17:31:15 +0700
Subject: Editor List v0.4

---
 components/listEditor.js | 85 +++++++++++++++++++++++++++---------------------
 1 file changed, 48 insertions(+), 37 deletions(-)

(limited to 'components')

diff --git a/components/listEditor.js b/components/listEditor.js
index d90e481..ed54987 100644
--- a/components/listEditor.js
+++ b/components/listEditor.js
@@ -50,7 +50,7 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => {
   };
 
   return (
-    <div className="relative bg-secondary">
+    <div className="relative bg-secondary rounded-md w-full sm:w-auto">
       {message && (
         <m.div
           initial={{ opacity: 0, y: 10 }}
@@ -58,52 +58,63 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => {
           exit={{ opacity: 0, y: 10 }}
           className={`${
             type === "success" ? "bg-green-500" : "bg-red-500"
-          } text-white px-4 py-1 mb-4 rounded-md`}
+          } text-white px-4 py-1 mb-4 rounded-md text-sm sm:text-base`}
         >
           {message}
         </m.div>
       )}
+      <div className="absolute font-karla -top-8 rounded-md bg-secondary px-2 py-1 text-sm">
+        List Editor
+      </div>
       <form
         onSubmit={handleSubmit}
-        className="px-10 py-5 text-inherit font-karla antialiased shrink-0"
+        className="px-7 py-5 text-inherit flex flex-col gap-3 font-karla antialiased shrink-0"
       >
-        <div className="flex justify-between items-center gap-14">
-          <label htmlFor="status" className="font-karla font-bold">
-            Status:
-          </label>
-          <select
-            name="status"
-            id="status"
-            value={status}
-            onChange={(e) => setStatus(e.target.value)}
-            className="rounded-md px-2 py-1 bg-[#363642]"
-          >
-            <option value="">Select a status</option>
-            <option value="CURRENT">Watching</option>
-            <option value="COMPLETED">Completed</option>
-            <option value="PAUSED">Paused</option>
-            <option value="DROPPED">Dropped</option>
-            <option value="PLANNING">Plan to watch</option>
-          </select>
-        </div>
-        <div className="flex justify-between items-center mt-2">
-          <label htmlFor="progress" className="font-karla font-bold">
-            Progress:
-          </label>
-          <input
-            type="number"
-            name="progress"
-            id="progress"
-            value={progress}
-            max={max}
-            onChange={(e) => setProgress(e.target.value)}
-            className="rounded-md px-2 py-1 bg-[#363642]"
-            min="0"
-          />
+        <div className="flex flex-col gap-2">
+          <div className="flex justify-between items-center gap-4 sm:gap-24">
+            <label
+              htmlFor="status"
+              className="font-karla font-bold text-sm sm:text-base"
+            >
+              Status:
+            </label>
+            <select
+              name="status"
+              id="status"
+              value={status}
+              onChange={(e) => setStatus(e.target.value)}
+              className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base"
+            >
+              <option value="">Select a status</option>
+              <option value="CURRENT">Watching</option>
+              <option value="COMPLETED">Completed</option>
+              <option value="PAUSED">Paused</option>
+              <option value="DROPPED">Dropped</option>
+              <option value="PLANNING">Plan to watch</option>
+            </select>
+          </div>
+          <div className="flex justify-between items-center mt-2">
+            <label
+              htmlFor="progress"
+              className="font-karla font-bold text-sm sm:text-base"
+            >
+              Progress:
+            </label>
+            <input
+              type="number"
+              name="progress"
+              id="progress"
+              value={progress}
+              max={max}
+              onChange={(e) => setProgress(e.target.value)}
+              className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base"
+              min="0"
+            />
+          </div>
         </div>
         <button
           type="submit"
-          className="bg-[#363642] text-white rounded-md mt-2 py-1 px-4"
+          className="bg-[#363642] text-white rounded-sm mt-2 py-1 text-sm sm:text-base"
         >
           Save
         </button>
-- 
cgit v1.2.3