From 5ac10e216a8bc48375385d6ec6392e4abfd8046d Mon Sep 17 00:00:00 2001
From: KayJann <guerg.yac@icloud.com>
Date: Sun, 7 Jun 2026 17:15:21 +0200
Subject: [PATCH] fix: USE 9 SLICE SCALING EVERYWHERE

---
 public/images/background.png                  | Bin 2084 -> 0 bytes
 .../{Moog City 2.opus => Moog City 2 .opus}   | Bin
 src/components/modals/CustomTUModal.tsx       |   8 +---
 src/components/views/LceLiveView.tsx          |   9 +---
 src/components/views/SetupView.tsx            |  42 +++---------------
 src/components/views/VersionsView.tsx         |   8 +---
 6 files changed, 9 insertions(+), 58 deletions(-)
 delete mode 100644 public/images/background.png
 rename public/music/{Moog City 2.opus => Moog City 2 .opus} (100%)

diff --git a/public/images/background.png b/public/images/background.png
deleted file mode 100644
index 341ffad468acb6f2cd44fadbfa19a942afbd48c7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2084
zcmeHIZBP?O7~VVXAeWRT1V}nmOcXRxQ$S&iq9&(?22hhwk$@41711(N&}uOTggc9-
zs7TZzjR-_V4P!?UItBcIt6HQ|M_QyBS|Lbj4I>{42!kK#(dkcrb^4<-_Q&q*zPtPG
z`#$^b^W<w(N>8RA69C{D6{+|D0EixfTMT!)kIpQcoM2lb6Se^m6foH!!)bXY03JU_
zDVD|>lKLMcs@5qv?i#iNdCKjq*_#51vyShnV#mK<?KYh1w)^|iC?Tmhao)B+L+c+X
z30%A6Woeo$=fKSpb#CM1S5Ll?VjSC?s-63ujWnejE8o@5gOM_He#v#y%kIKc&UTN+
zmZjE1RC{~7tiL<-RRfyjLyeAp8o-RfM!fH**P2?3i;GPcKv{D3(Aed-xMMs+47fV0
zLe#3pp^=jM8?-kcq6N2JB;d`9vwy_IU<ZM3fY4UM_(^XK7yx7w%(OlkiV#`BuMk{-
z`rtj?`&Bqp=Z5&Pewa;|OeTJ;R4OfSDnua-)K{><f9%DJ>}&{Qgz*eoC@j;v6vxN}
zbm(4a{uhiO1cGyA0cJjo9Ak=!GoSHGs3d(HG|r<=Pt&Zxp}WV<h9RjK?KxqQZY4qW
zp*~cf@;3rGN{7>8@38!fmQ-IVy;iqN=n;qugRJ0TTpU*{3ONT}Y;$}v%(vCknB+h=
z2H&Gi#??`3YZ(FCq^t88c{B=N-dYBaB0l(4OSD2Lv4U%{Jg$ufsqc2|ba*|4a?Vtn
z@g)$d$vDIHVz9(SNYNgo4-*r{(4x=rcpS>Blmu$%SGZeJsX(s5OySCn(?}x?cIV0&
z(>Xj1SU;PE-KCQrO`YvURuM2`bwcF-A-qW_*wLzU%0Msj5^P6@;)|o_(G^$CvX+?@
z2$Qa;Yu9}XC>_1#*aR~2v*e^Nmcpk}BkWW508&ct1PdV8jV?KIZ?6rhMypxW9Z)Sw
zk;5!z3ZE#4Bnu=u?`B?e5YhA4t)mc-z4Re{{gDm}Ah$!PS(UaN?qP_Dt*N~g$WL_9
zhgW)H2Li01$x?KL8_CxIXT|)$kb?yL&Zan3v@j8eDvorRsRb}oe>`E~tpB!?$>0Bn
z+_kEl@Wis0PcoF}9p?#*6OZGNgh*QfpQ2Nbnb~_B;c+y8W$idjiQyWizQ%swaLYoB
z!(h-PMdcjj2t&*?0-NIxMhkT~l(N60kiuaL>Zr|g_q%e6d!LoU12Hh-?%gZ_xe+1v
zhy07F9Sqqz$JPm{Z?Zrjkau-;xiYh|o<FzS?ZG0ENUjz+V^4aRoTDuxM(Io6;W4FB
zDOb7Q6vz%Wv28$>Gp=mg=;|IHH@GI+oKEKjL2llf#Sgz-@4B?FEo_P6_gb(D`)=k?
z7tCg}lLrR|Wa`1hes;4j@yiPRG}1ZeN}E%6dAJg3kc@B!JL8}$C9UqrE3H1Xh)Qd`
z9Rt#XUr+pw2aO(8xhFMh-o#w~M-vg2!kxmxr@`deMM?b&=XNH7EOVN8Ku+F+*9_LF
zXAOkE-p$|oAtsux^GgYMiw7+h8c<*g4u??3+nmibq583tx5G@zU)V~MW!Th)M~Dxx
z=${JJUl(01r!p_^@-n)<cC>{~&B)YhwdF~THG;w$h!I=73$3cJt9w+mZY`~HLBYXe
q&a<xep5B)87xNz>;n)<}GZ#1}_*gf?^5KR_-H(b;Db6p`@BS02Ef#42

diff --git a/public/music/Moog City 2.opus b/public/music/Moog City 2 .opus
similarity index 100%
rename from public/music/Moog City 2.opus
rename to public/music/Moog City 2 .opus
diff --git a/src/components/modals/CustomTUModal.tsx b/src/components/modals/CustomTUModal.tsx
index 3755f0d..271c6f0 100644
--- a/src/components/modals/CustomTUModal.tsx
+++ b/src/components/modals/CustomTUModal.tsx
@@ -130,13 +130,7 @@ export default function CustomTUModal({
   return (
     <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 outline-none border-none">
       <div
-        className="relative w-[400px] p-6 flex flex-col items-center"
-        style={{
-          backgroundImage: "url('/images/background.png')",
-          backgroundSize: "100% 100%",
-          backgroundRepeat: "no-repeat",
-          imageRendering: "pixelated",
-        }}
+        className="relative w-[400px] p-6 flex flex-col items-center mc-options-bg"
       >
         <h2 className="text-xl text-black mc-text-shadow mb-4 text-center">
           {editingEdition ? "Edit Custom TU" : "Import Custom TU"}
diff --git a/src/components/views/LceLiveView.tsx b/src/components/views/LceLiveView.tsx
index efc971d..bc0d8b5 100644
--- a/src/components/views/LceLiveView.tsx
+++ b/src/components/views/LceLiveView.tsx
@@ -767,14 +767,7 @@ const LceLiveView = memo(function LceLiveView() {
             {tabs.map((t) => (
               <button
                 key={t}
-                className={`flex-1 font-bold text-xl outline-none uppercase transition-all duration-200 ease-in-out ${currentTab === t ? "text-[#2a2a2a] z-20 pb-6 pt-5 text-2xl drop-shadow-[5px_-5px_15px_rgba(0,0,0,0.3)] rounded-t border-4 border-[#222] border-b-0" : "text-[#555] mt-2 py-4 hover:bg-black/30 bg-black/10 hover:text-[#222] border-4 border-transparent border-b-0"}`}
-                style={{
-                  backgroundImage: "url('/images/background.png')",
-                  backgroundSize: "100% 100%",
-                  backgroundRepeat: "no-repeat",
-                  backgroundPosition: "bottom",
-                  imageRendering: "pixelated",
-                }}
+                className={`flex-1 font-bold text-xl outline-none uppercase transition-all duration-200 ease-in-out mc-lce-tab-bg ${currentTab === t ? "active" : ""}`}
                 onClick={() => {
                   setCurrentTab(t);
                   setFocusIndex(0);
diff --git a/src/components/views/SetupView.tsx b/src/components/views/SetupView.tsx
index 523803c..36fb17c 100644
--- a/src/components/views/SetupView.tsx
+++ b/src/components/views/SetupView.tsx
@@ -245,12 +245,7 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
 
                   {currentStep === 0 && (
                     <div
-                      className="p-5 flex flex-col gap-4"
-                      style={{
-                        backgroundImage: "url('/images/background.png')",
-                        backgroundSize: "100% 100%",
-                        imageRendering: "pixelated",
-                      }}
+                      className="p-5 flex flex-col gap-4 mc-options-bg"
                     >
                       <p className="text-white/70 text-sm tracking-widest text-center uppercase">
                         Let's configure your launcher
@@ -278,12 +273,7 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
 
                   {currentStep === 1 && isMac && (
                     <div
-                      className="p-5 flex flex-col gap-4"
-                      style={{
-                        backgroundImage: "url('/images/background.png')",
-                        backgroundSize: "100% 100%",
-                        imageRendering: "pixelated",
-                      }}
+                      className="p-5 flex flex-col gap-4 mc-options-bg"
                     >
                       <p className="text-white/70 text-xs tracking-widest text-center uppercase">
                         {runtimeAlreadyInstalled
@@ -342,12 +332,7 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
 
                   {currentStep === 1 && isLinux && (
                     <div
-                      className="p-5 flex flex-col gap-3"
-                      style={{
-                        backgroundImage: "url('/images/background.png')",
-                        backgroundSize: "100% 100%",
-                        imageRendering: "pixelated",
-                      }}
+                      className="p-5 flex flex-col gap-3 mc-options-bg"
                     >
                       <p className="text-white/70 text-xs tracking-widest text-center uppercase">
                         Choose your preferred compatibility layer
@@ -382,12 +367,7 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
 
                   {currentStep === 1 && !isMac && !isLinux && (
                     <div
-                      className="p-5 flex flex-col gap-4"
-                      style={{
-                        backgroundImage: "url('/images/background.png')",
-                        backgroundSize: "100% 100%",
-                        imageRendering: "pixelated",
-                      }}
+                      className="p-5 flex flex-col gap-4 mc-options-bg"
                     >
                       <p className="text-white/70 text-xs tracking-widest text-center uppercase">
                         Everything is ready to go!
@@ -404,12 +384,7 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
 
                   {currentStep === 2 && (
                     <div
-                      className="p-5 flex flex-col gap-2"
-                      style={{
-                        backgroundImage: "url('/images/background.png')",
-                        backgroundSize: "100% 100%",
-                        imageRendering: "pixelated",
-                      }}
+                      className="p-5 flex flex-col gap-2 mc-options-bg"
                     >
                       <p className="text-white/70 text-xs tracking-widest text-center uppercase mb-2">
                         Choose your preferred launcher settings
@@ -474,12 +449,7 @@ const SetupView: React.FC<SetupViewProps> = ({ onComplete }) => {
 
                   {currentStep === 3 && (
                     <div
-                      className="p-5 flex flex-col gap-3"
-                      style={{
-                        backgroundImage: "url('/images/background.png')",
-                        backgroundSize: "100% 100%",
-                        imageRendering: "pixelated",
-                      }}
+                      className="p-5 flex flex-col gap-3 mc-options-bg"
                     >
                       <p className="text-white/70 text-xs tracking-widest text-center uppercase">
                         Emerald Launcher is now configured and ready to use!
diff --git a/src/components/views/VersionsView.tsx b/src/components/views/VersionsView.tsx
index d9d515a..13db997 100644
--- a/src/components/views/VersionsView.tsx
+++ b/src/components/views/VersionsView.tsx
@@ -262,13 +262,7 @@ const VersionsView = memo(function VersionsView() {
       </h2>
 
       <div
-        className="w-full min-w-[480px] p-6 mb-4"
-        style={{
-          backgroundImage: "url('/images/background.png')",
-          backgroundSize: "100% 100%",
-          backgroundRepeat: "no-repeat",
-          imageRendering: "pixelated",
-        }}
+        className="w-full min-w-[480px] p-6 mb-4 mc-options-bg"
       >
         <div
           ref={listRef}