LCE-Hub-Mirrors/LCE-Emerald-Launcher
1
1
Fork 0
mirror of https://github.com/LCE-Hub/LCE-Emerald-Launcher.git synced 2026-07-18 00:07:09 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: ui fixes

Browse source
This commit is contained in:
KayJann 2026-06-07 18:31:49 +02:00
parent 4c146626be
commit 495e82e8d6
18 changed files with 94 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/Button_Square_Highlighted.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 447 B

6
src/components/common/SkinViewer.tsx
View file

@ -289,7 +289,7 @@ const SkinViewer = memo(function SkinViewer({ username, setUsername, playPressSo
data-focus="1" tabIndex={0}
onMouseEnter={() => isFocusedSection && setFocusIndex(1)}
onClick={() => { playPressSound(); setActiveView('skins'); }}
className={`mc-sq-btn w-12 h-12 flex items-center justify-center outline-none border-none transition-all ${isFocusedSection && focusIndex === 1 ? 'scale-110' : ''}`}
className={`mc-sq-btn w-12 h-12 flex items-center justify-center outline-none border-none ${isFocusedSection && focusIndex === 1 ? '' : ''}`}
style={isFocusedSection && focusIndex === 1 ? { backgroundImage: "url('/images/Button_Square_Highlighted.png')" } : {}}
title="Change Skin"
>
@ -299,7 +299,7 @@ const SkinViewer = memo(function SkinViewer({ username, setUsername, playPressSo
data-focus="2" tabIndex={0}
onMouseEnter={() => isFocusedSection && setFocusIndex(2)}
onClick={() => { playPressSound(); setActiveView('screenshots'); }}
className={`mc-sq-btn w-12 h-12 flex items-center justify-center outline-none border-none transition-all ${isFocusedSection && focusIndex === 2 ? 'scale-110' : ''}`}
className={`mc-sq-btn w-12 h-12 flex items-center justify-center outline-none border-none ${isFocusedSection && focusIndex === 2 ? '' : ''}`}
style={isFocusedSection && focusIndex === 2 ? { backgroundImage: "url('/images/Button_Square_Highlighted.png')" } : {}}
title="Screenshots"
>
@ -309,7 +309,7 @@ const SkinViewer = memo(function SkinViewer({ username, setUsername, playPressSo
data-focus="3" tabIndex={0}
onMouseEnter={() => isFocusedSection && setFocusIndex(3)}
onClick={() => { playPressSound(); setActiveView('lcelive'); }}
className={`mc-sq-btn w-12 h-12 flex items-center justify-center outline-none border-none transition-all ${isFocusedSection && focusIndex === 3 ? 'scale-110' : ''}`}
className={`mc-sq-btn w-12 h-12 flex items-center justify-center outline-none border-none ${isFocusedSection && focusIndex === 3 ? '' : ''}`}
style={isFocusedSection && focusIndex === 3 ? { backgroundImage: "url('/images/Button_Square_Highlighted.png')" } : {}}
title="LCELive"
>

4
src/components/layout/AppHeader.tsx
View file

@ -37,7 +37,7 @@ export const AppHeader = memo(function AppHeader({ playPressSound, uiFade }: App
playPressSound();
appWindow.minimize();
}}
className="w-10 h-8 flex items-center justify-center text-gray-300 hover:text-white hover:bg-white/20 transition-all bg-transparent"
className="w-10 h-8 flex items-center justify-center text-gray-300 bg-transparent"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -57,7 +57,7 @@ export const AppHeader = memo(function AppHeader({ playPressSound, uiFade }: App
playPressSound();
appWindow.toggleMaximize();
}}
className="w-10 h-8 flex items-center justify-center text-gray-300 hover:text-white hover:bg-white/20 transition-all bg-transparent"
className="w-10 h-8 flex items-center justify-center text-gray-300 bg-transparent"
>
<svg
xmlns="http://www.w3.org/2000/svg"

2
src/components/modals/SetUidModal.tsx
View file

@ -225,7 +225,7 @@ export default function SetUidModal({
setSelectedInstance(i.instanceId);
setIsDropdownOpen(false);
}}
className="px-3 py-2 text-white text-sm cursor-pointer hover:bg-white/20 transition-colors truncate font-['Mojangles']"
className="px-3 py-2 text-white text-sm cursor-pointer truncate font-['Mojangles']"
>
{i.name} {i.selectedBranch ? `(${i.selectedBranch})` : ""}
</div>

18
src/components/views/ArcEditorView.tsx
View file

@ -247,7 +247,7 @@ export const ArcEditorView: React.FC = () => {
<div
key={node.originalIdx}
onClick={() => { playPressSound(); setSelectedEntryIdx(node.originalIdx); }}
className={`group flex items-center gap-2 px-2 py-1 cursor-pointer transition-colors ${isSelected ? "bg-[#FFFF55]/20 text-[#FFFF55]" : "hover:bg-white/5 text-white/80"}`}
className={`group flex items-center gap-2 px-2 py-1 cursor-pointer ${isSelected ? "bg-[#FFFF55]/20 text-[#FFFF55]" : "text-white/80"}`}
>
<img src="/images/Download_Icon.png" className="w-3 h-3 opacity-40" style={{ imageRendering: "pixelated" }} />
<span className="truncate text-sm font-medium tracking-tight">
@ -264,7 +264,7 @@ export const ArcEditorView: React.FC = () => {
<div key={nodePath} className="flex flex-col">
<div
onClick={() => { playPressSound(); toggleNode(nodePath); }}
className="flex items-center gap-2 px-2 py-1.5 cursor-pointer hover:bg-white/5 text-white/50 transition-colors group"
className="flex items-center gap-2 px-2 py-1.5 cursor-pointer text-white/50 group"
>
<motion.span
animate={{ rotate: isExpanded ? 90 : 0 }}
@ -366,14 +366,14 @@ export const ArcEditorView: React.FC = () => {
<div className="flex gap-1 p-2 pt-4 border-b-2 border-[#373737]">
<button
onClick={() => { playPressSound(); setActiveTab("arc"); }}
className={`flex items-center gap-3 px-6 py-2 transition-all mc-text-shadow ${activeTab === "arc" ? "text-[#FFFF55] opacity-100 scale-105" : "text-white opacity-40 hover:opacity-100"}`}
className={`flex items-center gap-3 px-6 py-2 mc-text-shadow ${activeTab === "arc" ? "text-[#FFFF55] opacity-100" : "text-white opacity-40"}`}
>
<img src="/images/tools/arc.png" className={`w-5 h-5 object-contain ${activeTab === "arc" ? "" : "grayscale opacity-50"}`} style={{ imageRendering: "pixelated" }} />
<span className="text-lg uppercase tracking-wider font-bold">Archive</span>
</button>
<button
onClick={() => { playPressSound(); setActiveTab("loc"); }}
className={`flex items-center gap-3 px-6 py-2 transition-all mc-text-shadow ${activeTab === "loc" ? "text-[#FFFF55] opacity-100 scale-105" : "text-white opacity-40 hover:opacity-100"}`}
className={`flex items-center gap-3 px-6 py-2 mc-text-shadow ${activeTab === "loc" ? "text-[#FFFF55] opacity-100" : "text-white opacity-40"}`}
>
<img src="/images/tools/loc.png" className={`w-5 h-5 object-contain ${activeTab === "loc" ? "" : "grayscale opacity-50"}`} style={{ imageRendering: "pixelated" }} />
<span className="text-lg uppercase tracking-wider font-bold">Languages (LOC)</span>
@ -460,7 +460,7 @@ export const ArcEditorView: React.FC = () => {
<div className="mt-4 pt-4 border-t border-white/10">
<button
onClick={() => handleDeleteEntry(selectedEntryIdx!)}
className="w-full py-2 text-red-500/80 mc-text-shadow text-sm transition-all hover:text-red-500 hover:scale-[1.02]"
className="w-full py-2 text-red-500/80 mc-text-shadow text-sm hover:text-red-500"
style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
>
Delete Entry
@ -537,20 +537,20 @@ export const ArcEditorView: React.FC = () => {
</thead>
<tbody>
{filteredLocStrings.map((str) => (
<tr key={str.originalIdx} className="border-b border-[#373737]/30 hover:bg-white/5 transition-colors group">
<tr key={str.originalIdx} className="border-b border-[#373737]/30 group">
<td className="p-3 text-[#FFFF55] font-mono text-sm max-w-[200px] truncate">
{currentLocLang?.isStatic ? str.originalIdx : str.key}
</td>
<td className="p-3 text-white text-sm whitespace-pre-wrap">{str.value}</td>
<td className="p-3 text-right opacity-0 group-hover:opacity-100 transition-opacity">
<td className="p-3 text-right">
<div className="flex justify-end gap-2">
<button
onClick={() => setIsLocEditModalOpen({ langIdx: selectedLocLangIdx, strIdx: str.originalIdx, isNew: false })}
className="px-2 py-1 text-[10px] bg-white/10 hover:bg-[#FFFF55]/20 hover:text-[#FFFF55] border border-white/20 transition-all uppercase"
className="px-2 py-1 text-[10px] bg-white/10 hover:bg-[#FFFF55]/20 hover:text-[#FFFF55] border border-white/20 uppercase"
>
Edit
</button>
<button onClick={() => handleLocStringDelete(selectedLocLangIdx, str.originalIdx)} className="p-1 hover:text-red-500 transition-colors opacity-60 hover:opacity-100">
<button onClick={() => handleLocStringDelete(selectedLocLangIdx, str.originalIdx)} className="p-1 hover:text-red-500 opacity-60">
<img src="/images/Trash_Bin_Icon.png" className="w-4 h-4 object-contain" style={{ imageRendering: "pixelated" }} />
</button>
</div>

12
src/components/views/ColEditorView.tsx
View file

@ -166,14 +166,14 @@ export default function ColEditorView() {
<div className="flex gap-1 p-2 pt-4 border-b-2 border-[#373737]">
<button
onClick={() => { playPressSound(); setActiveTab("colors"); }}
className={`flex items-center gap-3 px-6 py-2 transition-all mc-text-shadow ${activeTab === "colors" ? "text-[#FFFF55] opacity-100 scale-105" : "text-white opacity-40 hover:opacity-100"}`}
className={`flex items-center gap-3 px-6 py-2 mc-text-shadow ${activeTab === "colors" ? "text-[#FFFF55] opacity-100" : "text-white opacity-40"}`}
>
<span className="text-lg">Colors ({col.colors.length})</span>
</button>
<button
onClick={() => { playPressSound(); setActiveTab("worldColors"); }}
disabled={col.version === 0}
className={`flex items-center gap-3 px-6 py-2 transition-all mc-text-shadow ${activeTab === "worldColors" ? "text-[#FFFF55] opacity-100 scale-105" : "text-white opacity-40 hover:opacity-100"} ${col.version === 0 ? "opacity-20 cursor-not-allowed" : ""}`}
className={`flex items-center gap-3 px-6 py-2 mc-text-shadow ${activeTab === "worldColors" ? "text-[#FFFF55] opacity-100" : "text-white opacity-40"} ${col.version === 0 ? "opacity-20 cursor-not-allowed" : ""}`}
>
<span className="text-lg">World Colors ({col.worldColors.length})</span>
</button>
@ -215,7 +215,7 @@ export default function ColEditorView() {
</thead>
<tbody>
{activeTab === "colors" && currentColors.map((c) => (
<tr key={c.originalIdx} className="border-b border-[#373737]/30 hover:bg-white/5 transition-colors group">
<tr key={c.originalIdx} className="border-b border-[#373737]/30 group">
<td className="p-2">
<input
type="text"
@ -253,7 +253,7 @@ export default function ColEditorView() {
</div>
</td>
<td className="p-2 text-right">
<button onClick={() => handleDeleteColor(c.originalIdx)} className="p-1 hover:text-red-500 opacity-60 hover:opacity-100 transition-colors">
<button onClick={() => handleDeleteColor(c.originalIdx)} className="p-1 hover:text-red-500 opacity-60">
<img src="/images/Trash_Bin_Icon.png" className="w-5 h-5 object-contain" style={{ imageRendering: "pixelated" }} />
</button>
</td>
@ -261,7 +261,7 @@ export default function ColEditorView() {
))}
{activeTab === "worldColors" && currentWorldColors.map((w) => (
<tr key={w.originalIdx} className="border-b border-[#373737]/30 hover:bg-white/5 transition-colors group">
<tr key={w.originalIdx} className="border-b border-[#373737]/30 group">
<td className="p-2">
<input
type="text"
@ -352,7 +352,7 @@ export default function ColEditorView() {
</div>
</td>
<td className="p-2 text-right">
<button onClick={() => handleDeleteWorldColor(w.originalIdx)} className="p-1 hover:text-red-500 opacity-60 hover:opacity-100 transition-colors">
<button onClick={() => handleDeleteWorldColor(w.originalIdx)} className="p-1 hover:text-red-500 opacity-60">
<img src="/images/Trash_Bin_Icon.png" className="w-5 h-5 object-contain" style={{ imageRendering: "pixelated" }} />
</button>
</td>

8
src/components/views/GrfEditorView.tsx
View file

@ -159,13 +159,13 @@ export default function GrfEditorView() {
<div className="flex gap-1 p-2 pt-4 border-b-2 border-[#373737]">
<button
onClick={() => { playPressSound(); setActiveTab("rules"); }}
className={`flex items-center gap-3 px-6 py-2 transition-all mc-text-shadow ${activeTab === "rules" ? "text-[#FFFF55] opacity-100 scale-105" : "text-white opacity-40 hover:opacity-100"}`}
className={`flex items-center gap-3 px-6 py-2 mc-text-shadow ${activeTab === "rules" ? "text-[#FFFF55] opacity-100" : "text-white opacity-40"}`}
>
<span className="text-lg">Game Rules</span>
</button>
<button
onClick={() => { playPressSound(); setActiveTab("files"); }}
className={`flex items-center gap-3 px-6 py-2 transition-all mc-text-shadow ${activeTab === "files" ? "text-[#FFFF55] opacity-100 scale-105" : "text-white opacity-40 hover:opacity-100"}`}
className={`flex items-center gap-3 px-6 py-2 mc-text-shadow ${activeTab === "files" ? "text-[#FFFF55] opacity-100" : "text-white opacity-40"}`}
>
<span className="text-lg">Files ({grf.files.length})</span>
</button>
@ -202,7 +202,7 @@ export default function GrfEditorView() {
<tr><td colSpan={3} className="p-4 text-center text-white/40">No files in GRF</td></tr>
)}
{grf.files.map((f, i) => (
<tr key={i} className="border-b border-[#373737]/30 hover:bg-white/5 transition-colors">
<tr key={i} className="border-b border-[#373737]/30">
<td className="p-3 text-white font-medium">{f.filename}</td>
<td className="p-3 text-white/60 text-right text-xs">{(f.data.length / 1024).toFixed(2)} KB</td>
<td className="p-3 text-center">
@ -259,7 +259,7 @@ function GrfNodeView({ node, level, path, onUpdate }: { node: GrfNode, level: nu
return (
<div className="flex flex-col mb-1 select-none">
<div
className="flex items-center gap-2 p-2 hover:bg-white/10 cursor-pointer transition-colors"
className="flex items-center gap-2 p-2 cursor-pointer"
style={{ paddingLeft: `${level * 24 + 8}px` }}
onClick={() => setExpanded(!expanded)}
>

4
src/components/views/HomeView.tsx
View file

@ -175,7 +175,7 @@ const HomeView = memo(function HomeView() {
onClick={() => {
if (isFocusedSection) playPressSound();
}}
className={`hover:scale-110 transition-transform ${!isFocusedSection ? "pointer-events-none" : ""}`}
className={`${!isFocusedSection ? "pointer-events-none" : ""}`}
>
<img
src="/images/discord.png"
@ -192,7 +192,7 @@ const HomeView = memo(function HomeView() {
onClick={() => {
if (isFocusedSection) playPressSound();
}}
className={`hover:scale-110 transition-transform ${!isFocusedSection ? "pointer-events-none" : ""}`}
className={`${!isFocusedSection ? "pointer-events-none" : ""}`}
>
<img
src="/images/github.png"

30
src/components/views/LceLiveView.tsx
View file

@ -564,7 +564,7 @@ const LceLiveView = memo(function LceLiveView() {
data-index={idx}
onMouseEnter={() => setFocusIndex(idx)}
onClick={btn.onClick}
className={`flex-1 h-12 flex items-center justify-center text-xl font-bold uppercase tracking-widest outline-none border-none transition-all ${isFocused ? "text-[#FFFF55] mc-text-shadow scale-[1.02] z-10 relative drop-shadow-md" : "text-white mc-text-shadow hover:text-gray-200"}`}
className={`flex-1 h-12 flex items-center justify-center text-xl font-bold uppercase tracking-widest outline-none border-none ${isFocused ? "text-[#FFFF55] mc-text-shadow z-10 relative drop-shadow-md" : "text-white mc-text-shadow hover:text-gray-200"}`}
style={{
backgroundImage: isFocused
? "url('/images/button_highlighted.png')"
@ -612,7 +612,7 @@ const LceLiveView = memo(function LceLiveView() {
key={item.id}
data-index={idx}
onMouseEnter={() => setFocusIndex(idx)}
className={`w-full flex items-center justify-between px-4 py-3 relative outline-none border-none rounded transition-all ${isFocused ? "bg-black/15 shadow-inner" : "bg-transparent hover:bg-black/5"}`}
className={`w-full flex items-center justify-between px-4 py-3 relative outline-none border-none rounded ${isFocused ? "bg-black/15 shadow-inner" : "bg-transparent"}`}
tabIndex={-1}
>
<div className="flex items-center w-full">
@ -643,7 +643,7 @@ const LceLiveView = memo(function LceLiveView() {
<div className="flex space-x-3 pr-2 shrink-0">
{item.type === "friend" && !isHosting && (
<button
className={`px-6 h-12 flex items-center justify-center font-bold text-base outline-none uppercase tracking-widest mc-text-shadow transition-transform ${isFocused ? "text-white scale-105 shadow-md" : "text-gray-300"}`}
className={`px-6 h-12 flex items-center justify-center font-bold text-base outline-none uppercase tracking-widest mc-text-shadow ${isFocused ? "text-white shadow-md" : "text-gray-300"}`}
style={{
backgroundImage:
"url('/images/Button_Background.png')",
@ -658,7 +658,7 @@ const LceLiveView = memo(function LceLiveView() {
{item.type === "friend" && isHosting && (
<>
<button
className={`px-6 h-12 flex items-center justify-center font-bold text-base outline-none uppercase tracking-widest mc-text-shadow transition-transform ${isFocused ? "text-white scale-105 shadow-md" : "text-gray-300"}`}
className={`px-6 h-12 flex items-center justify-center font-bold text-base outline-none uppercase tracking-widest mc-text-shadow ${isFocused ? "text-white shadow-md" : "text-gray-300"}`}
style={{
backgroundImage:
"url('/images/button_highlighted.png')",
@ -674,7 +674,7 @@ const LceLiveView = memo(function LceLiveView() {
: "INVITE"}
</button>
<button
className={`px-6 h-12 flex items-center justify-center font-bold text-base outline-none uppercase tracking-widest mc-text-shadow transition-transform ${isFocused ? "text-white scale-105 shadow-md" : "text-gray-300"}`}
className={`px-6 h-12 flex items-center justify-center font-bold text-base outline-none uppercase tracking-widest mc-text-shadow ${isFocused ? "text-white shadow-md" : "text-gray-300"}`}
style={{
backgroundImage:
"url('/images/Button_Background.png')",
@ -692,7 +692,7 @@ const LceLiveView = memo(function LceLiveView() {
)}
{item.type === "request_out" && (
<button
className={`px-6 h-12 flex items-center justify-center font-bold text-base outline-none uppercase tracking-widest mc-text-shadow transition-transform ${isFocused ? "text-white scale-105 shadow-md" : "text-gray-300"}`}
className={`px-6 h-12 flex items-center justify-center font-bold text-base outline-none uppercase tracking-widest mc-text-shadow ${isFocused ? "text-white shadow-md" : "text-gray-300"}`}
style={{
backgroundImage:
"url('/images/Button_Background.png')",
@ -708,7 +708,7 @@ const LceLiveView = memo(function LceLiveView() {
item.type === "invite") && (
<>
<button
className={`px-6 h-12 flex items-center justify-center font-bold text-base outline-none uppercase tracking-widest mc-text-shadow transition-transform ${isFocused ? "text-white scale-105 shadow-md" : "text-gray-300"}`}
className={`px-6 h-12 flex items-center justify-center font-bold text-base outline-none uppercase tracking-widest mc-text-shadow ${isFocused ? "text-white shadow-md" : "text-gray-300"}`}
style={{
backgroundImage:
"url('/images/button_highlighted.png')",
@ -720,7 +720,7 @@ const LceLiveView = memo(function LceLiveView() {
ACCEPT
</button>
<button
className={`px-6 h-12 flex items-center justify-center font-bold text-base outline-none uppercase tracking-widest mc-text-shadow transition-transform ${isFocused ? "text-white scale-105 shadow-md" : "text-gray-300"}`}
className={`px-6 h-12 flex items-center justify-center font-bold text-base outline-none uppercase tracking-widest mc-text-shadow ${isFocused ? "text-white shadow-md" : "text-gray-300"}`}
style={{
backgroundImage:
"url('/images/Button_Background.png')",
@ -803,7 +803,7 @@ const LceLiveView = memo(function LceLiveView() {
<img
src="/images/lcelive.png"
alt="LCELive"
className="h-5 opacity-70 cursor-pointer hover:opacity-100 transition-opacity"
className="h-5 opacity-70 cursor-pointer"
onClick={() => TauriService.openUrl('https://lcelive.co.uk')}
/>
</div>
@ -838,7 +838,7 @@ const LceLiveView = memo(function LceLiveView() {
/>
<div className="flex gap-4 w-full">
<button
className="h-12 flex-1 flex items-center justify-center text-white mc-text-shadow text-xl font-bold uppercase tracking-widest transition-transform hover:text-[#FFFF55] hover:scale-105 outline-none border-none"
className="h-12 flex-1 flex items-center justify-center text-white mc-text-shadow text-xl font-bold uppercase tracking-widest hover:text-[#FFFF55] outline-none border-none"
style={{
backgroundImage: "url('/images/button_highlighted.png')",
backgroundSize: "100% 100%",
@ -859,7 +859,7 @@ const LceLiveView = memo(function LceLiveView() {
Send
</button>
<button
className="h-12 flex-1 flex items-center justify-center text-white mc-text-shadow text-xl font-bold uppercase tracking-widest transition-transform hover:text-[#FFFF55] hover:scale-105 outline-none border-none"
className="h-12 flex-1 flex items-center justify-center text-white mc-text-shadow text-xl font-bold uppercase tracking-widest hover:text-[#FFFF55] outline-none border-none"
style={{
backgroundImage: "url('/images/Button_Background.png')",
backgroundSize: "100% 100%",
@ -901,7 +901,7 @@ const LceLiveView = memo(function LceLiveView() {
data-index={0}
onMouseEnter={() => setFocusIndex(0)}
onClick={handleHostRelay}
className={`w-full h-14 flex items-center justify-center text-xl font-bold uppercase tracking-widest outline-none border-none transition-all ${focusIndex === 0 ? "text-[#FFFF55] mc-text-shadow scale-[1.02]" : "text-white mc-text-shadow hover:text-[#FFFF55]"}`}
className={`w-full h-14 flex items-center justify-center text-xl font-bold uppercase tracking-widest outline-none border-none ${focusIndex === 0 ? "text-[#FFFF55] mc-text-shadow" : "text-white mc-text-shadow hover:text-[#FFFF55]"}`}
style={{
backgroundImage:
focusIndex === 0
@ -917,7 +917,7 @@ const LceLiveView = memo(function LceLiveView() {
data-index={1}
onMouseEnter={() => setFocusIndex(1)}
onClick={handleHostDirect}
className={`w-full h-14 flex items-center justify-center text-xl font-bold uppercase tracking-widest outline-none border-none transition-all ${focusIndex === 1 ? "text-[#FFFF55] mc-text-shadow scale-[1.02]" : "text-white mc-text-shadow hover:text-[#FFFF55]"}`}
className={`w-full h-14 flex items-center justify-center text-xl font-bold uppercase tracking-widest outline-none border-none ${focusIndex === 1 ? "text-[#FFFF55] mc-text-shadow" : "text-white mc-text-shadow hover:text-[#FFFF55]"}`}
style={{
backgroundImage:
focusIndex === 1
@ -937,7 +937,7 @@ const LceLiveView = memo(function LceLiveView() {
setFocusIndex(0);
playBackSound();
}}
className={`w-full h-14 flex items-center justify-center text-xl font-bold uppercase tracking-widest outline-none border-none transition-all ${focusIndex === 2 ? "text-[#FFFF55] mc-text-shadow scale-[1.02]" : "text-white mc-text-shadow hover:text-[#FFFF55]"}`}
className={`w-full h-14 flex items-center justify-center text-xl font-bold uppercase tracking-widest outline-none border-none ${focusIndex === 2 ? "text-[#FFFF55] mc-text-shadow" : "text-white mc-text-shadow hover:text-[#FFFF55]"}`}
style={{
backgroundImage:
focusIndex === 2
@ -977,7 +977,7 @@ const LceLiveView = memo(function LceLiveView() {
{errorModal}
</p>
<button
className="h-12 w-48 flex items-center justify-center text-white mc-text-shadow text-xl font-bold uppercase tracking-widest transition-transform hover:text-[#FFFF55] hover:scale-105 outline-none border-none"
className="h-12 w-48 flex items-center justify-center text-white mc-text-shadow text-xl font-bold uppercase tracking-widest hover:text-[#FFFF55] outline-none border-none"
style={{
backgroundImage: "url('/images/button_highlighted.png')",
backgroundSize: "100% 100%",

8
src/components/views/LocEditorView.tsx
View file

@ -175,20 +175,20 @@ export default function LocEditorView() {
</thead>
<tbody>
{filteredLocStrings.map((str) => (
<tr key={str.originalIdx} className="border-b border-[#373737]/30 hover:bg-white/5 transition-colors group">
<tr key={str.originalIdx} className="border-b border-[#373737]/30 group">
<td className="p-3 text-[#FFFF55] font-mono text-sm max-w-[200px] truncate">
{currentLocLang?.isStatic ? str.originalIdx : str.key}
</td>
<td className="p-3 text-white text-sm whitespace-pre-wrap">{str.value}</td>
<td className="p-3 text-right opacity-0 group-hover:opacity-100 transition-opacity">
<td className="p-3 text-right">
<div className="flex justify-end gap-2">
<button
onClick={() => setIsLocEditModalOpen({ langIdx: selectedLocLangIdx, strIdx: str.originalIdx, isNew: false })}
className="px-2 py-1 text-[10px] bg-white/10 hover:bg-[#FFFF55]/20 hover:text-[#FFFF55] border border-white/20 transition-all uppercase"
className="px-2 py-1 text-[10px] bg-white/10 hover:bg-[#FFFF55]/20 hover:text-[#FFFF55] border border-white/20 uppercase"
>
Edit
</button>
<button onClick={() => handleLocStringDelete(selectedLocLangIdx, str.originalIdx)} className="p-1 hover:text-red-500 transition-colors opacity-60 hover:opacity-100">
<button onClick={() => handleLocStringDelete(selectedLocLangIdx, str.originalIdx)} className="p-1 hover:text-red-500 opacity-60">
<img src="/images/Trash_Bin_Icon.png" className="w-4 h-4 object-contain" style={{ imageRendering: "pixelated" }} />
</button>
</div>

2
src/components/views/OptionsEditorView.tsx
View file

@ -118,7 +118,7 @@ export default function OptionsEditorView() {
<button
key={tab}
onClick={() => { playPressSound(); setActiveTab(tab); }}
className={`flex items-center gap-3 px-6 py-2 transition-all mc-text-shadow ${activeTab === tab ? "text-[#FFFF55] opacity-100 scale-105" : "text-white opacity-40 hover:opacity-100"}`}
className={`flex items-center gap-3 px-6 py-2 mc-text-shadow ${activeTab === tab ? "text-[#FFFF55] opacity-100" : "text-white opacity-40"}`}
>
<span className="text-lg capitalize">{tab}</span>
</button>

16
src/components/views/PckEditorView.tsx
View file

@ -149,7 +149,7 @@ export default function PckEditorView() {
className={`flex items-center gap-2 p-2 cursor-pointer transition-all border-l-2 ${
isSelected
? "bg-[#FFFF55]/10 border-[#FFFF55] text-[#FFFF55]"
: "border-transparent hover:bg-white/5 text-white"
: "border-transparent text-white"
} ${node.isFolder ? "font-bold" : ""}`}
>
{node.isFolder ? (
@ -686,7 +686,7 @@ export default function PckEditorView() {
<div className="relative">
<button
onClick={() => setIsChangingType(!isChangingType)}
className="flex items-center gap-1.5 px-2 py-0.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-sm transition-all group/type"
className="flex items-center gap-1.5 px-2 py-0.5 bg-white/5 border border-white/10 rounded-sm group/type"
>
<span
className="text-[10px] uppercase tracking-widest mc-text-shadow font-bold"
@ -699,7 +699,7 @@ export default function PckEditorView() {
</span>
<img
src="/images/Settings_Arrow_Down.png"
className={`w-2 h-2 object-contain opacity-40 group-hover/type:opacity-60 transition-transform ${isChangingType ? "rotate-180" : ""}`}
className="w-2 h-2 object-contain opacity-40"
style={{ imageRendering: "pixelated" }}
/>
</button>
@ -742,10 +742,10 @@ export default function PckEditorView() {
handleTypeChange(typeVal);
setIsChangingType(false);
}}
className={`w-full text-left px-3 py-2 text-[10px] uppercase tracking-widest transition-all border-l-2 ${
className={`w-full text-left px-3 py-2 text-[10px] uppercase tracking-widest border-l-2 ${
isActive
? "bg-white/10 border-[#FFFF55] text-white"
: "border-transparent text-white/40 hover:text-white/80 hover:bg-white/5"
: "border-transparent text-white/40"
}`}
>
<div className="flex items-center gap-2">
@ -770,7 +770,6 @@ export default function PckEditorView() {
<div className="flex gap-2 shrink-0">
<button
onClick={() => handleMoveAsset("up")}
className="hover:scale-110 active:scale-95 transition-transform"
>
<img
src="/images/Settings_Arrow_Up.png"
@ -780,7 +779,6 @@ export default function PckEditorView() {
</button>
<button
onClick={() => handleMoveAsset("down")}
className="hover:scale-110 active:scale-95 transition-transform"
>
<img
src="/images/Settings_Arrow_Down.png"
@ -809,7 +807,7 @@ export default function PckEditorView() {
style={{ imageRendering: "pixelated" }}
/>
)}
<div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-black/60 px-2 py-1 rounded text-[10px] text-white/60 pointer-events-none uppercase tracking-widest">
<div className="absolute top-2 right-2 bg-black/60 px-2 py-1 rounded text-[10px] text-white/60 pointer-events-none uppercase tracking-widest">
{selectedAsset.type === PCKAssetType.SKIN
? "3D Skin View"
: selectedAsset.type === PCKAssetType.CAPE
@ -1005,7 +1003,7 @@ export default function PckEditorView() {
</button>
<button
onClick={() => handleDeleteAsset(selectedAsset.id)}
className="w-full py-2 text-red-500/80 mc-text-shadow text-sm transition-all hover:text-red-500 hover:scale-[1.02]"
className="w-full py-2 text-red-500/80 mc-text-shadow text-sm hover:text-red-500"
style={{
backgroundImage:
"url('/images/Button_Background.png')",

26
src/components/views/ScreenshotsView.tsx
View file

@ -195,8 +195,8 @@ const ScreenshotsView = memo(function ScreenshotsView() {
}}
onMouseEnter={() => setGridFocusIndex(index)}
className={`
relative aspect-video flex flex-col cursor-pointer transition-all border-2 rounded-sm overflow-hidden bg-black/40
${gridFocusIndex === index ? "border-[#FFFF55] scale-105 z-10" : "border-[#333] hover:border-[#FFFF55]"}
relative aspect-video flex flex-col cursor-pointer border-2 rounded-sm overflow-hidden bg-black/40
${gridFocusIndex === index ? "border-[#FFFF55] z-10" : "border-[#333]"}
`}
style={{
backgroundImage: "url('/images/frame_background.png')",
@ -211,7 +211,7 @@ const ScreenshotsView = memo(function ScreenshotsView() {
<div className="w-full h-full relative overflow-hidden bg-black/50">
<ScreenshotImage
path={ss.path}
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
className="w-full h-full object-cover"
loading="lazy"
alt={ss.name}
fallbackSrc="/images/Folder_Icon.png"
@ -319,8 +319,8 @@ const ScreenshotsView = memo(function ScreenshotsView() {
onMouseEnter={() => setModalFocusIndex(0)}
onClick={() => handleOpenFolder(selectedScreenshot)}
className={`
flex-1 h-12 flex items-center justify-center text-xl mc-text-shadow border-none outline-none cursor-pointer transition-all
${modalFocusIndex === 0 ? "text-[#FFFF55] scale-105" : "text-white"}
flex-1 h-12 flex items-center justify-center text-xl mc-text-shadow border-none outline-none cursor-pointer
${modalFocusIndex === 0 ? "text-[#FFFF55]" : "text-white"}
`}
style={{
backgroundImage:
@ -341,8 +341,8 @@ const ScreenshotsView = memo(function ScreenshotsView() {
setShowDeleteConfirm(true);
}}
className={`
flex-1 h-12 flex items-center justify-center text-xl mc-text-shadow border-none outline-none cursor-pointer transition-all
${modalFocusIndex === 1 ? "text-[#FF5555] scale-105" : "text-white"}
flex-1 h-12 flex items-center justify-center text-xl mc-text-shadow border-none outline-none cursor-pointer
${modalFocusIndex === 1 ? "text-[#FF5555]" : "text-white"}
`}
style={{
backgroundImage:
@ -359,8 +359,8 @@ const ScreenshotsView = memo(function ScreenshotsView() {
onMouseEnter={() => setModalFocusIndex(2)}
onClick={() => setSelectedScreenshot(null)}
className={`
w-48 h-12 flex items-center justify-center text-xl mc-text-shadow border-none outline-none cursor-pointer transition-all
${modalFocusIndex === 2 ? "text-[#FFFF55] scale-105" : "text-white"}
w-48 h-12 flex items-center justify-center text-xl mc-text-shadow border-none outline-none cursor-pointer
${modalFocusIndex === 2 ? "text-[#FFFF55]" : "text-white"}
`}
style={{
backgroundImage:
@ -411,8 +411,8 @@ const ScreenshotsView = memo(function ScreenshotsView() {
setShowDeleteConfirm(false);
}}
className={`
flex-1 h-10 flex items-center justify-center text-lg mc-text-shadow border-none outline-none cursor-pointer transition-all
${deleteConfirmFocusIndex === 0 ? "text-[#FFFF55] scale-105" : "text-white"}
flex-1 h-10 flex items-center justify-center text-lg mc-text-shadow border-none outline-none cursor-pointer
${deleteConfirmFocusIndex === 0 ? "text-[#FFFF55]" : "text-white"}
`}
style={{
backgroundImage:
@ -429,8 +429,8 @@ const ScreenshotsView = memo(function ScreenshotsView() {
onMouseEnter={() => setDeleteConfirmFocusIndex(1)}
onClick={confirmDelete}
className={`
flex-1 h-10 flex items-center justify-center text-lg mc-text-shadow border-none outline-none cursor-pointer transition-all
${deleteConfirmFocusIndex === 1 ? "text-[#FF5555] scale-105" : "text-white"}
flex-1 h-10 flex items-center justify-center text-lg mc-text-shadow border-none outline-none cursor-pointer
${deleteConfirmFocusIndex === 1 ? "text-[#FF5555]" : "text-white"}
`}
style={{
backgroundImage:

4
src/components/views/SwfView.tsx
View file

@ -229,9 +229,9 @@ export default function SwfView() {
<div
key={img.id}
onClick={() => { playPressSound(); setSelectedImageId(img.id); }}
className={`flex items-center gap-3 p-3 cursor-pointer transition-all border-l-4 ${selectedImageId === img.id
className={`flex items-center gap-3 p-3 cursor-pointer border-l-4 ${selectedImageId === img.id
? "bg-[#FFFF55]/10 border-[#FFFF55] text-[#FFFF55]"
: "border-transparent hover:bg-white/5 text-white/60 hover:text-white"
: "border-transparent text-white/60"
}`}
>
<img src="/images/tools/arc.png" className={`w-5 h-5 object-contain ${selectedImageId === img.id ? "" : "grayscale"}`} style={{ imageRendering: "pixelated" }} />

20
src/components/views/VersionsView.tsx
View file

@ -514,9 +514,9 @@ const VersionsView = memo(function VersionsView() {
playPressSound();
cycleBranch(edition.id);
}}
className="w-full text-left px-3 py-1.5 text-[10px] text-white mc-text-shadow hover:bg-white/10 flex items-center justify-between group transition-colors"
className="w-full text-left px-3 py-1.5 text-[10px] text-white mc-text-shadow flex items-center justify-between group"
>
<span className="text-[#AAAAAA] group-hover:text-white font-bold">
<span className="text-[#AAAAAA] font-bold">
Channel
</span>
<span className="text-[#ffff55] font-bold">
@ -532,7 +532,7 @@ const VersionsView = memo(function VersionsView() {
TauriService.openInstanceFolder(edition.instanceId);
setOpenMenuId(null);
}}
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] hover:text-white hover:bg-white/10 flex items-center gap-2 transition-colors mc-text-shadow"
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
>
<img
src="/images/Folder_Icon.png"
@ -566,7 +566,7 @@ const VersionsView = memo(function VersionsView() {
);
setOpenMenuId(null);
}}
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] hover:text-white hover:bg-white/10 flex items-center gap-2 transition-colors mc-text-shadow"
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
>
<img
src="/images/steam.png"
@ -583,7 +583,7 @@ const VersionsView = memo(function VersionsView() {
handleImportWorld(edition.instanceId);
setOpenMenuId(null);
}}
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] hover:text-white hover:bg-white/10 flex items-center gap-2 transition-colors mc-text-shadow"
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
>
<svg
width="14"
@ -609,7 +609,7 @@ const VersionsView = memo(function VersionsView() {
});
setOpenMenuId(null);
}}
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] hover:text-white hover:bg-white/10 flex items-center gap-2 transition-colors mc-text-shadow"
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
>
<svg
width="14"
@ -637,7 +637,7 @@ const VersionsView = memo(function VersionsView() {
if (err !== "CANCELED") console.error(err);
}
}}
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] hover:text-white hover:bg-white/10 flex items-center gap-2 transition-colors mc-text-shadow"
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
>
<svg
width="14"
@ -661,7 +661,7 @@ const VersionsView = memo(function VersionsView() {
setIsCustomizeModalOpen(true);
setOpenMenuId(null);
}}
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] hover:text-white hover:bg-white/10 flex items-center gap-2 transition-colors mc-text-shadow"
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
>
<svg
width="14"
@ -684,7 +684,7 @@ const VersionsView = memo(function VersionsView() {
setIsSetUidModalOpen(true);
setOpenMenuId(null);
}}
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] hover:text-white hover:bg-white/10 flex items-center gap-2 transition-colors mc-text-shadow"
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
>
<svg
width="14"
@ -709,7 +709,7 @@ const VersionsView = memo(function VersionsView() {
setIsImportModalOpen(true);
setOpenMenuId(null);
}}
className="w-full text-left px-3 py-2 text-xs text-[#aaaaaa] hover:text-white hover:bg-white/10 flex items-center gap-2 transition-colors mc-text-shadow"
className="w-full text-left px-3 py-2 text-xs text-[#aaaaaa] flex items-center gap-2 mc-text-shadow"
>
<svg
width="14"

20
src/components/views/WorkshopView.tsx
View file

@ -509,8 +509,8 @@ const WorkshopView = memo(function WorkshopView() {
key={tab}
onClick={() => selectTab(tab)}
className={`
relative h-10 px-5 text-sm mc-text-shadow tracking-widest border-none outline-none cursor-pointer transition-all
${isActive ? "text-[#FFFF55] scale-105" : "text-white hover:text-[#FFFF55] hover:scale-105"}
relative h-10 px-5 text-sm mc-text-shadow tracking-widest border-none outline-none cursor-pointer
${isActive ? "text-[#FFFF55]" : "text-white hover:text-[#FFFF55]"}
`}
style={{
backgroundImage: isActive
@ -674,7 +674,7 @@ const WorkshopView = memo(function WorkshopView() {
}
refreshInstalled();
}}
className="h-8 px-4 flex items-center justify-center text-sm mc-text-shadow border border-[#555] text-[#FFFF55] hover:bg-white/10 transition-colors"
className="h-8 px-4 flex items-center justify-center text-sm mc-text-shadow border border-[#555] text-[#FFFF55]"
style={{
backgroundImage: "url('/images/Button_Background.png')",
backgroundSize: "100% 100%",
@ -699,7 +699,7 @@ const WorkshopView = memo(function WorkshopView() {
}
refreshInstalled();
}}
className="h-8 px-4 flex items-center justify-center text-sm mc-text-shadow border border-[#555] text-white hover:bg-white/10 transition-colors"
className="h-8 px-4 flex items-center justify-center text-sm mc-text-shadow border border-[#555] text-white"
style={{
backgroundImage: "url('/images/Button_Background.png')",
backgroundSize: "100% 100%",
@ -759,7 +759,7 @@ const WorkshopView = memo(function WorkshopView() {
<img
src="/images/bytebukkit.png"
alt="ByteBukkit"
className="h-5 opacity-70 cursor-pointer hover:opacity-100 transition-opacity"
className="h-5 opacity-70 cursor-pointer"
onClick={() =>
TauriService.openUrl("https://bytebukkit.github.io")
}
@ -892,7 +892,7 @@ function PackageCard({
data-card={index}
onMouseEnter={onHover}
onClick={onClick}
className={`flex flex-col cursor-pointer transition-all border-2 ${focused ? "border-[#FFFF55] scale-105 z-10" : "border-[#333] hover:border-[#FFFF55]"} rounded-sm overflow-hidden bg-black/40`}
className={`flex flex-col cursor-pointer border-2 ${focused ? "border-[#FFFF55] z-10" : "border-[#333]"} rounded-sm overflow-hidden bg-black/40`}
style={{
backgroundImage: "url('/images/frame_background.png')",
backgroundSize: "100% 100%",
@ -911,7 +911,7 @@ function PackageCard({
<img
src={thumbnailUrl}
alt={pkg.name}
className={`w-full h-full transition-transform ${pkg.thumbnail.startsWith("http") ? "object-contain p-2" : "object-cover group-hover:scale-110"}`}
className={`w-full h-full ${pkg.thumbnail.startsWith("http") ? "object-contain p-2" : "object-cover"}`}
style={{ imageRendering: "pixelated" }}
onError={() => setImgError(true)}
/>
@ -1373,7 +1373,7 @@ function PackageModal({
<button
onMouseEnter={() => setModalFocus("install")}
onClick={handleAction}
className={`flex-1 h-12 flex items-center justify-center text-xl mc-text-shadow border-none outline-none cursor-pointer transition-all ${modalFocus === "install" ? "text-[#FFFF55] scale-105" : "text-white"}`}
className={`flex-1 h-12 flex items-center justify-center text-xl mc-text-shadow border-none outline-none cursor-pointer ${modalFocus === "install" ? "text-[#FFFF55]" : "text-white"}`}
style={{
backgroundImage:
modalFocus === "install"
@ -1389,7 +1389,7 @@ function PackageModal({
<button
onMouseEnter={() => setModalFocus("uninstall")}
onClick={() => setShowUninstall(true)}
className={`w-36 h-12 flex items-center justify-center text-xl mc-text-shadow border-none outline-none cursor-pointer transition-all ${modalFocus === "uninstall" ? "text-[#FF5555] scale-105" : "text-white"}`}
className={`w-36 h-12 flex items-center justify-center text-xl mc-text-shadow border-none outline-none cursor-pointer ${modalFocus === "uninstall" ? "text-[#FF5555]" : "text-white"}`}
style={{
backgroundImage:
modalFocus === "uninstall"
@ -1405,7 +1405,7 @@ function PackageModal({
<button
onMouseEnter={() => setModalFocus("close")}
onClick={onClose}
className={`w-36 h-12 flex items-center justify-center text-xl mc-text-shadow border-none outline-none cursor-pointer transition-all ${modalFocus === "close" ? "text-[#FFFF55] scale-105" : "text-white"}`}
className={`w-36 h-12 flex items-center justify-center text-xl mc-text-shadow border-none outline-none cursor-pointer ${modalFocus === "close" ? "text-[#FFFF55]" : "text-white"}`}
style={{
backgroundImage:
modalFocus === "close"

19
src/css/index.css
View file

@ -22,15 +22,6 @@
border-image: url("/images/Button_Background.png") 4 stretch;
image-rendering: pixelated;
background: rgba(0, 0, 0, 0.6);
transition: all 0.2s ease;
}
.mc-setup-nav-btn:hover:not(:disabled) {
transform: scale(1.05);
}
.mc-setup-nav-btn:active:not(:disabled) {
transform: scale(0.95);
}
.mc-setup-nav-btn:disabled {
@ -58,7 +49,6 @@
image-rendering: pixelated;
position: relative;
transform: translateY(2px);
transition: all 0.1s ease;
}
.mc-lce-tab.active {
@ -100,7 +90,6 @@
position: relative;
transform: translateY(4px);
z-index: 1;
transition: all 0.15s ease;
min-height: 40px;
background-color: rgba(0, 0, 0, 0.3);
}
@ -188,10 +177,6 @@ body {
min-height: 44px;
}
::-webkit-scrollbar-thumb:hover {
filter: brightness(1.2);
}
.custom-scrollbar::-webkit-scrollbar {
width: 14px;
}
@ -209,10 +194,6 @@ body {
min-height: 44px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
filter: brightness(1.2);
}
.no-animations * {
transition: none !important;
animation: none !important;

10
src/pages/App.tsx
View file

@ -219,7 +219,7 @@ export default function App() {
audio.playPressSound();
setIsUiHidden(!isUiHidden);
}}
className="hover:scale-110 active:scale-95 transition-transform outline-none bg-transparent border-none"
className="outline-none bg-transparent border-none"
>
<img
src={
@ -247,7 +247,7 @@ export default function App() {
audio.playPressSound();
config.setIsDayTime(!config.isDayTime);
}}
className="hover:scale-110 active:scale-95 transition-transform outline-none bg-transparent border-none"
className="outline-none bg-transparent border-none"
>
<img
src={
@ -276,18 +276,18 @@ export default function App() {
setIsUiHidden(false);
setActiveView("swf-editor");
}}
className="pointer-events-auto hover:scale-110 active:scale-95 transition-transform outline-none bg-transparent border-none flex flex-col items-center gap-2 group"
className="pointer-events-auto outline-none bg-transparent border-none flex flex-col items-center gap-2 group"
>
<img
src="/images/tools/pck.png"
className="w-16 h-16 cursor-pointer object-contain opacity-50 group-hover:opacity-100 drop-shadow-[0_4px_4px_rgba(0,0,0,1)] grayscale group-hover:grayscale-0"
className="w-16 h-16 cursor-pointer object-contain opacity-50 drop-shadow-[0_4px_4px_rgba(0,0,0,1)] grayscale"
style={{ imageRendering: "pixelated" }}
onError={(e) => {
(e.target as HTMLImageElement).src =
"/images/Button_Background.png";
}}
/>
<span className="text-[#FFFF55] text-sm mc-text-shadow opacity-0 group-hover:opacity-100 transition-opacity">
<span className="text-[#FFFF55] text-sm mc-text-shadow">
SWF Editor
</span>
</button>