Notification: further handle "missed_out" + other tweaks (#6052)

* Show full notification text via tooltip

The tooltip fixes the system notifications problem (mentioned below), and also allows one to quickly read the entire comment without actually having to visit the comment.

Currently, we only show about 50 characters in the notification, truncating it to an ellipsis when exceeded.

This is not much of a problem for dynamic text (e.g. comments) since the full text can be seen after clicking on the notification (brings you to the comment). For system notifications, this is problematic since there's no other way to know what the full text was.

Tried to dynamically change the font size to auto fit, but it wasn't fruitful. Even if it did work, it'll probably won't be legible for a 2000-character comment, plus the entire list will look weird with various font sizes.

* Beautify "missed out" notification; bring user to Verify page.

## Issue
6021: Notifications: Missed Out

## Changes
- The notification already brings the user to the `/rewards`. Tweaked it to directly enter the Verify Page.
- Use LBC icon instead of generic bell for this notification.

ui/component/notification/view.jsx

@@ -42,6 +42,9 @@ export default function Notification(props: Props) {
     case NOTIFICATIONS.DAILY_WATCH_REMIND:
       notificationTarget = `/$/${PAGES.CHANNELS_FOLLOWING}`;
       break;
+    case NOTIFICATIONS.MISSED_OUT:
+      notificationTarget = `/$/${PAGES.REWARDS_VERIFY}?redirect=/$/${PAGES.REWARDS}`;
+      break;
     default:
       notificationTarget = notification_parameters.device.target;
   }
@@ -80,6 +83,7 @@ export default function Notification(props: Props) {
       break;
     case NOTIFICATIONS.DAILY_WATCH_AVAILABLE:
     case NOTIFICATIONS.DAILY_WATCH_REMIND:
+    case NOTIFICATIONS.MISSED_OUT:
       icon = <Icon icon={ICONS.LBC} sectionIcon />;
       break;
     default:
@@ -145,11 +149,16 @@ export default function Notification(props: Props) {
                   <div className="notification__title">
                     <LbcMessage>{notification_parameters.device.title}</LbcMessage>
                   </div>
-                  <div className="notification__text mobile-hidden">{commentText}</div>
+                  <div title={commentText} className="notification__text mobile-hidden">
+                    {commentText}
+                  </div>
                 </>
               ) : (
                 <>
-                  <div className="notification__text">
+                  <div
+                    title={notification_parameters.device.text.replace(/\sLBC/g, ' Credits')}
+                    className="notification__text"
+                  >
                     <LbcMessage>{notification_parameters.device.text}</LbcMessage>
                   </div>
                 </>

ui/constants/notifications.js

@@ -1,6 +1,7 @@
 export const NOTIFICATION_CREATOR_SUBSCRIBER = 'creator_subscriber';
 export const NOTIFICATION_COMMENT = 'comment';
 export const NOTIFICATION_REPLY = 'comment-reply';
+export const MISSED_OUT = 'missed_out';
 export const DAILY_WATCH_AVAILABLE = 'daily_watch_available';
 export const DAILY_WATCH_REMIND = 'daily_watch_remind';
 export const NEW_CONTENT = 'new_content';