Merge pull request #771 from ajnart/mantine-v6

🎉 Move to Mantine v6

src/components/Config/ConfigChanger.tsx

@@ -57,7 +57,12 @@ export default function ConfigChanger() {
         size="lg"
         radius="md"
       >
-        <Notification loading title={t('configSelect.loadingNew')} radius="md" disallowClose>
+        <Notification
+          loading
+          title={t('configSelect.loadingNew')}
+          radius="md"
+          withCloseButton={false}
+        >
           {t('configSelect.pleaseWait')}
         </Notification>
       </Dialog>

src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx

@@ -29,7 +29,7 @@ export const GenericAvailableElementType = ({
       : image;
 
   return (
-    <Grid.Col span={3}>
+    <Grid.Col span="auto">
       <Card style={{ height: '100%' }}>
         <Stack justify="space-between" style={{ height: '100%' }}>
           <Stack spacing="xs">

src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx

@@ -19,7 +19,7 @@ export const AvailableStaticTypes = ({ onClickBack }: AvailableStaticTypesProps)
         they don't integrate with any apps and their content never changes.
       </Text>
 
-      <Grid>
+      <Grid grow>
         <GenericAvailableElementType
           name="Static Text"
           description="Display a fixed string on your dashboard"

src/components/Dashboard/Tiles/Apps/AppTile.tsx

@@ -93,12 +93,10 @@ export const AppTile = ({ className, app }: AppTileProps) => {
 
 const useStyles = createStyles((theme, _params, getRef) => ({
   image: {
-    ref: getRef('image'),
     maxHeight: '90%',
     maxWidth: '90%',
   },
   appName: {
-    ref: getRef('appName'),
     wordBreak: 'break-word',
   },
   button: {

src/components/Dashboard/Wrappers/gridstack/store.tsx

@@ -18,12 +18,11 @@ interface GridstackStoreType {
 
 export const useNamedWrapperColumnCount = (): 'small' | 'medium' | 'large' | null => {
   const mainAreaWidth = useGridstackStore((x) => x.mainAreaWidth);
-  const { sm, xl } = useMantineTheme().breakpoints;
   if (!mainAreaWidth) return null;
 
-  if (mainAreaWidth >= xl) return 'large';
+  if (mainAreaWidth >= 1400) return 'large';
 
-  if (mainAreaWidth >= sm) return 'medium';
+  if (mainAreaWidth >= 800) return 'medium';
 
   return 'small';
 };

src/components/Settings/Common/CommonSettings.tsx

@@ -18,7 +18,7 @@ export default function CommonSettings() {
     );
   }
   return (
-    <ScrollArea style={{ height: height - 100 }} offsetScrollbars>
+    <ScrollArea style={{ height: height - 100 }} scrollbarSize={5}>
       <Stack>
         <SearchEngineSelector searchEngine={config.settings.common.searchEngine} />
         <Space />

src/components/Settings/Common/SearchEngine/SearchEngineSelector.tsx

@@ -60,6 +60,7 @@ export const SearchEngineSelector = ({ searchEngine }: Props) => {
             <Space mb="md" />
             <TextInput
               label={t('customEngine.label')}
+              name={t('configurationName')}
               description={t('tips.placeholderTip')}
               placeholder={t('customEngine.placeholder')}
               value={searchUrl}

src/components/Settings/Customization/CustomizationSettings.tsx

@@ -8,7 +8,7 @@ export default function CustomizationSettings() {
   const { t } = useTranslation('settings/customization/general');
 
   return (
-    <ScrollArea style={{ height: height - 100 }} offsetScrollbars>
+    <ScrollArea style={{ height: height - 100 }} scrollbarSize={5}>
       <Stack mt="xs" mb="md" spacing="xs">
         <Text color="dimmed">{t('text')}</Text>
         <CustomizationSettingsAccordeon />

src/components/Settings/SettingsDrawer.tsx

@@ -41,7 +41,7 @@ export function SettingsDrawer({
 
   return (
     <Drawer
-      size="xl"
+      size="lg"
       padding="lg"
       position="right"
       title={<Title order={5}>{t('title')}</Title>}

src/components/layout/header/Search.tsx

@@ -181,7 +181,6 @@ export function Search() {
         shadow="md"
         radius="md"
         zIndex={100}
-        transition="pop-top-right"
       >
         <Popover.Target>
           <Autocomplete
@@ -297,7 +296,7 @@ export function Search() {
     setSearchEngine(item);
     showNotification({
       radius: 'lg',
-      disallowClose: true,
+      withCloseButton: false,
       id: 'spotlight',
       autoClose: 1000,
       icon: <ActionIcon size="sm">{item.icon}</ActionIcon>,