Merge pull request #42 from 001elijah/fix

Fix

src/components/ButtonAddColumn/ButtonAddColumn.module.scss

@@ -1,10 +1,12 @@
 @import '../../assets/styles/vars';
+@import '../../assets/styles/mixins';
 
 .Button {
+  margin-bottom: 24px;
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 335px;
+  min-width: 335px;
   height: 56px;
   border-radius: 8px;
   cursor: pointer;
@@ -100,3 +102,14 @@
 .Svg {
   stroke: inherit;
 }
+
+@include tablet {
+  .Button {
+    margin-bottom: 52px;
+  }
+}
+@include desktop {
+  .Button {
+    margin-bottom: 16px;
+  }
+}

src/components/Header/Header.module.scss

@@ -173,8 +173,6 @@
 @include tablet {
   .header {
     .pageHeader {
-      // padding-top: 18px;
-      // padding-bottom: 18px;
       padding: 18px 32px;
 
       .burgerMenu {

src/components/MainBoard/MainBoard.module.scss

@@ -8,6 +8,7 @@
   background-position: bottom;
   height: 100%;
   padding-left: 24px;
+
   &.dark {
     background-color: #1f1f1f;
   }

src/components/MainBoard/MainBoard.styled.jsx

@@ -1,23 +1,31 @@
 import styled from 'styled-components';
 
 export const Wrapper = styled.div`
+  padding-left: 20px;
+  padding-right: 20px;
   background-repeat: no-repeat;
   background-size: cover;
-  background-position: bottom;
+  background-position: center center;
   background-color: ${props => props.colorbg};
-  height: calc(100% - 86px);
+  height: calc(100vh - 61px);
   @media screen and (min-width: 375px) {
     padding-left: 0px;
     background-image: url(${props =>
     props.BASE_URL + 'mobile/x1/' + props.imgid});
   }
   @media screen and (min-width: 768px) {
-    padding-left: 24px;
+    padding-left: 32px;
+    padding-right: 32px;
+    height: calc(100vh - 68px);
     background-image: url(${props =>
       props.imgurl + 'tablet/x1/' + props.imgid});
   }
   @media screen and (min-width: 1280px) {
+    width: calc(100vw - 260px);
+    height: calc(100% - 76px);
     padding-left: 24px;
+    padding-right: 24px;
+
     background-image: url(${props =>
       props.imgurl + 'desktop/x1/' + props.imgid});
   }

src/components/TaskCard/TaskCard.module.scss

@@ -9,6 +9,8 @@
   border-radius: 8px;
   overflow: hidden;
   list-style: none;
+  margin-top: 4px;
+  margin-bottom: 4px;
 
   &.dark {
     background-color: $black-color;

src/components/TaskColumn/TaskColumn.jsx

@@ -1,12 +1,12 @@
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { TaskCard } from '../TaskCard/TaskCard';
 import { AddButton } from '../ButtonAddColumn/ButtonAddColumn';
-
 import { CardModalWindow } from '../CardModalWindow/CardModalWindow';
 import { useState } from 'react';
-import { useSelector } from 'react-redux';
 import { selectCards } from 'redux/Cards/cardsSelectors';
 import shortid from 'shortid';
+import s from './TaskColumn.module.scss';
 
 export const TaskColumn = ({ columnId }) => {
   const [modalOpen, setModalOpen] = useState(false);
@@ -16,28 +16,32 @@ export const TaskColumn = ({ columnId }) => {
   // const columnTasks = cards.length && cards.filter(card => {
   //   return card.columnId === columnId
   // });
-
-
-// id,
-//   title,
-//   description,
-//   label = 'Low',
-//   deadline = '26/06/2023',
-//   boardId,
-//   columnId,
+
+  // id,
+  //   title,
+  //   description,
+  //   label = 'Low',
+  //   deadline = '26/06/2023',
+  //   boardId,
+  //   columnId,
   return (
     <>
       <ul>
-        {cards.filter(card => {
-    return card.columnId === columnId
-  }).map(task => <TaskCard
-          key={shortid.generate()}
-          id={task._id}
-          title={task.title} 
-          label={task.label} 
-          deadline={task.deadline} 
-          boardId={task.boardId} 
-          columnId={task.columnId} />)}
+        {cards
+          .filter(card => {
+            return card.columnId === columnId;
+          })
+          .map(task => (
+            <TaskCard
+              key={shortid.generate()}
+              id={task._id}
+              title={task.title}
+              label={task.label}
+              deadline={task.deadline}
+              boardId={task.boardId}
+              columnId={task.columnId}
+            />
+          ))}
         {/* <TaskCard columnId={columnId} /> */}
       </ul>
       <AddButton
@@ -58,8 +62,7 @@ export const TaskColumn = ({ columnId }) => {
   );
 };
 
-
 TaskColumn.propTypes = {
   columnId: PropTypes.string,
   boardId: PropTypes.string,
-};
+};

src/components/TaskColumn/TaskColumn.module.scss

@@ -0,0 +1,19 @@
+@import '../../assets/styles/vars';
+@import '../../assets/styles/mixins';
+
+.taskCardList {
+  margin-bottom: 10px;
+  overflow-y: auto;
+  max-height: calc(100vh - 280px);
+}
+
+@include tablet {
+  .taskCardList {
+    max-height: calc(100vh - 290px);
+  }
+}
+@include desktop {
+  .taskCardList {
+    max-height: calc(100vh - 278px);
+  }
+}

src/index.scss

@@ -47,3 +47,20 @@ code {
 .container {
   @include container;
 }
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 12px;
+  margin-left: 8px; 
+  margin-right: 2px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: $dark-color;
+  border-radius: 100vw;
+}
+
+::-webkit-scrollbar-track {
+  background-color: $background-color;
+  border-radius: 100vw;
+}