Merge branch 'feat/notification' into feat/80009-change-the-display-of-the-notification-icon-depending-on-the-action-type

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

@@ -67,10 +67,13 @@ 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>
       </div>
     </>
   );

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/InAppNotification/PageCommentInAppNotification.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { InAppNotification as IInAppNotification } from '../../interfaces/in-app-notification';
+
+interface Props {
+  actionUsers: string
+  notification: IInAppNotification
+  onClick: () => void
+}
+export const PageCommentInAppNotification = (props: Props): JSX.Element => {
+
+  return (
+    <>
+      <b>{props.actionUsers}</b> commented on {props.notification.target.path}
+    </>
+  );
+
+};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { InAppNotification as IInAppNotification } from '../../interfaces/in-app-notification';
+
+interface Props {
+  actionUsers: string
+  notification: IInAppNotification
+  onClick: () => void
+}
+export const PageUpdateInAppNotification = (props: Props): JSX.Element => {
+
+  return (
+    <>
+      <b>{props.actionUsers}</b> updated {props.notification.target.path}
+    </>
+  );
+
+};

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

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