feat: redesign notifs

src/components/common/AchievementToast.tsx

@@ -50,19 +50,15 @@ export function AchievementToast({
   const getIcon = () => {
     if (variant === "update") {
       return (
-        <svg
+        <img
-          xmlns="http://www.w3.org/2000/svg"
+          src="/images/Update_Icon.png"
-          width="32"
+          alt="Update"
-          height="32"
+          className="w-8 h-8 object-contain"
-          viewBox="0 0 24 24"
+          style={{
-          fill="none"
+            imageRendering: "pixelated",
-          stroke="#FFFF55"
+            filter: "drop-shadow(0 0 2px rgba(255, 255, 0, 0.8)) sepia(100%) saturate(500%) hue-rotate(5deg) brightness(1.2)"
-          strokeWidth="3"
+          }}
-          strokeLinecap="square"
+        />
-          className="drop-shadow-md"
-        >
-          <path d="M12 5v14M5 12l7 7 7-7" />
-        </svg>
       );
     }
     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="flex gap-3 p-1 min-w-[380px] max-w-[380px] min-h-[100px] 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="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>

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
+        <div className="fixed top-14 right-8 z-[9999] flex flex-col items-end gap-2">
-          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}
+            message={game.gameLog ? null : game.error}
-            onClose={() => setPluginToast(null)}
+            onClose={clearError}
-            title={pluginToast.options?.title}
-            variant={pluginToast.options?.variant}
           />
-        )}
+
+          <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>
   );