From caf9dcacc70fff46c804ff98ebc70953f4eab51e Mon Sep 17 00:00:00 2001
From: neoapps-dev <asd22.info@gmail.com>
Date: Mon, 14 Sep 2026 14:32:41 +0300
Subject: [PATCH] feat: redesign notifs

---
 public/images/empty.png                    | Bin 0 -> 651 bytes
 src/components/common/AchievementToast.tsx |  30 +++--
 src/pages/App.tsx                          | 129 +++++++++++----------
 3 files changed, 79 insertions(+), 80 deletions(-)
 create mode 100644 public/images/empty.png

diff --git a/public/images/empty.png b/public/images/empty.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e31a715565d6281a0c91d3601b1ae43f08d5e34
GIT binary patch
literal 651
zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD1|%QND7Ro>U{uI-b`B^Ga(7~2keHgBkWh1g
zfklUphi7M{s;lEWKQ6(Efm}Qu3Whs(G%)J_DC=z$bcw&ltCRTn(0VcE0#Qa?mP_>w
z5h}80(nJ_GPFBbf71+IJ$pV%W+kiaoE{7a>g=kGnWkc2zY&-pzYp9%%JTZ?sMSF?z
z#>o?IXs$eZ(&3w&LNx2c^M8Kw@QB4rNX$@IIx=aQp+Qc5dcuSq%>u!ZCk`CAf9k-7
zw?<BHHrwBL-;>l{RO~f*VI5QFhb7Ni*_boU6s9G9NWPF>kdmO`XKdEA;z40TLc-qP
z|Np1!vax;h<l(6Yvj6XW@&Et+?#6dJjvgpjuvcNDhTxiMk{vTIU6PQn(@jr!(3_GV
zu#bUfTZYWH!iKlnX&gxf=><#-mGk{d4z=yu0t_<F0*}aI1_r*vAk26?e?<x~00li=
z978JRyuEA4cgR41!O`Jou-&6$>redGelhW~V^~+(sp8^Gud?jF*Vfzr*ll>M=-;ji
z{(T$*!U}2*J`Fd@z7@zEpIUwA-kf5~az;bOB&H)Q9h^|v84QD4V4LBwPY>Vlm(-nR
dg}eF<bCNjw;U%)Wd4VCu;OXk;vd$@?2>|f(>8bz#

literal 0
HcmV?d00001

diff --git a/src/components/common/AchievementToast.tsx b/src/components/common/AchievementToast.tsx
index 52391d0..a4f0755 100644
--- a/src/components/common/AchievementToast.tsx
+++ b/src/components/common/AchievementToast.tsx
@@ -50,19 +50,15 @@ export function AchievementToast({
   const getIcon = () => {
     if (variant === "update") {
       return (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="32"
-          height="32"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="#FFFF55"
-          strokeWidth="3"
-          strokeLinecap="square"
-          className="drop-shadow-md"
-        >
-          <path d="M12 5v14M5 12l7 7 7-7" />
-        </svg>
+        <img
+          src="/images/Update_Icon.png"
+          alt="Update"
+          className="w-8 h-8 object-contain"
+          style={{
+            imageRendering: "pixelated",
+            filter: "drop-shadow(0 0 2px rgba(255, 255, 0, 0.8)) sepia(100%) saturate(500%) hue-rotate(5deg) brightness(1.2)"
+          }}
+        />
       );
     }
     if (variant === "steam") {
@@ -112,13 +108,13 @@ export function AchievementToast({
                 }
               : undefined
           }
-          className={`fixed top-6 right-6 z-[9999] ${onClick ? "cursor-pointer" : ""}`}
+          className={onClick ? "cursor-pointer" : ""}
         >
-          <div className="flex items-center gap-3 p-3 min-w-[260px] max-w-[380px] mc-options-bg">
-            <div className="w-10 h-10 flex-shrink-0 flex items-center justify-center bg-[#3F3F3F] border-2 border-[#1A1A1A]">
+          <div className="flex gap-3 p-1 min-w-[380px] max-w-[380px] min-h-[100px] mc-options-bg">
+            <div className="h-[54px] w-[54px] flex-shrink-0 flex items-center justify-center bg-[url(/images/empty.png)] bg-cover bg-center bg-no-repeat self-center">
               {getIcon()}
             </div>
-            <div className="flex flex-col">
+            <div className="flex flex-col mt-[6px]">
               <span className="text-[#333333] text-[20px] leading-tight font-normal">
                 {displayTitle}
               </span>
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index 5728317..a0d195e 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -419,10 +419,6 @@ export default function App() {
           editions={game.editions}
         />
 
-        <AchievementToast
-          message={game.gameLog ? null : game.error}
-          onClose={clearError}
-        />
         <GameLogModal
           isOpen={!!game.gameLog}
           log={game.gameLog}
@@ -430,45 +426,74 @@ export default function App() {
           playBackSound={audio.playBackSound}
         />
 
-        <AchievementToast
-          message={updateMessage}
-          onClose={clearUpdateMessage}
-          onClick={() =>
-            TauriService.openUrl(
-              updateUrl ||
-                "https://github.com/LCE-Hub/LCE-Emerald-Launcher/releases/latest",
-            )
-          }
-          title={t("download.updateAvailable")}
-          variant="update"
-        />
-
-        <AchievementToast
-          message={game.gameUpdateMessage}
-          onClose={clearGameUpdate}
-          onClick={() => {
-            clearGameUpdate();
-            setActiveView("versions");
-          }}
-          title={t("download.gameUpdateAvailable")}
-          variant="update"
-        />
-
-        <AchievementToast
-          message={game.steamSuccessMessage}
-          onClose={clearSteamSuccess}
-          title={t("download.steamIntegration")}
-          variant="steam"
-        />
-
-        {pluginToast && (
+        <div className="fixed top-14 right-8 z-[9999] flex flex-col items-end gap-2">
           <AchievementToast
-            message={pluginToast.message}
-            onClose={() => setPluginToast(null)}
-            title={pluginToast.options?.title}
-            variant={pluginToast.options?.variant}
+            message={game.gameLog ? null : game.error}
+            onClose={clearError}
           />
-        )}
+
+          <AchievementToast
+            message={updateMessage}
+            onClose={clearUpdateMessage}
+            onClick={() =>
+              TauriService.openUrl(
+                updateUrl ||
+                  "https://github.com/LCE-Hub/LCE-Emerald-Launcher/releases/latest",
+              )
+            }
+            title={t("download.updateAvailable")}
+            variant="update"
+          />
+
+          <AchievementToast
+            message={game.gameUpdateMessage}
+            onClose={clearGameUpdate}
+            onClick={() => {
+              clearGameUpdate();
+              setActiveView("versions");
+            }}
+            title={t("download.gameUpdateAvailable")}
+            variant="update"
+          />
+
+          <AchievementToast
+            message={game.steamSuccessMessage}
+            onClose={clearSteamSuccess}
+            title={t("download.steamIntegration")}
+            variant="steam"
+          />
+
+          {pluginToast && (
+            <AchievementToast
+              message={pluginToast.message}
+              onClose={() => setPluginToast(null)}
+              title={pluginToast.options?.title}
+              variant={pluginToast.options?.variant}
+            />
+          )}
+
+          <AchievementToast
+            message={friendRequestMessage}
+            onClose={clearFriendRequestMessage}
+            onClick={() => {
+              clearFriendRequestMessage();
+              setActiveView("lceonline");
+            }}
+            title={t("download.friendRequest")}
+            variant="update"
+          />
+
+          <AchievementToast
+            message={InviteMessage}
+            onClose={clearInviteMessage}
+            onClick={() => {
+              clearInviteMessage();
+              setActiveView("lceonline");
+            }}
+            title={t("download.gameInvite")}
+            variant="update"
+          />
+        </div>
 
         <motion.div
           initial={{ opacity: 0 }}
@@ -758,28 +783,6 @@ export default function App() {
               </div>
           </motion.footer>
         </motion.div>
-
-        <AchievementToast
-          message={friendRequestMessage}
-          onClose={clearFriendRequestMessage}
-          onClick={() => {
-            clearFriendRequestMessage();
-            setActiveView("lceonline");
-          }}
-          title={t("download.friendRequest")}
-          variant="update"
-        />
-
-        <AchievementToast
-          message={InviteMessage}
-          onClose={clearInviteMessage}
-          onClick={() => {
-            clearInviteMessage();
-            setActiveView("lceonline");
-          }}
-          title={t("download.gameInvite")}
-          variant="update"
-        />
       </div>
     </MotionConfig>
   );