fix: Modals titles nested headers and header nested buttons errors (#2019)

src/components/Dashboard/Tiles/Widgets/Inputs/LocationSelection.tsx

@@ -169,11 +169,7 @@ const CitySelectModal = ({ opened, closeModal, query, onCitySelected }: CitySele
   if (isError === true)
     return (
       <Modal
-        title={
+        title={t('modal.title') + ' - ' + query}
-          <Title order={4}>
-            {t('modal.title')} - {query}
-          </Title>
-        }
         size="xl"
         opened={opened}
         onClose={closeModal}
@@ -193,11 +189,7 @@ const CitySelectModal = ({ opened, closeModal, query, onCitySelected }: CitySele
 
   return (
     <Modal
-      title={
+      title={t('modal.title') + ' - ' + query}
-        <Title order={4}>
-          {t('modal.title')} - {query}
-        </Title>
-      }
       size="xl"
       opened={opened}
       onClose={closeModal}

src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx

@@ -1,4 +1,3 @@
-import { Title } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { openContextModalGeneric } from '~/tools/mantineModalManagerExtensions';
 import { IWidget } from '~/widgets/widgets';
@@ -38,7 +37,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
   const handleDeleteClick = () => {
     openContextModalGeneric<WidgetsRemoveModalInnerProps>({
       modal: 'integrationRemove',
-      title: <Title order={4}>{t('common:remove')}</Title>,
+      title: t('common:remove'),
       innerProps: {
         widgetId: widget.id,
         widgetType: integration,

src/components/Dashboard/Wrappers/Category/Category.tsx

@@ -98,10 +98,10 @@ export const DashboardCategory = ({ category }: DashboardCategoryProps) => {
     >
       <Accordion.Item value={category.name}>
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          <Accordion.Control icon={isEditMode && <CategoryEditMenu category={category} />}>
+          <Accordion.Control>
             <Title order={3}>{category.name}</Title>
           </Accordion.Control>
-          {!isEditMode && (
+          {!isEditMode ? (
             <Menu withArrow withinPortal>
               <Menu.Target>
                 <ActionIcon variant="light" mr="md">
@@ -114,7 +114,7 @@ export const DashboardCategory = ({ category }: DashboardCategoryProps) => {
                 </Menu.Item>
               </Menu.Dropdown>
             </Menu>
-          )}
+          ) : <CategoryEditMenu category={category} />}
         </Box>
         <Accordion.Panel>
           <div

src/components/Manage/Board/create-board.modal.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Button, Group, Stack, Text, TextInput } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { ContextModalProps, modals } from '@mantine/modals';
 import { Trans, useTranslation } from 'next-i18next';
@@ -80,11 +80,7 @@ export const CreateBoardModal = ({ id }: ContextModalProps<{}>) => {
 export const openCreateBoardModal = () => {
   modals.openContextModal({
     modal: 'createBoardModal',
-    title: (
+    title: <Trans i18nKey="manage/boards:modals.create.title" />,
-      <Title order={4}>
-        <Trans i18nKey="manage/boards:modals.create.title" />
-      </Title>
-    ),
     innerProps: {},
   });
 };

src/components/Manage/Board/delete-board.modal.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, Stack, Text, Title } from '@mantine/core';
+import { Button, Group, Stack, Text } from '@mantine/core';
 import { ContextModalProps, modals } from '@mantine/modals';
 import { Trans, useTranslation } from 'next-i18next';
 import { api } from '~/utils/api';
@@ -51,11 +51,7 @@ export const DeleteBoardModal = ({ id, innerProps }: ContextModalProps<InnerProp
 export const openDeleteBoardModal = (innerProps: InnerProps) => {
   modals.openContextModal({
     modal: 'deleteBoardModal',
-    title: (
+    title: <Trans i18nKey="manage/boards:modals.delete.title" />,
-      <Title order={4}>
-        <Trans i18nKey="manage/boards:modals.delete.title" />
-      </Title>
-    ),
     innerProps,
   });
 };

src/components/Manage/Tools/Docker/docker-select-board.modal.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, Select, Stack, Text, Title } from '@mantine/core';
+import { Button, Group, Select, Stack, Text } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { ContextModalProps, modals } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
@@ -132,11 +132,7 @@ export const DockerSelectBoardModal = ({ id, innerProps }: ContextModalProps<Inn
 export const openDockerSelectBoardModal = (innerProps: InnerProps) => {
   modals.openContextModal({
     modal: 'dockerSelectBoardModal',
-    title: (
+    title: <Trans i18nKey="tools/docker:modals.selectBoard.title" />,
-      <Title order={4}>
-        <Trans i18nKey="tools/docker:modals.selectBoard.title" />
-      </Title>
-    ),
     innerProps,
   });
   umami.track('Add to homarr modal');

src/components/Manage/User/Invite/copy-invite.modal.tsx

@@ -1,4 +1,4 @@
-import { Button, CopyButton, Mark, Stack, Text, Title } from '@mantine/core';
+import { Button, CopyButton, Mark, Stack, Text } from '@mantine/core';
 import { ContextModalProps, modals } from '@mantine/modals';
 import { Trans, useTranslation } from 'next-i18next';
 import Link from 'next/link';
@@ -65,11 +65,7 @@ const useInviteUrl = (id: string, token: string) => {
 export const openCopyInviteModal = (data: InnerProps) => {
   modals.openContextModal({
     modal: 'copyInviteModal',
-    title: (
+    title: <Trans i18nKey="manage/users/invites:modals.copy.title" />,
-      <Title order={4}>
-        <Trans i18nKey="manage/users/invites:modals.copy.title" />
-      </Title>
-    ),
     innerProps: data,
   });
 };

src/components/Manage/User/Invite/create-invite.modal.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, Stack, Text, Title } from '@mantine/core';
+import { Button, Group, Stack, Text } from '@mantine/core';
 import { DateTimePicker } from '@mantine/dates';
 import { useForm } from '@mantine/form';
 import { ContextModalProps, modals } from '@mantine/modals';
@@ -79,11 +79,7 @@ export const CreateInviteModal = ({ id }: ContextModalProps<{}>) => {
 export const openCreateInviteModal = () => {
   modals.openContextModal({
     modal: 'createInviteModal',
-    title: (
+    title: <Trans i18nKey="manage/users/invites:modals.create.title" />,
-      <Title order={4}>
-        <Trans i18nKey="manage/users/invites:modals.create.title" />
-      </Title>
-    ),
     innerProps: {},
   });
 };

src/components/Manage/User/change-user-role.modal.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, Stack, Text, Title } from '@mantine/core';
+import { Button, Group, Stack, Text } from '@mantine/core';
 import { ContextModalProps, modals } from '@mantine/modals';
 import { Trans, useTranslation } from 'next-i18next';
 import { api } from '~/utils/api';
@@ -48,12 +48,10 @@ export const openRoleChangeModal = (user: InnerProps) => {
   modals.openContextModal({
     modal: 'changeUserRoleModal',
     title: (
-      <Title order={4}>
+      <Trans
-        <Trans
+        i18nKey={`manage/users:modals.change-role.${user.type}.title`}
-          i18nKey={`manage/users:modals.change-role.${user.type}.title`}
+        values={{ name: user.name }}
-          values={{ name: user.name }}
+      />
-        />
-      </Title>
     ),
     innerProps: user,
   });

src/components/Manage/User/delete-user.modal.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, Stack, Text, Title } from '@mantine/core';
+import { Button, Group, Stack, Text } from '@mantine/core';
 import { ContextModalProps, modals } from '@mantine/modals';
 import { Trans, useTranslation } from 'next-i18next';
 import { api } from '~/utils/api';
@@ -46,11 +46,7 @@ export const DeleteUserModal = ({ id, innerProps }: ContextModalProps<InnerProps
 export const openDeleteUserModal = (user: InnerProps) => {
   modals.openContextModal({
     modal: 'deleteUserModal',
-    title: (
+    title: <Trans i18nKey="manage/users:modals.delete.title" values={{ name: user.name }} />,
-      <Title order={4}>
-        <Trans i18nKey="manage/users:modals.delete.title" values={{ name: user.name }} />
-      </Title>
-    ),
     innerProps: user,
   });
 };

src/components/layout/header/AvatarMenu.tsx

@@ -27,64 +27,60 @@ export const AvatarMenu = () => {
   const defaultBoardHref = useBoardLink('/board');
 
   return (
-    <UnstyledButton>
+    <Menu width={256}>
-      <Menu width={256}>
+      <Menu.Target>
-        <Menu.Target>
+        <UnstyledButton>
           <CurrentUserAvatar user={sessionData?.user ?? null} />
-        </Menu.Target>
+        </UnstyledButton>
-        <Menu.Dropdown>
+      </Menu.Target>
-          <Menu.Item
+      <Menu.Dropdown>
-            closeMenuOnClick={false}
+        <Menu.Item closeMenuOnClick={false} icon={<Icon size="1rem" />} onClick={toggleColorScheme}>
-            icon={<Icon size="1rem" />}
+          {t('actions.avatar.switchTheme')}
-            onClick={toggleColorScheme}
+        </Menu.Item>
-          >
+        {sessionData?.user && (
-            {t('actions.avatar.switchTheme')}
+          <>
-          </Menu.Item>
-          {sessionData?.user && (
-            <>
-              <Menu.Item
-                component={Link}
-                passHref
-                href="/user/preferences"
-                icon={<IconUserCog size="1rem" />}
-              >
-                {t('actions.avatar.preferences')}
-              </Menu.Item>
-              <Menu.Item
-                component={Link}
-                href={defaultBoardHref}
-                icon={<IconDashboard size="1rem" />}
-              >
-                {t('actions.avatar.defaultBoard')}
-              </Menu.Item>
-              <Menu.Item component={Link} href="/manage" icon={<IconHomeShare size="1rem" />}>
-                {t('actions.avatar.manage')}
-              </Menu.Item>
-              <Menu.Divider />
-            </>
-          )}
-          {sessionData?.user ? (
             <Menu.Item
-              icon={<IconLogout size="1rem" />}
+              component={Link}
-              color="red"
+              passHref
-              onClick={() =>
+              href="/user/preferences"
-                signOut({
+              icon={<IconUserCog size="1rem" />}
-                  redirect: false,
-                }).then(() => window.location.reload())
-              }
             >
-              {t('actions.avatar.logout', {
+              {t('actions.avatar.preferences')}
-                username: sessionData.user.name,
-              })}
             </Menu.Item>
-          ) : (
+            <Menu.Item
-            <Menu.Item icon={<IconLogin size="1rem" />} component={Link} href="/auth/login">
+              component={Link}
-              {t('actions.avatar.login')}
+              href={defaultBoardHref}
+              icon={<IconDashboard size="1rem" />}
+            >
+              {t('actions.avatar.defaultBoard')}
             </Menu.Item>
-          )}
+            <Menu.Item component={Link} href="/manage" icon={<IconHomeShare size="1rem" />}>
-        </Menu.Dropdown>
+              {t('actions.avatar.manage')}
-      </Menu>
+            </Menu.Item>
-    </UnstyledButton>
+            <Menu.Divider />
+          </>
+        )}
+        {sessionData?.user ? (
+          <Menu.Item
+            icon={<IconLogout size="1rem" />}
+            color="red"
+            onClick={() =>
+              signOut({
+                redirect: false,
+              }).then(() => window.location.reload())
+            }
+          >
+            {t('actions.avatar.logout', {
+              username: sessionData.user.name,
+            })}
+          </Menu.Item>
+        ) : (
+          <Menu.Item icon={<IconLogin size="1rem" />} component={Link} href="/auth/login">
+            {t('actions.avatar.login')}
+          </Menu.Item>
+        )}
+      </Menu.Dropdown>
+    </Menu>
   );
 };
 

src/styles/global.scss

@@ -140,6 +140,11 @@
   background-size: 60px 60px;
 }
 
+.mantine-Modal-title {
+  font-size: 1.375rem;
+  font-weight: 700;
+}
+
 .tiptap {
   hr {
     border-top-style: double;