UI improvements

onflow · Nov 14, 2024 · a2aceb4 · a2aceb4
1 parent c2b1750
commit a2aceb4
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/packages/fcl-wc/src/ui/components/Notification.tsx b/packages/fcl-wc/src/ui/components/Notification.tsx
@@ -1,4 +1,5 @@
 import {NotificationInfo} from "../../types/types"
+import { isMobile } from "../../utils"
 
 export function Notification({
   title,
@@ -9,7 +10,7 @@ export function Notification({
 }: NotificationInfo) {
   return (
     <div
-      className="animate-slideUp fixed bottom-3 left-3 right-3 z-[2147483647] flex max-w-sm
+      className="animate-slideUp fixed bottom-3 left-3 right-3 mx-auto z-[2147483647] flex max-w-sm
         overflow-hidden rounded-lg border border-gray-200 bg-white p-4 shadow-lg
         md:bottom-4 md:left-auto md:right-4 dark:bg-gray-800 dark:border-gray-700"
       role="alert"
@@ -37,11 +38,13 @@ export function Notification({
       </div>
 
       <button
-        className="ml-4 inline-flex rounded-full md:border-transparent text-gray-400
-          hover:text-gray-500 focus:border-transparent focus:ring-0 self-center
-          md:self-start p-3 md:p-0 border-1 border-gray-200 bg-gray-100 md:bg-white
-          dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200
-          dark:hover:text-gray-300 dark:focus:border-transparent"
+        className={`ml-2 inline-flex rounded-full text-gray-400
+          hover:text-gray-500 focus:ring-0 dark:text-gray-200
+          dark:hover:text-gray-300
+          ${isMobile() ?
+            "border bg-gray-100 dark:border-gray-700 self-center p-2 dark:bg-gray-800" :
+            "self-start p-0 bg-transparent border-transparent focus:border-transparent"
+          }`}
         onClick={e => {
           e.stopPropagation()
           onDismiss?.()