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"}>
+        <Flex>
-            <SmallPageBlock active={selectedBoard?.id === board.id}>
+            <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;

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}

src/components/ui/ColorSchemeToggle/ColorSchemeToggle.module.css

@@ -1,4 +1,5 @@
 .container {
+    border-width: 0;
     @mixin dark {
         background-color: var(--mantine-color-dark-7);
     }

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
+        <SmallPageBlock>
-            onClick={toggleColorScheme}
+            <ActionIcon
-            variant="default"
+                onClick={toggleColorScheme}
-            size="xl"
+                variant="default"
-            radius="lg"
+                size="xl"
-            aria-label="Toggle color scheme"
+                radius="lg"
-            className={style.container}>
+                aria-label="Toggle color scheme"
-            <IconSun
+                className={style.container}>
-                className={classNames(style.icon, style.light)}
+                <IconSun
-                stroke={1.5}
+                    className={classNames(style.icon, style.light)}
-            />
+                    stroke={1.5}
-            <IconMoon
+                />
-                className={classNames(style.icon, style.dark)}
+                <IconMoon
-                stroke={1.5}
+                    className={classNames(style.icon, style.dark)}
-            />
+                    stroke={1.5}
-        </ActionIcon>
+                />
+            </ActionIcon>
+        </SmallPageBlock>
     );
 }

src/theme.ts

@@ -40,7 +40,12 @@ export const theme = createTheme({
         Card: {
             defaultProps: {
                 radius,
-            }
+            },
-        }
+        },
+        Text: {
+            defaultProps: {
+                size: "sm",
+            },
+        },
     },
 });