feat: selected board style, boards spacing, text font size

src/app/deals/components/desktop/Board/Board.module.css

@@ -3,5 +3,5 @@
     min-width: 130px;
     flex-wrap: nowrap;
     gap: 3px;
-}
 
+}

src/app/deals/components/desktop/Board/Board.tsx

@@ -1,11 +1,11 @@
 import React, { FC, useState } from "react";
 import { Box, Flex, Group, Text } from "@mantine/core";
-import styles from "@/app/deals/components/desktop/Board/Board.module.css";
 import BoardMenu from "@/app/deals/components/shared/BoardMenu/BoardMenu";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock";
 import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
 import { BoardSchema } from "@/lib/client";
+import styles from "./Board.module.css";
 
 type Props = {
     board: BoardSchema;
@@ -13,12 +13,18 @@ type Props = {
 
 const Board: FC<Props> = ({ board }) => {
     const { selectedBoard } = useBoardsContext();
+    const isSelected = selectedBoard?.id === board.id;
     const [isHovered, setIsHovered] = useState(false);
     const { onUpdateBoard } = useBoardsContext();
 
     return (
-        <Flex p={"lg"}>
-            <SmallPageBlock active={selectedBoard?.id === board.id}>
+        <Flex>
+            <SmallPageBlock
+                style={{
+                    borderBottomColor: "dodgerblue",
+                    borderBottomWidth: isSelected ? "3px" : undefined,
+                }}
+                active={isSelected}>
                 <Group
                     px={"md"}
                     py={"xs"}

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

@@ -37,7 +37,11 @@ const Boards = () => {
                     renderItem={renderBoard}
                     onDragEnd={onDragEnd}
                     onItemClick={selectBoard}
-                    containerStyle={{ flexWrap: "nowrap" }}
+                    containerStyle={{
+                        flexWrap: "nowrap",
+                        gap: "var(--mantine-spacing-md)",
+                        margin: "var(--mantine-spacing-md)",
+                    }}
                     dragHandleStyle={{ cursor: "pointer" }}
                     disabled={isMobile}
                 />

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

@@ -14,7 +14,7 @@ const CreateBoardButton = () => {
                 onComplete={onCreateBoard}
                 getChildren={startEditing => (
                     <Box
-                        p={"sm"}
+                        p={"xs"}
                         onClick={startEditing}>
                         <IconPlus />
                     </Box>
@@ -22,6 +22,7 @@ const CreateBoardButton = () => {
                 modalTitle={"Создание доски"}
                 inputStyles={{
                     wrapper: {
+                        padding: 4,
                         marginLeft: 15,
                         marginRight: 15,
                     },

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

@@ -1,4 +1,4 @@
-import { Card } from "@mantine/core";
+import { Card, Text } from "@mantine/core";
 import { DealSchema } from "@/lib/client";
 import styles from "./DealCard.module.css";
 
@@ -7,7 +7,11 @@ type Props = {
 };
 
 const DealCard = ({ deal }: Props) => {
-    return <Card className={styles.container}>{deal.name}</Card>;
+    return (
+        <Card className={styles.container}>
+            <Text>{deal.name}</Text>
+        </Card>
+    );
 };
 
 export default DealCard;