fix avatars being weird

src/app/(pages)/dashboard/user/billing/page.tsx

@@ -26,7 +26,7 @@ const UserBillingPage = (): ReactElement => (
         {/* Content */}
         <div className="flex flex-col gap-5">
             <Separator className="opacity-65" />
-            Hello World
+            Billing
         </div>
     </main>
 );

src/components/branding.tsx

@@ -47,8 +47,15 @@ const Branding = ({ href, size, className }: BrandingProps) => (
     <Link
         className={cn(brandingVariants({ size, className }))}
         href={href ?? "/"}
+        draggable={false}
     >
-        <Image src="/media/logo.png" alt="Pulse App Logo" fill priority />
+        <Image
+            src="/media/logo.png"
+            alt="Pulse App Logo"
+            fill
+            priority
+            draggable={false}
+        />
     </Link>
 );
 export default Branding;

src/components/dashboard/sidebar/organization-selector.tsx

@@ -82,7 +82,7 @@ const OrganizationSelector = (): ReactElement => {
                     role="combobox"
                 >
                     {selected ? (
-                        <div className="flex gap-2.5 items-center">
+                        <div className="flex gap-3.5 items-center">
                             <OrganizationLogo
                                 organization={selected}
                                 size="sm"
@@ -105,7 +105,7 @@ const OrganizationSelector = (): ReactElement => {
                                 (organization: Organization, index: number) => (
                                     <CommandItem
                                         key={index}
-                                        className="px-3.5 relative flex gap-2 items-center"
+                                        className="px-3.5 relative flex gap-2.5 items-center"
                                         value={organization.name}
                                         onSelect={(currentValue: string) =>
                                             selectOrganization(

src/components/dashboard/sidebar/sidebar.tsx

@@ -28,6 +28,7 @@ const Sidebar = (): ReactElement => {
             <Link
                 className="flex gap-4 items-center select-none group"
                 href="/dashboard"
+                draggable={false}
             >
                 <Branding size="xs" />
                 <h1 className="text-2xl font-bold group-hover:opacity-75 transition-all transform-gpu">

src/components/dashboard/sidebar/user-menu.tsx

@@ -72,6 +72,7 @@ const UserMenu = (): ReactElement => {
                 <DropdownMenuItem
                     className="gap-2.5 text-red-500 cursor-pointer"
                     onClick={logout}
+                    draggable={false}
                 >
                     <ArrowLeftEndOnRectangleIcon className="w-5 h-5" />
                     <span>Logout</span>
@@ -92,19 +93,19 @@ const MyAccount = (): ReactElement => (
             My Account
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
-        <Link href="/dashboard/user/profile">
+        <Link href="/dashboard/user/profile" draggable={false}>
             <DropdownMenuItem className="gap-2.5 cursor-pointer">
                 <UserIcon className="w-5 h-5" />
                 <span>Profile</span>
             </DropdownMenuItem>
         </Link>
-        <Link href="/dashboard/user/billing">
+        <Link href="/dashboard/user/billing" draggable={false}>
             <DropdownMenuItem className="gap-2.5 cursor-pointer">
                 <CreditCardIcon className="w-5 h-5" />
                 <span>Billing</span>
             </DropdownMenuItem>
         </Link>
-        <Link href="/dashboard/user/settings">
+        <Link href="/dashboard/user/settings" draggable={false}>
             <DropdownMenuItem className="gap-2.5 cursor-pointer">
                 <Cog6ToothIcon className="w-5 h-5" />
                 <span>Settings</span>

src/components/dashboard/user/profile/avatar-setting.tsx

@@ -27,7 +27,10 @@ const AvatarSetting = (): ReactElement => {
             </div>
 
             {/* Setting */}
-            <UserAvatar user={user as User} />
+            <UserAvatar
+                className="select-none pointer-events-none"
+                user={user as User}
+            />
         </div>
     );
 };

src/components/dashboard/user/profile/tier-setting.tsx

@@ -29,11 +29,11 @@ const TierSetting = (): ReactElement => {
 
             {/* Setting */}
             <div className="flex gap-10 items-center">
-                <span className="font-medium select-none pointer-events-none">
+                <span className="text-sm font-medium select-none pointer-events-none">
                     {capitalizeWords(user?.tier)}
                 </span>
 
-                <Link href="/public#pricing">
+                <Link href="/#pricing">
                     <Button
                         className="bg-background/30"
                         size="sm"

src/components/dashboard/user/settings/tfa/tfa-setting.tsx

@@ -80,9 +80,11 @@ const TFASetting = (): ReactElement => {
                         if (open) {
                             setupTfa();
                         } else if (enabledTfa) {
-                            toast(
+                            toast("Two-Factor Auth", {
-                                "Successfully enabled two-factor auth on your account!"
+                                icon: "🎉",
-                            );
+                                description:
+                                    "Successfully enabled two-factor auth on your account!",
+                            });
                             router.push("/dashboard");
                         }
                     }}
@@ -159,7 +161,7 @@ const TFASetting = (): ReactElement => {
                         {!enabledTfa && (
                             <DialogFooter className="sm:justify-center gap-1.5 text-sm opacity-75">
                                 <b>NOTE:</b>Enabling two-factor auth will log
-                                you out of all devices.
+                                you out of all other devices.
                             </DialogFooter>
                         )}
                     </DialogContent>

src/components/org/organization-logo.tsx

@@ -64,7 +64,7 @@ const OrganizationLogo = ({
             />
         ) : (
             <InitialsAvatar
-                className="w-6 h-5 bg-muted rounded-full"
+                className="-translate-y-0.5 w-[1.6rem] h-[1.6rem] flex justify-center items-center bg-muted rounded-full"
                 name={organization.name}
             />
         )}

src/components/user/user-avatar.tsx

@@ -64,7 +64,7 @@ const UserAvatar = ({
             />
         ) : (
             <InitialsAvatar
-                className="w-6 h-6 bg-muted rounded-full"
+                className="w-6 h-6 flex justify-center items-center bg-muted rounded-full"
                 name={user.username}
             />
         )}