feat: mobile drawer editors ui enhancement

src/app/deals/components/mobile/MainBlockHeader/MainBlockHeader.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { IconChevronLeft, IconSettings } from "@tabler/icons-react";
-import { Box, Group, Stack, Text } from "@mantine/core";
+import { Box, Group, Stack, Title } from "@mantine/core";
 import Boards from "@/app/deals/components/shared/Boards/Boards";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
@@ -51,7 +51,7 @@ const MainBlockHeader = () => {
                         onClick={openProjectsEditorDrawer}>
                         <IconChevronLeft />
                     </Box>
-                    <Text>{selectedProject?.name}</Text>
+                    <Title order={6}>{selectedProject?.name}</Title>
                     <Box
                         p={"md"}
                         onClick={openBoardsEditorDrawer}>

src/app/deals/drawers/BoardsMobileEditorDrawer/BoardsMobileEditorDrawer.tsx

@@ -30,7 +30,6 @@ const BoardsMobileEditorDrawer: FC<DrawerProps<Props>> = ({
                     height: "100%",
                     display: "flex",
                     flexDirection: "column",
-                    gap: "xs",
                 },
             }}>
             <BoardsMobileContextProvider project={project}>

src/app/deals/drawers/BoardsMobileEditorDrawer/components/BoardsDrawerBody.tsx

@@ -1,6 +1,6 @@
 import React, { FC, ReactNode } from "react";
 import { IconChevronLeft, IconGripVertical } from "@tabler/icons-react";
-import { Box, Center, Divider, Group, Text } from "@mantine/core";
+import { Box, Center, Divider, Group, Stack, Title } from "@mantine/core";
 import BoardMobile from "@/app/deals/drawers/BoardsMobileEditorDrawer/components/BoardMobile";
 import CreateBoardButton from "@/app/deals/drawers/BoardsMobileEditorDrawer/components/CreateBoardButton";
 import { useBoardsMobileContext } from "@/app/deals/drawers/BoardsMobileEditorDrawer/contexts/BoardsMobileContext";
@@ -37,7 +37,7 @@ const BoardsDrawerBody: FC<Props> = ({ onClose }) => {
     };
 
     return (
-        <>
+        <Stack gap={"xs"}>
             <Group justify={"space-between"}>
                 <Box
                     onClick={onClose}
@@ -45,7 +45,7 @@ const BoardsDrawerBody: FC<Props> = ({ onClose }) => {
                     <IconChevronLeft />
                 </Box>
                 <Center>
-                    <Text>{project.name}</Text>
+                    <Title order={6}>{project.name}</Title>
                 </Center>
                 <Box p={"lg"} />
             </Group>
@@ -58,8 +58,9 @@ const BoardsDrawerBody: FC<Props> = ({ onClose }) => {
                 dragHandleStyle={{ width: "auto" }}
                 vertical
             />
+            {boards.length > 0 && <Divider />}
             <CreateBoardButton onCreateBoard={boardsCrud.onCreate} />
-        </>
+        </Stack>
     );
 };
 

src/app/deals/drawers/ProjectsMobileEditorDrawer/ProjectsMobileEditorDrawer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { FC } from "react";
-import { Center, Divider, Drawer, Text } from "@mantine/core";
+import { Center, Divider, Drawer, Stack, Title } from "@mantine/core";
 import { ProjectsContextProvider } from "@/app/deals/contexts/ProjectsContext";
 import ProjectsDrawerBody from "@/app/deals/drawers/StatusesMobileEditorDrawer/components/ProjectsDrawerBody";
 import { DrawerProps } from "@/drawers/types";
@@ -30,19 +30,20 @@ const ProjectsMobileEditorDrawer: FC<DrawerProps<Props>> = ({
                     height: "100%",
                     display: "flex",
                     flexDirection: "column",
-                    gap: "xs",
                 },
             }}>
-            <Center>
+            <Stack gap={"xs"}>
-                <Text>Проекты</Text>
+                <Center p={"xs"}>
-            </Center>
+                    <Title order={6}>Проекты</Title>
-            <Divider />
+                </Center>
-            <ProjectsContextProvider>
+                <Divider />
-                <ProjectsDrawerBody
+                <ProjectsContextProvider>
-                    onSelect={onSelect}
+                    <ProjectsDrawerBody
-                    onClose={onClose}
+                        onSelect={onSelect}
-                />
+                        onClose={onClose}
-            </ProjectsContextProvider>
+                    />
+                </ProjectsContextProvider>
+            </Stack>
         </Drawer>
     );
 };

src/app/deals/drawers/ProjectsMobileEditorDrawer/components/ProjectMobile.tsx

@@ -34,9 +34,7 @@ const ProjectMobile: FC<Props> = ({ project, onSelect, closeDrawer }) => {
 
     return (
         <Group
-            w={"100%"}
+            p={"xs"}
-            pl={"xs"}
-            py={"xs"}
             justify={"space-between"}
             wrap={"nowrap"}
             className={styles.project}

src/app/deals/drawers/StatusesMobileEditorDrawer/components/ProjectsDrawerBody.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { Stack } from "@mantine/core";
+import { Divider, Stack } from "@mantine/core";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import CreateProjectButton from "@/app/deals/drawers/ProjectsMobileEditorDrawer/components/CreateProjectButton";
 import ProjectMobile from "@/app/deals/drawers/ProjectsMobileEditorDrawer/components/ProjectMobile";
@@ -25,6 +25,7 @@ const ProjectsDrawerBody: FC<Props> = ({ onSelect, onClose }) => {
                     />
                 ))}
             </Stack>
+            <Divider />
             <CreateProjectButton />
         </>
     );