feat/arrows finish

src/components/App/App.tsx

@@ -184,7 +184,6 @@ export default function App() {
       <Header
         onDragStart={handleDragStart}
         droppedCards={droppedCards}
-        loggedIn={loggedIn}
       />
       {loggedIn ? (
         <div className='container'>

src/components/Header/Header.tsx

@@ -6,23 +6,23 @@ import { Link } from 'react-router-dom';
 import Filter from 'src/components/Filter/Filter';
 import cn from 'classnames/bind';
 import { useAppDispatch, useAppSelector } from 'src/store/hooks';
-import { selectMembers, setIsFilterOpen } from 'src/store/features/slice/membersSlice';
+import {
+  selectMembers,
+  setIsFilterOpen,
+} from 'src/store/features/slice/membersSlice';
 import { DroppedCard } from 'src/services/types';
+import { selectUsers } from 'src/store/features/slice/userSlice';
 const cx = cn.bind(styles);
 
 interface HeaderProps {
   onDragStart: (e: React.DragEvent<HTMLDivElement>) => void;
   droppedCards: DroppedCard[];
-  loggedIn: boolean;
 }
 
-export default function Header({
-  onDragStart,
-  droppedCards,
-  loggedIn,
-}: HeaderProps) {
+export default function Header({ onDragStart, droppedCards }: HeaderProps) {
   let { isFilterOpen } = useAppSelector(selectMembers);
-   const dispatch = useAppDispatch();
+  let { loggedIn } = useAppSelector(selectUsers);
+  const dispatch = useAppDispatch();
 
   return (
     <>
@@ -37,7 +37,7 @@ export default function Header({
             <Input
               placeholder='Поиск'
               className={cx(styles.input, {
-                [styles.input_disabled]: setIsFilterOpen,
+                [styles.input_disabled]: isFilterOpen,
               })}
             />
             <FilterOutlined
@@ -50,10 +50,7 @@ export default function Header({
         )}
       </header>
       {isFilterOpen && (
-        <Filter
-          onDragStart={onDragStart}
-          droppedCards={droppedCards}
-        />
+        <Filter onDragStart={onDragStart} droppedCards={droppedCards} />
       )}
     </>
   );

src/pages/Main/Main.module.scss

@@ -17,4 +17,5 @@
   width: 100%;
   border-radius: $border-radius-s;
   height: 127px;
+  transition: background-color 0.3s ease;
 }

src/pages/Main/Main.tsx

@@ -1,8 +1,8 @@
 import Card from 'src/ui/Card/Card';
 import styles from 'src/pages/Main/Main.module.scss';
+import Arrow from 'src/ui/Arrow/Arrow';
 import { useOutletContext } from 'react-router-dom';
 import { initialCardsProps } from 'src/services/types';
-import Arrow from 'src/ui/Arrow/Arrow';
 import { useEffect, useLayoutEffect, useState } from 'react';
 import { numCols, numRows } from 'src/services/const';
 import { useAppSelector } from 'src/store/hooks';
@@ -32,7 +32,6 @@ export default function Main() {
       <div
         key={card.id}
         data-cell-id={card.id}
-        className={styles.cell}
         style={{ gridColumn: col + 1, gridRow: row + 1 }}
       >
         <Card
@@ -98,7 +97,6 @@ export default function Main() {
   const renderArrows = () => {
     const newArrows = allCards.map((card) => {
       const parentCard = allCards.find((item) => item.id === card.parentId);
-
       if (parentCard) {
         const parentElement = document.querySelector(
           `[data-cell-id="${parentCard.id}"]`

src/ui/Arrow/Arrow.tsx

@@ -5,29 +5,29 @@ interface ArrowProps {
   endY: number;
 }
 
-const Arrow = ({ startX, startY, endX, endY }: ArrowProps) => {
-
-  const arrowHeadSize = 11;
+export default function Arrow ({ startX, startY, endX, endY }: ArrowProps) {
+  const arrowHeadSize = 10;
   const angle = Math.atan2(endY - startY, endX - startX);
   const arrowX1 = endX - arrowHeadSize * Math.cos(angle - Math.PI / 6);
   const arrowY1 = endY - arrowHeadSize * Math.sin(angle - Math.PI / 6);
   const arrowX2 = endX - arrowHeadSize * Math.cos(angle + Math.PI / 6);
   const arrowY2 = endY - arrowHeadSize * Math.sin(angle + Math.PI / 6);
-  
+
   const svgWidth = Math.max(startX, endX) + arrowHeadSize;
   const svgHeight = Math.max(startY, endY) + arrowHeadSize;
 
   return (
     <svg
-    width={svgWidth}
-    height={svgHeight}
+      width={svgWidth}
+      height={svgHeight}
       style={{ position: 'absolute', pointerEvents: 'none' }}
     >
       <line
         x1={startX}
         y1={startY}
         x2={endX}
         y2={endY}
+        className="arrow-line"
         stroke='#8c8c8c'
         strokeWidth='2'
       />
@@ -36,6 +36,7 @@ const Arrow = ({ startX, startY, endX, endY }: ArrowProps) => {
         y1={endY}
         x2={arrowX1}
         y2={arrowY1}
+        className="arrow-line"
         stroke='#8c8c8c'
         strokeWidth='2'
       />
@@ -44,11 +45,10 @@ const Arrow = ({ startX, startY, endX, endY }: ArrowProps) => {
         y1={endY}
         x2={arrowX2}
         y2={arrowY2}
+        className="arrow-line"
         stroke='#8c8c8c'
         strokeWidth='2'
       />
     </svg>
   );
 };
-export default Arrow;
-