feat: nav added, divs updated

src/App.tsx

@@ -11,47 +11,29 @@ import { Navbar } from "./components/Navbar";
 
 const App = () => {
   const { isEditing, setIsEditing } = useContext(
-    FormContext
+    FormContext,
   ) as FormContextType;
-  const { theme, changeTheme } = useContext(ThemeContext) as ThemeContextType;
   return (
     <div className="App h-screen bg-slate-900 w-screen text-slate-100">
-      <header className="App-header">
-        {/* Text for the client */}
-        {/* <h1 className="text-2xl text-slate-200"> 
-          HEY! Ammar here ! <br></br><br></br>
-          If you have a Whatsapp Account<br></br><br></br>
-          Kindly Contact me here on Whatsapp: +923185929579<br></br><br></br>
-          Also send me email here So we can discuss project there:<br></br><br></br>
-          [email protected]
-        </h1> */}
-
+      <header className="w-full">
         <Navbar></Navbar>
-        <Button
-          className="group fixed top-0 right-0"
-          Type="icon"
-          onClick={() => changeTheme()}
-        >
-          <IconWrapper>
-            <Tooltip>{theme}</Tooltip>
-            {theme === "Dark" ? (
-              <Icon className="w-6 h-6" name="darkIcon" />
-            ) : (
-              <Icon className="w-6 h-6" name="lightIcon" />
-            )}
-          </IconWrapper>{" "}
-        </Button>
-        <Button Type="primary" onClick={() => setIsEditing(true)}>
-          Add Task
-        </Button>
-        <Container>
-          <TaskProvider>
-            {isEditing ? <AddForm /> : null}
-
-            <TaskList></TaskList>
-          </TaskProvider>
-        </Container>
       </header>
+      <main className="flex w-full">
+        <div className="bg-green-500 min-w-50 ">
+          <Button Type="primary" onClick={() => setIsEditing(true)}>
+            Add Task
+          </Button>
+        </div>
+        <div className="bg-sky-500 px-4 w-full">
+          <Container>
+            <TaskProvider>
+              {isEditing ? <AddForm /> : null}
+
+              <TaskList></TaskList>
+            </TaskProvider>
+          </Container>
+        </div>{" "}
+      </main>
     </div>
   );
 };

src/components/Navbar.tsx

@@ -1,9 +1,22 @@
+import { useContext } from "react";
+import { ThemeContext } from "../contexts/ThemeContext";
+import { ThemeContextType } from "../types/types.tasks";
+import { Button, IconWrapper, Tooltip, Icon } from "./UI";
 
 export const Navbar = () => {
+  const { theme, changeTheme } = useContext(ThemeContext) as ThemeContextType;
   return (
     <div className="w-full bg-orange-500">
-      <img src="" />
-      hello
+      <Button className="group " Type="icon" onClick={() => changeTheme()}>
+        <IconWrapper>
+          <Tooltip>{theme}</Tooltip>
+          {theme === "Dark" ? (
+            <Icon className="w-6 h-6" name="darkIcon" />
+          ) : (
+            <Icon className="w-6 h-6" name="lightIcon" />
+          )}
+        </IconWrapper>{" "}
+      </Button>
     </div>
-  )
-}
+  );
+};