Merge pull request #7 from 001elijah/card-style

Card style

src/assets/styles/_reset.scss

@@ -35,3 +35,7 @@ img {
 a {
   text-decoration: none;
 }
+
+button {
+  padding: 0;
+}

src/assets/styles/_vars.scss

@@ -12,6 +12,8 @@ $priority-low-color: #8fa1d0;
 $priority-medium-color: #e09cb5;
 $priority-high-color: #bedbb0;
 $red-error-color: #ff0000;
+$icon-main-color: rgba(22, 22, 22, 0.5);
+$icon-secondary-color: rgba(255, 255, 255, 0.5);
 
 $start-background-color: linear-gradient(
   180deg,

src/components/ModalChangeColumn/ModalChangeColumn.jsx

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types';
+import s from './ModalChangeColumn.module.scss';
+import sprite from '../../assets/icons/sprite.svg';
+
+export const ModalChangeColumn = ({ closeModal }) => {
+  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>
+  );
+};
+
+ModalChangeColumn.propTypes = {
+  closeModal: PropTypes.func.isRequired,
+};

src/components/ModalChangeColumn/ModalChangeColumn.module.scss

@@ -0,0 +1,38 @@
+@import '../../assets/styles/vars';
+
+.columnList {
+  max-width: max-content;
+  min-height: 86px;
+  padding: 18px;
+  border-radius: 8px;
+  background-color: $black-text-color;
+}
+
+.item {
+  width: 100%;
+
+  &:not(:last-child) {
+    margin-bottom: 8px;
+  }
+}
+
+.button {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 21px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-content: space-between;
+  border: none;
+  background-color: transparent;
+  color: $priority-low-color;
+}
+
+.icon {
+  width: 16px;
+  height: 16px;
+  margin-left: 8px;
+  stroke: $priority-low-color;
+}

src/components/TaskCard/TaskCard.jsx

@@ -1,67 +1,82 @@
 import clsx from 'clsx';
+import shortid from 'shortid';
 import PropTypes from 'prop-types';
 import sprite from '../../assets/icons/sprite.svg';
 import { TaskControlButton } from '../TaskControlButton/TaskControlButton';
-import s from './Card.module.scss';
+import s from './TaskCard.module.scss';
 
 export const TaskCard = ({
   title,
   description,
-  priority = 'Without',
+  priority = 'High',
   deadline,
   changeColumn,
   editCard,
   removeCard,
 }) => {
   return (
     <div className={s.cardWrapper}>
-      <h4 className={s.title}>
-        {title}
-        Lorem, ipsum dolor.
-      </h4>
-      <p className={s.description}>
-        {description}
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
-        laboriosam numquam vero totam quidem nostrum deserunt harum voluptate,
-        quaerat illum.
-      </p>
-      <div>
-        <h5 className={s.subtitle}>Priority</h5>
-        <div>
-          <div
-            className={clsx(
-              s.priorityBox,
-              priority === 'Low' && s.bg_low,
-              priority === 'Medium' && s.bg_medium,
-              priority === 'High' && s.bg_high,
-            )}
-          ></div>
-          <p className={s.text}>{priority}</p>
-        </div>
-      </div>
-      <div>
-        <h5 className={s.subtitle}>Deadline</h5>
-        <p className={s.text}>
-          {deadline}
-          12/05/2023
+      <div
+        className={clsx(
+          s.priorityLine,
+          priority === 'Low' && s.bg_low,
+          priority === 'Medium' && s.bg_medium,
+          priority === 'High' && s.bg_high,
+        )}
+      ></div>
+      <div className={s.infoWrapper}>
+        <h4 className={s.title}>
+          {title}
+          Lorem, ipsum dolor.
+        </h4>
+        <p className={s.description}>
+          {description}
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
+          laboriosam numquam vero totam quidem nostrum deserunt harum voluptate,
+          quaerat illum.
         </p>
       </div>
-      <ul className={s.buttonList}>
-        <li className={s.item}>
+      <div className={s.controlPanel}>
+        <div className={s.statusInfo}>
+          <div className={s.priorityWrapper}>
+            <h5 className={s.subtitle}>Priority</h5>
+            <div className={s.priorityStatus}>
+              <div
+                className={clsx(
+                  s.priorityCircle,
+                  priority === 'Low' && s.bg_low,
+                  priority === 'Medium' && s.bg_medium,
+                  priority === 'High' && s.bg_high,
+                )}
+              ></div>
+              <p className={s.text}>{priority}</p>
+            </div>
+          </div>
+          <div>
+            <h5 className={s.subtitle}>Deadline</h5>
+            <p className={s.text}>
+              {deadline}
+              12/05/2023
+            </p>
+          </div>
+        </div>
+        <div className={s.iconsWrapper}>
           <svg className={s.icon}>
             <use href={sprite + '#icon-bell'}></use>
           </svg>
-        </li>
-        <li className={s.item}>
-          <TaskControlButton icon="#icon-arrow" onClick={changeColumn} />
-        </li>
-        <li className={s.item}>
-          <TaskControlButton icon="#icon-pencil" onClick={editCard} />
-        </li>
-        <li className={s.item}>
-          <TaskControlButton icon="#icon-trash" onClick={removeCard} />
-        </li>
-      </ul>
+          <ul className={s.buttonList}>
+            <li key={shortid.generate()} className={s.item}>
+              <TaskControlButton icon="#icon-arrow" onClick={changeColumn} />
+            </li>
+            <li key={shortid.generate()} className={s.item}>
+              <TaskControlButton icon="#icon-pencil" onClick={editCard} />
+            </li>
+            <li key={shortid.generate()} className={s.item}>
+              <TaskControlButton icon="#icon-trash" onClick={removeCard} />
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
   );
 };

src/components/TaskCard/TaskCard.module.scss

@@ -1,45 +1,90 @@
 @import '../../assets/styles/vars';
 
 .cardWrapper {
+  position: relative;
+  padding: 14px 21px;
   width: 335px;
   height: 154px;
-  background-color: var(--black-color);
+
+  background-color: $black-color;
   border-radius: 8px;
+  overflow: hidden;
+}
+
+.priorityLine {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background-color: $icon-secondary-color;
 }
 
 .title {
+  margin-bottom: 8px;
   font-weight: 600;
   font-size: 14px;
   line-height: 1.5;
 }
 
 .description {
+  margin-bottom: 14px;
   font-weight: 400;
   font-size: 12px;
   line-height: 1.33;
+  color: $icon-secondary-color;
+
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.controlPanel {
+  padding-top: 14px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.statusInfo {
+  display: flex;
 }
 
 .subtitle {
+  margin-bottom: 4px;
   font-weight: 400;
   font-size: 8px;
   line-height: 1.5;
+  color: $icon-secondary-color;
+}
+
+.priorityWrapper {
+  margin-right: 14px;
 }
 
-.priorityBox {
+.priorityStatus {
+  display: flex;
+}
+
+.priorityCircle {
   width: 12px;
   height: 12px;
+  margin-right: 4px;
   border-radius: 50%;
-  background-color: rgba(22, 22, 22, 0.3);
+  background-color: $icon-secondary-color;
 }
 
 .bg_low {
-  background-color: var(--priority-low-color);
+  background-color: $priority-low-color;
 }
 .bg_medium {
-  background-color: var(--priority-medium-color);
+  background-color: $priority-medium-color;
 }
 .bg_high {
-  background-color: var(--priority-high-color);
+  background-color: $priority-high-color;
 }
 
 .text {
@@ -48,15 +93,26 @@
   line-height: 1.5;
 }
 
-.buttonList {
+.iconsWrapper {
   display: flex;
 }
 
-.item:not(:last-child) {
+.buttonList {
+  display: flex;
   margin-left: 8px;
 }
 
+.item {
+  width: 16px;
+  height: 16px;
+
+  &:not(:first-child) {
+    margin-left: 8px;
+  }
+}
+
 .icon {
   width: 16px;
   height: 16px;
+  stroke: $priority-high-color;
 }