diff --git a/src/components/settings/Config.tsx b/src/components/settings/Config.tsx index ca41938..562f20d 100644 --- a/src/components/settings/Config.tsx +++ b/src/components/settings/Config.tsx @@ -222,20 +222,20 @@ const Config = () => { > {(config.active.tab === 'playback' || '') && ( <> - - + + )} - {config.active.tab === 'lookandfeel' && } + {config.active.tab === 'lookandfeel' && } {config.active.tab === 'other' && ( <> - - - {!showWindowConfig && } - - + + + {!showWindowConfig && } + + )} diff --git a/src/components/settings/ConfigPanels/AdvancedConfig.tsx b/src/components/settings/ConfigPanels/AdvancedConfig.tsx index 3178780..559767a 100644 --- a/src/components/settings/ConfigPanels/AdvancedConfig.tsx +++ b/src/components/settings/ConfigPanels/AdvancedConfig.tsx @@ -8,7 +8,7 @@ import { useAppDispatch } from '../../../redux/hooks'; import { setPlaybackSetting } from '../../../redux/playQueueSlice'; import ConfigOption from '../ConfigOption'; -const AdvancedConfig = () => { +const AdvancedConfig = ({ bordered }: any) => { const dispatch = useAppDispatch(); const [showDebugWindow, setShowDebugWindow] = useState( Boolean(settings.getSync('showDebugWindow')) @@ -16,7 +16,7 @@ const AdvancedConfig = () => { const [autoUpdate, setAutoUpdate] = useState(Boolean(settings.getSync('autoUpdate'))); return ( - + { +const CacheConfig = ({ bordered }: any) => { const dispatch = useAppDispatch(); const [imgCacheSize, setImgCacheSize] = useState(0); const [songCacheSize, setSongCacheSize] = useState(0); @@ -104,7 +104,7 @@ const CacheConfig = () => { }; return ( - + {errorMessage !== '' && ( <> diff --git a/src/components/settings/ConfigPanels/ExternalConfig.tsx b/src/components/settings/ConfigPanels/ExternalConfig.tsx index 6d37026..895bbba 100644 --- a/src/components/settings/ConfigPanels/ExternalConfig.tsx +++ b/src/components/settings/ConfigPanels/ExternalConfig.tsx @@ -18,12 +18,12 @@ import ConfigOption from '../ConfigOption'; const dialog: any = process.env.NODE_ENV === 'test' ? '' : require('electron').remote.dialog; -const ExternalConfig = () => { +const ExternalConfig = ({ bordered }: any) => { const dispatch = useAppDispatch(); const config = useAppSelector((state) => state.config); return ( - + Config for integration with external programs. diff --git a/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx b/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx index 61acff4..0e10c44 100644 --- a/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx +++ b/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx @@ -504,12 +504,12 @@ export const ThemeConfigPanel = ({ bordered }: any) => { ); }; -const LookAndFeelConfig = () => { +const LookAndFeelConfig = ({ bordered }: any) => { return ( <> - - - + + + ); }; diff --git a/src/components/settings/ConfigPanels/PlaybackConfig.tsx b/src/components/settings/ConfigPanels/PlaybackConfig.tsx index 822d556..82d3153 100644 --- a/src/components/settings/ConfigPanels/PlaybackConfig.tsx +++ b/src/components/settings/ConfigPanels/PlaybackConfig.tsx @@ -13,7 +13,7 @@ import { useAppDispatch } from '../../../redux/hooks'; import { setPlaybackSetting } from '../../../redux/playQueueSlice'; import ConfigOption from '../ConfigOption'; -const PlaybackConfig = () => { +const PlaybackConfig = ({ bordered }: any) => { const dispatch = useAppDispatch(); const [crossfadeDuration, setCrossfadeDuration] = useState( Number(settings.getSync('fadeDuration')) @@ -54,7 +54,7 @@ const PlaybackConfig = () => { return ( <> - + { +const PlayerConfig = ({ bordered }: any) => { const dispatch = useAppDispatch(); const playQueue = useAppSelector((state) => state.playQueue); const multiSelect = useAppSelector((state) => state.multiSelect); @@ -98,7 +98,7 @@ const PlayerConfig = () => { }, []); return ( - + { +const ServerConfig = ({ bordered }: any) => { const dispatch = useAppDispatch(); const folder = useAppSelector((state) => state.folder); const config = useAppSelector((state) => state.config); @@ -25,7 +25,7 @@ const ServerConfig = () => { } return ( - + { > Search + {config.serverType === Server.Jellyfin && ( + { + dispatch(setAppliedFolderViews({ ...folder.applied, music: e })); + settings.setSync('musicFolder.music', e); + }} + > + Songs + + )} diff --git a/src/components/settings/ConfigPanels/WindowConfig.tsx b/src/components/settings/ConfigPanels/WindowConfig.tsx index b105e28..e5d3453 100644 --- a/src/components/settings/ConfigPanels/WindowConfig.tsx +++ b/src/components/settings/ConfigPanels/WindowConfig.tsx @@ -4,11 +4,11 @@ import { ConfigOptionDescription, ConfigPanel } from '../styled'; import { StyledToggle } from '../../shared/styled'; import ConfigOption from '../ConfigOption'; -const WindowConfig = () => { +const WindowConfig = ({ bordered }: any) => { const [minimizeToTray, setMinimizeToTray] = useState(Boolean(settings.getSync('minimizeToTray'))); const [exitToTray, setExitToTray] = useState(Boolean(settings.getSync('exitToTray'))); return ( - + Note: These settings may not function correctly depending on your desktop environment. diff --git a/src/components/settings/styled.tsx b/src/components/settings/styled.tsx index ae626f2..aae19a2 100644 --- a/src/components/settings/styled.tsx +++ b/src/components/settings/styled.tsx @@ -15,12 +15,12 @@ export const ConfigPanel = styled(Panel)<{ $noBackground: boolean }>` margin: ${(props) => (props.collapsible ? 'none' : '15px auto 15px auto')}; padding: 15px; - background: ${(props) => (props.$noBackground ? 'none' : 'rgba(0, 0, 0, 0.1)')}; + background: ${(props) => + props.$noBackground || !props.bordered ? 'none' : 'rgba(0, 0, 0, 0.1)'}; border-radius: 15px; .rs-panel-heading { font-size: ${(props) => props.theme.fonts.size.panelTitle}; - font-weight: bold; } .rs-panel-collapsible > .rs-panel-heading::before {