accessibility fixes

client/src/components/helpers/Filter/filter.scss

@@ -24,6 +24,13 @@
             border-radius: 15px;
             box-shadow: 0 0 15px rgba(s.$black, 0.05);
         }
+        label {
+            position: absolute;
+            left: 20px;
+            top: 0;
+            transform: translateY(-50%);
+            font-weight: s.$weight-bold;
+        }
     }
 
     .status-filter {

client/src/components/helpers/Filter/index.tsx

@@ -20,7 +20,8 @@ export default function Filter({ setFilter, tags, filter }: Props) {
         <div className="filter-container">
             <div className="search-container">
                 <i className="material-icons icon">search</i>
-                <input type="text" placeholder="Search..." onChange={event => setFilter((prev: any) => { return { ...prev, term: event.target.value } })} />
+                <label htmlFor="search">Search</label>
+                <input type="text" id="search" onChange={event => setFilter((prev: any) => { return { ...prev, term: event.target.value } })} />
             </div>
             <div className="status-filter">
                 <h3>Filter</h3>

client/src/components/layout/CommentList/comment-list.scss

-
-@use 'styles/settings.scss' as s;
+@use 'styles/settings.scss'as s;
 
 .comment-list {
     .comment-container {
@@ -12,6 +11,20 @@
         flex-direction: column;
         position: relative;
 
+        .comment-box {
+            margin-top: 5px;
+            position: relative;
+
+            label {
+                position: absolute;
+                left: 30px;
+                top: 0;
+                transform: translateY(-50%);
+                font-size: 14px;
+                font-weight: s.$weight-bold;
+            }
+        }
+
         .head {
             align-items: center;
 
@@ -27,5 +40,4 @@
             transform: translateY(50%);
         }
     }
-}
-
+}
\ No newline at end of file

client/src/components/layout/CommentList/index.tsx

@@ -59,7 +59,10 @@ export default function CommentList({ comments, taskId }: Props) {
                     </div>
                 </div>
                 <form onSubmit={handleSubmit}>
-                    <textarea value={comment} placeholder="Write a comment..." onChange={(e) => setComment(e.target.value)}></textarea>
+                    <div className="comment-box">
+                        <label htmlFor="comment">Your comment</label>
+                        <textarea value={comment} id="comment" placeholder="Write a comment..." onChange={(e) => setComment(e.target.value)}></textarea>
+                    </div>
                     <button type="submit" disabled={comment.length <= 0 || error}>Send</button>
                 </form>
             </div>

client/src/components/layout/ProjectsSlider/projects-slider.scss

@@ -43,6 +43,8 @@
         display: inline-block;
         margin: 12px;
         width: calc(100% - 24px);
+        user-select: none;
+        -moz-user-select: none;
         transform: translateX(calc(var(--position) * (-100% - 24px)));
 
         @include mx.breakpoint(medium) {

client/src/components/ui/Avatar/index.tsx

@@ -21,7 +21,7 @@ export default function Avatar({ user }: Props) {
         <div className="avatar">
             {
                 !error && (
-                    <img src={avatarSrc} alt={user?.username} onError={onError} />
+                    <img src={avatarSrc} alt="" onError={onError} />
                 )
             }
             {

client/src/components/ui/ProjectSlide/project-slide.scss

@@ -29,7 +29,7 @@
 
         .range {
             font-weight: s.$weight-semi-bold;
-            font-size: 12px;
+            font-size: 14px;
         }
     }
 
@@ -42,7 +42,7 @@
         }
 
         .progress {
-            font-size: 10px;
+            font-size: 12px;
 
             .label {
                 margin-top: 5px;

client/src/components/ui/Task/index.tsx

@@ -30,7 +30,7 @@ export default function TaskComponent({ task, subtitle }: TaskProps) {
                 {task.icon}
                 </div>
                 <div className="text-container">
-                    <h4>{task.name}</h4>
+                    <div className="name">{task.name}</div>
                     <div className="time">{subtitle}</div>
                 </div>
             </div>

client/src/components/ui/Task/task.scss

-
-@use 'styles/settings.scss' as s;
+@use 'styles/settings.scss'as s;
+@use 'styles/mixins.scss'as mx;
 
 .task {
     padding: 30px;
@@ -12,7 +12,8 @@
     font-weight: s.$weight-regular;
     position: relative;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
         color: s.$body-color;
         box-shadow: 0 5px 30px rgba(s.$black, 0.15);
         transform: translateY(-5px);
@@ -52,8 +53,14 @@
             border-radius: 10px;
         }
 
-        h4 {
+        .name {
             margin-bottom: 0;
+            font-size: 16px;
+            font-weight: s.$weight-bold;
+            line-height: 1.2;
+            @include mx.breakpoint(large) {
+                font-size: 20px;
+            }
         }
 
         .time {
@@ -72,5 +79,4 @@
         right: -15px;
         bottom: -20px;
     }
-}
-
+}
\ No newline at end of file

client/src/styles/settings.scss

@@ -23,22 +23,22 @@ $colors: (
 );
 
 $themeDarkMap: (
-    'red': #FF3465,
-    'orange': #FF4242,
-    'yellow': #FF9D29,
-    'green': #5ABF2B,
-    'lightblue': #0E8BFF,
-    'blue': #1768FF,
+    'red': #e61e4d,
+    'orange': #c94b02,
+    'yellow': #884902,
+    'green': #208a40,
+    'lightblue': #1a82d6,
+    'blue': #115be4,
     'purple': #8A24DA,
 );
 
 $themeLightMap: (
-    'red': #FF5A5A,
-    'orange': #FF9A61,
-    'yellow': #FFDC24,
-    'green': #7CF144,
-    'lightblue': #72BFFF,
-    'blue': #428DFE,
+    'red': #ee3939,
+    'orange': #ee681a,
+    'yellow': #a35d0d,
+    'green': #439e5e,
+    'lightblue': #2390e9,
+    'blue': #2e82ff,
     'purple': #AC42FF,
 );