Minor style and theming fixes.

react/src/AppThemed.tsx

@@ -64,6 +64,8 @@ import UpdateDialog from './UpdateDialog';
 
 import { ReactComponent as RenameOutlineIcon } from './svg/drive_file_rename_outline_black_24dp.svg';
 import { ReactComponent as SaveBankAsIcon } from './svg/ic_save_bank_as.svg';
+import { ReactComponent as EditBanksIcon } from './svg/ic_edit_banks.svg';
+
 import { ReactComponent as EditBanksIcon } from './svg/ic_edit_banks.svg';
 import { ReactComponent as SettingsIcon } from './svg/ic_settings.svg';
 import { ReactComponent as HelpOutlineIcon } from './svg/ic_help_outline.svg';
@@ -808,19 +810,19 @@ const AppThemed = withStyles(appStyles)(class extends ResizeResponsiveComponent<
                             <ListItemIcon >
                                 <RenameOutlineIcon color='inherit' className={classes.menuIcon} />
                             </ListItemIcon>
-                            <ListItemText primary='Rename Bank' />
+                            <ListItemText primary='Rename bank' />
                         </ListItem>
                         <ListItem button key='SaveBank' onClick={() => { this.handleDrawerSaveBankAs() }} >
                             <ListItemIcon>
                                 <SaveBankAsIcon color="inherit" className={classes.menuIcon} />
                             </ListItemIcon>
-                            <ListItemText primary='Save As New Bank' />
+                            <ListItemText primary='Save as new bank' />
                         </ListItem>
                         <ListItem button key='EditBanks' onClick={() => { this.handleDrawerManageBanks(); }}>
                             <ListItemIcon>
                                 <EditBanksIcon color="inherit" className={classes.menuIcon} />
                             </ListItemIcon>
-                            <ListItemText primary='Manage Banks...' />
+                            <ListItemText primary='Manage banks...' />
                         </ListItem>
                     </List>
                     <Divider />

react/src/BankDialog.tsx

@@ -48,6 +48,10 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
 import { ReactComponent as DownloadIcon } from './svg/file_download_black_24dp.svg';
 import { ReactComponent as UploadIcon } from './svg/file_upload_black_24dp.svg';
+import { ReactComponent as BankIcon } from './svg/ic_bank.svg';
+//import PublishIcon from '@mui/icons-material/Publish';
+// import FileDownloadIcon from '@mui/icons-material/FileDownload';
+// import AppsIcon from '@mui/icons-material/Apps';
 
 interface BankDialogProps extends WithStyles<typeof styles> {
     show: boolean;
@@ -300,11 +304,11 @@ const BankDialog = withStyles(styles, { withTheme: true })(
                     >
                         <SelectHoverBackground selected={bankEntry.instanceId === selectedItem} showHover={true} />
                         <div className={classes.itemFrame}>
-                            <div className={classes.iconFrame}>
+                            <div className={classes.ListItemIcon}>
-                                <img src="img/ic_bank.svg" className={classes.itemIcon} alt="" />
+                                <BankIcon className={classes.listIcon}/>
                             </div>
                             <div className={classes.itemLabel}>
-                                <Typography noWrap>
+                                <Typography noWrap variant="body2" color="textPrimary">
                                     {bankEntry.name}
                                 </Typography>
                             </div>
@@ -482,7 +486,7 @@ const BankDialog = withStyles(styles, { withTheme: true })(
                                                 >
                                                     <MenuItem onClick={() => { this.handleDownloadBank(); }} >
                                                         <ListItemIcon>
-                                                            <DownloadIcon className="listIcon"
+                                                            <DownloadIcon className={classes.listIcon}
                                                             />
                                                         </ListItemIcon>
                                                         <ListItemText>
@@ -495,8 +499,7 @@ const BankDialog = withStyles(styles, { withTheme: true })(
 
 
                                                             <ListItemIcon >
-                                                            <UploadIcon className="listIcon"
+                                                                <UploadIcon className={classes.listIcon} />
-                                                                />
                                                             </ListItemIcon>
                                                             <ListItemText>
                                                                 Upload bank

react/src/SettingsDialog.tsx

@@ -671,7 +671,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                                     <ButtonBase className={classes.setting} disabled={!isConfigValid} onClick={() => this.handleMidiMessageSettings()}  >
                                         <SelectHoverBackground selected={false} showHover={true} />
                                         <div style={{ width: "100%" }}>
-                                            <Typography className={classes.primaryItem} display="block" variant="body2" noWrap>System MIDI Bindings</Typography>
+                                            <Typography className={classes.primaryItem} display="block" variant="body2" noWrap>System MIDI bindings</Typography>
 
                                         </div>
                                     </ButtonBase>
@@ -754,7 +754,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                                         <SelectHoverBackground selected={false} showHover={true} />
                                         <div style={{ width: "100%" }}>
                                             <Typography className={classes.primaryItem} display="block" variant="body2" color="textPrimary" noWrap>
-                                                Color Theme</Typography>
+                                                Color theme</Typography>
                                             <Typography className={classes.secondaryItem} display="block" variant="caption" color="textSecondary" noWrap>
                                                 { this.model.getTheme() === ColorTheme.Dark ? "Dark" :
                                                 (this.model.getTheme() ===  ColorTheme.Light ? "Light": "System")}

react/src/svg/file_download_black_24dp.svg

@@ -1 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" >
+    <g>
+        <rect fill="none" height="24" width="24"/>
+    </g>
+    <g>
+        <path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/>
+    </g>
+</svg>

react/src/svg/ic_bank.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<path d="M18.993,8.993L18.99,5c0-1.1-0.891-2-1.99-2h-4h-3H6C4.9,3,4.01,3.9,4.01,5L4.007,8.993L4,9v10c0,1.1,0.891,2,1.99,2H6h11
+	h0.01c1.1,0,1.99-0.9,1.99-2V9L18.993,8.993z M17,10v9H6v-9V5h5h1h5V10z"/>
+<rect x="8" y="7" width="2" height="2"/>
+<rect x="12" y="7" width="3" height="2"/>
+<rect x="8" y="11" width="2" height="2"/>
+<rect x="12" y="11" width="3" height="2"/>
+<rect x="8" y="15" width="2" height="2"/>
+<rect x="12" y="15" width="3" height="2"/>
+</svg>