Merge pull request #67 from 001elijah/dashboard

bugs

src/components/DefaultBoard/Default.module.scss

@@ -51,11 +51,19 @@
 }
 
 .defaultLink {
+  cursor: pointer;
   &.dark,
   &.light {
     color: #bedbb0;
+    &:hover{
+      color: #5255bc;
+    }
   }
   &.colorful {
     color: #5255bc;
+
+  &:hover{
+    color: #bedbb0;
   }
 }
+}

src/components/DefaultBoard/DefaultBoard.jsx

@@ -1,28 +1,44 @@
 import { selectorTheme } from 'redux/Auth/authSelectors';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import clsx from 'clsx';
-import React from 'react';
+import React, { useState } from 'react';
 import { HeaderDashBoard } from 'components/HeaderDashBoard/HeaderDashBoard';
 import s from './Default.module.scss';
+import { BoardModalWindow } from '../BoardModalWindow/BoardModalWindow';
 
-export const DefaultDashBoard = () => {
+import { addNewBoard } from 'redux/Boards/boardsOperations';
+export const DefaultDashBoard = () => {  
+  const dispatch = useDispatch();
   const theme = useSelector(selectorTheme);
+  const [showModalWindow, setShowModalWindow] = useState(false);
+  const handleModalWindowOpen = () => setShowModalWindow(true);
+  const handleModalWindowClose = () => setShowModalWindow(false);
+
+  const handleAddBoard = async newBoard => {
+    await dispatch(addNewBoard(newBoard));
+  };
   return (
     <>
       <div className={clsx(s.backGround, s[theme])}>
         <HeaderDashBoard />
 
         <p className={clsx(s.defaultTitle, s[theme])}>
           Before starting your project, it is essential
-          <span className={clsx(s.defaultLink, s[theme])}>
-            {' '}
-            to create a board{' '}
+          <span className={clsx(s.defaultLink, s[theme])} onClick={handleModalWindowOpen}> to create a board
           </span>
           to visualize and track all the necessary tasks and milestones. This
           board serves as a powerful tool to organize the workflow and ensure
           effective collaboration among team members.
         </p>
       </div>
+      {showModalWindow && (
+        <BoardModalWindow
+          titleModalButton="Create"
+          modalTitle="New board"
+          handleToggleModal={handleModalWindowClose}
+          onSubmit={handleAddBoard}
+        />
+      )}
     </>
   );
 };

src/components/Sidebar/Sidebar.jsx

@@ -38,10 +38,13 @@ export const Sidebar = () => {
       <Logout theme={theme} />
       {showModalWindow && (
         <BoardModalWindow
+        inputTitle=''
           titleModalButton="Create"
           modalTitle="New board"
           handleToggleModal={handleModalWindowClose}
           onSubmit={handleAddBoard}
+          activeIcon=''
+          activeBackground=''
         />
       )}
     </div>

src/components/TaskCard/TaskCard.jsx

@@ -31,7 +31,6 @@ export const TaskCard = ({
   const currentDate = new Date().toLocaleDateString('en-GB');
   const endDate = new Date(deadline).toLocaleDateString('en-GB');
   const isDeadline = endDate === currentDate;
-
   let labelCapitalizeFirstLetter =
     label.charAt(0).toUpperCase() + label.slice(1);
 

src/components/TaskColumn/TaskColumn.jsx

@@ -59,6 +59,8 @@ export const TaskColumn = ({ columnId }) => {
       }),
     );
   };
+
+  console.log(cards);
   return (
     <>
       <ul

src/components/UserInfo/UserInfo.module.scss

@@ -5,6 +5,8 @@
   align-items: center;
   column-gap: 8px;
 
+  cursor: pointer;
+
   .name {
     font-family: 'Poppins-SemiBold';
     font-size: 14px;