Adjust style for siderbar

apps/app/src/components/InAppNotification/InAppNotificationElm.tsx

@@ -2,7 +2,6 @@ import React, { FC } from 'react';
 
 import type { HasObjectId } from '@growi/core';
 import { UserPicture } from '@growi/ui/dist/components';
-import { DropdownItem } from 'reactstrap';
 
 import { apiv3Post } from '~/client/util/apiv3-client';
 import { IInAppNotification, InAppNotificationStatuses } from '~/interfaces/in-app-notification';
@@ -12,7 +11,7 @@ import { useModelNotification } from './PageNotification';
 interface Props {
   notification: IInAppNotification & HasObjectId
   elemClassName?: string,
-  type?: 'button' | 'dropdown-item',
+  type?: 'button' | 'list',
 }
 
 
@@ -57,11 +56,17 @@ const InAppNotificationElm: FC<Props> = (props: Props) => {
     );
   };
 
-  const isDropdownItem = props.type === 'dropdown-item';
+  const isListItem = props.type === 'list';
 
   // determine tag
-  const TagElem = isDropdownItem
-    ? DropdownItem
+  const TagElem = isListItem
+    ? props => (
+      <div {...props} style={{ cursor: 'pointer' }}>
+        {/* eslint-disable-next-line react/prop-types */}
+        {props.children}
+        <div className="border-top" />
+      </div>
+    )
     // eslint-disable-next-line react/prop-types
     : props => <button type="button" {...props}>{props.children}</button>;
 

apps/app/src/components/InAppNotification/InAppNotificationList.tsx

@@ -10,7 +10,7 @@ import InAppNotificationElm from './InAppNotificationElm';
 type Props = {
   inAppNotificationData?: PaginateResult<IInAppNotification>,
   elemClassName?: string,
-  type?: 'button' | 'dropdown-item',
+  type?: 'button' | 'list',
 };
 
 const InAppNotificationList: FC<Props> = (props: Props) => {

apps/app/src/components/Sidebar/InAppNotification/InAppNotificationSubstance.tsx

@@ -9,7 +9,7 @@ export const InAppNotificationSubstance = (): JSX.Element => {
 
   return (
     <>
-      <InAppNotificationList type="dropdown-item" inAppNotificationData={inAppNotificationData} />
+      <InAppNotificationList type="list" inAppNotificationData={inAppNotificationData} />
     </>
   );
 };