Update:added documentation folder and added all documentation required

src/lib/components/TaskForm.module.css

@@ -1,35 +1,22 @@
-/* Creation Form Container */
+/* Dark Sleek Form Card */
 .formCard {
-  background-color: #ffffff;
-  border: 1px solid #e4e4e7;
-  border-radius: 0.75rem;
-  padding: 1.25rem;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  background-color: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 0.875rem;
+  padding: 1.5rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-}
-
-@media (prefers-color-scheme: dark) {
-  .formCard {
-    background-color: #18181b;
-    border-color: #27272a;
-  }
+  gap: 1.25rem;
 }
 
 .heading {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: #18181b;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #f8fafc;
   margin: 0;
 }
 
-@media (prefers-color-scheme: dark) {
-  .heading {
-    color: #f4f4f5;
-  }
-}
-
 .gridTwo {
   display: grid;
   grid-template-columns: 1fr;
@@ -49,47 +36,28 @@
 
 .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);
 }
 
 .actions {
@@ -98,18 +66,19 @@
 }
 
 .btnSubmit {
-  padding: 0.5rem 1rem;
+  padding: 0.625rem 1.25rem;
   background-color: #2563eb;
   color: #ffffff;
   border-radius: 0.5rem;
   font-size: 0.875rem;
-  font-weight: 500;
+  font-weight: 600;
   border: none;
   cursor: pointer;
-  transition: background-color 0.2s;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  transition: background-color 0.2s, transform 0.1s;
+  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
 }
 
 .btnSubmit:hover {
   background-color: #1d4ed8;
+  transform: translateY(-1px);
 }