fix(SetupView): use checkboxes

This commit is contained in:
neoapps-dev
2026-05-21 11:23:45 +03:00
parent d85c9b2a2c
commit 7107161dc1

View File

@@ -424,12 +424,22 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
<span className={`tracking-widest uppercase text-lg mc-text-shadow ${focusIndex === 0 ? "text-[#FFFF55]" : "text-white/80"}`}> <span className={`tracking-widest uppercase text-lg mc-text-shadow ${focusIndex === 0 ? "text-[#FFFF55]" : "text-white/80"}`}>
Click effects Click effects
</span> </span>
<img <div className="relative w-6 h-6 shrink-0">
src={enableVfx ? "/images/Toggle_Switch_On.png" : "/images/Toggle_Switch_Off.png"} <img
alt={enableVfx ? "ON" : "OFF"} src={focusIndex === 0 ? "/images/checkbox_highlighted.png" : "/images/checkbox.png"}
className="w-12 h-6 object-contain shrink-0" alt="checkbox"
style={{ imageRendering: "pixelated" }} className="w-full h-full object-contain"
/> style={{ imageRendering: "pixelated" }}
/>
{enableVfx && (
<img
src="/images/check.png"
alt="checked"
className="absolute inset-0 w-full h-full object-contain"
style={{ imageRendering: "pixelated" }}
/>
)}
</div>
</button> </button>
<button <button
onClick={() => { playPressSound(); setEnableDiscordRPC(!enableDiscordRPC); }} onClick={() => { playPressSound(); setEnableDiscordRPC(!enableDiscordRPC); }}
@@ -440,12 +450,22 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
<span className={`tracking-widest uppercase text-lg mc-text-shadow ${focusIndex === 1 ? "text-[#FFFF55]" : "text-white/80"}`}> <span className={`tracking-widest uppercase text-lg mc-text-shadow ${focusIndex === 1 ? "text-[#FFFF55]" : "text-white/80"}`}>
Discord RPC Discord RPC
</span> </span>
<img <div className="relative w-6 h-6 shrink-0">
src={enableDiscordRPC ? "/images/Toggle_Switch_On.png" : "/images/Toggle_Switch_Off.png"} <img
alt={enableDiscordRPC ? "ON" : "OFF"} src={focusIndex === 1 ? "/images/checkbox_highlighted.png" : "/images/checkbox.png"}
className="w-12 h-6 object-contain shrink-0" alt="checkbox"
style={{ imageRendering: "pixelated" }} className="w-full h-full object-contain"
/> style={{ imageRendering: "pixelated" }}
/>
{enableDiscordRPC && (
<img
src="/images/check.png"
alt="checked"
className="absolute inset-0 w-full h-full object-contain"
style={{ imageRendering: "pixelated" }}
/>
)}
</div>
</button> </button>
<p className="text-xs text-white/40 text-center uppercase tracking-widest mt-2">You can change these later in settings</p> <p className="text-xs text-white/40 text-center uppercase tracking-widest mt-2">You can change these later in settings</p>
@@ -484,21 +504,41 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
)} )}
<div className="flex items-center justify-between px-4 h-10 border-b border-white/10"> <div className="flex items-center justify-between px-4 h-10 border-b border-white/10">
<span className="text-white/60 text-sm uppercase tracking-widest">Click Effects</span> <span className="text-white/60 text-sm uppercase tracking-widest">Click Effects</span>
<img <div className="relative w-5 h-5">
src={enableVfx ? "/images/Toggle_Switch_On.png" : "/images/Toggle_Switch_Off.png"} <img
alt={enableVfx ? "ON" : "OFF"} src="/images/checkbox.png"
className="w-10 h-5 object-contain" alt="checkbox"
style={{ imageRendering: "pixelated" }} className="w-full h-full object-contain"
/> style={{ imageRendering: "pixelated" }}
/>
{enableVfx && (
<img
src="/images/check.png"
alt="checked"
className="absolute inset-0 w-full h-full object-contain"
style={{ imageRendering: "pixelated" }}
/>
)}
</div>
</div> </div>
<div className="flex items-center justify-between px-4 h-10"> <div className="flex items-center justify-between px-4 h-10">
<span className="text-white/60 text-sm uppercase tracking-widest">Discord RPC</span> <span className="text-white/60 text-sm uppercase tracking-widest">Discord RPC</span>
<img <div className="relative w-5 h-5">
src={enableDiscordRPC ? "/images/Toggle_Switch_On.png" : "/images/Toggle_Switch_Off.png"} <img
alt={enableDiscordRPC ? "ON" : "OFF"} src="/images/checkbox.png"
className="w-10 h-5 object-contain" alt="checkbox"
style={{ imageRendering: "pixelated" }} className="w-full h-full object-contain"
/> style={{ imageRendering: "pixelated" }}
/>
{enableDiscordRPC && (
<img
src="/images/check.png"
alt="checked"
className="absolute inset-0 w-full h-full object-contain"
style={{ imageRendering: "pixelated" }}
/>
)}
</div>
</div> </div>
</div> </div>
</div> </div>