fixed front/login page format

made logout button correct

Author: safipatel

app/login/page.tsx

@@ -4,15 +4,17 @@ import GoogleSignInButton from "@/shared/components/GoogleSignInButton";
 export default async function LoginPage() {
   return (
     <div className="flex min-h-screen w-full items-center justify-center bg-[linear-gradient(0deg,_#FFF4D9,_#FFEFD2_52%,_#67C5FF)] text-center dark:bg-[linear-gradient(0deg,_#443461,_#130F5A_38%,_#1F1F1F)]">
-      <div className="flex h-[50vh] w-[70vw] flex-col items-center justify-around rounded-xl bg-foreground/20">
-        <div className="flex flex-col gap-2">
-          <h1 className="text-8xl font-bold tracking-tight">Learn and grow</h1>
-          <h2 className="text-4xl font-medium tracking-tight">
+      <div className="flex h-[50vh] min-h-fit max-w-[80%] flex-col items-center justify-around rounded-xl bg-foreground/20 p-5">
+        <div className="mb-3 flex flex-col gap-2">
+          <h1 className="mb-3 text-5xl font-bold tracking-tight lg:text-7xl">
+            Learn and grow
+          </h1>
+          <h2 className="text-2xl font-medium tracking-tight lg:text-4xl">
             with your personalized classroom agent
           </h2>
         </div>
-        <div className="flex w-2/5 flex-col items-center gap-10">
-          <h3 className="text-xl italic">
+        <div className="flex w-2/5 min-w-[50vw] flex-col items-center gap-10">
+          <h3 className="text-lg italic lg:text-xl">
             A collaborative space for students and teachers to interact with the
             future of LLM-enhanced education.
           </h3>
@@ -27,7 +29,7 @@ export default async function LoginPage() {
             </Link>
           </Button> */}
           <form action={signInWithGoogle}>
-            <GoogleSignInButton className="shadow-[0px_0px_45px_1px_#6083FF]" />
+            <GoogleSignInButton className="h-12 w-full min-w-fit shadow-[0px_0px_45px_1px_#6083FF]" />
           </form>
         </div>
       </div>

app/page.tsx

@@ -5,23 +5,25 @@ import Link from "next/link";
 export default function Home() {
   return (
     <div className="flex min-h-screen w-full items-center justify-center bg-[linear-gradient(0deg,_#FFF4D9,_#FFEFD2_52%,_#67C5FF)] text-center dark:bg-[linear-gradient(0deg,_#443461,_#130F5A_38%,_#1F1F1F)]">
-      <div className="flex h-[50vh] w-[70vw] flex-col items-center justify-around rounded-xl bg-foreground/20">
-        <div className="flex flex-col gap-2">
-          <h1 className="text-8xl font-bold tracking-tight">Learn and grow</h1>
-          <h2 className="text-4xl font-medium tracking-tight">
+      <div className="flex h-[50vh] min-h-fit max-w-[80%] flex-col items-center justify-around rounded-xl bg-foreground/20 p-5">
+        <div className="mb-3 flex flex-col gap-2">
+          <h1 className="mb-3 text-5xl font-bold tracking-tight lg:text-8xl">
+            Learn and grow
+          </h1>
+          <h2 className="text-2xl font-medium tracking-tight lg:text-4xl">
             with your personalized classroom agent
           </h2>
         </div>
-        <div className="flex w-2/5 flex-col items-center gap-10">
-          <h3 className="text-xl italic">
+        <div className="flex w-2/5 min-w-[50vw] flex-col items-center gap-10">
+          <h3 className="text-lg italic lg:text-xl">
             A collaborative space for students and teachers to interact with the
             future of LLM-enhanced education.
           </h3>
           <Button
             effect="hoverUnderlineWhiteExpand"
             icon={ArrowRightCircle}
             iconPlacement="right"
-            className="h-12 w-full max-w-[20vw] bg-[#200092] text-white shadow-[0px_0px_45px_1px_#6083FF] hover:bg-[#200092]/90"
+            className="h-12 w-full min-w-fit max-w-[20vw] bg-[#200092] text-white shadow-[0px_0px_45px_1px_#6083FF] hover:bg-[#200092]/90"
           >
             <Link href="classrooms" className="text-lg">
               Start your journey today

shared/components/ui/sidebar/app-sidebar.tsx

@@ -216,7 +216,7 @@ export function AppSidebar() {
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" asChild>
               <Link href="/">
-                <div className="flex aspect-square size-9 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <div className="flex aspect-square size-11 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                   {/* <div className="relative h-[90%] w-[90%] object-contain"> */}
                   {/* <Image src={"/logo.svg"} fill alt="Logo" className="fill-red-600"/> */}
                   <Logo className="fill-sidebar-primary-foreground" />
@@ -318,11 +318,17 @@ export function AppSidebar() {
                 side="top"
                 className="w-[--radix-popper-anchor-width]"
               >
-                <DropdownMenuItem>
-                  <form action={logout}>
-                    <Button variant={"ghost"}>Sign out</Button>
-                  </form>
-                </DropdownMenuItem>
+                <form action={logout}>
+                  <DropdownMenuItem>
+                    <Button
+                      variant={"ghost"}
+                      effect={"hoverUnderline"}
+                      className="min-h-full min-w-full justify-start"
+                    >
+                      Sign out
+                    </Button>
+                  </DropdownMenuItem>
+                </form>
               </DropdownMenuContent>
             </DropdownMenu>
           </SidebarMenuItem>