Redesign sidebar / header and other misc. improvements (#24)

* Remove 1920px max width

* Fix position of list controls menu

* Match size and color of search input

* Adjust library header sizing

* Move app menu to sidebar

* Increase row buffer on play queue list

* Fix query builder styles

* Fix playerbar slider track bg

* Adjust titlebar styles

* Fix invalid modal prop

* Various adjustments to detail pages

* Fix sidebar height calculation

* Fix list null indicators, add filter indicator

* Adjust playqueue styles

* Fix jellyfin releaseYear normalization

* Suppress browser context menu on ag-grid

* Add radius to drawer queue -- normalize layout

* Add modal styles to provider theme

* Fix playlist song list pagination

* Add disc number to albums with more than one disc

* Fix query builder boolean values

* Adjust input placeholder color

* Properly handle rating/favorite from context menu on table

* Conform dropdown menu styles to context menu

* Increase sort type select width

* Fix drawer queue radius

* Change primary color

* Prevent volume wheel from invalid values

* Add icons to query builder dropdowns

* Update notification styles

* Update scrollbar thumb styles

* Remove "add to playlist" on smart playlists

* Fix "add to playlist" from context menu

src/renderer/app.tsx

@@ -7,7 +7,6 @@ import { ModalsProvider } from '@mantine/modals';
 import { initSimpleImg } from 'react-simple-img';
 import { BaseContextModal } from './components';
 import { useTheme } from './hooks';
-import { Notifications } from '@mantine/notifications';
 import { AppRouter } from './router/app-router';
 import { useSettingsStore } from './store/settings.store';
 import './styles/global.scss';
@@ -38,7 +37,21 @@ export const App = () => {
       withNormalizeCSS
       theme={{
         colorScheme: theme as 'light' | 'dark',
-        components: { Modal: { styles: { body: { padding: '.5rem' } } } },
+        components: {
+          Modal: {
+            styles: {
+              body: { background: 'var(--modal-bg)', padding: '1rem !important' },
+              close: { marginRight: '0.5rem' },
+              content: { borderRadius: '10px' },
+              header: {
+                background: 'var(--modal-bg)',
+                borderBottom: '1px solid var(--generic-border-color)',
+                paddingBottom: '1rem',
+              },
+              title: { fontSize: 'medium', fontWeight: 'bold' },
+            },
+          },
+        },
         defaultRadius: 'xs',
         dir: 'ltr',
         focusRing: 'auto',
@@ -85,8 +98,8 @@ export const App = () => {
       <ModalsProvider
         modalProps={{
           centered: true,
-          transitionDuration: 300,
           transitionProps: {
+            duration: 300,
             exitDuration: 300,
             transition: 'slide-down',
           },
@@ -95,7 +108,6 @@ export const App = () => {
       >
         <PlayQueueHandlerContext.Provider value={{ handlePlayQueueAdd }}>
           <ContextMenuProvider>
-            <Notifications />
             <AppRouter />
           </ContextMenuProvider>
         </PlayQueueHandlerContext.Provider>