Merge pull request #16 from Code-Victor/feat/update-profile-ui

Feat/update profile UI

frontend/components/dashboard/navbar/index.tsx

@@ -9,14 +9,19 @@ import DashboardNavbarSearch from "./search"
 export default function DashboardNavbar({ userData }: { userData: User }) {
   return (
     <div className=" py-2 px-4 w-full flex items-center justify-between border-b border-border">
-      <div className="flex items-center space-x-4">
+      <div className="flex items-center space-x-2">
         <Link
           href="/"
           className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm"
         >
           <Image src={Logo} alt="Logo" width={36} height={36} />
         </Link>
-        <div className="text-sm font-medium flex items-center">Sandbox</div>
+        <h1 className="text-xl">
+          <span className="font-semibold">Sandbox</span>{" "}
+          <span className="text-xs font-medium text-muted-foreground">
+            by gitwit
+          </span>
+        </h1>
       </div>
       <div className="flex items-center space-x-4">
         <DashboardNavbarSearch />

frontend/components/profile/index.tsx

@@ -218,28 +218,69 @@ function ProfileCard({
           </TooltipProvider>
         </div>
       )}
-      <CardContent className="flex flex-col gap-4 items-center pt-6">
+      <CardContent className="flex flex-col gap-4 pt-6">
-        <Avatar name={name} avatarUrl={avatarUrl} className="size-36" />
-
         {isEditing ? (
-          <EditProfileForm
+          <div className="flex flex-col gap-2 items-center ">
-            {...{
+            <Avatar name={name} avatarUrl={avatarUrl} className="size-36" />
-              name,
+            <EditProfileForm
-              username,
+              {...{
-              avatarUrl,
+                name,
-              bio,
+                username,
-              personalWebsite,
+                avatarUrl,
-              socialLinks,
+                bio,
-              toggleEdit,
+                personalWebsite,
-            }}
+                socialLinks,
-          />
+                toggleEdit,
+              }}
+            />
+          </div>
         ) : (
-          <div className="flex flex-col gap-2.5 items-center">
+          <>
-            <div className="space-y-1.5">
+            <div className="flex flex-col gap-2 items-center">
-              <div className="">
+              <Avatar name={name} avatarUrl={avatarUrl} className="size-36" />
+              <div className="space-y-1">
                 <CardTitle className="text-2xl text-center">{name}</CardTitle>
                 <CardDescription className="text-center">{`@${username}`}</CardDescription>
               </div>
+              {bio && <p className="text-sm text-center">{bio}</p>}
+              {(socialLinks.length > 0 || personalWebsite) && (
+                <div className="flex gap-2 justify-center">
+                  {personalWebsite && (
+                    <Button variant="secondary" size="smIcon" asChild>
+                      <a
+                        href={personalWebsite}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <Globe className="size-4" />
+                        <span className="sr-only">Personal Website</span>
+                      </a>
+                    </Button>
+                  )}
+                  {socialLinks.map((link, index) => {
+                    const Icon = socialIcons[link.platform]
+                    return (
+                      <Button
+                        key={index}
+                        variant="secondary"
+                        size="smIcon"
+                        asChild
+                      >
+                        <a
+                          href={link.url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          <Icon className="size-4" />
+                          <span className="sr-only">{link.platform}</span>
+                        </a>
+                      </Button>
+                    )
+                  })}
+                </div>
+              )}
+            </div>
+            <div className="flex flex-col gap-1 items-center">
               {typeof generations === "number" && (
                 <div className="flex justify-center">
                   <SubscriptionBadge
@@ -248,47 +289,15 @@ function ProfileCard({
                   />
                 </div>
               )}
-            </div>
+              <div className="flex gap-4">
-            <div className="flex gap-4">
+                <StatsItem icon={Package2} label={stats.sandboxes} />
-              <StatsItem icon={Package2} label={stats.sandboxes} />
+                <StatsItem icon={Heart} label={stats.likes} />
-              <StatsItem icon={Heart} label={stats.likes} />
-            </div>
-            {bio && <p className="text-sm text-center">{bio}</p>}
-            {(socialLinks.length > 0 || personalWebsite) && (
-              <div className="flex gap-2 justify-center">
-                {personalWebsite && (
-                  <Button variant="ghost" size="smIcon" asChild>
-                    <a
-                      href={personalWebsite}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <Globe className="size-4" />
-                      <span className="sr-only">Personal Website</span>
-                    </a>
-                  </Button>
-                )}
-                {socialLinks.map((link, index) => {
-                  const Icon = socialIcons[link.platform]
-                  return (
-                    <Button key={index} variant="ghost" size="smIcon" asChild>
-                      <a
-                        href={link.url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        <Icon className="size-4" />
-                        <span className="sr-only">{link.platform}</span>
-                      </a>
-                    </Button>
-                  )
-                })}
               </div>
-            )}
+            </div>
             <p className="text-xs mt-2 text-muted-foreground text-center">
               {joinedAt}
             </p>
-          </div>
+          </>
         )}
       </CardContent>
     </Card>
@@ -713,7 +722,7 @@ const SubscriptionBadge = ({
       </Badge>
       <HoverCard>
         <HoverCardTrigger>
-          <Button variant="ghost" size="smIcon">
+          <Button variant="ghost" size="smIcon" className="size-[26px]">
             <Info size={16} />
           </Button>
         </HoverCardTrigger>

frontend/components/profile/navbar.tsx

@@ -9,14 +9,19 @@ import { Button } from "../ui/button"
 export default function ProfileNavbar({ userData }: { userData: User }) {
   return (
     <nav className=" py-2 px-4 w-full flex items-center justify-between border-b border-border">
-      <div className="flex items-center space-x-4">
+      <div className="flex items-center space-x-2">
         <Link
           href="/"
           className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm"
         >
           <Image src={Logo} alt="Logo" width={36} height={36} />
         </Link>
-        <div className="text-sm font-medium flex items-center">Sandbox</div>
+        <h1 className="text-xl">
+          <span className="font-semibold">Sandbox</span>{" "}
+          <span className="text-xs font-medium text-muted-foreground">
+            by gitwit
+          </span>
+        </h1>
       </div>
       <div className="flex items-center space-x-4">
         <ThemeSwitcher />

frontend/components/ui/button.tsx

@@ -26,7 +26,7 @@ const buttonVariants = cva(
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
         icon: "h-9 w-9",
-        smIcon: "h-8 w-8",
+        smIcon: "size-8",
       },
     },
     defaultVariants: {