Merge pull request #52 from 001elijah/bugs-fix

Bugs fix
001elijah · Jun 29, 2023 · e754efc · e754efc
2 parents 6f6cc22 + d135ed5
commit e754efc
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 9 deletions.
diff --git a/src/assets/styles/_vars.scss b/src/assets/styles/_vars.scss
@@ -11,6 +11,8 @@ $light-violet: #ecedfd;
 $priority-low-color: #8fa1d0;
 $priority-medium-color: #e09cb5;
 $priority-high-color: #bedbb0;
+$priority-without-color: rgba(22, 22, 22, 0.3);
+$priority-without-dark-theme-color: rgba(255, 255, 255, 0.3);
 
 $red-error-color: #ff0000;
 $white-background-modal: #fcfcfc;

diff --git a/src/components/TaskCard/TaskCard.jsx b/src/components/TaskCard/TaskCard.jsx
@@ -29,9 +29,11 @@ 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);
+
   const openModalChangeColumn = () => {
     setIsModalChangeOpen(true);
   };
@@ -66,6 +68,8 @@ export const TaskCard = ({
           label === 'medium' && s.bg_medium,
           label === 'high' && s.bg_high,
           label === 'low' && s.bg_low,
+          label === 'without' && s.bg_without,
+          s[theme],
         )}
       ></div>
       <div className={s.infoWrapper}>
@@ -83,9 +87,13 @@ export const TaskCard = ({
                   label === 'low' && s.bg_low,
                   label === 'medium' && s.bg_medium,
                   label === 'high' && s.bg_high,
+                  label === 'without' && s.bg_without,
+                  s[theme],
                 )}
               ></div>
-              <p className={clsx(s.text, s[theme])}>{label}</p>
+              <p className={clsx(s.text, s[theme])}>
+                {labelCapitalizeFirstLetter}
+              </p>
             </div>
           </div>
           <div>

diff --git a/src/components/TaskCard/TaskCard.module.scss b/src/components/TaskCard/TaskCard.module.scss
@@ -11,14 +11,14 @@
   overflow: hidden;
   list-style: none;
 
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
   &:not(:last-child) {
     margin-bottom: 8px;
   }
 
-  &:last-child {
-    margin-bottom: 14px;
-  }
-
   &.dark {
     background-color: $black-color;
   }
@@ -30,7 +30,10 @@
   left: 0;
   width: 4px;
   height: 100%;
-  background-color: $icon-secondary-color;
+
+  &.dark {
+    background-color: $priority-without-dark-theme-color;
+  }
 }
 
 .title {
@@ -105,17 +108,33 @@
   height: 12px;
   margin-right: 4px;
   border-radius: 50%;
-  background-color: $icon-secondary-color;
 }
 
 .bg_low {
   background-color: $priority-low-color;
+  &.dark {
+    background-color: $priority-low-color;
+  }
 }
 .bg_medium {
   background-color: $priority-medium-color;
+  &.dark {
+    background-color: $priority-medium-color;
+  }
 }
 .bg_high {
   background-color: $priority-high-color;
+  &.dark {
+    background-color: $priority-high-color;
+  }
+}
+
+.bg_without {
+  background-color: $priority-without-color;
+
+  &.dark {
+    background-color: $priority-without-dark-theme-color;
+  }
 }
 
 .text {

diff --git a/src/components/TaskColumn/TaskColumn.module.scss b/src/components/TaskColumn/TaskColumn.module.scss
@@ -2,8 +2,9 @@
 @import '../../assets/styles/mixins';
 
 .taskCardListLight {
-  margin-bottom: 10px;
+  margin-bottom: 14px;
   overflow-y: auto;
+
   max-height: calc(100vh - 280px);
 
   &::-webkit-scrollbar {