From ad188f2742c1e0b1da4582fc118aa9759b032fd4 Mon Sep 17 00:00:00 2001
From: Mahlangu <69122375+unclebinary1001@users.noreply.github.com>
Date: Mon, 17 Oct 2022 23:54:26 -0500
Subject: [PATCH] fix purple background color for notification reminder pop up
 & fix failing build (#2224)

* fix notification reminder popup -> purple background

* Prettified Code!

* resolved color to color variables

* Prettified Code!

* fix purple bgcolor for notification reminder popp up & fix failing build

Co-authored-by: unclebinary1001 <unclebinary1001@users.noreply.github.com>
---
 .../ui/NotifyReminderPopup/NotifyReminderPopup.module.scss | 7 +++++++
 .../ui/NotifyReminderPopup/NotifyReminderPopup.tsx         | 1 +
 2 files changed, 8 insertions(+)

diff --git a/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.module.scss b/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.module.scss
index cf24bcfbb..f4fc74b8c 100644
--- a/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.module.scss
+++ b/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.module.scss
@@ -1,8 +1,13 @@
+:export {
+  popupBackgroundColor: var(--theme-color-palette-7);
+}
+
 .contentbutton {
   background-color: transparent;
   border: none;
   text-align: left;
   cursor: pointer;
+  color: var(--theme-color-components-text-on-dark);
 }
 
 .closebutton {
@@ -13,10 +18,12 @@
   border: none;
   font-size: 1.3rem;
   cursor: pointer;
+  color: var(--theme-color-components-text-on-dark);
 }
 
 .title {
   border-bottom: none;
   font-weight: bold;
   padding-left: 5px;
+  color: var(--theme-color-components-text-on-dark);
 }
diff --git a/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx b/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx
index e1a02364b..7f48138b8 100644
--- a/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx
+++ b/web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx
@@ -70,6 +70,7 @@ export const NotifyReminderPopup: FC<NotifyReminderPopupProps> = ({
         title={title}
         content={content}
         overlayInnerStyle={popupStyle}
+        color={styles.popupBackgroundColor}
       >
         {children}
       </Popover>