diff --git a/web/cashtab/src/components/Common/Notifications.js b/web/cashtab/src/components/Common/Notifications.js --- a/web/cashtab/src/components/Common/Notifications.js +++ b/web/cashtab/src/components/Common/Notifications.js @@ -7,9 +7,27 @@ import Paragraph from 'antd/lib/typography/Paragraph'; import { currency } from '@components/Common/Ticker'; import { MessageSignedNotificationIcon } from '@components/Common/CustomIcons'; +import { isMobile } from 'react-device-detect'; + +const getDeviceNotificationStyle = () => { + if (isMobile) { + const notificationStyle = { + width: '100%', + marginTop: '10%', + }; + return notificationStyle; + } + if (!isMobile) { + const notificationStyle = { + width: '100%', + }; + return notificationStyle; + } +}; // Success Notifications: const sendXecNotification = link => { + const notificationStyle = getDeviceNotificationStyle(); notification.success({ message: 'Success', description: ( @@ -21,11 +39,12 @@ ), duration: currency.notificationDurationShort, icon: <CashReceivedNotificationIcon />, - style: { width: '100%' }, + style: notificationStyle, }); }; const createTokenNotification = link => { + const notificationStyle = getDeviceNotificationStyle(); notification.success({ message: 'Success', description: ( @@ -36,22 +55,24 @@ </a> ), icon: <TokenReceivedNotificationIcon />, - style: { width: '100%' }, + style: notificationStyle, }); }; const tokenIconSubmitSuccess = () => { + const notificationStyle = getDeviceNotificationStyle(); notification.success({ message: 'Success', description: ( <Paragraph>Your eToken icon was successfully submitted.</Paragraph> ), icon: <TokenReceivedNotificationIcon />, - style: { width: '100%' }, + style: notificationStyle, }); }; const sendTokenNotification = link => { + const notificationStyle = getDeviceNotificationStyle(); notification.success({ message: 'Success', description: ( @@ -63,7 +84,7 @@ ), duration: currency.notificationDurationShort, icon: <TokenReceivedNotificationIcon />, - style: { width: '100%' }, + style: notificationStyle, }); }; @@ -73,6 +94,7 @@ cashtabSettings, fiatPrice, ) => { + const notificationStyle = getDeviceNotificationStyle(); notification.success({ message: 'Transaction received', description: ( @@ -101,7 +123,7 @@ ), duration: currency.notificationDurationShort, icon: <CashReceivedNotificationIcon />, - style: { width: '100%' }, + style: notificationStyle, }); }; @@ -111,6 +133,7 @@ receivedSlpQty, receivedSlpName, ) => { + const notificationStyle = getDeviceNotificationStyle(); notification.success({ message: `${currency.tokenTicker} transaction received: ${receivedSlpTicker}`, description: ( @@ -120,27 +143,30 @@ ), duration: currency.notificationDurationShort, icon: <TokenReceivedNotificationIcon />, - style: { width: '100%' }, + style: notificationStyle, }); }; // Error Notification: const errorNotification = (error, message, stringDescribingCallEvent) => { + const notificationStyle = getDeviceNotificationStyle(); console.log(error, message, stringDescribingCallEvent); notification.error({ message: 'Error', description: message, duration: currency.notificationDurationLong, + style: notificationStyle, }); }; const messageSignedNotification = msgSignature => { + const notificationStyle = getDeviceNotificationStyle(); notification.success({ message: 'Message Signature Generated', description: <Paragraph>{msgSignature}</Paragraph>, icon: <MessageSignedNotificationIcon />, - style: { width: '100%' }, + style: notificationStyle, }); };