Update:added documentation folder and added all documentation required

src/lib/components/TaskEditModal.module.css

@@ -6,27 +6,20 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(15, 23, 42, 0.7);
   padding: 1rem;
-  backdrop-filter: blur(4px);
+  backdrop-filter: blur(6px);
 }
 
 /* Modal Dialog Box */
 .dialog {
   width: 100%;
   max-width: 32rem;
-  border-radius: 0.75rem;
-  background-color: #ffffff;
-  border: 1px solid #e4e4e7;
+  border-radius: 0.875rem;
+  background-color: #1e293b;
+  border: 1px solid #334155;
   padding: 1.5rem;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
-}
-
-@media (prefers-color-scheme: dark) {
-  .dialog {
-    background-color: #18181b;
-    border-color: #27272a;
-  }
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
 }
 
 /* Modal Header */
@@ -34,13 +27,13 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1rem;
+  margin-bottom: 1.25rem;
 }
 
 .title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: #18181b;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #f8fafc;
   margin: 0;
 }
 
@@ -48,24 +41,13 @@
   background: none;
   border: none;
   font-size: 1.25rem;
-  color: #71717a;
+  color: #94a3b8;
   cursor: pointer;
+  transition: color 0.2s;
 }
 
 .btnClose:hover {
-  color: #27272a;
-}
-
-@media (prefers-color-scheme: dark) {
-  .title {
-    color: #f4f4f5;
-  }
-  .btnClose {
-    color: #a1a1aa;
-  }
-  .btnClose:hover {
-    color: #f4f4f5;
-  }
+  color: #f8fafc;
 }
 
 /* Form Layout */
@@ -88,54 +70,35 @@
 
 .label {
   display: block;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: #52525b;
-  margin-bottom: 0.25rem;
-}
-
-@media (prefers-color-scheme: dark) {
-  .label {
-    color: #a1a1aa;
-  }
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #cbd5e1;
+  margin-bottom: 0.375rem;
 }
 
 .input, .select, .textarea {
   width: 100%;
-  padding: 0.5rem 0.75rem;
+  padding: 0.625rem 0.875rem;
   font-size: 0.875rem;
   border-radius: 0.5rem;
-  border: 1px solid #d4d4d8;
-  background-color: transparent;
-  color: #18181b;
+  border: 1px solid #334155;
+  background-color: #0f172a;
+  color: #f8fafc;
   outline: none;
   box-sizing: border-box;
-}
-
-.select {
-  background-color: #fafafa;
+  transition: border-color 0.2s, box-shadow 0.2s;
 }
 
 .input:focus, .select:focus, .textarea:focus {
   border-color: #3b82f6;
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
-}
-
-@media (prefers-color-scheme: dark) {
-  .input, .select, .textarea {
-    border-color: #3f3f46;
-    color: #f4f4f5;
-  }
-  .select {
-    background-color: #27272a;
-  }
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
 }
 
 /* Footer Buttons */
 .footerActions {
   display: flex;
   justify-content: flex-end;
-  gap: 0.5rem;
+  gap: 0.75rem;
   padding-top: 0.5rem;
 }
 
@@ -143,38 +106,32 @@
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   border-radius: 0.5rem;
-  border: 1px solid #d4d4d8;
-  background: transparent;
-  color: #27272a;
+  border: 1px solid #334155;
+  background: #0f172a;
+  color: #cbd5e1;
+  font-weight: 600;
   cursor: pointer;
+  transition: background-color 0.2s;
 }
 
 .btnCancel:hover {
-  background-color: #f4f4f5;
+  background-color: #334155;
+  color: #f8fafc;
 }
 
 .btnSave {
-  padding: 0.5rem 1rem;
+  padding: 0.5rem 1.25rem;
   font-size: 0.875rem;
   border-radius: 0.5rem;
   border: none;
   background-color: #2563eb;
   color: #ffffff;
-  font-weight: 500;
+  font-weight: 600;
   cursor: pointer;
   transition: background-color 0.2s;
+  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
 }
 
 .btnSave:hover {
   background-color: #1d4ed8;
 }
-
-@media (prefers-color-scheme: dark) {
-  .btnCancel {
-    border-color: #3f3f46;
-    color: #e4e4e7;
-  }
-  .btnCancel:hover {
-    background-color: #27272a;
-  }
-}