Merge pull request #4533 from weseek/imprv/#79315-notification-list-formart

Imprv/#79315 notification list format

packages/app/src/components/InAppNotification/InAppNotification.tsx

@@ -63,12 +63,17 @@ export const InAppNotification = (props: Props): JSX.Element => {
 
   return (
     <>
-      {/* TODO: notification popup adjustment by #79315 */}
-      <div>
-        {renderUserImage()}
-        {renderInAppNotificationContent()}
+      <div className="dropdown-item d-flex flex-row mb-3">
+        <div className="p-2 d-flex align-items-center">
+          {renderUserImage()}
+        </div>
+        <div className="p-2">
+          {renderInAppNotificationContent()}
+          <div>
+            <FormattedDistanceDate id={props.notification._id} date={props.notification.createdAt} isShowTooltip={false} />
+          </div>
+        </div>
       </div>
-      <FormattedDistanceDate id={props.notification._id} date={props.notification.createdAt} isShowTooltip={false} />
     </>
   );
 

packages/app/src/components/InAppNotification/InAppNotificationDropdown.tsx

@@ -130,7 +130,7 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
     }
     const notificationList = notifications.map((notification: IInAppNotification) => {
       return (
-        <div className="my-2" key={notification._id}>
+        <div className="d-flex flex-row" key={notification._id}>
           <InAppNotification notification={notification} onClick={notificationClickHandler} />
         </div>
       );
@@ -149,14 +149,16 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
 
   return (
     <Dropdown className="notification-wrapper" isOpen={isOpen} toggle={toggleDropdownHandler}>
-      <DropdownToggle tag="a" className="nav-link">
-        <i className="icon-bell mr-2" /> {badge}
+      <DropdownToggle tag="a">
+        <button type="button" className="nav-link border-0 bg-transparent waves-effect waves-light">
+          <i className="icon-bell mr-2" /> {badge}
+        </button>
       </DropdownToggle>
-      <DropdownMenu right>
+      <DropdownMenu className="px-2" right>
         <InAppNotificationContents />
         <DropdownItem divider />
         {/* TODO: Able to show all notifications by #79317 */}
-        <a>See All</a>
+        <a className="dropdown-item d-flex justify-content-center">See All</a>
       </DropdownMenu>
     </Dropdown>
   );

packages/app/src/components/Navbar/GrowiNavbar.jsx

@@ -28,7 +28,7 @@ class GrowiNavbar extends React.Component {
 
     return (
       <>
-        <li>
+        <li className="nav-item">
           <InAppNotificationDropdown />
         </li>