feat: change color of icon sync gf-502

BinaryStudioAcademy · Sep 25, 2024 · 209f09a · 209f09a
1 parent 124facb
commit 209f09a
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 16 deletions.
diff --git a/apps/frontend/src/assets/images/icons/sync.svg b/apps/frontend/src/assets/images/icons/sync.svg
diff --git a/...ges/project/libs/components/contributors-list/libs/components/sync-time/styles.module.css b/...ges/project/libs/components/contributors-list/libs/components/sync-time/styles.module.css
@@ -13,5 +13,15 @@
 }
 
 .sync-time-overdue {
+	display: flex;
+	flex-direction: row;
+	gap: 8px;
+	align-items: center;
+	max-height: 20px;
+	margin-left: 16px;
+	font-family: Inter, sans-serif;
+	font-size: 16px;
+	font-weight: 500;
+	line-height: 120%;
 	color: var(--color-danger);
 }
diff --git a/...c/pages/project/libs/components/contributors-list/libs/components/sync-time/sync-time.tsx b/...c/pages/project/libs/components/contributors-list/libs/components/sync-time/sync-time.tsx
@@ -26,11 +26,13 @@ const SyncTime = ({
 		: null;
 
 	useEffect(() => {
-		if (lastUpdateLabel && lastUpdateLabel.hoursDifference !== undefined) {
+		if (lastUpdateLabel?.hoursDifference !== undefined) {
 			setIsOverdue(lastUpdateLabel.hoursDifference >= OVERDUE_LIMIT);
 		}
 	}, [lastUpdateLabel]);
 
+	const hasSyncTime = lastUpdateLabel && lastActivityUserName;
+
 	return (
 		<Tooltip
 			content={
@@ -40,20 +42,18 @@ const SyncTime = ({
 			}
 			id="lastUpdateTooltip"
 		>
-			<div className={styles["sync-time-container"]}>
-				<p
+			{hasSyncTime && (
+				<div
 					className={
-						isOverdue ? styles["sync-time-overdue"] : styles["sync-time"]
+						styles[isOverdue ? "sync-time-container" : "sync-time-overdue"]
 					}
 				>
-					{lastUpdateLabel?.label} • {lastActivityUserName}
-				</p>
-				{isOverdue ? (
-					<Icon height={18} name="syncOverdue" width={18} />
-				) : (
+					<p>
+						{lastUpdateLabel.label} • {lastActivityUserName}
+					</p>
 					<Icon height={18} name="sync" width={18} />
-				)}
-			</div>
+				</div>
+			)}
 		</Tooltip>
 	);
 };

diff --git a/packages/shared/src/libs/helpers/get-sync-time/get-sync-time.helper.ts b/packages/shared/src/libs/helpers/get-sync-time/get-sync-time.helper.ts
@@ -5,11 +5,11 @@ type SyncTimeResult = {
 	label: string;
 };
 
-const getSyncTime = (date: Date, baseDate: Date): SyncTimeResult => {
-	const HOURS_IN_A_DAY = 24;
-	const ONE_HOUR = 1;
-	const ZERO_HOURS = 0;
+const HOURS_IN_A_DAY = 24;
+const ONE_HOUR = 1;
+const ZERO_HOURS = 0;
 
+const getSyncTime = (date: Date, baseDate: Date): SyncTimeResult => {
 	const hoursDifference = differenceInHours(baseDate, date);
 
 	if (hoursDifference === ZERO_HOURS) {