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) {
-            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(

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