Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/renderer/components/virtual-table/cells/genre-cell.tsx

@@ -4,17 +4,17 @@ import type { ICellRendererParams } from '@ag-grid-community/core';
 import React from 'react';
 import { generatePath, Link } from 'react-router-dom';
 
-import { Separator } from '/@/renderer/components/separator';
-import { Text } from '/@/renderer/components/text';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
+import { Separator } from '/@/shared/components/separator/separator';
+import { Text } from '/@/shared/components/text/text';
 
 export const GenreCell = ({ data, value }: ICellRendererParams) => {
     const genrePath = useGenreRoute();
     return (
-        <CellContainer $position="left">
+        <CellContainer position="left">
             <Text
-                $secondary
+                isMuted
                 overflow="hidden"
                 size="md"
             >
@@ -22,9 +22,9 @@ export const GenreCell = ({ data, value }: ICellRendererParams) => {
                     <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
                         {index > 0 && <Separator />}
                         <Text
-                            $link
-                            $secondary
                             component={Link}
+                            isLink
+                            isMuted
                             overflow="hidden"
                             size="md"
                             to={generatePath(genrePath, { genreId: item.id })}