From 618c854b4eed70e89cebdddda65fef87f2817103 Mon Sep 17 00:00:00 2001
From: desperado1802 <124465103+desperado1802@users.noreply.github.com>
Date: Wed, 15 Nov 2023 16:53:21 +0200
Subject: [PATCH] Bug/profile avatars when no image url (#1793)

* fixed avatars in main page member card

* fixed the avatar in profile page

* fixed avatar in navigation menu too

* fixed avatar in profile page in dark mode

* fixed avatar in navbar popover

* navbar avatar tooltip position fix
---
 apps/web/lib/components/tooltip.tsx           |  6 ++--
 .../team/user-team-card/user-info.tsx         | 23 +++++++-------
 apps/web/lib/features/timer/timer-status.tsx  |  4 ++-
 apps/web/lib/features/user-nav-menu.tsx       | 30 ++++++++++++++-----
 apps/web/pages/profile/[memberId].tsx         | 18 +++++++----
 5 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/apps/web/lib/components/tooltip.tsx b/apps/web/lib/components/tooltip.tsx
index d827d1a07..5961aedf0 100644
--- a/apps/web/lib/components/tooltip.tsx
+++ b/apps/web/lib/components/tooltip.tsx
@@ -11,6 +11,7 @@ type Props = {
 	placement?: Placement;
 	enabled?: boolean;
 	labelClassName?: string;
+	labelContainerClassName?: string;
 } & IClassName;
 
 export function Tooltip({
@@ -19,7 +20,8 @@ export function Tooltip({
 	label,
 	placement = 'top',
 	enabled = true,
-	labelClassName
+	labelClassName,
+	labelContainerClassName
 }: PropsWithChildren<Props>) {
 	const { getArrowProps, getTooltipProps, setTooltipRef, setTriggerRef, visible } = usePopperTooltip({
 		placement
@@ -43,7 +45,7 @@ export function Tooltip({
 						leaveTo="transform scale-95 opacity-0"
 						ref={setTooltipRef}
 						{...getTooltipProps()}
-						className="tooltip-container w-1/3 md:w-fit"
+						className={clsx('tooltip-container w-1/3 md:w-fit', labelContainerClassName)}
 					>
 						<span className={clsx(labelClassName, 'text-xs')}>{label}</span>
 						<div {...getArrowProps()} className="tooltip-arrow" />
diff --git a/apps/web/lib/features/team/user-team-card/user-info.tsx b/apps/web/lib/features/team/user-team-card/user-info.tsx
index bc96a6050..55a0792a2 100644
--- a/apps/web/lib/features/team/user-team-card/user-info.tsx
+++ b/apps/web/lib/features/team/user-team-card/user-info.tsx
@@ -38,25 +38,26 @@ export function UserInfo({ className, memberInfo, publicTeam = false }: Props) {
 			<div
 				className={clsxm(
 					'w-[50px] h-[50px]',
-					'flex justify-center items-center',
-					'rounded-full text-xs text-default dark:text-white',
-					'shadow-md text-2xl font-normal'
+					'flex justify-center items-center relative',
+					'rounded-full text-white',
+					'shadow-md text-[2.063rem] font-thin font-PlusJakartaSans'
 				)}
 				style={{
 					backgroundColor: `${stc(fullname)}80`
 				}}
 			>
 				{imageUrl && isValidUrl(imageUrl) ? (
-					<Avatar size={50} className="relative cursor-pointer" imageUrl={imageUrl} alt="Team Avatar">
-						<TimerStatus
-							status={timerStatusValue}
-							className="w-[1.3rem] h-[1.3rem] absolute z-20 bottom-3 -right-1 -mb-3 border-[0.125rem] border-white dark:border-[#26272C]"
-							tooltipClassName="mt-10"
-						/>
-					</Avatar>
+					<Avatar size={50} className="relative cursor-pointer" imageUrl={imageUrl} alt="Team Avatar" />
 				) : (
-					imgTitle(fullname).charAt(0)
+					<div className="w-[50px] h-[50px] flex justify-center items-center rounded-full">
+						{imgTitle(fullname).charAt(0)}
+					</div>
 				)}
+				<TimerStatus
+					status={timerStatusValue}
+					className="w-[1.3rem] h-[1.3rem] absolute z-20 bottom-3 -right-1 -mb-3 border-[0.125rem] border-white dark:border-[#26272C]"
+					tooltipClassName="absolute right-0 bottom-3 -mb-3 w-[1.3rem] h-[1.3rem] rounded-full"
+				/>
 			</div>
 
 			<div className="lg:w-64 w-1/2 flex flex-col gap-1.5">
diff --git a/apps/web/lib/features/timer/timer-status.tsx b/apps/web/lib/features/timer/timer-status.tsx
index d59d6a96e..32737d224 100644
--- a/apps/web/lib/features/timer/timer-status.tsx
+++ b/apps/web/lib/features/timer/timer-status.tsx
@@ -9,9 +9,10 @@ type Props = {
 	status: ITimerStatusEnum;
 	showIcon?: boolean;
 	tooltipClassName?: string;
+	labelContainerClassName?: string;
 } & IClassName;
 
-export function TimerStatus({ status, className, showIcon = true, tooltipClassName }: Props) {
+export function TimerStatus({ status, className, showIcon = true, tooltipClassName, labelContainerClassName }: Props) {
 	return (
 		<Tooltip
 			label={status === 'online' ? 'Online and Tracking Time' : status}
@@ -19,6 +20,7 @@ export function TimerStatus({ status, className, showIcon = true, tooltipClassNa
 			placement="auto"
 			className={tooltipClassName}
 			labelClassName="whitespace-nowrap"
+			labelContainerClassName={labelContainerClassName}
 		>
 			<div
 				className={clsxm(
diff --git a/apps/web/lib/features/user-nav-menu.tsx b/apps/web/lib/features/user-nav-menu.tsx
index 6ffff0ddf..707ba8293 100644
--- a/apps/web/lib/features/user-nav-menu.tsx
+++ b/apps/web/lib/features/user-nav-menu.tsx
@@ -49,8 +49,8 @@ export function UserNavAvatar() {
 					className={clsxm(
 						'w-[3rem] h-[3rem]',
 						'flex justify-center items-center',
-						'rounded-full text-xs text-default dark:text-white',
-						'shadow-md text-lg font-normal'
+						'rounded-full text-white',
+						'shadow-md text-[2.063rem] dark:text-[1.75rem] text-thin font-PlusJakartaSans '
 					)}
 					style={{
 						backgroundColor: `${stc(name || '')}80`
@@ -71,7 +71,15 @@ export function UserNavAvatar() {
 							/>
 						</Avatar>
 					) : name ? (
-						imgTitle(name).charAt(0)
+						<div className="w-[3rem] h-[3rem] flex justify-center items-center relative rounded-full dark:border-[0.25rem] dark:border-[#26272C] text-white">
+							{imgTitle(name).charAt(0)}
+							<TimerStatus
+								status={timerStatusValue}
+								className="w-[1.3rem] h-[1.3rem] absolute bottom-3 -right-2 -mb-4 border-[0.125rem] border-white dark:border-[#26272C]"
+								tooltipClassName="mt-8"
+								labelContainerClassName="mr-8"
+							/>
+						</div>
 					) : (
 						''
 					)}
@@ -138,9 +146,9 @@ function UserNavMenu() {
 					<div
 						className={clsxm(
 							'w-[72px] h-[72px]',
-							'flex justify-center items-center',
-							'rounded-full text-xs text-default dark:text-white',
-							'shadow-md text-4xl font-normal relative cursor-pointer mb-5'
+							'flex justify-center items-center relative',
+							'rounded-full text-xs text-white',
+							'shadow-md text-5xl font-thin relative font-PlusJakartaSans cursor-pointer mb-5'
 						)}
 						style={{
 							backgroundColor: `${stc(name || '')}80`
@@ -155,7 +163,15 @@ function UserNavMenu() {
 								/>
 							</Avatar>
 						) : name ? (
-							imgTitle(name).charAt(0)
+							<div className="relative w-[72px] h-[72px] flex justify-center items-center">
+								{imgTitle(name).charAt(0)}
+								<TimerStatus
+									status={timerStatusValue}
+									className="w-[1.3rem] h-[1.3rem] absolute z-20 bottom-3 -right-1 -mb-3 border-[0.125rem] border-white dark:border-[#26272C]"
+									tooltipClassName="mt-2 "
+									labelContainerClassName="mr-14"
+								/>
+							</div>
 						) : (
 							''
 						)}
diff --git a/apps/web/pages/profile/[memberId].tsx b/apps/web/pages/profile/[memberId].tsx
index dc29fad5b..6c17bbbf2 100644
--- a/apps/web/pages/profile/[memberId].tsx
+++ b/apps/web/pages/profile/[memberId].tsx
@@ -86,10 +86,11 @@ function UserProfileDetail({ member }: { member?: OT_Member }) {
 		<div className="flex items-center mb-4 space-x-4 md:mb-0">
 			<div
 				className={clsx(
-					`w-[${size}px] h-[${size}px]`,
-					'flex justify-center items-center',
-					'rounded-full text-xs text-default dark:text-white',
-					'shadow-md text-4xl font-normal'
+					`w-[100px] h-[100px]`, // removed the size variable from width and height, as passing variables is not supported by tailwind
+					'flex justify-center items-center relative',
+					'rounded-full text-white',
+					'shadow-md text-7xl dark:text-6xl font-thin font-PlusJakartaSans ',
+					!imageUrl && 'dark:border-[0.375rem] dark:border-[#26272C]'
 				)}
 				style={{
 					backgroundColor: `${stc(userName)}80`
@@ -110,7 +111,14 @@ function UserProfileDetail({ member }: { member?: OT_Member }) {
 						/>
 					</Avatar>
 				) : (
-					imgTitle(userName).charAt(0)
+					<>
+						{imgTitle(userName).charAt(0)}
+						<TimerStatus
+							status={timerStatusValue}
+							className="absolute z-20 border-[0.2956rem] border-white dark:border-[#26272C]"
+							tooltipClassName="absolute -bottom-[0.625rem] dark:-bottom-[0.75rem] right-[10%] w-[1.875rem] h-[1.875rem] rounded-full"
+						/>
+					</>
 				)}
 			</div>