🎨 Improve task window styling

itsharex · Apr 14, 2023 · 6e7b012 · 6e7b012
1 parent c9416cb
commit 6e7b012
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/src/components/TaskWindow.tsx b/src/components/TaskWindow.tsx
@@ -1,13 +1,14 @@
 import React from "react";
 import { FaListAlt } from "react-icons/fa";
 import FadeIn from "./motions/FadeIn";
+import Expand from "./motions/expand";
 
 type TaskWindowProps = {
   tasks: string[];
 };
 export const TaskWindow = ({ tasks }: TaskWindowProps) => {
   return (
-    <FadeIn className="xl m-3 hidden h-[65%] w-[20rem] flex-col items-center overflow-auto rounded-2xl border-2 border-white/30 bg-zinc-900 font-mono shadow-2xl xl:flex">
+    <Expand className="xl m-3 hidden h-[65%] w-[20rem] flex-col items-center overflow-auto rounded-2xl border-2 border-white/30 bg-zinc-900 font-mono shadow-2xl xl:flex">
       <div className="w-full px-2">
         <div className="sticky top-0 my-2 flex items-center justify-center gap-2 bg-zinc-900 p-2 text-white">
           <FaListAlt /> Current tasks
@@ -18,7 +19,7 @@ export const TaskWindow = ({ tasks }: TaskWindowProps) => {
           ))}
         </div>
       </div>
-    </FadeIn>
+    </Expand>
   );
 };
 

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -195,7 +195,7 @@ const Home: NextPage = () => {
               </Button>
             </Expand>
           </div>
-          <TaskWindow tasks={tasks} />
+          {tasks.length && <TaskWindow tasks={tasks} />}
         </div>
       </main>
     </DefaultLayout>