fix: fixed review issues

push-protocol · Jul 13, 2023 · ecbabfe · ecbabfe
1 parent 5735d1d
commit ecbabfe
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 34 deletions.
diff --git a/packages/demoreact/src/app/NotificationsTest.tsx b/packages/demoreact/src/app/NotificationsTest.tsx
@@ -52,34 +52,34 @@ const NotificationsTest = () => {
   const [theme, setTheme] = useState('dark');
   const [viewType, setViewType] = useState('notif');
   const [showSubscribe, setShowSubscribe] = useState(false);
-//   const customTheme: INotificationItemTheme = {...notificationLightTheme,...{
-//     borderRadius:{
-//       ...notificationLightTheme.borderRadius,
-//       modal:'12px',
-//     },
-//     color:{
-//       ...notificationLightTheme.color,
-//         channelNameText:'#62626A',
-//         notificationTitleText:'#000',
-//         notificationContentText:'#62626A',
-//         timestamp:'#62626A',
-//     },
-//     fontWeight:{
-//       ...notificationLightTheme.fontWeight,
-//       channelNameText:700,
-//       notificationTitleText:700,
-//       notificationContentText:400,
-//       timestamp:400
-//     },
-//     fontSize:{
-//       ...notificationLightTheme.fontSize,
-//       channelNameText:'16px',
-//       notificationTitleText:'16px',
-//       notificationContentText:'16px',
-//       timestamp:'12px'
-//     },
-//     modalDivider:'none'
-// }};
+  const customTheme: INotificationItemTheme = {...notificationLightTheme,...{
+    borderRadius:{
+      ...notificationLightTheme.borderRadius,
+      modal:'12px',
+    },
+    color:{
+      ...notificationLightTheme.color,
+        channelNameText:'#62626A',
+        notificationTitleText:'#000',
+        notificationContentText:'#62626A',
+        timestamp:'#62626A',
+    },
+    fontWeight:{
+      ...notificationLightTheme.fontWeight,
+      channelNameText:700,
+      notificationTitleText:700,
+      notificationContentText:800,
+      timestamp:400
+    },
+    fontSize:{
+      ...notificationLightTheme.fontSize,
+      channelNameText:'16px',
+      notificationTitleText:'16px',
+      notificationContentText:'16px',
+      timestamp:'12px'
+    },
+    modalDivider:'none'
+}};
   const loadNotifications = useCallback(async () => {
     try {
       setLoading(true);
@@ -197,7 +197,7 @@ const NotificationsTest = () => {
                       image={image}
                       url={url}
                       theme={theme}
-                      // customTheme={customTheme}
+                      customTheme={customTheme}
                       // chainName="ETH_TEST_GOERLI"
                       chainName={blockchain as chainNameType}
                     />

diff --git a/packages/uiweb/src/lib/components/notification/index.tsx b/packages/uiweb/src/lib/components/notification/index.tsx
@@ -94,8 +94,9 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
   const { notificationBody: parsedBody, timeStamp } = extractTimeStamp(
     notificationBody || ''
   );
-
   const themeObject = getCustomTheme(theme,customTheme!);
+
+
   const {
     notifTitle,
     notifBody,
@@ -196,6 +197,7 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
       <ContentSection
         onClick={isCtaURLValid ? gotToCTA : undefined}
         theme={theme}
+        themeObject={themeObject!}
         cta={isCtaURLValid}
       >
         {/* section for media content */}
@@ -344,15 +346,15 @@ NotificationItem.defaultProps = {
 const MD_BREAKPOINT = '50050px'; //set an arbitrarily large number because we no longer use this breakpoint
 const SM_BREAKPOINT = '900px';
 
-const ContentSection = styled.div<CTADataType>`
+const ContentSection = styled.div<CTADataType & CustomThemeProps>`
   display: flex;
   padding: 15px 16px;
 
   cursor: ${(props) => (props.cta ? 'pointer' : 'default')};
 
   &:hover {
     background: ${(props) =>
-      props.cta ? (props.theme === 'light' ? '#e8eaf680' : '#404650') : 'none'};
+      props.cta ? (props?.themeObject?.color?.contentHoverBackground) : 'none'};
   }
 
   @media (min-width: ${SM_BREAKPOINT}) {
@@ -518,7 +520,6 @@ const ChannelTitleText = styled.div<CustomThemeProps>`
   font-weight: ${(props) =>
     props?.themeObject?.fontWeight?.notificationTitleText};
 `;
-
 const ChannelDesc = styled.div<CustomThemeProps>`
   line-height: 20px;
   flex: 1;
@@ -527,7 +528,7 @@ const ChannelDesc = styled.div<CustomThemeProps>`
     props?.themeObject?.fontSize?.notificationContentText};
   color: ${(props) => props?.themeObject?.color?.notificationContentText};
   font-weight: ${(props) =>
-    props?.themeObject?.fontWeight?.notificationContentText}
+    props?.themeObject?.fontWeight?.notificationContentText};
   flex-direction: column;
 `;
 

diff --git a/packages/uiweb/src/lib/components/notification/theme/index.ts b/packages/uiweb/src/lib/components/notification/theme/index.ts
@@ -5,6 +5,7 @@ interface IBorderRadius {
 }
 interface IColor {
   accentBackground?: string;
+  contentHoverBackground?:string;
   channelNameText?: string;
   notificationTitleText?: string;
   notificationContentText?: string;
@@ -70,6 +71,7 @@ export const lightTheme: INotificationItemTheme = {
     ...baseTheme,
     color:{
         accentBackground: '#fff',
+        contentHoverBackground:'#e8eaf680',
         channelNameText:'#333333',
         notificationTitleText:'#333333',
         notificationContentText:'#333333',
@@ -86,6 +88,7 @@ export const darkTheme: INotificationItemTheme = {
     color:{
         accentBackground: '#2F3137',
         channelNameText:'#C5CAE9',
+        contentHoverBackground:'#404650',
         notificationTitleText:'#C5CAE9',
         notificationContentText:'#C5CAE9',
         timestamp:'#808080',