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,7 +27,6 @@ const Funnel: FC = () => {
     } = useDealsAndStatusesDnd();
 
     const renderFunnelDnd = () => (
-        <>
         <FunnelDnd
             containers={sortedStatuses}
             items={deals}
@@ -35,10 +34,7 @@ const Funnel: FC = () => {
             onDragOver={handleDragOver}
             onDragEnd={handleDragEnd}
             getContainerId={(status: StatusSchema) => `${status.id}-status`}
-                getItemsByContainer={(
+            getItemsByContainer={(status: StatusSchema, items: DealSchema[]) =>
-                    status: StatusSchema,
-                    items: DealSchema[]
-                ) =>
                 sortByLexorank(
                     items.filter(deal => deal.statusId === status.id)
                 )
@@ -61,9 +57,7 @@ const Funnel: FC = () => {
             )}
             activeContainer={activeStatus}
             activeItem={activeDeal}
-                renderItemOverlay={(deal: DealSchema) => (
+            renderItemOverlay={(deal: DealSchema) => <DealCard deal={deal} />}
-                    <DealCard deal={deal} />
-                )}
             renderContainerOverlay={(status: StatusSchema, children) => (
                 <StatusColumnWrapper
                     status={status}
@@ -73,8 +67,6 @@ const Funnel: FC = () => {
             )}
             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,9 +103,29 @@ const FunnelDnd = <
                     {renderContainers()}
                     <CreateStatusButton />
                 </Carousel>
-            ) : (
+            );
-                renderContainers()
+        }
-            )}
+        return (
+            <Group
+                gap={"xs"}
+                wrap="nowrap"
+                align="start">
+                {renderContainers()}
+            </Group>
+        );
+    };
+
+    return (
+        <DndContext
+            sensors={sensors}
+            collisionDetection={closestCorners}
+            onDragStart={onDragStart}
+            onDragOver={onDragOver}
+            onDragEnd={onDragEnd}>
+            <SortableContext
+                items={containers.map(getContainerId)}
+                strategy={horizontalListSortingStrategy}>
+                {renderBody()}
                 <FunnelOverlay
                     activeContainer={activeContainer}
                     activeItem={activeItem}
@@ -124,29 +146,6 @@ const FunnelDnd = <
                     }}
                     renderItem={renderItemOverlay}
                 />
-        </>
-    );
-
-    return (
-        <DndContext
-            sensors={sensors}
-            collisionDetection={closestCorners}
-            onDragStart={onDragStart}
-            onDragOver={onDragOver}
-            onDragEnd={onDragEnd}>
-            <SortableContext
-                items={containers.map(getContainerId)}
-                strategy={horizontalListSortingStrategy}>
-                {isMobile ? (
-                    renderBody()
-                ) : (
-                    <Group
-                        gap={0}
-                        wrap="nowrap"
-                        align="start">
-                        {renderBody()}
-                    </Group>
-                )}
             </SortableContext>
         </DndContext>
     );