♻️ Fix Notification in interface

Signed-off-by: Pascal Marco Caversaccio <pascal.caversaccio@hotmail.ch>

Author: pcaversaccio

interface/next.config.mjs

@@ -33,4 +33,4 @@ const nextConfig =
         distDir: "dist",
       };
 
-export default nextConfig
+export default nextConfig;

interface/package.json

@@ -24,8 +24,8 @@
     "dev": "npx next dev",
     "build": "npx next build",
     "start": "pnpm build && npx next start",
-    "prettier:check": "npx prettier -c \"**/*.{js,ts,tsx,css,md,json,yml,yaml}\"",
-    "prettier:fix": "npx prettier -w \"**/*.{js,ts,tsx,css,md,json,yml,yaml}\"",
+    "prettier:check": "npx prettier -c \"**/*.{js,mjs,ts,tsx,css,md,json,yml,yaml}\"",
+    "prettier:fix": "npx prettier -w \"**/*.{js,mjs,ts,tsx,css,md,json,yml,yaml}\"",
     "lint:check": "pnpm prettier:check && npx eslint .",
     "lint:fix": "pnpm prettier:fix && npx eslint . --fix"
   },
@@ -58,6 +58,6 @@
     "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.21.0"
+    "typescript-eslint": "^8.22.0"
   }
 }

interface/src/components/ui/Notification.tsx

@@ -52,9 +52,9 @@ export const Notification = ({
       {/* Global notification live region, render this permanently at the end of the document */}
       <div
         aria-live="assertive"
-        className="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6"
+        className="pointer-events-none fixed top-0 right-0 z-50 flex translate-x-[2px] items-end px-4 py-6 sm:items-start sm:p-6"
       >
-        <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
+        <div className="flex w-full flex-col items-start space-y-4 sm:items-end">
           {/* Notification panel, dynamically insert this into the live region when it needs to be displayed */}
           <Transition
             show={show}
@@ -66,28 +66,30 @@ export const Notification = ({
             leaveTo="opacity-0"
           >
             <div
-              className={`ring-opacity-5 pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg ring-1 shadow-lg ring-black ${bgColor}`}
+              className={`pointer-events-auto w-full max-w-4xl overflow-hidden rounded-lg ring-1 shadow-md ring-gray-300 dark:ring-gray-600 ${bgColor}`}
             >
-              <div className="p-4">
+              <div className="px-8 py-4">
                 <div className="flex items-start">
                   <div className="shrink-0">
                     <Icon
                       className={`h-6 w-6 ${iconColor}`}
                       aria-hidden="true"
                     />
                   </div>
-                  <div className="ml-3 w-0 flex-1 pt-0.5">
+                  <div className="ml-2 flex-1 pr-14">
                     <p className={`text-sm font-medium ${titleTextColor}`}>
                       {title}
                     </p>
-                    <p className={`mt-1 text-sm ${descriptionTextColor}`}>
-                      {description}
-                    </p>
+                    {description && (
+                      <p className={`mt-1 text-sm ${descriptionTextColor}`}>
+                        {description}
+                      </p>
+                    )}
                   </div>
                   <div className="ml-4 flex shrink-0">
                     <button
                       type="button"
-                      className={`inline-flex rounded-md ${bgColor} ${titleTextColor} text-hover focus:outline-hidden`}
+                      className={`inline-flex rounded-md ${bgColor} ${titleTextColor} text-hover focus:outline-none`}
                       onClick={() => {
                         setShow(false);
                       }}

lib/solady

@@ -175,9 +175,9 @@
     "deploy:soneiummain": "npx hardhat run --no-compile --network soneiumMain scripts/deploy.ts",
     "deploy:swelltestnet": "npx hardhat run --no-compile --network swellTestnet scripts/deploy.ts",
     "deploy:swellmain": "npx hardhat run --no-compile --network swellMain scripts/deploy.ts",
-    "prettier:check": "npx prettier -c \"**/*.{js,mjs,ts,md,sol,json,yml,yaml}\"",
+    "prettier:check": "npx prettier -c \"**/*.{js,ts,md,sol,json,yml,yaml}\"",
     "prettier:check:interface": "pnpm -C interface prettier:check",
-    "prettier:fix": "npx prettier -w \"**/*.{js,mjs,ts,md,sol,json,yml,yaml}\"",
+    "prettier:fix": "npx prettier -w \"**/*.{js,ts,md,sol,json,yml,yaml}\"",
     "prettier:fix:interface": "pnpm -C interface prettier:fix",
     "solhint:check": "npx solhint -c src/.solhint.json \"src/**/*.sol\" && npx solhint -c test/.solhint-tests.json \"test/**/*.sol\"",
     "solhint:fix": "npx solhint -c src/.solhint.json \"src/**/*.sol\" --fix && npx solhint -c test/.solhint-tests.json \"test/**/*.sol\" --fix",
@@ -208,6 +208,6 @@
     "ts-node": "^10.9.2",
     "typechain": "^8.3.2",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.21.0"
+    "typescript-eslint": "^8.22.0"
   }
 }