Merge pull request #4551 from weseek/imprv/80008-make-page-title-strong

Imprv/80008 make page title strong

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

@@ -76,5 +76,4 @@ export const InAppNotification = (props: Props): JSX.Element => {
       </div>
     </>
   );
-
 };

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

@@ -12,7 +12,6 @@ import SocketIoContainer from '../../client/services/SocketIoContainer';
 
 const logger = loggerFactory('growi:InAppNotificationDropdown');
 
-
 type Props = {
   appContainer: AppContainer,
   socketIoContainer: SocketIoContainer,

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

@@ -1,6 +1,6 @@
 import React from 'react';
+import { PagePathLabel } from '@growi/ui';
 import { InAppNotification as IInAppNotification } from '../../interfaces/in-app-notification';
-
 import FormattedDistanceDate from '../FormattedDistanceDate';
 
 interface Props {
@@ -11,10 +11,12 @@ interface Props {
 
 export const PageCommentNotification = (props: Props): JSX.Element => {
 
+  const pagePath = { path: props.notification.target.path };
+
   return (
     <>
       <div>
-        <b>{props.actionUsers}</b> commented on {props.notification.target.path}
+        <b>{props.actionUsers}</b> commented on  <PagePathLabel page={pagePath} />
       </div>
       <i className="fa fa-comment-o mr-2" />
       <FormattedDistanceDate id={props.notification._id} date={props.notification.createdAt} isShowTooltip={false} />
@@ -24,14 +26,15 @@ export const PageCommentNotification = (props: Props): JSX.Element => {
 
 export const PageUpdateNotification = (props: Props): JSX.Element => {
 
+  const pagePath = { path: props.notification.target.path };
+
   return (
     <>
       <div>
-        <b>{props.actionUsers}</b> page updated on {props.notification.target.path}
+        <b>{props.actionUsers}</b> page updated on <PagePathLabel page={pagePath} />
       </div>
       <i className="fa fa-file-o mr-2" />
       <FormattedDistanceDate id={props.notification._id} date={props.notification.createdAt} isShowTooltip={false} />
     </>
   );
-
 };