Migrate to Mantine v8 and Design Changes (#961)

* mantine v8 migration

* various design changes and improvements

src/renderer/features/settings/components/window/cache-settngs.tsx

@@ -4,11 +4,13 @@ import isElectron from 'is-electron';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Button, ConfirmModal, toast } from '/@/renderer/components';
 import {
     SettingOption,
     SettingsSection,
 } from '/@/renderer/features/settings/components/settings-section';
+import { Button } from '/@/shared/components/button/button';
+import { ConfirmModal } from '/@/shared/components/modal/modal';
+import { toast } from '/@/shared/components/toast/toast';
 
 const browser = isElectron() ? window.api.browser : null;
 
@@ -58,9 +60,9 @@ export const CacheSettings = () => {
         {
             control: (
                 <Button
-                    compact
                     disabled={isClearing}
                     onClick={() => openResetConfirmModal(false)}
+                    size="compact-md"
                     variant="filled"
                 >
                     {t('common.clear', { postProcess: 'sentenceCase' })}
@@ -75,9 +77,9 @@ export const CacheSettings = () => {
         {
             control: (
                 <Button
-                    compact
                     disabled={isClearing}
                     onClick={() => openResetConfirmModal(true)}
+                    size="compact-md"
                     variant="filled"
                 >
                     {t('common.clear', { postProcess: 'sentenceCase' })}

src/renderer/features/settings/components/window/discord-settings.tsx

@@ -1,7 +1,6 @@
 import isElectron from 'is-electron';
 import { useTranslation } from 'react-i18next';
 
-import { Switch, TextInput } from '/@/renderer/components';
 import {
     SettingOption,
     SettingsSection,
@@ -11,6 +10,8 @@ import {
     useGeneralSettings,
     useSettingsStoreActions,
 } from '/@/renderer/store';
+import { Switch } from '/@/shared/components/switch/switch';
+import { TextInput } from '/@/shared/components/text-input/text-input';
 
 export const DiscordSettings = () => {
     const { t } = useTranslation();

src/renderer/features/settings/components/window/password-settings.tsx

@@ -1,17 +1,16 @@
-import { SelectItem } from '@mantine/core';
 import isElectron from 'is-electron';
 import { useTranslation } from 'react-i18next';
 
-import { Select } from '/@/renderer/components';
 import {
     SettingOption,
     SettingsSection,
 } from '/@/renderer/features/settings/components/settings-section';
 import { useGeneralSettings, useSettingsStoreActions } from '/@/renderer/store';
+import { Select } from '/@/shared/components/select/select';
 
 const localSettings = isElectron() ? window.api.localSettings : null;
 
-const PASSWORD_SETTINGS: SelectItem[] = [
+const PASSWORD_SETTINGS: { label: string; value: string }[] = [
     { label: 'libsecret', value: 'gnome_libsecret' },
     { label: 'KDE 4 (kwallet4)', value: 'kwallet' },
     { label: 'KDE 5 (kwallet5)', value: 'kwallet5' },

src/renderer/features/settings/components/window/update-settings.tsx

@@ -1,12 +1,12 @@
 import isElectron from 'is-electron';
 import { useTranslation } from 'react-i18next';
 
-import { Switch } from '/@/renderer/components';
 import {
     SettingOption,
     SettingsSection,
 } from '/@/renderer/features/settings/components/settings-section';
 import { useSettingsStoreActions, useWindowSettings } from '/@/renderer/store';
+import { Switch } from '/@/shared/components/switch/switch';
 
 const localSettings = isElectron() ? window.api.localSettings : null;
 const utils = isElectron() ? window.api.utils : null;

src/renderer/features/settings/components/window/window-settings.tsx

@@ -1,12 +1,14 @@
 import isElectron from 'is-electron';
 import { useTranslation } from 'react-i18next';
 
-import { Select, Switch, toast } from '/@/renderer/components';
 import {
     SettingOption,
     SettingsSection,
 } from '/@/renderer/features/settings/components/settings-section';
 import { useSettingsStoreActions, useWindowSettings } from '/@/renderer/store';
+import { Select } from '/@/shared/components/select/select';
+import { Switch } from '/@/shared/components/switch/switch';
+import { toast } from '/@/shared/components/toast/toast';
 import { Platform } from '/@/shared/types/types';
 
 const WINDOW_BAR_OPTIONS = [

src/renderer/features/settings/components/window/window-tab.tsx

@@ -1,16 +1,16 @@
-import { Stack } from '@mantine/core';
 import isElectron from 'is-electron';
 
 import { DiscordSettings } from '/@/renderer/features/settings/components/window/discord-settings';
 import { PasswordSettings } from '/@/renderer/features/settings/components/window/password-settings';
 import { UpdateSettings } from '/@/renderer/features/settings/components/window/update-settings';
 import { WindowSettings } from '/@/renderer/features/settings/components/window/window-settings';
+import { Stack } from '/@/shared/components/stack/stack';
 
 const utils = isElectron() ? window.api.utils : null;
 
 export const WindowTab = () => {
     return (
-        <Stack spacing="md">
+        <Stack gap="md">
             <WindowSettings />
             <DiscordSettings />
             <UpdateSettings />