Styling adjustments to timeline notifications

ts/components/conversation/ChatSessionRefreshedNotification.tsx

@@ -6,6 +6,7 @@ import React, { useCallback, useState, ReactElement } from 'react';
 import { LocalizerType } from '../../types/Util';
 
 import { Button, ButtonSize, ButtonVariant } from '../Button';
+import { SystemMessage } from './SystemMessage';
 import { ChatSessionRefreshedDialog } from './ChatSessionRefreshedDialog';
 
 type PropsHousekeepingType = {
@@ -37,20 +38,20 @@ export function ChatSessionRefreshedNotification(
   }, [contactSupport, setIsDialogOpen]);
 
   return (
-    <div className="SystemMessage SystemMessage--multiline">
-      <div className="SystemMessage__line">
-        <span className="SystemMessage__icon SystemMessage__icon--session-refresh" />
-        {i18n('ChatRefresh--notification')}
-      </div>
-      <div className="SystemMessage__line">
-        <Button
-          onClick={openDialog}
-          size={ButtonSize.Small}
-          variant={ButtonVariant.SystemMessage}
-        >
-          {i18n('ChatRefresh--learnMore')}
-        </Button>
-      </div>
+    <>
+      <SystemMessage
+        contents={i18n('ChatRefresh--notification')}
+        button={
+          <Button
+            onClick={openDialog}
+            size={ButtonSize.Small}
+            variant={ButtonVariant.SystemMessage}
+          >
+            {i18n('ChatRefresh--learnMore')}
+          </Button>
+        }
+        icon="session-refresh"
+      />
       {isDialogOpen ? (
         <ChatSessionRefreshedDialog
           onClose={closeDialog}
@@ -58,6 +59,6 @@ export function ChatSessionRefreshedNotification(
           i18n={i18n}
         />
       ) : null}
-    </div>
+    </>
   );
 }