Merge pull request #2043 from ever-co/fix/minors

Fix: skeleton less color in Dark Theme &
ever-co · Jan 2, 2024 · 7b5a37f · 7b5a37f
2 parents f2b1ee9 + 8043a4f
commit 7b5a37f
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 13 deletions.
diff --git a/apps/web/components/shared/skeleton/InviteTeamCardSkeleton.tsx b/apps/web/components/shared/skeleton/InviteTeamCardSkeleton.tsx
@@ -1,4 +1,4 @@
-import Skeleton from 'react-loading-skeleton';
+import Skeleton from './Skeleton';
 import { Card, VerticalSeparator } from 'lib/components';
 import { DraggerIcon } from 'lib/components/svgs';
 

diff --git a/apps/web/components/shared/skeleton/Skeleton.tsx b/apps/web/components/shared/skeleton/Skeleton.tsx
@@ -0,0 +1,27 @@
+import { clsxm } from '@app/utils';
+
+const Skeleton = ({
+	height,
+	width,
+	borderRadius,
+	className
+}: {
+	height: number;
+	width: number;
+	borderRadius: number;
+	className: string;
+}) => {
+	console.log({ borderRadius });
+	return (
+		<div
+			className={clsxm(
+				'p-1  animate-pulse rounded-lg bg-[#F0F0F0] dark:bg-[#353741]',
+				height ? `h-[${height}px]` : 'h-[20px]',
+				width ? `w-[${width}px]` : 'w-[160px]',
+				className
+			)}
+		/>
+	);
+};
+
+export default Skeleton;
diff --git a/apps/web/components/shared/skeleton/UserTeamCardSkeleton.tsx b/apps/web/components/shared/skeleton/UserTeamCardSkeleton.tsx
@@ -1,6 +1,6 @@
+import { clsxm } from '@app/utils';
 import { Card, VerticalSeparator } from 'lib/components';
 import { DraggerIcon } from 'lib/components/svgs';
-import Skeleton from 'react-loading-skeleton';
 
 const UserTeamCardSkeletonCard = () => {
 	return (
@@ -11,16 +11,16 @@ const UserTeamCardSkeletonCard = () => {
 			<div className="w-[330px] px-4 flex space-x-3 items-center">
 				<div className="w-8 h-8 bg-[#F0F0F0] dark:bg-[#353741] rounded-full" />
 				<div className="w-10 h-10 bg-[#F0F0F0] dark:bg-[#353741] rounded-full" />
-				<Skeleton height={20} width={180} borderRadius={10} className="dark:bg-[#353741]" />
+				<Skeleton height={20} width={160} borderRadius={10} className="dark:bg-[#353741]" />
 			</div>
 			<VerticalSeparator />
 
-			<div className="w-[330px] px-4 flex flex-col items-center">
-				<div className="flex flex-col items-start">
-					<Skeleton height={10} width={280} borderRadius={10} className="dark:bg-[#353741] ml-2" />
+			<div className="w-[330px] px-4 flex flex-col items-center gap-2">
+				<div className="flex flex-col items-start gap-2">
+					<Skeleton height={10} width={160} borderRadius={10} className="dark:bg-[#353741] ml-2" />
 					<Skeleton height={10} width={120} borderRadius={10} className="dark:bg-[#353741] ml-2" />
 				</div>
-				<div className="flex justify-around items-center">
+				<div className="flex justify-around items-center gap-2">
 					<Skeleton height={15} width={80} borderRadius={10} className="dark:bg-[#353741] mr-2" />
 					<Skeleton height={15} width={80} borderRadius={10} className="dark:bg-[#353741] mr-2" />
 					<Skeleton height={15} width={80} borderRadius={10} className="dark:bg-[#353741]" />
@@ -48,4 +48,27 @@ const UserTeamCardSkeletonCard = () => {
 	);
 };
 
+const Skeleton = ({
+	height,
+	width,
+	borderRadius,
+	className
+}: {
+	height: number;
+	width: number;
+	borderRadius: number;
+	className: string;
+}) => {	
+	return (
+		<div
+			className={clsxm(
+				'p-1  animate-pulse rounded-lg bg-[#F0F0F0] dark:bg-[#353741]',
+				height ? `h-[${height}px]` : 'h-[20px]',
+				width ? `w-[${width}px]` : 'w-[160px]',
+				className
+			)}
+		></div>
+	);
+};
+
 export default UserTeamCardSkeletonCard;
diff --git a/apps/web/lib/features/team-members-card-view.tsx b/apps/web/lib/features/team-members-card-view.tsx
@@ -41,7 +41,7 @@ const TeamMembersCardView: React.FC<Props> = ({
 		handleChangeOrder(peopleClone[draggedOverTeamMember.current], dragTeamMember.current);
 	}
 
-	const handleChangeOrder = (employee: OT_Member, order: number) => {		
+	const handleChangeOrder = (employee: OT_Member, order: number) => {
 		updateOrganizationTeamEmployeeOrderOnList(employee, order);
 	};
 
@@ -122,7 +122,7 @@ const TeamMembersCardView: React.FC<Props> = ({
 				leaveFrom="opacity-100"
 				leaveTo="opacity-0"
 			>
-				{[1, 2].map((_, i) => {
+				{[0, 2].map((_, i) => {
 					return (
 						<li key={i} className="mt-3">
 							<UserTeamCardSkeleton />

diff --git a/apps/web/lib/features/team/user-team-card/index.tsx b/apps/web/lib/features/team/user-team-card/index.tsx
@@ -147,7 +147,7 @@ export function UserTeamCard({
 				<TaskInfo
 					edition={taskEdition}
 					memberInfo={memberInfo}
-					className="2xl:w-80 3xl:w-[32rem] w-1/5 lg:px-4 px-2 overflow-y-auto"
+					className="2xl:w-80 3xl:w-[32rem] w-1/5 lg:px-4 px-2 overflow-y-hidden"
 					publicTeam={publicTeam}
 				/>
 				<VerticalSeparator className="ml-2" />

diff --git a/apps/web/lib/features/team/user-team-card/task-info.tsx b/apps/web/lib/features/team/user-team-card/task-info.tsx
@@ -12,7 +12,12 @@ type Props = IClassName & {
 
 export function TaskInfo({ className, memberInfo, edition, publicTeam }: Props) {
 	return (
-		<div className={clsxm('h-full flex flex-col items-start justify-between gap-[1.0625rem]', className)}>
+		<div
+			className={clsxm(
+				'h-full flex flex-col items-start justify-between gap-[1.0620rem] max-h-full overflow-hidden',
+				className
+			)}
+		>
 			{/* task */}
 			<div className={clsxm('w-full h-10', edition.editMode ? [''] : ['overflow-hidden'])}>
 				{edition.task && (

diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
@@ -295,7 +295,7 @@ html.dark {
 	}
 }
 
-@keyframes pulse {
+/* @keyframes pulse {
 	0%,
 	100% {
 		opacity: 1;
@@ -304,7 +304,7 @@ html.dark {
 		opacity: 1;
 		transform: scale(1.2);
 	}
-}
+} */
 
 .progress-ring__circle {
 	stroke-dasharray: 400, 400;