Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/renderer/features/shared/components/library-background-overlay.tsx

@@ -1,14 +1,14 @@
-import styled from 'styled-components';
+import styles from './library-background-overlay.module.css';
 
-export const LibraryBackgroundOverlay = styled.div<{ $backgroundColor?: string }>`
-    position: absolute;
-    z-index: -1;
-    width: 100%;
-    height: 20vh;
-    min-height: 200px;
-    pointer-events: none;
-    user-select: none;
-    background: ${(props) => props.$backgroundColor};
-    background-image: var(--bg-subheader-overlay);
-    opacity: 0.3;
-`;
+interface LibraryBackgroundOverlayProps {
+    backgroundColor?: string;
+}
+
+export const LibraryBackgroundOverlay = ({ backgroundColor }: LibraryBackgroundOverlayProps) => {
+    return (
+        <div
+            className={styles.root}
+            style={{ backgroundColor }}
+        />
+    );
+};