change notification dialog style

frontend/src/components/common/notice-item.js

@@ -403,9 +403,13 @@ class NoticeItem extends React.Component {
     }
 
     return this.props.tr ? (
-      <tr className={noticeItem.seen ? 'read' : 'unread font-weight-bold'}>
+      <tr className='notification-item'>
         <td className="text-center">
+          {!noticeItem.seen && <span className="notification-point" onClick={this.onMarkNotificationRead}></span>}
+        </td>
+        <td>
           <img src={avatar_url} width="32" height="32" className="avatar" alt="" />
+          <span className="ml-2 notification-user-name">{username || gettext('System')}</span>
         </td>
         <td className="pr-1 pr-md-8">
           <p className="m-0" dangerouslySetInnerHTML={{ __html: notice }}></p>

frontend/src/components/common/notification-popover/index.css

@@ -207,3 +207,10 @@
 .notification-container .notification-body .nav .nav-item .nav-link.active {
   color: #ED7109;
 }
+
+@media (max-width: 768px) {
+  .notification-container {
+    right: -60px;
+    width: 360px;
+  }
+}