From 43355b6ce3c73604de0d4b656900ef59caed92b8 Mon Sep 17 00:00:00 2001 From: AlexSserb Date: Thu, 14 Aug 2025 18:18:24 +0400 Subject: [PATCH] refactor: css variables for colors and shadows --- .../deals/components/desktop/Board/Board.tsx | 2 +- .../CreateStatusButton.module.css | 2 +- .../shared/DealCard/DealCard.module.css | 2 +- .../StatusColumnWrapper.module.css | 2 +- src/app/deals/contexts/BoardsContext.tsx | 12 ++-- src/app/global.css | 15 ++++- .../dnd/FunnelDnd/FunnelDnd.module.css | 4 +- .../dnd/SortableDnd/SortableDnd.tsx | 65 +++++++++---------- .../layout/PageBlock/PageBlock.module.css | 13 ++-- src/components/layout/PageBlock/PageBlock.tsx | 6 +- .../SmallPageBlock/SmallPageBlock.module.css | 19 +++--- .../layout/SmallPageBlock/SmallPageBlock.tsx | 6 +- 12 files changed, 79 insertions(+), 69 deletions(-) diff --git a/src/app/deals/components/desktop/Board/Board.tsx b/src/app/deals/components/desktop/Board/Board.tsx index 1c66313..c9abc7e 100644 --- a/src/app/deals/components/desktop/Board/Board.tsx +++ b/src/app/deals/components/desktop/Board/Board.tsx @@ -17,7 +17,7 @@ const Board: FC = ({ board }) => { const { onUpdateBoard } = useBoardsContext(); return ( - + { return; } - if (selectedBoard) { - let newBoard = boards.find(board => board.id === selectedBoard.id); + if (!selectedBoard) return; - if (!newBoard && boards.length > 0) { - newBoard = boards[0]; - } - setSelectedBoard(newBoard ?? null); + let newBoard = boards.find(board => board.id === selectedBoard.id); + + if (!newBoard && boards.length > 0) { + newBoard = boards[0]; } + setSelectedBoard(newBoard ?? null); }, [boards]); const { onCreateBoard, onUpdateBoard, onDeleteBoard } = useBoardsOperations( diff --git a/src/app/global.css b/src/app/global.css index 6618edb..b804c0e 100644 --- a/src/app/global.css +++ b/src/app/global.css @@ -1,7 +1,20 @@ @import "tailwindcss"; +:root { + /* Colors */ + --color-light-gray-blue: #f4f7fd; + --color-light-aqua: #e0f0f4; + --color-light-whitesmoke: #fcfdff; + --mantine-color-dark-7-5: #212121; + /* Shadows */ + --light-shadow: 2px 2px 5px darkgray; + --light-thick-shadow: 4px 4px 10px darkgray; + --dark-shadow: 1px 1px 10px 1px var(--mantine-color-dark-6); + --dark-thick-shadow: 5px 5px 10px 1px var(--mantine-color-dark-6); +} + body { @mixin light { - background-color: #f4f7fd; + background-color: var(--color-light-gray-blue); } } diff --git a/src/components/dnd/FunnelDnd/FunnelDnd.module.css b/src/components/dnd/FunnelDnd/FunnelDnd.module.css index 7bfac46..21cecd1 100644 --- a/src/components/dnd/FunnelDnd/FunnelDnd.module.css +++ b/src/components/dnd/FunnelDnd/FunnelDnd.module.css @@ -5,10 +5,10 @@ @media (max-width: 48em) { @mixin dark { - box-shadow: 2px 2px 15px 1px var(--mantine-color-dark-6); + box-shadow: var(--dark-shadow); } @mixin light { - box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16); + box-shadow: var(--light-shadow); } } } diff --git a/src/components/dnd/SortableDnd/SortableDnd.tsx b/src/components/dnd/SortableDnd/SortableDnd.tsx index dd4ec55..e0a28be 100644 --- a/src/components/dnd/SortableDnd/SortableDnd.tsx +++ b/src/components/dnd/SortableDnd/SortableDnd.tsx @@ -62,40 +62,39 @@ const SortableDnd = ({ const sensors = useDndSensors(); const onDragEndLocal = ({ active, over }: DragEndEvent) => { - if (over && active.id !== over?.id && activeItem) { - const overIndex: number = items.findIndex( - ({ id }) => id === over.id - ); - const activeIndex: number = items.findIndex( - ({ id }) => id === activeItem.id - ); - - let leftIndex = overIndex; - let rightIndex = overIndex + 1; - if (overIndex < activeIndex) { - leftIndex = overIndex - 1; - rightIndex = overIndex; - } - - const leftLexorank: LexoRank | null = - leftIndex >= 0 - ? LexoRank.parse(items[leftIndex].lexorank) - : null; - const rightLexorank: LexoRank | null = - rightIndex < items.length - ? LexoRank.parse(items[rightIndex].lexorank) - : null; - - const newLexorank = getNewLexorank( - leftLexorank, - rightLexorank - ).toString(); - - items[activeIndex].lexorank = newLexorank; - onDragEnd(items[activeIndex].id, newLexorank); - const sortedItems = sortByLexorank(items); - setItems([...sortedItems]); + if (!over || active.id === over?.id || !activeItem) { + setActive(null); + return; } + + const overIndex: number = items.findIndex(({ id }) => id === over.id); + const activeIndex: number = items.findIndex( + ({ id }) => id === activeItem.id + ); + + let leftIndex = overIndex; + let rightIndex = overIndex + 1; + if (overIndex < activeIndex) { + leftIndex = overIndex - 1; + rightIndex = overIndex; + } + + const leftLexorank: LexoRank | null = + leftIndex >= 0 ? LexoRank.parse(items[leftIndex].lexorank) : null; + const rightLexorank: LexoRank | null = + rightIndex < items.length + ? LexoRank.parse(items[rightIndex].lexorank) + : null; + + const newLexorank = getNewLexorank( + leftLexorank, + rightLexorank + ).toString(); + + items[activeIndex].lexorank = newLexorank; + onDragEnd(items[activeIndex].id, newLexorank); + const sortedItems = sortByLexorank(items); + setItems([...sortedItems]); setActive(null); }; diff --git a/src/components/layout/PageBlock/PageBlock.module.css b/src/components/layout/PageBlock/PageBlock.module.css index 084248f..3af086e 100644 --- a/src/components/layout/PageBlock/PageBlock.module.css +++ b/src/components/layout/PageBlock/PageBlock.module.css @@ -7,14 +7,13 @@ } @media (min-width: 48em) { - padding: rem(35); - border-radius: rem(20); + padding: var(--mantine-spacing-md); @mixin dark { - box-shadow: 5px 5px 30px 1px var(--mantine-color-dark-6); + box-shadow: var(--dark-thick-shadow); } @mixin light { - box-shadow: 5px 5px 24px rgba(0, 0, 0, 0.16); + box-shadow: var(--light-thick-shadow); } } } @@ -22,17 +21,16 @@ .mobile-padding-height { height: 100% !important; @media (min-width: 48em) { - padding: rem(40); height: 89vh; } } .container-full-height { - min-height: calc(100vh - (rem(20) * 2)); + min-height: calc(100vh - (var(--mantine-spacing-md) * 2)); } .container-full-height-fixed { - height: calc(100vh - (rem(20) * 2)); + height: calc(100vh - (var(--mantine-spacing-md) * 2)); } .container-no-border-radius { @@ -45,7 +43,6 @@ height: 100vh; width: 100vw; border-radius: 0 !important; - padding: rem(40) rem(20) rem(20); position: fixed; top: 0; left: 0; diff --git a/src/components/layout/PageBlock/PageBlock.tsx b/src/components/layout/PageBlock/PageBlock.tsx index 8e2095b..864b265 100644 --- a/src/components/layout/PageBlock/PageBlock.tsx +++ b/src/components/layout/PageBlock/PageBlock.tsx @@ -1,6 +1,7 @@ import { CSSProperties, FC, ReactNode } from "react"; import classNames from "classnames"; import styles from "./PageBlock.module.css"; +import { Box } from "@mantine/core"; type Props = { children: ReactNode; @@ -24,7 +25,8 @@ const PageBlock: FC = ({ transparent = false, }) => { return ( -
= ({ styles[className] )}> {children} -
+ ); }; export default PageBlock; diff --git a/src/components/layout/SmallPageBlock/SmallPageBlock.module.css b/src/components/layout/SmallPageBlock/SmallPageBlock.module.css index c978510..c6e4029 100644 --- a/src/components/layout/SmallPageBlock/SmallPageBlock.module.css +++ b/src/components/layout/SmallPageBlock/SmallPageBlock.module.css @@ -1,36 +1,33 @@ .container { - border-radius: 20px; - margin: 18px; - @mixin dark { - background-color: #212121; - box-shadow: 1px 1px 10px 1px var(--mantine-color-dark-6); + background-color: var(--mantine-color-dark-7-5); + box-shadow: var(--dark-shadow); } @mixin light { - background-color: #fcfdff; - box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.04); + background-color: var(--color-light-whitesmoke); + box-shadow: var(--light-shadow); } } .container-active { @mixin dark { background-color: var(--mantine-color-dark-8); - box-shadow: 5px 5px 20px 1px var(--mantine-color-dark-6); + box-shadow: var(--dark-thick-shadow); } @mixin light { background-color: white; - box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.16); + box-shadow: var(--light-thick-shadow); } } .container:hover { @mixin dark { background-color: var(--mantine-color-dark-8); - box-shadow: 5px 5px 20px 1px var(--mantine-color-dark-6); + box-shadow: var(--dark-thick-shadow); } @mixin light { background-color: white; - box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.16); + box-shadow: var(--light-thick-shadow); } } diff --git a/src/components/layout/SmallPageBlock/SmallPageBlock.tsx b/src/components/layout/SmallPageBlock/SmallPageBlock.tsx index c7d4c4c..375dfbf 100644 --- a/src/components/layout/SmallPageBlock/SmallPageBlock.tsx +++ b/src/components/layout/SmallPageBlock/SmallPageBlock.tsx @@ -1,6 +1,7 @@ import { CSSProperties, FC, ReactNode } from "react"; import classNames from "classnames"; import styles from "@/components/layout/SmallPageBlock/SmallPageBlock.module.css"; +import { Box } from "@mantine/core"; type Props = { children: ReactNode; @@ -10,14 +11,15 @@ type Props = { const SmallPageBlock: FC = ({ children, style, active = false }) => { return ( -
{children} -
+ ); }; export default SmallPageBlock;