added the status icons as svgs

ever-co · Oct 23, 2023 · 5fd7274 · 5fd7274
1 parent e727137
commit 5fd7274
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 51 deletions.
diff --git a/apps/mobile/app/components/svgs/icons.tsx b/apps/mobile/app/components/svgs/icons.tsx
@@ -410,3 +410,49 @@ export const settingsIconDark = `<svg width="25" height="24" viewBox="0 0 25 24"
 <path d="M2.5 12.8804V11.1204C2.5 10.0804 3.35 9.22043 4.4 9.22043C6.21 9.22043 6.95 7.94042 6.04 6.37042C5.52 5.47042 5.83 4.30042 6.74 3.78042L8.47 2.79042C9.26 2.32042 10.28 2.60042 10.75 3.39042L10.86 3.58042C11.76 5.15042 13.24 5.15042 14.15 3.58042L14.26 3.39042C14.73 2.60042 15.75 2.32042 16.54 2.79042L18.27 3.78042C19.18 4.30042 19.49 5.47042 18.97 6.37042C18.06 7.94042 18.8 9.22043 20.61 9.22043C21.65 9.22043 22.51 10.0704 22.51 11.1204V12.8804C22.51 13.9204 21.66 14.7804 20.61 14.7804C18.8 14.7804 18.06 16.0604 18.97 17.6304C19.49 18.5404 19.18 19.7004 18.27 20.2204L16.54 21.2104C15.75 21.6804 14.73 21.4004 14.26 20.6104L14.15 20.4204C13.25 18.8504 11.77 18.8504 10.86 20.4204L10.75 20.6104C10.28 21.4004 9.26 21.6804 8.47 21.2104L6.74 20.2204C5.83 19.7004 5.52 18.5304 6.04 17.6304C6.95 16.0604 6.21 14.7804 4.4 14.7804C3.35 14.7804 2.5 13.9204 2.5 12.8804Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `
+export const suspendedStatusIcon = `	<svg
+			width="8"
+			height="8"
+			viewBox="0 0 10 10"
+			fill="#FFFFFF"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path d="M4.98728 0.882324C2.71433 0.882324 0.869629 2.72703 0.869629 4.99997C0.869629 7.27291 2.71433 9.11762 4.98728 9.11762C7.26022 9.11762 9.10492 7.27291 9.10492 4.99997C9.10492 2.72703 7.26434 0.882324 4.98728 0.882324ZM6.74139 5.50644C6.74139 6.18997 6.18963 6.74174 5.5061 6.74174H4.49316C3.80963 6.74174 3.25786 6.18997 3.25786 5.50644V4.4935C3.25786 3.80997 3.80963 3.25821 4.49316 3.25821H5.5061C6.18963 3.25821 6.74139 3.80997 6.74139 4.4935V5.50644Z" />
+		</svg>`
+
+export const idleStatusIcon = `	<svg
+			width="8"
+			height="8"
+			viewBox="0 0 10 10"
+			fill="#E65B5B"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path d="M4.98728 0.882324C2.71433 0.882324 0.869629 2.72703 0.869629 4.99997C0.869629 7.27291 2.71433 9.11762 4.98728 9.11762C7.26022 9.11762 9.10492 7.27291 9.10492 4.99997C9.10492 2.72703 7.26434 0.882324 4.98728 0.882324ZM6.74139 5.50644C6.74139 6.18997 6.18963 6.74174 5.5061 6.74174H4.49316C3.80963 6.74174 3.25786 6.18997 3.25786 5.50644V4.4935C3.25786 3.80997 3.80963 3.25821 4.49316 3.25821H5.5061C6.18963 3.25821 6.74139 3.80997 6.74139 4.4935V5.50644Z" />
+		</svg>`
+
+export const onlineAndTrackingTimeStatusIcon = ` <svg
+			width="8"
+			height="8"
+			viewBox="0 0 10 10"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M7.26027 4.01184L2.36439 6.96419C2.07615 7.13713 1.70557 6.93125 1.70557 6.5936V3.29948C1.70557 1.86242 3.25792 0.964776 4.50557 1.68125L6.39557 2.76831L7.25615 3.26242C7.54027 3.43125 7.54439 3.84301 7.26027 4.01184Z"
+				fill="#307D50"
+			/>
+			<path
+				d="M7.50763 6.42462L5.83998 7.38815L4.17645 8.34756C3.57939 8.68932 2.9041 8.61932 2.4141 8.27344C2.17527 8.10874 2.2041 7.74227 2.45527 7.59403L7.6888 4.45638C7.93586 4.30815 8.26116 4.44815 8.30645 4.73227C8.40939 5.3705 8.14586 6.05815 7.50763 6.42462Z"
+				fill="#307D50"
+			/>
+		</svg>`
+export const pauseStatusIcon = ` <svg
+			width="8"
+			height="8"
+			viewBox="0 0 10 10"
+			xmlns="http://www.w3.org/2000/svg"
+			fill="#B87B1E"
+		>
+			<path d="M4.44395 7.92772V2.07242C4.44395 1.51654 4.20924 1.29419 3.6163 1.29419H2.12159C1.52865 1.29419 1.29395 1.51654 1.29395 2.07242V7.92772C1.29395 8.4836 1.52865 8.70595 2.12159 8.70595H3.6163C4.20924 8.70595 4.44395 8.4836 4.44395 7.92772Z" />
+			<path d="M8.70566 7.92772V2.07242C8.70566 1.51654 8.47096 1.29419 7.87802 1.29419H6.38331C5.79449 1.29419 5.55566 1.51654 5.55566 2.07242V7.92772C5.55566 8.4836 5.79037 8.70595 6.38331 8.70595H7.87802C8.47096 8.70595 8.70566 8.4836 8.70566 7.92772Z" />
+		</svg>`
diff --git a/apps/mobile/app/helpers/get-timer-status.ts b/apps/mobile/app/helpers/get-timer-status.ts
@@ -8,22 +8,23 @@ type timerStatusReturnValue = "pause" | "running" | "idle" | "online" | "suspend
 export const getTimerStatusValue = (
 	timerStatus: ITimerStatus | null,
 	member: OT_Member,
+
 	publicTeam?: boolean,
 ): timerStatusReturnValue => {
 	return !member?.employee?.isActive && !publicTeam
 		? "suspended"
-		: member?.timerStatus === "pause"
-		? "pause"
+		: member?.employee?.isOnline
+		? //  && member?.timerStatus !== 'running'
+		  "online"
 		: !timerStatus?.running &&
 		  timerStatus?.lastLog &&
 		  timerStatus?.lastLog?.startedAt &&
 		  timerStatus?.lastLog?.employeeId === member?.employeeId &&
 		  moment().diff(moment(timerStatus?.lastLog?.startedAt), "hours") < 24 &&
-		  timerStatus?.lastLog?.source !== "TEAMS"
+		  timerStatus?.lastLog?.source !== "MOBILE"
+		? "pause"
+		: member?.timerStatus === "pause"
 		? "pause"
-		: member?.employee?.isOnline
-		? //  && member?.timerStatus !== 'running'
-		  "online"
 		: !member?.totalTodayTasks?.length
 		? "idle"
 		: member?.timerStatus || "idle"

diff --git a/apps/mobile/app/screens/Authenticated/TeamScreen/components/UserHeaderCard.tsx b/apps/mobile/app/screens/Authenticated/TeamScreen/components/UserHeaderCard.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable camelcase */
 /* eslint-disable react-native/no-color-literals */
+/* eslint-disable react-native/no-inline-styles */
 import { StyleSheet, View, Text } from "react-native"
 import React, { FC } from "react"
 import { IUser } from "../../../../services/interfaces/IUserData"
@@ -10,58 +11,56 @@ import { useTimer } from "../../../../services/hooks/useTimer"
 import { imgTitleProfileAvatar } from "../../../../helpers/img-title-profile-avatar"
 import { useOrganizationTeam } from "../../../../services/hooks/useOrganization"
 import { getTimerStatusValue } from "../../../../helpers/get-timer-status"
+import { SvgXml } from "react-native-svg"
+import {
+	idleStatusIcon,
+	onlineAndTrackingTimeStatusIcon,
+	pauseStatusIcon,
+	suspendedStatusIcon,
+} from "../../../../components/svgs/icons"
 
 interface ITimerStatus {
 	status: "running" | "online" | "idle" | "suspended" | "pause"
 }
 const TimerStatus: FC<ITimerStatus> = ({ status }) => {
-	return (
-		<View>
-			{status === "online" && (
-				/* For now until we have realtime we will use Play icon instead of Online icon */
-				// <Avatar.Image
-				// 	style={styles.statusIcon}
-				// 	size={20}
-				// 	source={require("../../../../../assets/icons/new/online.png")}
-				// />
-				<Avatar.Image
-					style={styles.statusIcon}
-					size={20}
-					source={require("../../../../../assets/icons/new/play-small.png")}
-				/>
-			)}
+	let iconSvgXml = ""
 
-			{status === "running" && (
-				<Avatar.Image
-					style={styles.statusIcon}
-					size={20}
-					source={require("../../../../../assets/icons/new/play-small.png")}
-				/>
-			)}
+	switch (status) {
+		case "online":
+			iconSvgXml = onlineAndTrackingTimeStatusIcon
+			break
+		case "pause":
+			iconSvgXml = pauseStatusIcon
+			break
+		case "idle":
+			iconSvgXml = idleStatusIcon
+			break
+		case "suspended":
+			iconSvgXml = suspendedStatusIcon
+			break
+	}
 
-			{status === "idle" && (
-				<Avatar.Image
-					style={styles.statusIcon}
-					size={20}
-					source={require("../../../../../assets/icons/new/away.png")}
-				/>
-			)}
-
-			{status === "suspended" && (
-				<Avatar.Image
-					style={styles.statusIcon}
-					size={20}
-					source={require("../../../../../assets/icons/new/play-small.png")}
-				/>
-			)}
-
-			{status === "pause" && (
-				<Avatar.Image
-					style={styles.statusIcon}
-					size={20}
-					source={require("../../../../../assets/icons/new/on-pause.png")}
-				/>
-			)}
+	return (
+		<View
+			style={[
+				styles.statusIcon,
+				{
+					padding: 3,
+					borderRadius: 100,
+					borderWidth: 2,
+					borderColor: "white",
+					backgroundColor:
+						status === "online"
+							? "#6EE7B7"
+							: status === "pause"
+							? "#EFCF9E"
+							: status === "idle"
+							? "#F5BEBE"
+							: "#DCD6D6",
+				},
+			]}
+		>
+			<SvgXml xml={iconSvgXml} />
 		</View>
 	)
 }