[system admin - info] update for the UI of the heading (#6538)

frontend/src/css/system-info.css

@@ -1,21 +1,8 @@
-.heading {
-  padding: 8px 16px;
-  background: #f9f9f9;
-  font-size: 1rem;
-  color: #212529;
-  font-weight: normal;
-  line-height: 1.5;
-  margin: 0;
-}
-.content {
-  display: flex;
-  padding: 0rem 1rem 8rem;
-  overflow: auto;
-}
 .system-admin-info dt,
 .system-admin-info dd {
   color: inherit;
 }
+
 .info-item-heading {
   font-size: 1rem;
   font-weight: normal;
@@ -23,9 +10,11 @@
   border-bottom: 1px solid #ddd;
   margin-bottom: 0.7em;
 }
+
 .info-item-content {
   margin-bottom: 2em;
 }
+
 .btn {
   min-width: 60px;
 }

frontend/src/pages/sys-admin/info.js

@@ -84,8 +84,10 @@ class Info extends Component {
         <MainPanelTopbar {...this.props} />
         <div className="main-panel-center flex-row">
           <div className="cur-view-container system-admin-info">
-            <h2 className="heading">{gettext('Info')}</h2>
+            <div className="cur-view-path">
-            <div className="content">
+              <h3 className="sf-heading">{gettext('Info')}</h3>
+            </div>
+            <div className="cur-view-content">
               {loading && <Loading />}
               {errorMsg && <p className="error text-center mt-4">{errorMsg}</p>}
               {(!loading && !errorMsg) &&