From 1b30a8edd4838af64f68beff5d1ebaaaf80e06a4 Mon Sep 17 00:00:00 2001
From: karamvir <karamvir.singh98@gmail.com>
Date: Tue, 8 Aug 2023 02:32:41 -0700
Subject: [PATCH] add theme toggle to header

---
 frontend/src/pages/auth/login.tsx | 84 +++++++++++++++++--------------
 1 file changed, 45 insertions(+), 39 deletions(-)

diff --git a/frontend/src/pages/auth/login.tsx b/frontend/src/pages/auth/login.tsx
index 324047666..aec7db093 100644
--- a/frontend/src/pages/auth/login.tsx
+++ b/frontend/src/pages/auth/login.tsx
@@ -12,6 +12,7 @@ import { useInvalidate } from "@hooks";
 import { useEffect, useState } from "react";
 import { useMutation } from "@tanstack/react-query";
 import { client } from "@main";
+import { ThemeToggle } from "@components/util";
 
 type LoginCredentials = { username: string; password: string };
 
@@ -45,45 +46,50 @@ export const Login = () => {
   const { mutate, isLoading } = useLogin(creds);
 
   return (
-    <div className="w-full flex justify-center min-h-screen items-center">
-      <Card className="w-full max-w-[500px] place-self-center">
-        <CardHeader>
-          <CardTitle>Monitor</CardTitle>
-          <CardDescription>Log In</CardDescription>
-        </CardHeader>
-        <CardContent className="flex flex-col gap-4">
-          <div>
-            <Label htmlFor="username">Username</Label>
-            <Input
-              id="username"
-              value={creds.username}
-              onChange={({ target }) =>
-                set((c) => ({ ...c, username: target.value }))
-              }
-            />
-          </div>
-          <div>
-            <Label htmlFor="password">Password</Label>
-            <Input
-              id="password"
-              type="password"
-              value={creds.password}
-              onChange={({ target }) =>
-                set((c) => ({ ...c, password: target.value }))
-              }
-            />
-          </div>
-          <div className="flex w-full justify-end">
-            <Button
-              variant="outline"
-              onClick={() => mutate(creds)}
-              disabled={isLoading}
-            >
-              Login
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
+    <div className="flex flex-col min-h-screen">
+      <div className="container flex justify-end items-center h-16">
+        <ThemeToggle />
+      </div>
+      <div className="flex justify-center items-center container mt-32">
+        <Card className="w-full max-w-[500px] place-self-center">
+          <CardHeader>
+            <CardTitle>Monitor</CardTitle>
+            <CardDescription>Log In</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4">
+            <div>
+              <Label htmlFor="username">Username</Label>
+              <Input
+                id="username"
+                value={creds.username}
+                onChange={({ target }) =>
+                  set((c) => ({ ...c, username: target.value }))
+                }
+              />
+            </div>
+            <div>
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                value={creds.password}
+                onChange={({ target }) =>
+                  set((c) => ({ ...c, password: target.value }))
+                }
+              />
+            </div>
+            <div className="flex w-full justify-end">
+              <Button
+                variant="outline"
+                onClick={() => mutate(creds)}
+                disabled={isLoading}
+              >
+                Login
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
     </div>
   );
 };