Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/renderer/features/settings/components/general/control-settings.tsx

@@ -1,9 +1,7 @@
-import { Group } from '@mantine/core';
 import { t } from 'i18next';
 import isElectron from 'is-electron';
 import { useTranslation } from 'react-i18next';
 
-import { NumberInput, Select, Slider, Switch, Tooltip } from '/@/renderer/components';
 import {
     SettingOption,
     SettingsSection,
@@ -14,6 +12,13 @@ import {
     useGeneralSettings,
     useSettingsStoreActions,
 } from '/@/renderer/store/settings.store';
+import { Group } from '/@/shared/components/group/group';
+import { NumberInput } from '/@/shared/components/number-input/number-input';
+import { Select } from '/@/shared/components/select/select';
+import { Slider } from '/@/shared/components/slider/slider';
+import { Switch } from '/@/shared/components/switch/switch';
+import { Text } from '/@/shared/components/text/text';
+import { Tooltip } from '/@/shared/components/tooltip/tooltip';
 import { Play } from '/@/shared/types/types';
 
 const localSettings = isElectron() ? window.api.localSettings : null;
@@ -59,7 +64,7 @@ export const ControlSettings = () => {
                             },
                         });
                     }}
-                    rightSection="px"
+                    rightSection={<Text size="sm">px</Text>}
                     width={75}
                 />
             ),
@@ -83,7 +88,7 @@ export const ControlSettings = () => {
                         setSettings({ general: { ...settings, albumArtRes: newVal } });
                     }}
                     placeholder="0"
-                    rightSection="px"
+                    rightSection={<Text size="sm">px</Text>}
                     value={settings.albumArtRes ?? 0}
                     width={75}
                 />
@@ -346,7 +351,7 @@ export const ControlSettings = () => {
                         });
                     }}
                     placeholder="0"
-                    rightSection="px"
+                    rightSection={<Text size="sm">px</Text>}
                     width={75}
                 />
             ),