From 1730ea11f7d655a86b7e3204f6325d7bd26b0d0a Mon Sep 17 00:00:00 2001
From: Aayan <aayank1306@gmail.com>
Date: Fri, 10 Jan 2025 22:32:09 +0530
Subject: [PATCH] profile page updated and minor changes in dashboard sidebar

---
 app/dashboard/layout.tsx                  |  2 +
 app/dashboard/profile/page.tsx            | 58 +++++++++++++++--------
 components/dashboard/DashboardSidebar.tsx |  2 +-
 3 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
index 51ff0a9..5d34c33 100644
--- a/app/dashboard/layout.tsx
+++ b/app/dashboard/layout.tsx
@@ -21,7 +21,9 @@ export default function DashboardLayout({
         <SidebarInset>
           <Header />
           {/* page main content */}
+          <div className="container mx-auto p-4">
           {children}
+          </div>
           {/* page main content ends */}
         </SidebarInset>
       </SidebarProvider>
diff --git a/app/dashboard/profile/page.tsx b/app/dashboard/profile/page.tsx
index 0597a9e..0476e1d 100644
--- a/app/dashboard/profile/page.tsx
+++ b/app/dashboard/profile/page.tsx
@@ -4,7 +4,7 @@ import { useState } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
-import { Loader2, User } from "lucide-react";
+import { Loader2, User } from 'lucide-react';
 import { Button } from "@/components/ui/button";
 import {
   Form,
@@ -16,7 +16,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { useSupabase } from "@/components/providers/SupabaseProvider";
 import { useToast } from "@/hooks/use-toast";
 import { ToastAction } from "@/components/ui/toast";
@@ -48,6 +48,7 @@ export default function ProfilePage() {
       });
       if (error) throw error;
       toast({
+        title: "Success! 🎉",
         description: "Profile updated successfully",
       });
     } catch (error) {
@@ -63,20 +64,33 @@ export default function ProfilePage() {
   }
 
   return (
-    <div className="max-w-2xl mx-auto space-y-6">
-      <Card>
-        <CardHeader>
-          <CardTitle>Profile Settings</CardTitle>
+    <div className="container mx-auto px-4 py-8 sm:px-6 lg:px-8">
+      <Card className="max-w-2xl mx-auto">
+        <CardHeader className="text-center">
+          <CardTitle className="text-2xl sm:text-3xl font-bold">Your Profile</CardTitle>
+          <CardDescription className="mt-2 text-sm sm:text-base">Manage your account details and preferences</CardDescription>
         </CardHeader>
         <CardContent className="space-y-6">
-          <div className="flex items-center gap-4">
-            <Avatar className="h-20 w-20">
-              <AvatarImage src={user?.user_metadata?.avatar_url} />
-              <AvatarFallback>
-                <User className="h-10 w-10" />
-              </AvatarFallback>
-            </Avatar>
-            <Button variant="outline">Change Avatar</Button>
+          <div className="flex flex-col items-center gap-4 sm:gap-6">
+            <div className="relative">
+              <Avatar className="h-24 w-24 sm:h-32 sm:w-32 border-4 border-primary">
+                <AvatarImage src={user?.user_metadata?.avatar_url} />
+                <AvatarFallback className="bg-secondary text-secondary-foreground">
+                  <User className="h-12 w-12 sm:h-16 sm:w-16" />
+                </AvatarFallback>
+              </Avatar>
+              {/* <Button 
+                size="icon"
+                className="absolute bottom-0 right-0 rounded-full"
+                variant="secondary"
+              >
+                <Camera className="h-4 w-4" />
+              </Button> */}
+            </div>
+            <div className="text-center">
+              <p className="text-lg sm:text-xl font-medium">{user?.user_metadata?.full_name || "Your Name"}</p>
+              <p className="text-sm text-muted-foreground mt-1">{user?.email || "your.email@example.com"}</p>
+            </div>
           </div>
 
           <Form {...form}>
@@ -88,7 +102,7 @@ export default function ProfilePage() {
                   <FormItem>
                     <FormLabel>Full Name</FormLabel>
                     <FormControl>
-                      <Input placeholder="John Doe" {...field} />
+                      <Input placeholder="Aayan" {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -101,20 +115,22 @@ export default function ProfilePage() {
                   <FormItem>
                     <FormLabel>Email</FormLabel>
                     <FormControl>
-                      <Input placeholder="john@example.com" {...field} />
+                      <Input placeholder="example@ml4e.com" {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
                 )}
               />
-              <Button type="submit" disabled={isLoading}>
-                {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                Save Changes
-              </Button>
+              <div className="pt-4">
+                <Button type="submit" disabled={isLoading} className="w-full">
+                  {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                  Save Changes
+                </Button>
+              </div>
             </form>
           </Form>
         </CardContent>
       </Card>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/components/dashboard/DashboardSidebar.tsx b/components/dashboard/DashboardSidebar.tsx
index 53cee17..4393bc2 100644
--- a/components/dashboard/DashboardSidebar.tsx
+++ b/components/dashboard/DashboardSidebar.tsx
@@ -39,7 +39,7 @@ export function DashboardSidebar() {
   const pathname = usePathname();
 
   return (
-      <Sidebar collapsible="icon" variant="floating">
+      <Sidebar collapsible="icon" variant="inset">
         <SidebarHeader>
           <div className="flex gap-2 py-2 text-sidebar-accent-foreground ">
             <div className="flex size-8 items-center justify-center">