refactor: css variables for colors and shadows

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

@@ -17,7 +17,7 @@ const Board: FC<Props> = ({ board }) => {
     const { onUpdateBoard } = useBoardsContext();
 
     return (
-        <Flex>
+        <Flex p={"lg"}>
             <SmallPageBlock active={selectedBoard?.id === board.id}>
                 <Group
                     px={"md"}

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

@@ -1,7 +1,7 @@
 
 .container {
     flex-wrap: nowrap;
-    border-bottom: solid blue 3px;
+    border-bottom: solid dodgerblue 3px;
     margin-bottom: 3px;
     cursor: pointer;
 

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

@@ -1,7 +1,7 @@
 
 .container {
     @mixin light {
-        background-color: #e0f0f4;
+        background-color: var(--color-light-aqua);
     }
     @mixin dark {
         background-color: var(--mantine-color-dark-7);

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

@@ -9,5 +9,5 @@
 }
 
 .header {
-    border-bottom: solid blue 3px;
+    border-bottom: solid dodgerblue 3px;
 }

src/app/deals/contexts/BoardsContext.tsx

@@ -46,14 +46,14 @@ const useBoardsContextState = () => {
             return;
         }
 
-        if (selectedBoard) {
+        if (!selectedBoard) return;
-            let newBoard = boards.find(board => board.id === selectedBoard.id);
 
-            if (!newBoard && boards.length > 0) {
+        let newBoard = boards.find(board => board.id === selectedBoard.id);
-                newBoard = boards[0];
+
-            }
+        if (!newBoard && boards.length > 0) {
-            setSelectedBoard(newBoard ?? null);
+            newBoard = boards[0];
         }
+        setSelectedBoard(newBoard ?? null);
     }, [boards]);
 
     const { onCreateBoard, onUpdateBoard, onDeleteBoard } = useBoardsOperations(

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);
     }
 }

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);
         }
     }
 }

src/components/dnd/SortableDnd/SortableDnd.tsx

@@ -62,40 +62,39 @@ const SortableDnd = <T extends BaseItem>({
     const sensors = useDndSensors();
 
     const onDragEndLocal = ({ active, over }: DragEndEvent) => {
-        if (over && active.id !== over?.id && activeItem) {
+        if (!over || active.id === over?.id || !activeItem) {
-            const overIndex: number = items.findIndex(
+            setActive(null);
-                ({ id }) => id === over.id
+            return;
-            );
-            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]);
         }
+
+        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);
     };
 

src/components/layout/PageBlock/PageBlock.module.css

@@ -7,14 +7,13 @@
     }
 
     @media (min-width: 48em) {
-        padding: rem(35);
+        padding: var(--mantine-spacing-md);
-        border-radius: rem(20);
 
         @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;

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<Props> = ({
     transparent = false,
 }) => {
     return (
-        <div
+        <Box
+            bdrs={"lg"}
             style={style}
             className={classNames(
                 styles.container,
@@ -36,7 +38,7 @@ const PageBlock: FC<Props> = ({
                 styles[className]
             )}>
             {children}
-        </div>
+        </Box>
     );
 };
 export default PageBlock;

src/components/layout/SmallPageBlock/SmallPageBlock.module.css

@@ -1,36 +1,33 @@
 
 .container {
-    border-radius: 20px;
-    margin: 18px;
-
     @mixin dark {
-        background-color: #212121;
+        background-color: var(--mantine-color-dark-7-5);
-        box-shadow: 1px 1px 10px 1px var(--mantine-color-dark-6);
+        box-shadow: var(--dark-shadow);
     }
     @mixin light {
-        background-color: #fcfdff;
+        background-color: var(--color-light-whitesmoke);
-        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.04);
+        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);
     }
 }

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<Props> = ({ children, style, active = false }) => {
     return (
-        <div
+        <Box
+            bdrs={"lg"}
             className={classNames(
                 styles.container,
                 active && styles["container-active"]
             )}
             style={style}>
             {children}
-        </div>
+        </Box>
     );
 };
 export default SmallPageBlock;