refactor(header): Increased clarity, when using unique actions

src/components/modals/main/marketplace/sections/Added.jsx

@@ -9,7 +9,7 @@ import FileUpload from '../../settings/FileUpload';
 import Item from '../Item';
 import Items from '../Items';
 import Dropdown from '../../settings/Dropdown';
-import Header from '../../settings/Header';
+import Header, { CustomActions } from '../../settings/Header';
 import Button from '../../settings/Button';
 
 import { install, uninstall, urlParser } from 'modules/helpers/marketplace';
@@ -208,7 +208,7 @@ export default class Added extends PureComponent {
       return (
         <>
           <Header title={variables.getMessage('modals.main.navbar.addons')} report={false}>
-            {this.getSideloadButton()}
+            <CustomActions>{this.getSideloadButton()}</CustomActions>
           </Header>
           <div className="emptyItems">
             <div className="emptyNewMessage">

src/components/modals/main/settings/Header.jsx

@@ -9,7 +9,11 @@ import {
 import EventBus from 'modules/helpers/eventbus';
 import Button from './Button';
 
-const Header = (props) => {
+export const CustomActions = ({ children }) => {
+  return children;
+};
+
+export default function Header(props) {
   const [setting, setSetting] = useState(localStorage.getItem(props.setting) === 'true');
 
   useEffect(() => {
@@ -82,6 +86,7 @@ const Header = (props) => {
       </div>
     </>
   );
-};
+}
 
-export default Header;
+// Remove the export statement for customActions
+// export { customActions };

src/components/modals/main/settings/sections/Stats.jsx

@@ -5,6 +5,9 @@ import { MdShowChart, MdRestartAlt, MdDownload } from 'react-icons/md';
 import { FaTrophy } from 'react-icons/fa';
 import { toast } from 'react-toastify';
 
+import Button from '../../settings/Button';
+import Header, { CustomActions } from '../../settings/Header';
+
 import { saveFile } from 'modules/helpers/settings/modals';
 
 import achievementsData from 'modules/helpers/settings/achievements.json';
@@ -111,17 +114,22 @@ export default class Stats extends PureComponent {
 
     return (
       <>
-        <div className="statsTopBar">
-          <span className="mainTitle">{variables.getMessage(`${STATS_SECTION}.title`)}</span>
-          <div className="headerActions">
-            <button onClick={() => this.downloadStats()}>
-              <MdDownload /> {variables.getMessage('widgets.background.download')}
-            </button>
-            <button onClick={() => this.resetStats()}>
-              <MdRestartAlt /> {variables.getMessage('modals.main.settings.buttons.reset')}
-            </button>
-          </div>{' '}
-        </div>
+        <Header title={variables.getMessage(`${STATS_SECTION}.title`)} report={false}>
+          <CustomActions>
+            <Button
+              type="settings"
+              onClick={() => this.downloadStats()}
+              icon={<MdDownload />}
+              label={variables.getMessage('widgets.background.download')}
+            />
+            <Button
+              type="settings"
+              onClick={() => this.resetStats()}
+              icon={<MdRestartAlt />}
+              label={variables.getMessage('modals.main.settings.buttons.reset')}
+            />
+          </CustomActions>
+        </Header>
         <div className="stats">
           <div className="statSection rightPanel">
             <div className="statIcon">