Fix history dialog styling (#7536)

* Fix history dialog

* more styling

web-console/src/dialogs/history-dialog.scss

@@ -26,8 +26,11 @@
 
     padding: 15px 15px 0 15px;
 
-    h3 {
+    .history-dialog-title {
       padding-left: 10px;
+      margin-bottom: 2px;
+      font-size: 24px;
+      font-weight: 600;
     }
 
     .no-record {
@@ -39,7 +42,7 @@
 
     .history-record-entries {
 
-      margin-bottom: 10px;
+      margin: 10px 0;
       max-height: 60vh;
       overflow: scroll;
 
@@ -49,10 +52,6 @@
         border-style: dot-dash;
         word-wrap: break-word;
 
-        hr {
-          margin: 5px 0 5px 0;
-        }
-
         .bp3-card {
           padding-bottom: 10px;
         }
@@ -60,14 +59,15 @@
         .history-record-title {
           justify-content: space-between;
           display: flex;
-
-
-        }
-
-        .history-record-comment-title {
           margin-bottom: 5px;
+
+          .history-record-title-change {
+            font-weight: 600;
+            font-size: 16px;
+          }
         }
 
+
         .json-collapse {
           button {
             position: relative;

web-console/src/dialogs/history-dialog.tsx

@@ -16,14 +16,14 @@
  * limitations under the License.
  */
 
-import { Card, Dialog } from '@blueprintjs/core';
+import {Card, Dialog, Divider, IDialogProps} from '@blueprintjs/core';
 import * as React from 'react';
 
 import { JSONCollapse } from '../components/json-collapse';
 
 import './history-dialog.scss';
 
-interface HistoryDialogProps extends React.Props<any> {
+interface HistoryDialogProps extends IDialogProps {
   historyRecords: any;
 }
 
@@ -46,7 +46,7 @@ export class HistoryDialog extends React.Component<HistoryDialogProps, HistoryDi
       content = <div className="no-record">No history records available</div>;
     } else {
        content = <>
-          <h3>History</h3>
+          <span className={'history-dialog-title'}>History</span>
           <div className="history-record-entries">
             {
               historyRecords.map((record: any) => {
@@ -57,10 +57,10 @@ export class HistoryDialog extends React.Component<HistoryDialogProps, HistoryDi
                 return <div key={record.auditTime} className="history-record-entry">
                   <Card>
                     <div className="history-record-title">
-                      <h5>Change</h5>
-                      <p>{formattedTime}</p>
+                      <span className="history-record-title-change">Change</span>
+                      <span>{formattedTime}</span>
                     </div>
-                    <hr/>
+                    <Divider/>
                     <p>{auditInfo.comment === '' ? '(No comment)' : auditInfo.comment}</p>
                     <JSONCollapse
                       stringValue={record.payload}
@@ -81,7 +81,6 @@ export class HistoryDialog extends React.Component<HistoryDialogProps, HistoryDi
 
   render(): React.ReactNode {
     return <Dialog
-      className="history-dialog"
       isOpen
       {...this.props}
     >

web-console/src/dialogs/snitch-dialog.tsx

@@ -127,6 +127,7 @@ export class SnitchDialog extends React.Component<SnitchDialogProps, SnitchDialo
     const { historyRecords } = this.props;
     return <HistoryDialog
       {...this.props}
+      className={'history-dialog'}
       historyRecords={historyRecords}
     >
       <div className={Classes.DIALOG_FOOTER_ACTIONS}>