From b4e714e58049925068dfb09a11ec19157e3be5ef Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Fri, 29 Mar 2024 00:38:59 +0800
Subject: [PATCH] Update tailwind config and implement personal account avatar

In this commit, we have made several updates to tailwind configuration files to ensure better scalability and include exceptions for node modules. Moreover, the account selector component now uses a personalized avatar for each account. This was achieved by accessing personal account data through a hook and introducing a new UserAvatar function to display the avatar. Check component was also migrated to CheckCircle and minor layout and styling adjustments were done for better UI experience.
---
 apps/web/tailwind.config.ts                   |  2 +-
 .../src/components/account-selector.tsx       | 36 ++++++++++++++-----
 tooling/tailwind/index.ts                     |  6 +++-
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index be80e8457..87acda5e4 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -5,6 +5,6 @@ import baseConfig from '@kit/tailwind-config';
 export default {
   // We need to append the path to the UI package to the content array so that
   // those classes are included correctly.
-  content: [...baseConfig.content, '../../packages/ui/src/**/*.{ts,tsx}'],
+  content: [...baseConfig.content],
   presets: [baseConfig],
 } satisfies Config;
diff --git a/packages/features/accounts/src/components/account-selector.tsx b/packages/features/accounts/src/components/account-selector.tsx
index 8cf9c9685..2947f15fc 100644
--- a/packages/features/accounts/src/components/account-selector.tsx
+++ b/packages/features/accounts/src/components/account-selector.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react';
 
 import { CaretSortIcon, PersonIcon } from '@radix-ui/react-icons';
-import { Check, Plus } from 'lucide-react';
+import { CheckCircle, Plus } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
 import { Avatar, AvatarFallback, AvatarImage } from '@kit/ui/avatar';
@@ -22,6 +22,7 @@ import { Trans } from '@kit/ui/trans';
 import { cn } from '@kit/ui/utils';
 
 import { CreateTeamAccountDialog } from '../../../team-accounts/src/components/create-team-account-dialog';
+import { usePersonalAccountData } from '../hooks/use-personal-account-data';
 
 interface AccountSelectorProps {
   accounts: Array<{
@@ -61,6 +62,7 @@ export function AccountSelector({
   );
 
   const { t } = useTranslation('teams');
+  const personalData = usePersonalAccountData();
 
   useEffect(() => {
     setValue(selectedAccount ?? PERSONAL_ACCOUNT_SLUG);
@@ -68,7 +70,7 @@ export function AccountSelector({
 
   const Icon = (props: { item: string }) => {
     return (
-      <Check
+      <CheckCircle
         className={cn(
           'ml-auto h-4 w-4',
           value === props.item ? 'opacity-100' : 'opacity-0',
@@ -77,12 +79,20 @@ export function AccountSelector({
     );
   };
 
-  const selected = accounts.find((account) => account.value === value);
-
   if (!features.enableTeamAccounts) {
     return null;
   }
 
+  const selected = accounts.find((account) => account.value === value);
+  const pictureUrl = personalData.data?.picture_url;
+
+  const PersonalAccountAvatar = () =>
+    pictureUrl ? (
+      <UserAvatar pictureUrl={pictureUrl} />
+    ) : (
+      <PersonIcon className="h-4 w-4" />
+    );
+
   return (
     <>
       <Popover open={open} onOpenChange={setOpen}>
@@ -101,7 +111,7 @@ export function AccountSelector({
               condition={selected}
               fallback={
                 <span className={'flex items-center space-x-2'}>
-                  <PersonIcon className="h-4 w-4" />
+                  <PersonalAccountAvatar />
 
                   <span
                     className={cn({
@@ -148,9 +158,9 @@ export function AccountSelector({
                   onSelect={() => onAccountChange(undefined)}
                   value={PERSONAL_ACCOUNT_SLUG}
                 >
-                  <PersonIcon className="mr-2 h-4 w-4" />
+                  <PersonalAccountAvatar />
 
-                  <span>
+                  <span className={'ml-2'}>
                     <Trans i18nKey={'teams:personalAccount'} />
                   </span>
 
@@ -200,13 +210,13 @@ export function AccountSelector({
                   <Button
                     size={'sm'}
                     variant="ghost"
-                    className="w-full"
+                    className="w-full justify-start"
                     onClick={() => {
                       setIsCreatingAccount(true);
                       setOpen(false);
                     }}
                   >
-                    <Plus className="mr-2 h-4 w-4" />
+                    <Plus className="mr-3 h-4 w-4" />
 
                     <span>
                       <Trans i18nKey={'teams:createTeam'} />
@@ -228,3 +238,11 @@ export function AccountSelector({
     </>
   );
 }
+
+function UserAvatar(props: { pictureUrl?: string }) {
+  return (
+    <Avatar className={'h-6 w-6'}>
+      <AvatarImage src={props.pictureUrl} />
+    </Avatar>
+  );
+}
diff --git a/tooling/tailwind/index.ts b/tooling/tailwind/index.ts
index ecae70641..418ae9451 100644
--- a/tooling/tailwind/index.ts
+++ b/tooling/tailwind/index.ts
@@ -3,7 +3,11 @@ import { fontFamily } from 'tailwindcss/defaultTheme';
 
 export default {
   darkMode: ['class'],
-  content: ['../../packages/**/*.tsx', '../../apps/**/*.tsx'],
+  content: [
+    '../../packages/**/*.tsx',
+    '../../apps/**/*.tsx',
+    '!./**/node_modules/**',
+  ],
   theme: {
     container: {
       center: true,