refined styling and design

shantanuk7 · Aug 24, 2023 · 54bade1 · 54bade1
1 parent a125e87
commit 54bade1
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 38 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -31,7 +31,8 @@ html, body{
     transform: rotate(-180deg);
 }
 
-ul{
-    text-decoration: none;
+.sortedUL {
     list-style-type: none !important;
-}
+    margin: 0;
+    padding: 0.5em;
+}
diff --git a/components/SortedList.tsx b/components/SortedList.tsx
@@ -3,37 +3,61 @@ import NotUrgImp from "./sorters/NotUrgImp";
 import UrgNotImp from "./sorters/UrgNotImp";
 import NotUrgNotImp from "./sorters/NotUrgNotImp";
 
-export default function SortedList(props:any){
+export default function SortedList(props: any) {
+  return (
+    <div className="sortlist flex-1">
+      <table className="h-full w-full border-solid border-2 border-light-color">
+        <tbody>
+          <tr className="h-14">
+            <td className="w-0.5"></td>
+            <th className="w-1/2 text-light-color p-2">Urgent</th>
+            <th className="w-1/2 text-light-color p-2">Not Urgent</th>
+          </tr>
+          <tr className="">
+            <th className="text-light-color w-0.5 rotate-text p-4">
+              Important
+            </th>
+            <td className="w-1/2 h-1/2">
+              <UrgImp
+                taskList={props.taskList}
+                handleChange={(id: string, urg: boolean, imp: boolean) =>
+                  props.handlePriorityChange(id, imp, urg)
+                }
+              />
+            </td>
+            <td className="w-1/2 h-1/2">
+              <NotUrgImp
+                taskList={props.taskList}
+                handleChange={(id: string, urg: boolean, imp: boolean) =>
+                  props.handlePriorityChange(id, imp, urg)
+                }
+              />
+            </td>
+          </tr>
+          <tr className="">
+            <th className="text-light-color w-0.5 rotate-text p-4">
+              Not Important
+            </th>
 
-    return (
-        <div className="sortlist flex-1">
-            <table className="h-full w-full border-solid border-2 border-light-color">
-                <tbody>
-                <tr className="h-14">
-                    <td className="w-0.5"></td>
-                    <th className="w-1/2 text-light-color p-2">Urgent</th>
-                    <th className="w-1/2 text-light-color p-2">Not Urgent</th>
-                </tr>
-                <tr className="">
-                    <th className="text-light-color w-0.5 rotate-text p-4">Important</th>
-                    <td className="w-1/2 h-1/2">
-                        <UrgImp taskList={props.taskList} handleChange={(id:string,urg: boolean, imp: boolean)=>props.handlePriorityChange(id,imp,urg)}/>
-                        </td>
-                    <td className="w-1/2 h-1/2"><NotUrgNotImp taskList={props.taskList} handleChange={(id:string,urg: boolean, imp: boolean)=>props.handlePriorityChange(id,imp,urg)}/></td>
-                </tr>
-                <tr className="">
-                    <th className="text-light-color w-0.5 rotate-text p-4">Not Important</th>
-                    <td className="w-1/2 h-1/2">
-                        <NotUrgImp taskList={props.taskList} handleChange={(id:string,urg: boolean, imp: boolean)=>props.handlePriorityChange(id,imp,urg)}/>
-                        </td>
-                    <td className="w-1/2 h-1/2"><UrgNotImp taskList={props.taskList} handleChange={(id:string,urg: boolean, imp: boolean)=>props.handlePriorityChange(id,imp,urg)}/></td>
-                </tr>
-                </tbody>
-            </table>
-
-
-
-
-        </div>
-    )
-}
+            <td className="w-1/2 h-1/2">
+              <UrgNotImp
+                taskList={props.taskList}
+                handleChange={(id: string, urg: boolean, imp: boolean) =>
+                  props.handlePriorityChange(id, imp, urg)
+                }
+              />
+            </td>
+            <td className="w-1/2 h-1/2">
+              <NotUrgNotImp
+                taskList={props.taskList}
+                handleChange={(id: string, urg: boolean, imp: boolean) =>
+                  props.handlePriorityChange(id, imp, urg)
+                }
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/components/TaskList.tsx b/components/TaskList.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 
 export default function TaskList(props: any) {
     const [task, setTask] = useState('');

diff --git a/components/sorters/NotUrgImp.tsx b/components/sorters/NotUrgImp.tsx
@@ -41,6 +41,7 @@ export default function NotUrgImp(props: any) {
       onDrop={handleOnDrop}
       onDragOver={handleDragOver}
     >
+      <ul className="sortedUL">
       {props.taskList
         ?.filter((item: any) => item.urg == false && item.imp == true)
         .map((taskitem: any) => {
@@ -55,6 +56,7 @@ export default function NotUrgImp(props: any) {
             </li>
           );
         })}
+      </ul>
     </div>
   );
 }
diff --git a/components/sorters/NotUrgNotImp.tsx b/components/sorters/NotUrgNotImp.tsx
@@ -1,4 +1,8 @@
 "use client"
+
+import React from "react";
+import { useState } from "react";
+
 export default function NotUrgNotImp(props: any) {
 
   //handle Drag and drop
@@ -35,6 +39,7 @@ export default function NotUrgNotImp(props: any) {
       onDrop={handleOnDrop}
       onDragOver={handleDragOver}
     >
+      <ul className="sortedUL">
       {props.taskList
         ?.filter((item: any) => item.urg == false && item.imp == false)
         .map((taskitem: any) => {
@@ -43,12 +48,14 @@ export default function NotUrgNotImp(props: any) {
               key={taskitem.id}
               draggable
               onDragStart={(e: any) => handleOnDrag(e, taskitem.id)}
+
               className="cursor-grab"
             >
               {taskitem.text}
             </li>
           );
         })}
+      </ul>
     </div>
   );
 }
diff --git a/components/sorters/UrgImp.tsx b/components/sorters/UrgImp.tsx
@@ -34,6 +34,7 @@ export default function UrgImp(props: any) {
       onDrop={handleOnDrop}
       onDragOver={handleDragOver}
     >
+      <ul className="sortedUL">
       {props.taskList
         ?.filter((item: any) => item.urg == true && item.imp == true)
         .map((taskitem: any) => {
@@ -48,6 +49,7 @@ export default function UrgImp(props: any) {
             </li>
           );
         })}
+      </ul>
     </div>
   );
 }
diff --git a/components/sorters/UrgNotImp.tsx b/components/sorters/UrgNotImp.tsx
@@ -41,6 +41,7 @@ export default function UrgNotImp(props: any) {
       onDrop={handleOnDrop}
       onDragOver={handleDragOver}
     >
+      <ul className="sortedUL">
       {props.taskList
         ?.filter((item: any) => item.urg == true && item.imp == false)
         .map((taskitem: any) => {
@@ -55,6 +56,7 @@ export default function UrgNotImp(props: any) {
             </li>
           );
         })}
+      </ul>
     </div>
   );
 }
diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {output: 'export'}
 
 module.exports = nextConfig