From 495e82e8d69393689aba23c65d99b19e3b58fb40 Mon Sep 17 00:00:00 2001 From: KayJann Date: Sun, 7 Jun 2026 18:31:49 +0200 Subject: [PATCH] feat: ui fixes --- public/images/Button_Square_Highlighted.png | Bin 16487 -> 447 bytes src/components/common/SkinViewer.tsx | 6 ++-- src/components/layout/AppHeader.tsx | 4 +-- src/components/modals/SetUidModal.tsx | 2 +- src/components/views/ArcEditorView.tsx | 18 ++++++------ src/components/views/ColEditorView.tsx | 12 ++++---- src/components/views/GrfEditorView.tsx | 8 +++--- src/components/views/HomeView.tsx | 4 +-- src/components/views/LceLiveView.tsx | 30 ++++++++++---------- src/components/views/LocEditorView.tsx | 8 +++--- src/components/views/OptionsEditorView.tsx | 2 +- src/components/views/PckEditorView.tsx | 16 +++++------ src/components/views/ScreenshotsView.tsx | 26 ++++++++--------- src/components/views/SwfView.tsx | 4 +-- src/components/views/VersionsView.tsx | 20 ++++++------- src/components/views/WorkshopView.tsx | 20 ++++++------- src/css/index.css | 19 ------------- src/pages/App.tsx | 10 +++---- 18 files changed, 94 insertions(+), 115 deletions(-) diff --git a/public/images/Button_Square_Highlighted.png b/public/images/Button_Square_Highlighted.png index c3620fe3487f544ea617ecc58d9339d998504862..942a75dfad6d577b648c8b2ec2fab07f7d1f055d 100644 GIT binary patch literal 447 zcmV;w0YLtVP)Px$c}YY;R5*>LlR08*6gQ}tF|_h1<((@yV@g-_AcmPrC#NS3T=cELt7 zAn^ak2P8o7g-8G|zk>)6nUf;W+Kg)ZKLhKRsD$l0j1W2OMS zzrO>Z&xQAU-!(rP%@p@on?=CPHUM`J5lS&y>qN}9q@=Xw|AE%J)hK}KRxpm4TIVL! zdHCL)X=+3SszORe&UrJjRu)8|HD?%X8H)uV7zRV0-0Zz?3KlSGos(ut&WbJ@D8)D& z@>=tdzbbghOldajdYu@@v}2s6M$WqWumdoIlx%f)922U-6A=+mtFQ0VH0`(WFz9s5 zq-3O|9FKW-M7=u^(3(?9*%ZuID7Xh7f9t|1)LQA?aSu{b%#_}pKOYTUR+soBX8Exk zj3N@;ZViA^5{EHyys p6Yh?xuHT5@cslLW3Sa!4{{ge)%wlJ{?KS`a002ovPDHLkV1hR=$s7Ox literal 16487 zcmeHPe@qi+82(xef(dZ}HYZ5Y=)xAv0`nJ4Xr0jra}l#24x`wyCUgcFV5Js&rDeeZ zkstbxc8D!mX0~J*h3P;MS`=)}0@P`=mV$-iN;0TrxuoT6Y4?5KiCO%|WFga(FS+Ku zT<+5J?tQ-Zd7k&Z*6!W2D{5KXG5|nScGixM0a&U+p9n5I($YJ627uKdd&dW#%9^K# zD}TBBJ9pBdP zd%%BT$yazMn!6FlNKPDzswxnL;Xs*@iDY{aOpYFe~CVIt&_^$aCD>C>iKRsg?3ukdY_-?*cv znD=1l<`5i^HDGb9f3+eHcxdyw?cyAuQo6cYtubd=h}gUePu0aD8v;hNK%^IRJ1Puj zP1|Lmp<)mQv)K&K^-P!=tuZpuLsBzHy#!!UaE1O2k|n(Bi2KipAt zDQUec?ckSdwOTFOmC}jhHMIDM-8)}&y4xq|bXafv74?}sSXa(^d|o#U&VYD;wy38H z2i!h2-91R zX@~}E*uGA;Z#r_GfgKczI?o3qc2WFp2Wtu#phb||;d~-H8o(mQ8Xl z2wt~sz-*1Iz@#q)6Ct#Fa+*s^ONxDZv!)ly{)(`8Yex~}WDqhK4E|yTMGa`$HhQ(~ zbOtIy^mx*UmZ`N&ZGsAjFA#`x#*CDFDFRFgmmnfr&;uq5B2e|qxoeZ=X8|N0@R&8D zJ+j$)@guD=fOL({QpoC>X7dBzoF=m}-uL856AWx$C&82|=d#Vv5w(w2yWRe(;vdls zCI$h#2gD!aqy9mp@(z1567XGGNCm;hU9 z@(*i-q9NGr6b~?UJ%@Bi^}q=OYs{6@AQ=-N40Vw-?)ot^`+FwdcndkvB_dNPQZW|G z1D()-8lq?{ZT%pvIAZHSJx*p5bO1(_#tef|uh*j!=yy2v6xKeM?FJ>1N9A2)B$F(~ z|CfvPa)$u1hXxr}l;{z2thT-z+h@)vaT31BZnq=oOjc{t8c;(Nwr^nV!Tp{=@2Pfy zGJud~H>mb^&tZPHDCUwvd{Us-;2OSO>evQ$UXQ*pJLV6Q#5Qp1ZWp9fm-RI5FFw8` zm=fV!gC6%nbwyra^1fVn{Ks$aFY~DGUBI&g8Z#V)o+-?GH?Ve9dCwt)D5i2qj|UB; z*WirjM(?RqxEYkj$6mzsY}l8}(?wfr=)RmQ7swC}sYQzeY>xNkz+b?6YEMU^pPA9n z705tr%_T)+1<1y3yX>3e%egb!qlP!H9eS(f%tRVG;ZH}xzJTT~W^kcx=!fFM8RFFy z)1(D{wX1e&n)9>I?{9{<5DJB`z!YJr!+L9SK05`9D~(w@@4H={bZIrT9%W0v^)nLirlftR900k8ZN4nXT?I;P-DD8ym4*kl{JegUSjfY=g|o ztyl^%iZpiafTnn8W8&CN5_BYy7u!O-kxuIFv(8q7tl diff --git a/src/components/common/SkinViewer.tsx b/src/components/common/SkinViewer.tsx index c731220..c069726 100644 --- a/src/components/common/SkinViewer.tsx +++ b/src/components/common/SkinViewer.tsx @@ -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" > diff --git a/src/components/layout/AppHeader.tsx b/src/components/layout/AppHeader.tsx index fffe087..1fd68a1 100644 --- a/src/components/layout/AppHeader.tsx +++ b/src/components/layout/AppHeader.tsx @@ -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" > {i.name} {i.selectedBranch ? `(${i.selectedBranch})` : ""} diff --git a/src/components/views/ArcEditorView.tsx b/src/components/views/ArcEditorView.tsx index 1a7bb77..eedaf6d 100644 --- a/src/components/views/ArcEditorView.tsx +++ b/src/components/views/ArcEditorView.tsx @@ -247,7 +247,7 @@ export const ArcEditorView: React.FC = () => {
{ 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"}`} > @@ -264,7 +264,7 @@ export const ArcEditorView: React.FC = () => {
{ 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" > {
-
diff --git a/src/components/views/ColEditorView.tsx b/src/components/views/ColEditorView.tsx index 8a4622c..f9047a2 100644 --- a/src/components/views/ColEditorView.tsx +++ b/src/components/views/ColEditorView.tsx @@ -166,14 +166,14 @@ export default function ColEditorView() {
@@ -215,7 +215,7 @@ export default function ColEditorView() { {activeTab === "colors" && currentColors.map((c) => ( - + - @@ -261,7 +261,7 @@ export default function ColEditorView() { ))} {activeTab === "worldColors" && currentWorldColors.map((w) => ( - + - diff --git a/src/components/views/GrfEditorView.tsx b/src/components/views/GrfEditorView.tsx index 9d26ff5..4e03a87 100644 --- a/src/components/views/GrfEditorView.tsx +++ b/src/components/views/GrfEditorView.tsx @@ -159,13 +159,13 @@ export default function GrfEditorView() {
@@ -202,7 +202,7 @@ export default function GrfEditorView() { No files in GRF )} {grf.files.map((f, i) => ( - + {f.filename} {(f.data.length / 1024).toFixed(2)} KB @@ -259,7 +259,7 @@ function GrfNodeView({ node, level, path, onUpdate }: { node: GrfNode, level: nu return (
setExpanded(!expanded)} > diff --git a/src/components/views/HomeView.tsx b/src/components/views/HomeView.tsx index b944d40..5b8e032 100644 --- a/src/components/views/HomeView.tsx +++ b/src/components/views/HomeView.tsx @@ -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" : ""}`} > { if (isFocusedSection) playPressSound(); }} - className={`hover:scale-110 transition-transform ${!isFocusedSection ? "pointer-events-none" : ""}`} + className={`${!isFocusedSection ? "pointer-events-none" : ""}`} > 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} >
@@ -643,7 +643,7 @@ const LceLiveView = memo(function LceLiveView() {
{item.type === "friend" && !isHosting && (
@@ -838,7 +838,7 @@ const LceLiveView = memo(function LceLiveView() { />
-
diff --git a/src/components/views/OptionsEditorView.tsx b/src/components/views/OptionsEditorView.tsx index 6c23f80..eaf97f7 100644 --- a/src/components/views/OptionsEditorView.tsx +++ b/src/components/views/OptionsEditorView.tsx @@ -118,7 +118,7 @@ export default function OptionsEditorView() { diff --git a/src/components/views/PckEditorView.tsx b/src/components/views/PckEditorView.tsx index 4b9408e..102bd63 100644 --- a/src/components/views/PckEditorView.tsx +++ b/src/components/views/PckEditorView.tsx @@ -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() {
@@ -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" }`} >
@@ -770,7 +770,6 @@ export default function PckEditorView() {