From 219689b9471efe287f1f104eca9e85a95ef5a35c Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Sat, 16 Aug 2025 09:20:01 +0400
Subject: [PATCH] feat: selected board style, boards spacing, text font size

---
 .../components/desktop/Board/Board.module.css |  2 +-
 .../deals/components/desktop/Board/Board.tsx  | 12 +++++--
 .../components/desktop/Boards/Boards.tsx      |  6 +++-
 .../CreateBoardButton/CreateBoardButton.tsx   |  3 +-
 .../components/shared/DealCard/DealCard.tsx   |  8 +++--
 .../dnd/SortableDnd/SortableDnd.tsx           |  5 ++-
 .../ColorSchemeToggle.module.css              |  1 +
 .../ColorSchemeToggle/ColorSchemeToggle.tsx   | 35 ++++++++++---------
 src/theme.ts                                  |  9 +++--
 9 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/src/app/deals/components/desktop/Board/Board.module.css b/src/app/deals/components/desktop/Board/Board.module.css
index 9b74015..e65c632 100644
--- a/src/app/deals/components/desktop/Board/Board.module.css
+++ b/src/app/deals/components/desktop/Board/Board.module.css
@@ -3,5 +3,5 @@
     min-width: 130px;
     flex-wrap: nowrap;
     gap: 3px;
-}
 
+}
diff --git a/src/app/deals/components/desktop/Board/Board.tsx b/src/app/deals/components/desktop/Board/Board.tsx
index c9abc7e..52901fc 100644
--- a/src/app/deals/components/desktop/Board/Board.tsx
+++ b/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"}
diff --git a/src/app/deals/components/desktop/Boards/Boards.tsx b/src/app/deals/components/desktop/Boards/Boards.tsx
index 7b1bb5d..8511db7 100644
--- a/src/app/deals/components/desktop/Boards/Boards.tsx
+++ b/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}
                 />
diff --git a/src/app/deals/components/desktop/CreateBoardButton/CreateBoardButton.tsx b/src/app/deals/components/desktop/CreateBoardButton/CreateBoardButton.tsx
index e2ee066..cf4a234 100644
--- a/src/app/deals/components/desktop/CreateBoardButton/CreateBoardButton.tsx
+++ b/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,
                     },
diff --git a/src/app/deals/components/shared/DealCard/DealCard.tsx b/src/app/deals/components/shared/DealCard/DealCard.tsx
index c7fac01..382226e 100644
--- a/src/app/deals/components/shared/DealCard/DealCard.tsx
+++ b/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;
diff --git a/src/components/dnd/SortableDnd/SortableDnd.tsx b/src/components/dnd/SortableDnd/SortableDnd.tsx
index e0a28be..f859d58 100644
--- a/src/components/dnd/SortableDnd/SortableDnd.tsx
+++ b/src/components/dnd/SortableDnd/SortableDnd.tsx
@@ -109,13 +109,12 @@ const SortableDnd = <T extends BaseItem>({
                 items={items}
                 disabled={disabled}>
                 <Flex
-                    gap={0}
                     style={{
+                        gap: 0,
                         flexWrap: "nowrap",
                         flexDirection: vertical ? "column" : "row",
                         ...containerStyle,
-                    }}
-                    role="application">
+                    }}>
                     {items.map((item, index) => (
                         <Box
                             key={index}
diff --git a/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.module.css b/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.module.css
index aeec4a0..59b5a0e 100644
--- a/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.module.css
+++ b/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.module.css
@@ -1,4 +1,5 @@
 .container {
+    border-width: 0;
     @mixin dark {
         background-color: var(--mantine-color-dark-7);
     }
diff --git a/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.tsx b/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.tsx
index 1b5ba66..f571e53 100644
--- a/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.tsx
+++ b/src/components/ui/ColorSchemeToggle/ColorSchemeToggle.tsx
@@ -7,6 +7,7 @@ import {
     useComputedColorScheme,
     useMantineColorScheme,
 } from "@mantine/core";
+import SmallPageBlock from "@/components/layout/SmallPageBlock/SmallPageBlock";
 import style from "./ColorSchemeToggle.module.css";
 
 export function ColorSchemeToggle() {
@@ -20,21 +21,23 @@ export function ColorSchemeToggle() {
     };
 
     return (
-        <ActionIcon
-            onClick={toggleColorScheme}
-            variant="default"
-            size="xl"
-            radius="lg"
-            aria-label="Toggle color scheme"
-            className={style.container}>
-            <IconSun
-                className={classNames(style.icon, style.light)}
-                stroke={1.5}
-            />
-            <IconMoon
-                className={classNames(style.icon, style.dark)}
-                stroke={1.5}
-            />
-        </ActionIcon>
+        <SmallPageBlock>
+            <ActionIcon
+                onClick={toggleColorScheme}
+                variant="default"
+                size="xl"
+                radius="lg"
+                aria-label="Toggle color scheme"
+                className={style.container}>
+                <IconSun
+                    className={classNames(style.icon, style.light)}
+                    stroke={1.5}
+                />
+                <IconMoon
+                    className={classNames(style.icon, style.dark)}
+                    stroke={1.5}
+                />
+            </ActionIcon>
+        </SmallPageBlock>
     );
 }
diff --git a/src/theme.ts b/src/theme.ts
index b97edea..e71932d 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -40,7 +40,12 @@ export const theme = createTheme({
         Card: {
             defaultProps: {
                 radius,
-            }
-        }
+            },
+        },
+        Text: {
+            defaultProps: {
+                size: "sm",
+            },
+        },
     },
 });