feat: versions menu overhaul, and smal ui fixes everywhere

src/components/modals/CustomTUModal.tsx

@@ -1,5 +1,38 @@
-import { motion } from "framer-motion";
-import { useState, useEffect } from "react";
+import { useState, useEffect, memo } from "react";
+
+interface ModalButtonProps {
+  label: string;
+  onClick: () => void;
+  isDanger?: boolean;
+}
+
+const ModalButton = memo(function ModalButton({
+  label,
+  onClick,
+  isDanger = false,
+}: ModalButtonProps) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <button
+      onClick={onClick}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      className={`flex-1 h-12 flex items-center justify-center text-xl mc-text-shadow transition-colors outline-none border-none bg-transparent ${
+        isDanger ? "text-red-500" : "text-white"
+      } ${isHovered ? (isDanger ? "text-red-400" : "text-[#FFFF55]") : ""}`}
+      style={{
+        backgroundImage: isHovered
+          ? "url('/images/button_highlighted.png')"
+          : "url('/images/Button_Background.png')",
+        backgroundSize: "100% 100%",
+        imageRendering: "pixelated",
+      }}
+    >
+      {label}
+    </button>
+  );
+});
 
 export default function CustomTUModal({
   isOpen,
@@ -77,27 +110,23 @@ export default function CustomTUModal({
   };
 
   return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-      className="absolute inset-0 z-[100] flex items-center justify-center backdrop-blur-sm outline-none border-none"
-    >
+    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 outline-none border-none">
       <div
-        className="relative w-[450px] p-8 flex flex-col items-center shadow-2xl"
+        className="relative w-[400px] p-6 flex flex-col items-center"
         style={{
-          backgroundImage: "url('/images/frame_background.png')",
+          backgroundImage: "url('/images/Download_Background.png')",
           backgroundSize: "100% 100%",
+          backgroundRepeat: "no-repeat",
           imageRendering: "pixelated",
         }}
       >
-        <h2 className="text-[#FFFF55] text-2xl mc-text-shadow mb-6 border-b-2 border-[#373737] pb-2 w-full text-center uppercase font-bold tracking-widest">
+        <h2 className="text-xl text-white mc-text-shadow mb-4 text-center">
           {editingEdition ? "Edit Custom TU" : "Import Custom TU"}
         </h2>
 
-        <div className="flex flex-col gap-5 w-full">
-          <div className="flex flex-col gap-2">
-            <label className="text-gray-300 text-sm mc-text-shadow uppercase tracking-widest ml-1">
+        <div className="flex flex-col gap-4 w-full">
+          <div className="flex flex-col gap-1">
+            <label className="text-white text-sm mc-text-shadow uppercase tracking-widest">
               TU Name
             </label>
             <input
@@ -107,13 +136,13 @@ export default function CustomTUModal({
               onChange={(e) => setName(e.target.value)}
               onFocus={() => setFocusIndex(0)}
               placeholder="e.g. My Awesome Mod"
-              className={`w-full h-12 px-4 bg-black/40 border-2 text-white text-lg transition-colors outline-none font-['Mojangles'] ${focusIndex === 0 ? "border-[#FFFF55]" : "border-[#373737]"}`}
+              className="w-full h-10 px-3 bg-black/40 border-2 border-[#373737] text-white text-base outline-none font-['Mojangles']"
               style={{ imageRendering: "pixelated" }}
             />
           </div>
 
-          <div className="flex flex-col gap-2">
-            <label className="text-gray-300 text-sm mc-text-shadow uppercase tracking-widest ml-1">
+          <div className="flex flex-col gap-1">
+            <label className="text-white text-sm mc-text-shadow uppercase tracking-widest">
               Description (Optional)
             </label>
             <input
@@ -122,13 +151,13 @@ export default function CustomTUModal({
               onChange={(e) => setDesc(e.target.value)}
               onFocus={() => setFocusIndex(1)}
               placeholder="A brief description..."
-              className={`w-full h-12 px-4 bg-black/40 border-2 text-white text-lg transition-colors outline-none font-['Mojangles'] ${focusIndex === 1 ? "border-[#FFFF55]" : "border-[#373737]"}`}
+              className="w-full h-10 px-3 bg-black/40 border-2 border-[#373737] text-white text-base outline-none font-['Mojangles']"
               style={{ imageRendering: "pixelated" }}
             />
           </div>
 
-          <div className="flex flex-col gap-2">
-            <label className="text-gray-300 text-sm mc-text-shadow uppercase tracking-widest ml-1">
+          <div className="flex flex-col gap-1">
+            <label className="text-white text-sm mc-text-shadow uppercase tracking-widest">
               Download URL (.zip)
             </label>
             <input
@@ -137,51 +166,35 @@ export default function CustomTUModal({
               onChange={(e) => setUrl(e.target.value)}
               onFocus={() => setFocusIndex(2)}
               placeholder="https://example.com/mod.zip"
-              className={`w-full h-12 px-4 bg-black/40 border-2 text-white text-lg transition-colors outline-none font-['Mojangles'] ${focusIndex === 2 ? "border-[#FFFF55]" : "border-[#373737]"}`}
+              className="w-full h-10 px-3 bg-black/40 border-2 border-[#373737] text-white text-base outline-none font-['Mojangles']"
               style={{ imageRendering: "pixelated" }}
             />
           </div>
 
           {error && (
-            <div className="text-red-500 text-center mc-text-shadow uppercase text-xs tracking-widest mt-1">
+            <div className="text-red-500 text-center mc-text-shadow uppercase text-xs tracking-widest">
               {error}
             </div>
           )}
         </div>
 
-        <div className="flex gap-4 mt-8 w-full">
-          <button
-            onMouseEnter={() => setFocusIndex(3)}
+        <div className="flex gap-4 mt-6 w-full">
+          <ModalButton
+            label="Cancel"
             onClick={() => {
               playBackSound("close_click.wav");
               onClose();
             }}
-            className={`flex-1 h-12 flex items-center justify-center text-xl mc-text-shadow transition-all outline-none border-none bg-transparent ${focusIndex === 3 ? "text-[#FFFF55]" : "text-white"}`}
-            style={{
-              backgroundImage: focusIndex === 3 ? "url('/images/button_highlighted.png')" : "url('/images/Button_Background.png')",
-              backgroundSize: "100% 100%",
-              imageRendering: "pixelated",
-            }}
-          >
-            Cancel
-          </button>
-          <button
-            onMouseEnter={() => setFocusIndex(4)}
+          />
+          <ModalButton
+            label={editingEdition ? "Save" : "Import"}
             onClick={() => {
               playPressSound("save_click.wav");
               handleImport();
             }}
-            className={`flex-1 h-12 flex items-center justify-center text-xl mc-text-shadow transition-all outline-none border-none bg-transparent ${focusIndex === 4 ? "text-[#FFFF55]" : "text-white"}`}
-            style={{
-              backgroundImage: focusIndex === 4 ? "url('/images/button_highlighted.png')" : "url('/images/Button_Background.png')",
-              backgroundSize: "100% 100%",
-              imageRendering: "pixelated",
-            }}
-          >
-            {editingEdition ? "Save" : "Import"}
-          </button>
+          />
         </div>
       </div>
-    </motion.div>
+    </div>
   );
 }