feat: temp shitty fixes to alexender know how to do better

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

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { Group, ScrollArea } from "@mantine/core";
+import { Group, ScrollArea, Space } from "@mantine/core";
 import Board from "@/app/deals/components/shared/Board/Board";
 import CreateBoardButton from "@/app/deals/components/shared/CreateBoardButton/CreateBoardButton";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
@@ -24,29 +24,31 @@ const Boards = () => {
     };
 
     return (
-        <ScrollArea
-            offsetScrollbars={"x"}
-            scrollbars={"x"}
-            scrollbarSize={0}
-            w={"100%"}
-            mt={"xs"}
-            mb={"sm"}>
-            <Group
-                align={"end"}
-                wrap={"nowrap"}
-                gap={0}>
-                <SortableDnd
-                    initialItems={boards}
-                    renderItem={renderBoard}
-                    onDragEnd={onDragEnd}
-                    onItemClick={selectBoard}
-                    containerStyle={{ flexWrap: "nowrap" }}
-                    dragHandleStyle={{ cursor: "pointer" }}
-                    disabled={isMobile}
-                />
-                <CreateBoardButton />
-            </Group>
-        </ScrollArea>
+        <>
+            <ScrollArea
+                offsetScrollbars={"x"}
+                scrollbars={"x"}
+                scrollbarSize={0}>
+                <Group
+                    align={"end"}
+                    wrap={"nowrap"}
+                    gap={0}>
+                    <SortableDnd
+                        initialItems={boards}
+                        renderItem={renderBoard}
+                        onDragEnd={onDragEnd}
+                        onItemClick={selectBoard}
+                        containerStyle={{ flexWrap: "nowrap" }}
+                        dragHandleStyle={{ cursor: "pointer" }}
+                        disabled={isMobile}
+                    />
+                </Group>
+            </ScrollArea>
+            <Space w={"md"}/>
+            <CreateBoardButton />
+            <Space w={"md"}/>
+
+        </>
     );
 };
 

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

@@ -1,12 +1,10 @@
 
 .create-button {
     padding: 10px 10px 9px;
-    border-bottom: 2px solid gray;
     cursor: pointer;
 }
 
 .spacer {
     height: 45px;
-    border-bottom: 2px solid gray;
     width: 100%;
 }

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

@@ -1,5 +1,5 @@
 import { IconPlus } from "@tabler/icons-react";
-import { Box, Space } from "@mantine/core";
+import { Box, Flex } from "@mantine/core";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
 import styles from "./CreateBoardButton.module.css";
@@ -8,7 +8,7 @@ const CreateBoardButton = () => {
     const { onCreateBoard } = useBoardsContext();
 
     return (
-        <>
+        <Flex style={{borderBottom: "2px solid gray"}}>
             <InPlaceInput
                 placeholder={"Название доски"}
                 onComplete={onCreateBoard}
@@ -20,17 +20,8 @@ const CreateBoardButton = () => {
                     </Box>
                 )}
                 modalTitle={"Создание доски"}
-                inputStyles={{
-                    wrapper: {
-                        paddingTop: 3,
-                        paddingBottom: 4,
-                        paddingInline: 15,
-                        borderBottom: "2px solid gray",
-                    },
-                }}
             />
-            <Space className={styles.spacer} />
-        </>
+        </Flex>
     );
 };
 

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { IconChevronLeft, IconSettings } from "@tabler/icons-react";
-import { Box, Group, Stack, Text } from "@mantine/core";
+import { Box, Flex, Group, Stack, Text } 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";
@@ -17,25 +17,28 @@ const Header = () => {
     } = useProjectsContext();
     const { setIsEditorDrawerOpened } = useBoardsContext();
     const isMobile = useIsMobile();
-
     const getDesktopHeader = () => {
         return (
-            <Group
-                w={"100%"}
-                gap={0}
-                justify={"end"}
-                wrap={"nowrap"}>
+            <Flex
+                wrap={"nowrap"}
+                justify={"space-between"}>
                 <Boards />
-                <ProjectSelect
-                    data={projects}
-                    value={selectedProject}
-                    onChange={value => value && setSelectedProject(value)}
-                    style={{
-                        borderBottom: "solid gray 2px",
-                        paddingBottom: 5,
-                    }}
+                <Box
+                    flex={1}
+                    style={{ borderBottom: "2px solid gray" }}
                 />
-            </Group>
+                <Flex
+                    align={"center"}
+                    style={{
+                        borderBottom: "2px solid gray",
+                    }}>
+                    <ProjectSelect
+                        data={projects}
+                        value={selectedProject}
+                        onChange={value => value && setSelectedProject(value)}
+                    />
+                </Flex>
+            </Flex>
         );
     };
 

src/app/deals/page.tsx

@@ -9,6 +9,7 @@ import ProjectsEditorDrawer from "@/app/deals/drawers/ProjectsEditorDrawer";
 import PageBlock from "@/components/layout/PageBlock/PageBlock";
 import PageContainer from "@/components/layout/PageContainer/PageContainer";
 import { DealsContextProvider } from "./contexts/DealsContext";
+import { Space } from "@mantine/core";
 
 export default function DealsPage() {
     return (
@@ -17,6 +18,7 @@ export default function DealsPage() {
                 <PageContainer>
                     <PageBlock className={"mobile-margin-height"}>
                         <Header />
+                        <Space h={"md"}/>
                         <StatusesContextProvider>
                             <DealsContextProvider>
                                 <Funnel />

src/components/layout/Footer/Footer.tsx

@@ -1,7 +1,9 @@
 import { IconCircleDotted, IconLayoutKanban } from "@tabler/icons-react";
-import FooterButtons from "@/components/layout/Footer/FooterButtons";
+import FooterButtons, {
+    LinkData,
+} from "@/components/layout/Footer/FooterButtons";
 
-const buttonsData = [
+const buttonsData: LinkData[] = [
     {
         icon: IconLayoutKanban,
         label: "Сделки",

src/components/layout/Footer/FooterButtons.tsx

@@ -3,7 +3,7 @@ import { Group, Stack, Text } from "@mantine/core";
 import FooterClickable from "@/components/layout/Footer/FooterClickable";
 import styles from "./Footer.module.css";
 
-type LinkData = {
+export type LinkData = {
     icon: typeof IconPlus;
     label: string;
     href: string;