From a91fe2e60b5f007e0349609813653c1d0d48cff2 Mon Sep 17 00:00:00 2001 From: Robin Davies Date: Sun, 25 Aug 2024 20:13:43 -0400 Subject: [PATCH] Minor style and theming fixes. --- react/src/AppThemed.tsx | 8 ++-- react/src/BankDialog.tsx | 45 ++++++++++++---------- react/src/SettingsDialog.tsx | 4 +- react/src/svg/file_download_black_24dp.svg | 9 ++++- react/src/svg/ic_bank.svg | 14 +++++++ 5 files changed, 53 insertions(+), 27 deletions(-) create mode 100644 react/src/svg/ic_bank.svg diff --git a/react/src/AppThemed.tsx b/react/src/AppThemed.tsx index 3eb8fb7..b8a3189 100644 --- a/react/src/AppThemed.tsx +++ b/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< - + { this.handleDrawerSaveBankAs() }} > - + { this.handleDrawerManageBanks(); }}> - + diff --git a/react/src/BankDialog.tsx b/react/src/BankDialog.tsx index edd387e..94ce27b 100644 --- a/react/src/BankDialog.tsx +++ b/react/src/BankDialog.tsx @@ -24,11 +24,11 @@ import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel'; import { BankIndexEntry, BankIndex } from './Banks'; import Button from "@mui/material/Button"; import ButtonBase from "@mui/material/ButtonBase"; -import Slide, {SlideProps} from '@mui/material/Slide'; +import Slide, { SlideProps } from '@mui/material/Slide'; import AppBar from '@mui/material/AppBar'; import Toolbar from '@mui/material/Toolbar'; import { Theme, createStyles } from '@mui/material/styles'; -import { WithStyles,withStyles } from "@mui/styles"; +import { WithStyles, withStyles } from "@mui/styles"; import DraggableGrid, { ScrollDirection } from './DraggableGrid'; import Fade from '@mui/material/Fade'; @@ -46,8 +46,12 @@ import MenuItem from '@mui/material/MenuItem'; import DialogEx from './DialogEx'; 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 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 { show: boolean; @@ -73,8 +77,8 @@ interface BankDialogState { const styles = (theme: Theme) => createStyles({ listIcon: { - width: 24, height: 24, - opacity: 0.6, fill: theme.palette.text.primary + width: 24, height: 24, + opacity: 0.6, fill: theme.palette.text.primary }, dialogAppBar: { position: 'relative', @@ -166,7 +170,7 @@ const BankDialog = withStyles(styles, { withTheme: true })( uploadAfter = await this.model.uploadBank(fileList[i], uploadAfter); } } catch (error) { - this.model.showAlert(error +""); + this.model.showAlert(error + ""); }; return uploadAfter; } @@ -300,11 +304,11 @@ const BankDialog = withStyles(styles, { withTheme: true })( >
-
- +
+
- + {bankEntry.name}
@@ -405,8 +409,8 @@ const BankDialog = withStyles(styles, { withTheme: true })( return ( { this.handleDialogClose() }} TransitionComponent={Transition} - style={{userSelect: "none"}} - > + style={{ userSelect: "none" }} + >
@@ -482,8 +486,8 @@ const BankDialog = withStyles(styles, { withTheme: true })( > { this.handleDownloadBank(); }} > - + Download bank @@ -494,9 +498,8 @@ const BankDialog = withStyles(styles, { withTheme: true })( this.handleUploadBank()}> - - + + Upload bank @@ -541,15 +544,15 @@ const BankDialog = withStyles(styles, { withTheme: true })( /> this.handleDeletePromptClose()} - style={{userSelect: "none"}}> + style={{ userSelect: "none" }}> - Are you sure you want to delete bank '{this.getSelectedBankName()}'? + Are you sure you want to delete bank '{this.getSelectedBankName()}'? - - diff --git a/react/src/SettingsDialog.tsx b/react/src/SettingsDialog.tsx index 7b0726b..c8481da 100644 --- a/react/src/SettingsDialog.tsx +++ b/react/src/SettingsDialog.tsx @@ -671,7 +671,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })( this.handleMidiMessageSettings()} >
- System MIDI Bindings + System MIDI bindings
@@ -754,7 +754,7 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
- Color Theme + Color theme { this.model.getTheme() === ColorTheme.Dark ? "Dark" : (this.model.getTheme() === ColorTheme.Light ? "Light": "System")} diff --git a/react/src/svg/file_download_black_24dp.svg b/react/src/svg/file_download_black_24dp.svg index efc0c46..c9c36ed 100644 --- a/react/src/svg/file_download_black_24dp.svg +++ b/react/src/svg/file_download_black_24dp.svg @@ -1 +1,8 @@ - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/react/src/svg/ic_bank.svg b/react/src/svg/ic_bank.svg new file mode 100644 index 0000000..64a6601 --- /dev/null +++ b/react/src/svg/ic_bank.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + +