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
ever-co · Nov 15, 2023 · 618c854 · 618c854
1 parent 076a471
commit 618c854
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 26 deletions.
diff --git 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
@@ -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
@@ -9,16 +9,18 @@ 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}
 			enabled
 			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
@@ -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
@@ -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>