From 52166e422812ca9c2e3f9192f39fe1194402dd86 Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Thu, 19 Sep 2024 21:17:03 -0400
Subject: [PATCH] fix avatars being weird

---
 src/app/(pages)/dashboard/user/billing/page.tsx        |  2 +-
 src/components/branding.tsx                            |  9 ++++++++-
 .../dashboard/sidebar/organization-selector.tsx        |  4 ++--
 src/components/dashboard/sidebar/sidebar.tsx           |  1 +
 src/components/dashboard/sidebar/user-menu.tsx         |  7 ++++---
 .../dashboard/user/profile/avatar-setting.tsx          |  5 ++++-
 src/components/dashboard/user/profile/tier-setting.tsx |  4 ++--
 .../dashboard/user/settings/tfa/tfa-setting.tsx        | 10 ++++++----
 src/components/org/organization-logo.tsx               |  2 +-
 src/components/user/user-avatar.tsx                    |  2 +-
 10 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/app/(pages)/dashboard/user/billing/page.tsx b/src/app/(pages)/dashboard/user/billing/page.tsx
index 2119e3d..3079fef 100644
--- a/src/app/(pages)/dashboard/user/billing/page.tsx
+++ b/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>
 );
diff --git a/src/components/branding.tsx b/src/components/branding.tsx
index af11234..80fdf73 100644
--- a/src/components/branding.tsx
+++ b/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;
diff --git a/src/components/dashboard/sidebar/organization-selector.tsx b/src/components/dashboard/sidebar/organization-selector.tsx
index e686b9e..a85e905 100644
--- a/src/components/dashboard/sidebar/organization-selector.tsx
+++ b/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(
diff --git a/src/components/dashboard/sidebar/sidebar.tsx b/src/components/dashboard/sidebar/sidebar.tsx
index fa9c3b5..816b720 100644
--- a/src/components/dashboard/sidebar/sidebar.tsx
+++ b/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">
diff --git a/src/components/dashboard/sidebar/user-menu.tsx b/src/components/dashboard/sidebar/user-menu.tsx
index 71b748c..1e11937 100644
--- a/src/components/dashboard/sidebar/user-menu.tsx
+++ b/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>
diff --git a/src/components/dashboard/user/profile/avatar-setting.tsx b/src/components/dashboard/user/profile/avatar-setting.tsx
index f597468..cd78951 100644
--- a/src/components/dashboard/user/profile/avatar-setting.tsx
+++ b/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>
     );
 };
diff --git a/src/components/dashboard/user/profile/tier-setting.tsx b/src/components/dashboard/user/profile/tier-setting.tsx
index ee041c1..4335591 100644
--- a/src/components/dashboard/user/profile/tier-setting.tsx
+++ b/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"
diff --git a/src/components/dashboard/user/settings/tfa/tfa-setting.tsx b/src/components/dashboard/user/settings/tfa/tfa-setting.tsx
index ffd6f93..2661565 100644
--- a/src/components/dashboard/user/settings/tfa/tfa-setting.tsx
+++ b/src/components/dashboard/user/settings/tfa/tfa-setting.tsx
@@ -80,9 +80,11 @@ const TFASetting = (): ReactElement => {
                         if (open) {
                             setupTfa();
                         } else if (enabledTfa) {
-                            toast(
-                                "Successfully enabled two-factor auth on your account!"
-                            );
+                            toast("Two-Factor Auth", {
+                                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>
diff --git a/src/components/org/organization-logo.tsx b/src/components/org/organization-logo.tsx
index 47fd03a..a65218d 100644
--- a/src/components/org/organization-logo.tsx
+++ b/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}
             />
         )}
diff --git a/src/components/user/user-avatar.tsx b/src/components/user/user-avatar.tsx
index fe07917..58e9e63 100644
--- a/src/components/user/user-avatar.tsx
+++ b/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}
             />
         )}