refactor: add buttons icons to the nav (#41)

svrnm · May 18, 2023 · 73d3086 · 73d3086
1 parent 0c3688e
commit 73d3086
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/src/components/options/navigation/NavigationHeader.js b/src/components/options/navigation/NavigationHeader.js
@@ -16,6 +16,13 @@ import PropTypes from 'prop-types'
 
 import ConfigurationUpload from '../../shared/ConfigurationUpload'
 import { Button } from '@mui/material'
+import {
+  AddRounded,
+  ArticleRounded,
+  BackupRounded,
+  QuestionMarkRounded,
+  SettingsRounded
+} from '@mui/icons-material'
 
 class NavigationHeader extends React.Component {
   static propTypes = {
@@ -37,6 +44,7 @@ class NavigationHeader extends React.Component {
           style={{ textTransform: 'none', fontSize: '12px', lineHeight: '14px' }}
           href="#logs"
           onClick={(event) => this.handleClick(event, 'logs')}
+          startIcon={<ArticleRounded />}
         >
           Logs
         </Button>
@@ -53,6 +61,7 @@ class NavigationHeader extends React.Component {
             style={{ textTransform: 'none', fontSize: '12px', lineHeight: '14px' }}
             href="#help"
             onClick={(event) => this.handleClick(event, 'help')}
+            startIcon={<QuestionMarkRounded />}
           >
             Help
           </Button>
@@ -62,6 +71,7 @@ class NavigationHeader extends React.Component {
             style={{ textTransform: 'none', fontSize: '12px', lineHeight: '14px' }}
             href={'#' + 'configuration/new'}
             onClick={(event) => this.handleClick(event, 'configuration/new')}
+            startIcon={<AddRounded />}
           >
             Create
           </Button>
@@ -74,6 +84,7 @@ class NavigationHeader extends React.Component {
             style={{ textTransform: 'none', fontSize: '12px', lineHeight: '14px' }}
             href="#settings"
             onClick={(event) => this.handleClick(event, 'settings')}
+            startIcon={<SettingsRounded />}
           >
             Settings
           </Button>
@@ -83,6 +94,7 @@ class NavigationHeader extends React.Component {
             style={{ textTransform: 'none', fontSize: '12px', lineHeight: '14px' }}
             href="#backup"
             onClick={this.props.onDownloadAll}
+            startIcon={<BackupRounded />}
           >
             Backup
           </Button>

diff --git a/src/components/shared/ConfigurationUpload.js b/src/components/shared/ConfigurationUpload.js
@@ -24,6 +24,7 @@ import {
   DialogTitle,
   TextField
 } from '@mui/material'
+import { FileUploadRounded } from '@mui/icons-material'
 
 class ConfigurationUpload extends React.Component {
   static propTypes = {
@@ -142,6 +143,7 @@ class ConfigurationUpload extends React.Component {
           style={{ textTransform: 'none', fontSize: '12px', lineHeight: '14px' }}
           href={'#configuration/upload'}
           onClick={(event) => this.showUploadDialog(event)}
+          startIcon={<FileUploadRounded />}
         >
           Upload
         </Button>