refactor: removed constant sizes

src/app/deals/components/mobile/CreateBoardButtonMobile/CreateBoardButtonMobile.module.css

@@ -1,6 +1,6 @@
 
 .create-button {
-    padding: 11px 10px 12px 10px;
+    padding: 10px 10px 11px 10px;
     border-bottom: 2px solid gray;
 }
 

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

@@ -16,7 +16,7 @@ const CreateBoardButtonMobile = () => {
                     <Box
                         onClick={startEditing}
                         className={styles["create-button"]}>
-                        <IconPlus size={22} />
+                        <IconPlus />
                     </Box>
                 )}
                 modalTitle={"Создание доски"}

src/app/deals/components/shared/BoardMenu/BoardMenu.tsx

@@ -8,15 +8,9 @@ type Props = {
     board: BoardSchema;
     startEditing: () => void;
     isHovered?: boolean;
-    menuIconSize?: number;
 };
 
-const BoardMenu: FC<Props> = ({
+const BoardMenu: FC<Props> = ({ board, startEditing, isHovered = true }) => {
-    board,
-    startEditing,
-    isHovered = true,
-    menuIconSize = 16,
-}) => {
     const { selectedBoard, onDeleteBoard } = useBoardsContext();
 
     return (
@@ -29,7 +23,7 @@ const BoardMenu: FC<Props> = ({
                         cursor: "pointer",
                     }}
                     onClick={e => e.stopPropagation()}>
-                    <IconDotsVertical size={menuIconSize} />
+                    <IconDotsVertical />
                 </Box>
             </Menu.Target>
             <Menu.Dropdown>

src/app/deals/components/shared/CreateStatusButton/CreateStatusButton.tsx

@@ -1,26 +1,31 @@
 import React from "react";
 import { IconPlus } from "@tabler/icons-react";
-import { Box, Center, Stack } from "@mantine/core";
+import { Box, Center, Group, Stack, Text } from "@mantine/core";
 import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
 import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
+import useIsMobile from "@/hooks/useIsMobile";
 import styles from "./CreateStatusButton.module.css";
 
 const CreateStatusButton = () => {
     const { onCreateStatus } = useStatusesContext();
+    const isMobile = useIsMobile();
 
     return (
         <Stack>
-            <Box
+            <Box className={styles.container}>
-                ml={6}
-                className={styles.container}>
                 <InPlaceInput
                     placeholder={"Название колонки"}
                     onComplete={onCreateStatus}
                     getChildren={startEditing => (
                         <Center
-                            p={15}
+                            p={"sm"}
                             onClick={() => startEditing()}>
-                            <IconPlus size={20} />
+                            <Group gap={"xs"} wrap={"nowrap"} align={"start"}>
+                                <IconPlus />
+                                {isMobile && (
+                                    <Text>Добавить</Text>
+                                )}
+                            </Group>
                         </Center>
                     )}
                     modalTitle={"Создание колонки"}

src/app/deals/components/shared/Funnel/Funnel.tsx

@@ -27,54 +27,46 @@ const Funnel: FC = () => {
     } = useDealsAndStatusesDnd();
 
     const renderFunnelDnd = () => (
-        <>
+        <FunnelDnd
-            <FunnelDnd
+            containers={sortedStatuses}
-                containers={sortedStatuses}
+            items={deals}
-                items={deals}
+            onDragStart={handleDragStart}
-                onDragStart={handleDragStart}
+            onDragOver={handleDragOver}
-                onDragOver={handleDragOver}
+            onDragEnd={handleDragEnd}
-                onDragEnd={handleDragEnd}
+            getContainerId={(status: StatusSchema) => `${status.id}-status`}
-                getContainerId={(status: StatusSchema) => `${status.id}-status`}
+            getItemsByContainer={(status: StatusSchema, items: DealSchema[]) =>
-                getItemsByContainer={(
+                sortByLexorank(
-                    status: StatusSchema,
+                    items.filter(deal => deal.statusId === status.id)
-                    items: DealSchema[]
+                )
-                ) =>
+            }
-                    sortByLexorank(
+            renderContainer={(
-                        items.filter(deal => deal.statusId === status.id)
+                status: StatusSchema,
-                    )
+                funnelColumnComponent: ReactNode
-                }
+            ) => (
-                renderContainer={(
+                <StatusColumnWrapper
-                    status: StatusSchema,
+                    status={status}
-                    funnelColumnComponent: ReactNode
+                    isDragging={activeStatus?.id === status.id}>
-                ) => (
+                    {funnelColumnComponent}
-                    <StatusColumnWrapper
+                </StatusColumnWrapper>
-                        status={status}
+            )}
-                        isDragging={activeStatus?.id === status.id}>
+            renderItem={(deal: DealSchema) => (
-                        {funnelColumnComponent}
+                <DealContainer
-                    </StatusColumnWrapper>
+                    key={deal.id}
-                )}
+                    deal={deal}
-                renderItem={(deal: DealSchema) => (
+                />
-                    <DealContainer
+            )}
-                        key={deal.id}
+            activeContainer={activeStatus}
-                        deal={deal}
+            activeItem={activeDeal}
-                    />
+            renderItemOverlay={(deal: DealSchema) => <DealCard deal={deal} />}
-                )}
+            renderContainerOverlay={(status: StatusSchema, children) => (
-                activeContainer={activeStatus}
+                <StatusColumnWrapper
-                activeItem={activeDeal}
+                    status={status}
-                renderItemOverlay={(deal: DealSchema) => (
+                    isDragging>
-                    <DealCard deal={deal} />
+                    {children}
-                )}
+                </StatusColumnWrapper>
-                renderContainerOverlay={(status: StatusSchema, children) => (
+            )}
-                    <StatusColumnWrapper
+            disabledColumns={isMobile}
-                        status={status}
+        />
-                        isDragging>
-                        {children}
-                    </StatusColumnWrapper>
-                )}
-                disabledColumns={isMobile}
-            />
-            {!isMobile && <CreateStatusButton />}
-        </>
     );
 
     if (isMobile) return renderFunnelDnd();
@@ -86,8 +78,9 @@ const Funnel: FC = () => {
             <Group
                 align={"start"}
                 wrap={"nowrap"}
-                gap={0}>
+                gap={"xs"}>
                 {renderFunnelDnd()}
+                <CreateStatusButton />
             </Group>
         </ScrollArea>
     );

src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css

@@ -7,3 +7,7 @@
         width: 80vw;
     }
 }
+
+.header {
+    border-bottom: solid blue 3px;
+}

src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.tsx

@@ -27,12 +27,13 @@ const StatusColumnWrapper = ({
     };
 
     return (
-        <Box
+        <Box className={styles.container}>
-            mx={7}
-            className={styles.container}>
             <Group
                 justify={"space-between"}
-                className={"flex-nowrap border-b-3 border-blue-500 mb-3 p-3"}>
+                p={"sm"}
+                wrap={"nowrap"}
+                mb={"xs"}
+                className={styles.header}>
                 <InPlaceInput
                     defaultValue={status.name}
                     onComplete={value => handleSave(value)}

src/app/deals/components/shared/StatusMenu/StatusMenu.tsx

@@ -23,12 +23,11 @@ const StatusMenu: FC<Props> = ({ status, handleEdit }) => {
         <Menu>
             <Menu.Target>
                 <Box
-                    p={5}
                     style={{
                         cursor: "pointer",
                     }}
                     onClick={e => e.stopPropagation()}>
-                    <IconDotsVertical size={16} />
+                    <IconDotsVertical />
                 </Box>
             </Menu.Target>
             <Menu.Dropdown>

src/app/deals/drawers/BoardStatusesEditorDrawer/BoardStatusesEditorDrawer.tsx

@@ -22,7 +22,7 @@ const BoardStatusesEditorDrawer: FC = () => {
 
     const renderDraggable = () => (
         <Box p={"xs"}>
-            <IconGripVertical size={22} />
+            <IconGripVertical />
         </Box>
     );
 

src/app/deals/drawers/BoardStatusesEditorDrawer/components/StatusMobile.tsx

@@ -37,7 +37,6 @@ const StatusMobile: FC<Props> = ({ status }) => {
             <BoardMenu
                 board={status}
                 startEditing={startEditing}
-                menuIconSize={22}
             />
         </Group>
     );

src/app/deals/drawers/ProjectBoardsEditorDrawer/ProjectBoardsEditorDrawer.tsx

@@ -22,7 +22,7 @@ const ProjectBoardsEditorDrawer: FC = () => {
 
     const renderDraggable = () => (
         <Box p={"xs"}>
-            <IconGripVertical size={22} />
+            <IconGripVertical />
         </Box>
     );
 

src/app/deals/drawers/ProjectsEditorDrawer/components/ProjectMenu.tsx

@@ -8,14 +8,9 @@ import styles from "./../ProjectsEditorDrawer.module.css";
 type Props = {
     project: ProjectSchema;
     startEditing: () => void;
-    menuIconSize: number;
 };
 
-const ProjectMenu: FC<Props> = ({
+const ProjectMenu: FC<Props> = ({ project, startEditing }) => {
-    project,
-    startEditing,
-    menuIconSize = 16,
-}) => {
     const { onDeleteProject } = useProjectsContext();
 
     return (
@@ -24,7 +19,7 @@ const ProjectMenu: FC<Props> = ({
                 <Box
                     className={styles["menu-button"]}
                     onClick={e => e.stopPropagation()}>
-                    <IconDotsVertical size={menuIconSize} />
+                    <IconDotsVertical />
                 </Box>
             </Menu.Target>
             <Menu.Dropdown>

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

@@ -46,7 +46,6 @@ const ProjectMobile: FC<Props> = ({ project }) => {
             <ProjectMenu
                 project={project}
                 startEditing={startEditing}
-                menuIconSize={22}
             />
         </Group>
     );

src/components/dnd/FunnelDnd/FunnelDnd.tsx

@@ -69,7 +69,7 @@ const FunnelDnd = <
         containers.map(container => {
             const containerItems = getItemsByContainer(container, items);
             const containerId = getContainerId(container);
-            return (
+            const item = (
                 <SortableItem
                     key={containerId}
                     id={containerId}
@@ -86,11 +86,13 @@ const FunnelDnd = <
                     }
                 />
             );
+            if (!isMobile) return item;
+            return <Carousel.Slide key={containerId}>{item}</Carousel.Slide>;
         });
 
-    const renderBody = () => (
+    const renderBody = () => {
-        <>
+        if (isMobile) {
-            {isMobile ? (
+            return (
                 <Carousel
                     slideSize={"80%"}
                     slideGap={"md"}
@@ -101,31 +103,17 @@ const FunnelDnd = <
                     {renderContainers()}
                     <CreateStatusButton />
                 </Carousel>
-            ) : (
+            );
-                renderContainers()
+        }
-            )}
+        return (
-            <FunnelOverlay
+            <Group
-                activeContainer={activeContainer}
+                gap={"xs"}
-                activeItem={activeItem}
+                wrap="nowrap"
-                renderContainer={container => {
+                align="start">
-                    const containerItems = getItemsByContainer(
+                {renderContainers()}
-                        container,
+            </Group>
-                        items
+        );
-                    );
+    };
-                    const containerId = getContainerId(container);
-                    return renderContainerOverlay(
-                        container,
-                        <FunnelColumn
-                            id={containerId}
-                            items={containerItems}
-                            renderItem={renderItem}
-                        />
-                    );
-                }}
-                renderItem={renderItemOverlay}
-            />
-        </>
-    );
 
     return (
         <DndContext
@@ -137,16 +125,27 @@ const FunnelDnd = <
             <SortableContext
                 items={containers.map(getContainerId)}
                 strategy={horizontalListSortingStrategy}>
-                {isMobile ? (
+                {renderBody()}
-                    renderBody()
+                <FunnelOverlay
-                ) : (
+                    activeContainer={activeContainer}
-                    <Group
+                    activeItem={activeItem}
-                        gap={0}
+                    renderContainer={container => {
-                        wrap="nowrap"
+                        const containerItems = getItemsByContainer(
-                        align="start">
+                            container,
-                        {renderBody()}
+                            items
-                    </Group>
+                        );
-                )}
+                        const containerId = getContainerId(container);
+                        return renderContainerOverlay(
+                            container,
+                            <FunnelColumn
+                                id={containerId}
+                                items={containerItems}
+                                renderItem={renderItem}
+                            />
+                        );
+                    }}
+                    renderItem={renderItemOverlay}
+                />
             </SortableContext>
         </DndContext>
     );