UI fixes, standardization

src/components/InterfaceStatistics/LatestStatisticsModal.js

@@ -1,12 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import {
-  CButton,
-  CModal,
-  CModalHeader,
-  CModalBody,
-  CModalTitle,
-  CModalFooter,
-} from '@coreui/react';
+import { CButton, CModal, CModalHeader, CModalBody, CModalTitle, CPopover } from '@coreui/react';
+import CIcon from '@coreui/icons-react';
+import { cilX } from '@coreui/icons';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import axiosInstance from 'utils/axiosInstance';
@@ -45,17 +40,19 @@ const LatestStatisticsModal = ({ show, toggle }) => {
 
   return (
     <CModal size="lg" show={show} onClose={toggle}>
-      <CModalHeader closeButton>
+      <CModalHeader className="p-1">
         <CModalTitle className="text-dark">{t('statistics.latest_statistics')}</CModalTitle>
+        <div className="text-right">
+          <CPopover content={t('common.close')}>
+            <CButton color="primary" variant="outline" className="ml-2" onClick={toggle}>
+              <CIcon content={cilX} />
+            </CButton>
+          </CPopover>
+        </div>
       </CModalHeader>
       <CModalBody>
         <pre className="ignore">{JSON.stringify(latestStats, null, 4)}</pre>
       </CModalBody>
-      <CModalFooter>
-        <CButton color="secondary" onClick={toggle}>
-          {t('common.close')}
-        </CButton>
-      </CModalFooter>
     </CModal>
   );
 };