Merge pull request #16 from 001elijah/card-theme

Card theme

src/components/ModalChangeColumn/ModalChangeColumn.jsx

@@ -1,32 +1,38 @@
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import clsx from 'clsx';
+import { selectorTheme } from 'redux/Auth/authSelectors';
 import s from './ModalChangeColumn.module.scss';
 import sprite from '../../assets/icons/sprite.svg';
 
 export const ModalChangeColumn = ({ closeModal }) => {
+  const theme = useSelector(selectorTheme);
   const columnList = [
     { id: 1, name: 'to do' },
     { id: 2, name: 'in progress' },
     { id: 3, name: 'done' },
   ];
   return (
-    <ul className={s.columnList}>
-      {columnList.map(({ id, name }) => (
-        <li key={id} className={s.item}>
-          <button
-            className={s.button}
-            onClick={() => {
-              closeModal();
-            }}
-            type="button"
-          >
-            {name}{' '}
-            <svg className={s.icon}>
-              <use href={sprite + '#icon-arrow'}></use>
-            </svg>
-          </button>
-        </li>
-      ))}
-    </ul>
+    <div className={clsx(s.modalWrapper, s[theme])}>
+      <ul>
+        {columnList.map(({ id, name }) => (
+          <li key={id} className={s.item}>
+            <button
+              className={clsx(s.button, s[theme])}
+              onClick={() => {
+                closeModal();
+              }}
+              type="button"
+            >
+              {name}
+              <svg className={clsx(s.icon, s[theme])}>
+                <use href={sprite + '#icon-arrow'}></use>
+              </svg>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
   );
 };
 

src/components/ModalChangeColumn/ModalChangeColumn.module.scss

@@ -1,11 +1,16 @@
 @import '../../assets/styles/vars';
 
-.columnList {
+.modalWrapper {
   max-width: max-content;
   min-height: 86px;
   padding: 18px;
   border-radius: 8px;
-  background-color: $black-text-color;
+  background-color: $secondary-white-color;
+  box-shadow: 0px 0px 15px 0px $priority-high-color;
+
+  &.dark {
+    background-color: $dark-color;
+  }
 }
 
 .item {
@@ -17,22 +22,40 @@
 }
 
 .button {
-  padding: 0;
-  margin: 0;
   width: 100%;
   height: 21px;
+  color: $black-text-color;
+  // active:$priority-high-color; light/dark
+  // active:$accent-bright-color; violet
+  background-color: transparent;
+  border: none;
+
   display: flex;
   justify-content: center;
   align-items: center;
   justify-content: space-between;
-  border: none;
-  background-color: transparent;
-  color: $priority-low-color;
+  cursor: pointer;
+
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  &.dark {
+    color: $icon-secondary-color;
+  }
 }
 
 .icon {
   width: 16px;
   height: 16px;
   margin-left: 8px;
-  stroke: $priority-low-color;
+  stroke: $black-text-color;
+  // active:$priority-high-color; light/dark
+  // active:$accent-bright-color; violet
+
+  &.dark {
+    stroke: $icon-secondary-color;
+  }
 }

src/components/TaskCard/TaskCard.jsx

@@ -1,21 +1,34 @@
+import { useState, useSelector } from 'react';
 import clsx from 'clsx';
 import shortid from 'shortid';
 import PropTypes from 'prop-types';
+
 import sprite from '../../assets/icons/sprite.svg';
+import { selectorTheme } from 'redux/Auth/authSelectors';
 import { TaskControlButton } from '../TaskControlButton/TaskControlButton';
+import { ModalChangeColumn } from 'components/ModalChangeColumn/ModalChangeColumn';
+import { BackdropModal } from 'components/BackdropMain/BackdropMain';
 import s from './TaskCard.module.scss';
 
 export const TaskCard = ({
   title,
   description,
   priority = 'High',
   deadline,
-  changeColumn,
   editCard,
   removeCard,
 }) => {
+  const theme = useSelector(selectorTheme);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const openModalChangeColumn = () => {
+    setIsModalOpen(true);
+  };
+
+  const closeModalChangeColumn = () => setIsModalOpen(false);
+
   return (
-    <div className={s.cardWrapper}>
+    <div className={clsx(s.cardWrapper, s[theme])}>
       <div
         className={clsx(
           s.priorityLine,
@@ -25,21 +38,21 @@ export const TaskCard = ({
         )}
       ></div>
       <div className={s.infoWrapper}>
-        <h4 className={s.title}>
+        <h4 className={clsx(s.title, s[theme])}>
           {title}
           Lorem, ipsum dolor.
         </h4>
-        <p className={s.description}>
+        <p className={clsx(s.description, s[theme])}>
           {description}
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
           laboriosam numquam vero totam quidem nostrum deserunt harum voluptate,
           quaerat illum.
         </p>
       </div>
-      <div className={s.controlPanel}>
+      <div className={clsx(s.controlPanel, s[theme])}>
         <div className={s.statusInfo}>
           <div className={s.priorityWrapper}>
-            <h5 className={s.subtitle}>Priority</h5>
+            <h5 className={clsx(s.subtitle, s[theme])}>Priority</h5>
             <div className={s.priorityStatus}>
               <div
                 className={clsx(
@@ -49,24 +62,29 @@ export const TaskCard = ({
                   priority === 'High' && s.bg_high,
                 )}
               ></div>
-              <p className={s.text}>{priority}</p>
+              <p className={clsx(s.text, s[theme])}>{priority}</p>
             </div>
           </div>
           <div>
-            <h5 className={s.subtitle}>Deadline</h5>
-            <p className={s.text}>
+            <h5 className={clsx(s.subtitle, s[theme])}>Deadline</h5>
+            <p className={clsx(s.text, s[theme])}>
               {deadline}
               12/05/2023
             </p>
           </div>
         </div>
         <div className={s.iconsWrapper}>
-          <svg className={s.icon}>
+          <svg className={clsx(s.icon, s[theme])}>
             <use href={sprite + '#icon-bell'}></use>
           </svg>
           <ul className={s.buttonList}>
             <li key={shortid.generate()} className={s.item}>
-              <TaskControlButton icon="#icon-arrow" onClick={changeColumn} />
+              <TaskControlButton
+                icon="#icon-arrow"
+                onClick={() => {
+                  openModalChangeColumn();
+                }}
+              />
             </li>
             <li key={shortid.generate()} className={s.item}>
               <TaskControlButton icon="#icon-pencil" onClick={editCard} />
@@ -77,6 +95,11 @@ export const TaskCard = ({
           </ul>
         </div>
       </div>
+      {isModalOpen && (
+        <BackdropModal closeModal={closeModalChangeColumn}>
+          <ModalChangeColumn closeModal={closeModalChangeColumn} />
+        </BackdropModal>
+      )}
     </div>
   );
 };
@@ -86,7 +109,7 @@ TaskCard.propTypes = {
   description: PropTypes.string.isRequired,
   priority: PropTypes.string.isRequired,
   deadline: PropTypes.string.isRequired,
-  changeColumn: PropTypes.func.isRequired,
   editCard: PropTypes.func.isRequired,
   removeCard: PropTypes.func.isRequired,
+  theme: PropTypes.string.isRequire,
 };

src/components/TaskCard/TaskCard.module.scss

@@ -3,12 +3,15 @@
 .cardWrapper {
   position: relative;
   padding: 14px 21px;
-  width: 335px;
+  max-width: 335px;
   height: 154px;
-
-  background-color: $black-color;
+  background-color: $white-text-color;
   border-radius: 8px;
   overflow: hidden;
+
+  &.dark {
+    background-color: $black-color;
+  }
 }
 
 .priorityLine {
@@ -25,28 +28,42 @@
   font-weight: 600;
   font-size: 14px;
   line-height: 1.5;
+  color: $black-text-color;
+
+  &.dark {
+    color: $white-text-color;
+  }
 }
 
 .description {
   margin-bottom: 14px;
   font-weight: 400;
   font-size: 12px;
   line-height: 1.33;
-  color: $icon-secondary-color;
+  color: $icon-main-color;
 
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
+
+  &.dark {
+    color: $icon-secondary-color;
+  }
 }
 
 .controlPanel {
   padding-top: 14px;
+
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-top: 1px solid rgba(22, 22, 22, 0.1);
+
+  &.dark {
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+  }
 }
 
 .statusInfo {
@@ -58,7 +75,11 @@
   font-weight: 400;
   font-size: 8px;
   line-height: 1.5;
-  color: $icon-secondary-color;
+  color: $icon-main-color;
+
+  &.dark {
+    color: $icon-secondary-color;
+  }
 }
 
 .priorityWrapper {
@@ -91,6 +112,11 @@
   font-weight: 400;
   font-size: 10px;
   line-height: 1.5;
+  color: $black-text-color;
+
+  &.dark {
+    color: $white-color;
+  }
 }
 
 .iconsWrapper {
@@ -115,4 +141,8 @@
   width: 16px;
   height: 16px;
   stroke: $priority-high-color;
+
+  &.violet {
+    stroke: $accent-bright-color;
+  }
 }

src/components/TaskControlButton/TaskControlButton.jsx

@@ -1,11 +1,15 @@
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import clsx from 'clsx';
+import { selectorTheme } from 'redux/Auth/authSelectors';
 import s from './TaskControlButton.module.scss';
 import sprite from '../../assets/icons/sprite.svg';
 
 export const TaskControlButton = ({ icon, onClick }) => {
+  const theme = useSelector(selectorTheme);
   return (
     <button className={s.button} onClick={onClick} type="button">
-      <svg className={s.icon}>
+      <svg className={clsx(s.icon, s[theme])}>
         <use href={sprite + icon}></use>
       </svg>
     </button>

src/components/TaskControlButton/TaskControlButton.module.scss

@@ -5,10 +5,28 @@
   height: 16px;
   background-color: transparent;
   border: none;
+  cursor: pointer;
+
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  &:hover {
+    transform: scale(1.1);
+  }
 }
 
 .icon {
   width: 16px;
   height: 16px;
-  stroke: $icon-secondary-color;
+  stroke: $icon-main-color;
+
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  &:hover {
+    stroke: $dark-color;
+  }
+
+  &.dark {
+    stroke: $icon-secondary-color;
+    &:hover {
+      stroke: $white-color;
+    }
+  }
 }