From d966c3b39c581784adb225f737c4dd87eb0c12bb Mon Sep 17 00:00:00 2001 From: Ibinola Date: Thu, 21 Nov 2024 19:21:29 +0100 Subject: [PATCH 1/9] feat: add notification window --- .../TelegramNotificationModal.jsx | 37 ++++++++ .../telegramNotificationModal.css | 89 +++++++++++++++++++ .../src/pages/spotnet/dashboard/Dashboard.jsx | 19 +++- 3 files changed, 144 insertions(+), 1 deletion(-) create mode 100644 frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx create mode 100644 frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css diff --git a/frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx b/frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx new file mode 100644 index 00000000..fd147ecd --- /dev/null +++ b/frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx @@ -0,0 +1,37 @@ +import React from 'react' +import './telegramNotificationModal.css' + +const TelegramNotificationModal = ({ onClose }) => { + return ( +
+
+
+
+
+ Telegram Notification +
+

+ Do you want to enable telegram
+ notification bot? +

+

+ This will allow you to receive quick notifications on your telegram + line in real-time. You can disable this setting anytime. +

+
+
+ + +
+
+
+
+ + ); +}; + +export default TelegramNotificationModal; \ No newline at end of file diff --git a/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css b/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css new file mode 100644 index 00000000..7fabc0f7 --- /dev/null +++ b/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css @@ -0,0 +1,89 @@ + .notification-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + z-index: 50; + padding: 1rem; + } + + .notification-wrapper { + position: relative; + max-width: 460px; + width: 100%; + margin: 0 20px; + border-radius: 32px; + overflow: hidden; + } + + .notification-box { + background-color: #120721; + backdrop-filter: blur(10px); + padding: 24px; + display: flex; + flex-direction: column; + gap: 24px; + } + + .notification-content { + text-align: center; + padding: 24px; + background-color: #1a1025; + border-radius: 24px; + } + + .notification-title { + color: #ffffff; + text-align: center; + font-size: 16px; + padding-bottom: 24px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + margin-bottom: 24px; + } + + .notification-content h2 { + color: #ffffff; + font-size: 24px; + font-weight: 500; + margin-bottom: 16px; + line-height: 1.3; + } + + .notification-content p { + color: rgba(255, 255, 255, 0.7); + font-size: 15px; + line-height: 1.5; + max-width: 380px; + margin: 0 auto; + } + + .notification-actions { + display: flex; + gap: 16px; + } + + .notification-btn { + flex: 1; + padding: 24px 16px; + border-radius: 16px; + font-size: 14px; + font-weight: bold; + cursor: pointer; + } + + .notification-cancel-btn { + color: #ffffff; + background-color: transparent; + border: 1px solid rgba(255, 255, 255, 0.1); + } + + .notification-confirm-btn { + color: #ffffff; + background: linear-gradient(to right, #a855f7, #3b82f6); + border: none; + } + \ No newline at end of file diff --git a/frontend/src/pages/spotnet/dashboard/Dashboard.jsx b/frontend/src/pages/spotnet/dashboard/Dashboard.jsx index 7ffdd4bf..40a92f0d 100644 --- a/frontend/src/pages/spotnet/dashboard/Dashboard.jsx +++ b/frontend/src/pages/spotnet/dashboard/Dashboard.jsx @@ -9,12 +9,23 @@ import { ReactComponent as BorrowIcon } from "assets/icons/borrow_dynamic.svg"; import { ReactComponent as TelegramIcon } from "assets/icons/telegram_dashboard.svg"; import { TrendingDown, TrendingUp } from "lucide-react"; import Spinner from "components/spinner/Spinner"; +import TelegramNotificationModal from "components/TelegramNotificationModal/TelegramNotificationModal"; import { ZETH_ADDRESS } from "utils/constants"; import useDashboardData from "hooks/useDashboardData"; import { useClosePosition } from "hooks/useClosePosition"; export default function Component({ walletId }) { const [isCollateralActive, setIsCollateralActive] = useState(true); + const [showModal, setShowModal] = useState(false); + + const handleOpen = () => { + setShowModal(true); + }; + + const handleClose = () => { + setShowModal(false); + }; + const { data, isLoading } = useDashboardData(walletId); const { mutate: closePositionEvent, isLoading: isClosing, error: closePositionError } = useClosePosition(walletId); @@ -231,10 +242,16 @@ export default function Component({ walletId }) { {isClosing ? "Closing..." : "Redeem"} {closePositionError &&
Error: {closePositionError.message}
} - + {showModal && ( + + ) + } From cf68683271d7913cd8eccbce02eaa132a62f9ed2 Mon Sep 17 00:00:00 2001 From: Ibinola Date: Fri, 22 Nov 2024 11:22:44 +0100 Subject: [PATCH 2/9] feat(ui): update button styles --- .../telegramNotificationModal.css | 196 ++++++++++-------- 1 file changed, 107 insertions(+), 89 deletions(-) diff --git a/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css b/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css index 7fabc0f7..3ad7c9df 100644 --- a/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css +++ b/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css @@ -1,89 +1,107 @@ - .notification-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: flex; - align-items: center; - justify-content: center; - z-index: 50; - padding: 1rem; - } - - .notification-wrapper { - position: relative; - max-width: 460px; - width: 100%; - margin: 0 20px; - border-radius: 32px; - overflow: hidden; - } - - .notification-box { - background-color: #120721; - backdrop-filter: blur(10px); - padding: 24px; - display: flex; - flex-direction: column; - gap: 24px; - } - - .notification-content { - text-align: center; - padding: 24px; - background-color: #1a1025; - border-radius: 24px; - } - - .notification-title { - color: #ffffff; - text-align: center; - font-size: 16px; - padding-bottom: 24px; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); - margin-bottom: 24px; - } - - .notification-content h2 { - color: #ffffff; - font-size: 24px; - font-weight: 500; - margin-bottom: 16px; - line-height: 1.3; - } - - .notification-content p { - color: rgba(255, 255, 255, 0.7); - font-size: 15px; - line-height: 1.5; - max-width: 380px; - margin: 0 auto; - } - - .notification-actions { - display: flex; - gap: 16px; - } - - .notification-btn { - flex: 1; - padding: 24px 16px; - border-radius: 16px; - font-size: 14px; - font-weight: bold; - cursor: pointer; - } - - .notification-cancel-btn { - color: #ffffff; - background-color: transparent; - border: 1px solid rgba(255, 255, 255, 0.1); - } - - .notification-confirm-btn { - color: #ffffff; - background: linear-gradient(to right, #a855f7, #3b82f6); - border: none; - } - \ No newline at end of file +.notification-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + z-index: 50; + padding: 1rem; + backdrop-filter: blur(10px); +background-color: rgba(0, 0, 0, 0.5); +} + +.notification-wrapper { + position: relative; + max-width: 460px; + width: 100%; + margin: 0 20px; + border-radius: 32px; + overflow: hidden; +} + +.notification-box { + background-color: #120721; + backdrop-filter: blur(10px); + padding: 24px; + display: flex; + flex-direction: column; + gap: 24px; +} + +.notification-content { + text-align: center; + padding: 24px; + background-color: #1a1025; + border-radius: 24px; +} + +.notification-title { + color: #ffffff; + text-align: center; + font-size: 16px; + padding-bottom: 24px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + margin-bottom: 24px; +} + +.notification-content h2 { + color: #ffffff; + font-size: 24px; + font-weight: 500; + margin-bottom: 16px; + line-height: 1.3; +} + +.notification-content p { + color: rgba(255, 255, 255, 0.7); + font-size: 15px; + line-height: 1.5; + max-width: 380px; + margin: 0 auto; +} + +.notification-actions { + display: flex; + gap: 16px; +} + +.notification-btn { + flex: 1; + padding: 24px 16px; + border-radius: 16px; + font-size: 14px; + font-weight: bold; + cursor: pointer; +} + +.notification-cancel-btn { + color: #ffffff; + background-color: transparent; + position: relative; + border: none; +} + +.notification-cancel-btn::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 20px; + padding: 1px; + background: linear-gradient(to right, #49abd2, #e01dee); + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; +} + +.notification-confirm-btn { + color: #ffffff; + background: linear-gradient(to right, #e01dee, #49abd2); + border: none; +} From 1946ffe2022a9c2a0ff1d28564aeae0b548ea2d4 Mon Sep 17 00:00:00 2001 From: Ibinola Date: Fri, 22 Nov 2024 14:47:42 +0100 Subject: [PATCH 3/9] feat: implement post request function with params(walled_id, telegram_id) --- frontend/src/App.jsx | 2 +- .../TelegramNotificationModal.jsx | 17 +++++++++++++++-- .../src/pages/spotnet/dashboard/Dashboard.jsx | 4 +++- frontend/src/services/telegram.js | 16 +++++++++++++++- 4 files changed, 34 insertions(+), 5 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 8ee148e7..95810d6c 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -93,7 +93,7 @@ function App() { path="/login" element={walletId ? : } /> - } /> + } /> } /> diff --git a/frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx b/frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx index fd147ecd..ed972589 100644 --- a/frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx +++ b/frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx @@ -1,7 +1,20 @@ import React from 'react' import './telegramNotificationModal.css' +import { subscribeToNotification } from 'services/telegram'; + +const TelegramNotificationModal = ({ onClose, telegramId, walletId }) => { + + const handleSubscribe = async () => { + try { + await subscribeToNotification(telegramId, walletId); + alert("Subscribed to notifications successfully!"); + onClose(); + } catch (error) { + console.error("Error subscribing to notifications:", error); + alert("Failed to subscribe to notifications. Please try again."); + } + }; -const TelegramNotificationModal = ({ onClose }) => { return (
@@ -23,7 +36,7 @@ const TelegramNotificationModal = ({ onClose }) => { -
diff --git a/frontend/src/pages/spotnet/dashboard/Dashboard.jsx b/frontend/src/pages/spotnet/dashboard/Dashboard.jsx index 40a92f0d..979a7bb3 100644 --- a/frontend/src/pages/spotnet/dashboard/Dashboard.jsx +++ b/frontend/src/pages/spotnet/dashboard/Dashboard.jsx @@ -14,7 +14,7 @@ import { ZETH_ADDRESS } from "utils/constants"; import useDashboardData from "hooks/useDashboardData"; import { useClosePosition } from "hooks/useClosePosition"; -export default function Component({ walletId }) { +export default function Component({ walletId, telegramId }) { const [isCollateralActive, setIsCollateralActive] = useState(true); const [showModal, setShowModal] = useState(false); @@ -248,6 +248,8 @@ export default function Component({ walletId }) { {showModal && ( ) diff --git a/frontend/src/services/telegram.js b/frontend/src/services/telegram.js index ce879db8..2906b3bd 100644 --- a/frontend/src/services/telegram.js +++ b/frontend/src/services/telegram.js @@ -28,4 +28,18 @@ export const getTelegramUserWalletId = async (tg_user) => { console.error('Error getting wallet ID for Telegram user:', error); throw error; } -}; \ No newline at end of file +}; + +export const subscribeToNotification = async (telegram_id, wallet_id) => { + try { + const response = await axiosInstance.post("/api/subscribe-to-notification", { + telegram_id: telegram_id, + wallet_id: wallet_id, + }); + + return response.data; + } catch (error) { + console.error("Error subscribing to notifications:", error); + throw error; + } +} \ No newline at end of file From 85b5e0e68abce18fb8d0db5fcd18a760fe757b03 Mon Sep 17 00:00:00 2001 From: Ibinola Date: Fri, 22 Nov 2024 17:51:45 +0100 Subject: [PATCH 4/9] refactor: use useMutation for API interactions and replace alerts with toast notifications --- .../TelegramNotificationModal.jsx | 71 +++++++++---------- frontend/src/hooks/useTelegramNotification.js | 23 ++++++ 2 files changed, 57 insertions(+), 37 deletions(-) create mode 100644 frontend/src/hooks/useTelegramNotification.js diff --git a/frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx b/frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx index ed972589..320716b4 100644 --- a/frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx +++ b/frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx @@ -1,50 +1,47 @@ -import React from 'react' -import './telegramNotificationModal.css' -import { subscribeToNotification } from 'services/telegram'; +import React from 'react'; +import './telegramNotificationModal.css'; +import useTelegramNotification from 'hooks/useTelegramNotification'; +import { Notifier } from 'components/Notifier/Notifier'; -const TelegramNotificationModal = ({ onClose, telegramId, walletId }) => { +const TelegramNotificationModal = ({ onClose, telegramId, walletId }) => { + const { subscribe, isLoading } = useTelegramNotification(); - const handleSubscribe = async () => { - try { - await subscribeToNotification(telegramId, walletId); - alert("Subscribed to notifications successfully!"); - onClose(); - } catch (error) { - console.error("Error subscribing to notifications:", error); - alert("Failed to subscribe to notifications. Please try again."); - } + const handleSubscribe = () => { + subscribe({ telegramId, walletId }); }; return (
-
-
-
-
- Telegram Notification + +
+
+
+
Telegram Notification
+

+ Do you want to enable telegram
+ notification bot? +

+

+ This will allow you to receive quick notifications on your telegram line in real-time. You can disable + this setting anytime. +

+
+
+ +
-

- Do you want to enable telegram
- notification bot? -

-

- This will allow you to receive quick notifications on your telegram - line in real-time. You can disable this setting anytime. -

-
-
- -
-
- ); }; -export default TelegramNotificationModal; \ No newline at end of file +export default TelegramNotificationModal; diff --git a/frontend/src/hooks/useTelegramNotification.js b/frontend/src/hooks/useTelegramNotification.js new file mode 100644 index 00000000..16dbda6d --- /dev/null +++ b/frontend/src/hooks/useTelegramNotification.js @@ -0,0 +1,23 @@ +import { useMutation } from "@tanstack/react-query"; +import { subscribeToNotification } from "services/telegram"; +import { notifyError, notifySuccess } from "utils/notification"; + +const useTelegramNotification = () => { + const mutation = useMutation({ + mutationFn: ({ telegramId, walletId }) => + subscribeToNotification(telegramId, walletId), + onSuccess: () => { + notifySuccess("Subscribed to notifications successfully!"); + }, + onError: (error) => { + notifyError(error?.message || "Failed to subscribe. Please try again."); + }, + }); + + return { + subscribe: mutation.mutate, + isLoading: mutation.isPending, + }; +}; + +export default useTelegramNotification; From b0c2aefa2cc1ba4d513c4c9804aec69d4efded94 Mon Sep 17 00:00:00 2001 From: Ibinola Date: Sat, 23 Nov 2024 12:32:56 +0100 Subject: [PATCH 5/9] fix: ui updates for mobile/desktop screens --- .../TelegramNotificationModal.jsx | 3 +- .../telegramNotificationModal.css | 130 +++++++++++++----- 2 files changed, 99 insertions(+), 34 deletions(-) diff --git a/frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx b/frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx index 320716b4..ab87f515 100644 --- a/frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx +++ b/frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx @@ -13,6 +13,7 @@ const TelegramNotificationModal = ({ onClose, telegramId, walletId }) => { return (
+
@@ -35,7 +36,7 @@ const TelegramNotificationModal = ({ onClose, telegramId, walletId }) => { className="notification-btn notification-confirm-btn" disabled={isLoading} > - {isLoading ? 'Subscribing...' : 'Yes, sure'} + {isLoading ? 'Subscribing...' : 'Yes, Sure'}
diff --git a/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css b/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css index 3ad7c9df..40eb2fed 100644 --- a/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css +++ b/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css @@ -1,54 +1,71 @@ .notification-overlay { + display: flex; + align-items: center; + justify-content: center; position: fixed; top: 0; left: 0; + width: 100%; + height: 100%; + background: var(--spinner-bgn); + z-index: 9999; +} + +.notification-backdrop { + position: absolute; + top: 0; + left: 0; right: 0; bottom: 0; - display: flex; - align-items: center; - justify-content: center; - z-index: 50; - padding: 1rem; - backdrop-filter: blur(10px); -background-color: rgba(0, 0, 0, 0.5); } .notification-wrapper { position: relative; - max-width: 460px; - width: 100%; - margin: 0 20px; - border-radius: 32px; + background-image: url('../../assets/images/background.png'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + border-radius: 48px; + padding: 30px 10px; + display: flex; + align-items: center; + justify-content: center; + max-width: 800px; + width: 90%; + box-shadow: var(--primary-color); overflow: hidden; } .notification-box { - background-color: #120721; - backdrop-filter: blur(10px); - padding: 24px; + border-radius: 16px; + max-width: 642px; + width: 100%; + backdrop-filter: var(--backdrop-filter); display: flex; flex-direction: column; gap: 24px; + text-align: center; } .notification-content { text-align: center; padding: 24px; - background-color: #1a1025; - border-radius: 24px; + border: var(--nav-divider-bg) 1px solid; + background-color: var(--header-button-bg); + border-radius: 48px; } .notification-title { - color: #ffffff; + color: var(--primary); text-align: center; font-size: 16px; - padding-bottom: 24px; + padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 24px; } .notification-content h2 { - color: #ffffff; + color: var(--primary); font-size: 24px; font-weight: 500; margin-bottom: 16px; @@ -56,8 +73,8 @@ background-color: rgba(0, 0, 0, 0.5); } .notification-content p { - color: rgba(255, 255, 255, 0.7); - font-size: 15px; + color: var(--second-primary); + font-size: 16px; line-height: 1.5; max-width: 380px; margin: 0 auto; @@ -70,38 +87,85 @@ background-color: rgba(0, 0, 0, 0.5); .notification-btn { flex: 1; - padding: 24px 16px; - border-radius: 16px; - font-size: 14px; + padding: 20px 16px; + border-radius: 40px; + font-size: 16px; font-weight: bold; + background-color: var(--plain-button-bg); cursor: pointer; } .notification-cancel-btn { - color: #ffffff; - background-color: transparent; + color: var(--primary); position: relative; border: none; } .notification-cancel-btn::before { - content: ""; + content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - border-radius: 20px; + border-radius: 40px; padding: 1px; - background: linear-gradient(to right, #49abd2, #e01dee); - mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); - -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + background: var(--button-gradient); + mask: + linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); + -webkit-mask: + linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .notification-confirm-btn { - color: #ffffff; - background: linear-gradient(to right, #e01dee, #49abd2); + color: var(--primary); + background: var(--second-gradient); border: none; } + +/* Mobile Styles */ +@media screen and (max-width: 768px) { + .notification-wrapper { + max-width: 390px; + width: 100%; + padding: 20px; + } + + .notification-title { + font-size: 14px; + padding-bottom: 8px; + margin-bottom: 16px; + } + + .notification-content h2 { + font-size: 16px; + margin-bottom: 12px; + } + + .notification-content p { + font-size: 14px; + max-width: 320px; + } + + .notification-actions { + gap: 8px; + } + + .notification-btn { + padding: 20px 8px; + border-radius: 16px; + font-size: 14px; + } + + .notification-cancel-btn::before { + border-radius: 16px; + } + + .notification-confirm-btn { + font-size: 14px; + } +} From 70351f69181d7bdb3e0bc74a21095e0e812a90a3 Mon Sep 17 00:00:00 2001 From: Ibinola Date: Sat, 23 Nov 2024 13:12:33 +0100 Subject: [PATCH 6/9] fix build issue --- .../TelegramNotificationModal/TelegramNotificationModal.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx b/frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx index ab87f515..ca7bef51 100644 --- a/frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx +++ b/frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx @@ -23,8 +23,8 @@ const TelegramNotificationModal = ({ onClose, telegramId, walletId }) => { notification bot?

- This will allow you to receive quick notifications on your telegram line in real-time. You can disable - this setting anytime. + This will allow you to receive quick notifications on your telegram line in realtime. You can disable this + setting anytime.

From 27e1eaad5fd530759ccb37b6ee2842fd4923a489 Mon Sep 17 00:00:00 2001 From: Ibinola Date: Sat, 23 Nov 2024 13:51:04 +0100 Subject: [PATCH 7/9] fix incorrect image path causing build errors --- .../TelegramNotificationModal/telegramNotificationModal.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css b/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css index 40eb2fed..42b8c387 100644 --- a/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css +++ b/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css @@ -21,7 +21,7 @@ .notification-wrapper { position: relative; - background-image: url('../../assets/images/background.png'); + background-image: url('../../../public/background.png'); background-repeat: no-repeat; background-size: cover; background-position: center; From 2d3705f811b80b8d991622d770d39e8fe42cafa0 Mon Sep 17 00:00:00 2001 From: Ibinola Date: Sat, 23 Nov 2024 14:50:11 +0100 Subject: [PATCH 8/9] removed bg-image from modal --- .../telegramNotificationModal.css | 7 ------- 1 file changed, 7 deletions(-) diff --git a/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css b/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css index 42b8c387..50675fdc 100644 --- a/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css +++ b/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css @@ -20,13 +20,6 @@ } .notification-wrapper { - position: relative; - background-image: url('../../../public/background.png'); - background-repeat: no-repeat; - background-size: cover; - background-position: center; - border-radius: 48px; - padding: 30px 10px; display: flex; align-items: center; justify-content: center; From 663914dd4189b3f78d667b04a93f24e2ef96e9c9 Mon Sep 17 00:00:00 2001 From: Ibinola Date: Sat, 23 Nov 2024 15:08:15 +0100 Subject: [PATCH 9/9] remove backdrop filter --- .../TelegramNotificationModal/telegramNotificationModal.css | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css b/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css index 50675fdc..0a50a55b 100644 --- a/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css +++ b/frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css @@ -33,7 +33,6 @@ border-radius: 16px; max-width: 642px; width: 100%; - backdrop-filter: var(--backdrop-filter); display: flex; flex-direction: column; gap: 24px;