fix: matine ui fixes for concistency (#5733)

apps/nextjs/src/components/board/items/item-content.tsx

@@ -42,7 +42,6 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
           item.advancedOptions.customCssClasses.join(" "),
         )}
         radius={board.itemRadius}
-        withBorder
         styles={{
           root: {
             "--opacity": board.opacity / 100,

apps/nextjs/src/components/board/items/item-menu.tsx

@@ -105,9 +105,17 @@ const BoardItemMenuInner = ({ offset, item, resetErrorBoundary }: BoardItemMenuP
   };
 
   return (
-    <Menu withinPortal withArrow position="right-start" arrowPosition="center">
+    <Menu withinPortal position="right-start" arrowPosition="center">
       <Menu.Target>
-        <ActionIcon variant="default" radius={"xl"} pos="absolute" top={offset} right={offset} style={{ zIndex: 10 }}>
+        <ActionIcon
+          variant="default"
+          radius={"xl"}
+          pos="absolute"
+          top={offset}
+          right={offset}
+          style={{ zIndex: 10 }}
+          aria-label={tItem("menu.label.settings")}
+        >
           <IconDotsVertical size={"1rem"} />
         </ActionIcon>
       </Menu.Target>

apps/nextjs/src/components/board/items/item-select-modal.tsx

@@ -145,7 +145,7 @@ const WidgetItem = ({
             </Text>
           </Stack>
           <SupportedIntegrations mt="auto" integrations={item.supportedIntegrations} />
-          <Button onClick={onSelect} variant="light" size="xs" radius="md" fullWidth>
+          <Button onClick={onSelect} variant="light" size="xs" fullWidth>
             {t(`item.create.addToBoard`)}
           </Button>
         </Stack>
@@ -170,7 +170,7 @@ const SupportedIntegrations = ({ integrations, mt }: SupportedIntegrationsProps)
 
   return (
     <Center mt={mt}>
-      <Tooltip.Group openDelay={300} closeDelay={100}>
+      <Tooltip.Group closeDelay={100}>
         <Group gap={2}>
           {integrations.slice(0, countToShow).map((integration) => (
             <Tooltip key={integration} label={getIntegrationName(integration)} withArrow>

apps/nextjs/src/components/board/sections/category-section.tsx

@@ -45,13 +45,7 @@ export const BoardCategorySection = ({ section }: Props) => {
   });
 
   return (
-    <Card
-      style={{ "--opacity": board.opacity / 100 }}
-      radius={board.itemRadius}
-      withBorder
-      p={0}
-      className={classes.itemCard}
-    >
+    <Card style={{ "--opacity": board.opacity / 100 }} radius={board.itemRadius} p={0} className={classes.itemCard}>
       <Stack>
         <Group wrap="nowrap" gap="sm">
           <UnstyledButton w="100%" p="sm" onClick={toggle}>

apps/nextjs/src/components/board/sections/category/category-menu.tsx

@@ -30,9 +30,9 @@ export const CategoryMenu = ({ category }: Props) => {
   const t = useScopedI18n("section.category");
 
   return (
-    <Menu withArrow>
+    <Menu>
       <Menu.Target>
-        <ActionIcon mr="sm" variant="transparent">
+        <ActionIcon mr="sm" variant="transparent" aria-label={t("menu.label.settings")}>
           <IconDotsVertical size={20} />
         </ActionIcon>
       </Menu.Target>

apps/nextjs/src/components/board/sections/dynamic-section.tsx

@@ -28,7 +28,6 @@ export const BoardDynamicSection = ({ section }: Props) => {
         className={combineClasses(classes.itemCard, section.options.customCssClasses.join(" "))}
         w="100%"
         h="100%"
-        withBorder
         styles={{
           root: {
             overflow: "visible",

apps/nextjs/src/components/board/sections/dynamic/dynamic-menu.tsx

@@ -43,9 +43,17 @@ export const BoardDynamicSectionMenu = ({ section }: { section: DynamicSectionIt
   };
 
   return (
-    <Menu withinPortal withArrow position="right-start" arrowPosition="center">
+    <Menu withinPortal position="right-start" arrowPosition="center">
       <Menu.Target>
-        <ActionIcon variant="default" radius={"xl"} pos="absolute" top={4} right={4} style={{ zIndex: 10 }}>
+        <ActionIcon
+          variant="default"
+          radius={"xl"}
+          pos="absolute"
+          top={4}
+          right={4}
+          style={{ zIndex: 10 }}
+          aria-label={tItem("menu.label.settings")}
+        >
           <IconDotsVertical size={"1rem"} />
         </ActionIcon>
       </Menu.Target>