diff --git a/apps/mobile/app/components/HeaderTimer.tsx b/apps/mobile/app/components/HeaderTimer.tsx index 0963e996c..fc0a865be 100644 --- a/apps/mobile/app/components/HeaderTimer.tsx +++ b/apps/mobile/app/components/HeaderTimer.tsx @@ -1,11 +1,15 @@ +/* eslint-disable react-native/no-inline-styles */ +/* eslint-disable react-native/no-color-literals */ import { observer } from "mobx-react-lite" import React from "react" -import { View, Text, StyleSheet, Image, TouchableOpacity } from "react-native" +import { View, Text, StyleSheet, TouchableOpacity } from "react-native" import { ProgressBar } from "react-native-paper" import { pad } from "../helpers/number" import { useStores } from "../models" import { useTimer } from "../services/hooks/useTimer" import { typography, useAppTheme } from "../theme" +import { SvgXml } from "react-native-svg" +import { timerSmallPlayIcon, timerSmallStopIcon } from "./svgs/icons" const HeaderTimer = observer(() => { const { colors } = useAppTheme() @@ -50,9 +54,10 @@ const HeaderTimer = observer(() => { onPress={() => handleTimer()} > {localTimerStatus.running ? ( - + // + ) : ( - + )} @@ -84,17 +89,18 @@ const styles = StyleSheet.create({ borderWidth: 1, elevation: 10, flexDirection: "row", + gap: 9, height: 38, - justifyContent: "space-around", + justifyContent: "center", shadowColor: "rgba(0, 0, 0, 0.1)", shadowOffset: { width: 5, height: 5 }, shadowOpacity: 0.3, shadowRadius: 1, - width: "100%", + width: 126, }, progressContainer: { height: 21, - width: "60%", + width: "65%", }, smallTxt: { fontSize: 8, diff --git a/apps/mobile/app/components/TimerButton.tsx b/apps/mobile/app/components/TimerButton.tsx index 340af0e4f..28fb9d5b9 100644 --- a/apps/mobile/app/components/TimerButton.tsx +++ b/apps/mobile/app/components/TimerButton.tsx @@ -1,15 +1,17 @@ /* eslint-disable react-native/no-inline-styles */ /* eslint-disable react-native/no-color-literals */ -import { LinearGradient } from "expo-linear-gradient" +// import { LinearGradient } from "expo-linear-gradient" import { observer } from "mobx-react-lite" import React, { FC } from "react" -import { View, StyleSheet, Image, ViewStyle, ImageStyle, Pressable } from "react-native" +import { View, StyleSheet, ViewStyle, ImageStyle, Pressable } from "react-native" import { GLOBAL_STYLE as GS } from "../../assets/ts/styles" import { useStores } from "../models" import { useTimer } from "../services/hooks/useTimer" import { ITeamTask } from "../services/interfaces/ITask" import { useAppTheme } from "../theme" +import { SvgXml } from "react-native-svg" +import { timerLargePlayIcon, timerLargeStopIcon } from "./svgs/icons" type TimerButtonProps = { task?: ITeamTask @@ -17,7 +19,7 @@ type TimerButtonProps = { iconStyle?: ImageStyle } -const TimerButton: FC = observer(({ containerStyle, iconStyle }) => { +const TimerButton: FC = observer(({ containerStyle }) => { const { TimerStore: { localTimerStatus }, } = useStores() @@ -38,25 +40,15 @@ const TimerButton: FC = observer(({ containerStyle, iconStyle disabled={!canRunTimer} onPress={() => startTimer()} > - + ) : ( - stopTimer()} style={[styles.timerBtnInactive, containerStyle]}> - - - + stopTimer()} + style={[styles.timerBtnActive, { backgroundColor: "#e11d48" }, containerStyle]} + > + )} @@ -76,20 +68,15 @@ const TimerButton: FC = observer(({ containerStyle, iconStyle disabled={!canRunTimer} onPress={() => (canRunTimer ? startTimer() : {})} > - + ) : ( - stopTimer()} style={[styles.timerBtnInactive, containerStyle]}> - + stopTimer()} + style={[styles.timerBtnActive, { backgroundColor: "#e11d48" }, containerStyle]} + > + )} @@ -99,6 +86,22 @@ const TimerButton: FC = observer(({ containerStyle, iconStyle export default TimerButton const styles = StyleSheet.create({ + timerBtnActive: { + alignItems: "center", + backgroundColor: "#3826A6", + borderColor: "rgba(0, 0, 0, 0.1)", + borderRadius: 30, + borderWidth: 1, + elevation: 5, + height: 60, + justifyContent: "center", + marginHorizontal: 15, + shadowColor: "#e11d48", + shadowOffset: { width: 1, height: 1.5 }, + shadowOpacity: 0.5, + shadowRadius: 5, + width: 60, + }, timerBtnInactive: { alignItems: "center", backgroundColor: "#3826A6", diff --git a/apps/mobile/app/components/svgs/icons.tsx b/apps/mobile/app/components/svgs/icons.tsx index 9f6519302..e8c0bf03d 100644 --- a/apps/mobile/app/components/svgs/icons.tsx +++ b/apps/mobile/app/components/svgs/icons.tsx @@ -175,3 +175,90 @@ export const userActive = ` ` + +export const timerLargeStopIcon = ` + + + ` + +export const timerMediumStopIcon = ` + + + ` + +export const timerSmallStopIcon = ` + + + ` + +export const timerLargePlayIcon = ` + + + ` + +export const timerMediumPlayIcon = ` + + + ` + +export const timerSmallPlayIcon = ` + + + ` diff --git a/apps/mobile/app/screens/Authenticated/ProfileScreen/components/TimerButton.tsx b/apps/mobile/app/screens/Authenticated/ProfileScreen/components/TimerButton.tsx index c9f4a1513..dd3c048d8 100644 --- a/apps/mobile/app/screens/Authenticated/ProfileScreen/components/TimerButton.tsx +++ b/apps/mobile/app/screens/Authenticated/ProfileScreen/components/TimerButton.tsx @@ -1,9 +1,9 @@ /* eslint-disable react-native/no-color-literals */ /* eslint-disable react-native/no-inline-styles */ -import React, { FC, useMemo } from "react" +import React, { FC } from "react" import { LinearGradient } from "expo-linear-gradient" -import { Image, StyleSheet } from "react-native" +import { StyleSheet } from "react-native" import { useStores } from "../../../../models" import { useTimer } from "../../../../services/hooks/useTimer" import { observer } from "mobx-react-lite" @@ -11,6 +11,8 @@ import { ITeamTask } from "../../../../services/interfaces/ITask" import { useTeamTasks } from "../../../../services/hooks/features/useTeamTasks" import { TouchableOpacity } from "react-native-gesture-handler" import { useAppTheme } from "../../../../theme" +import { SvgXml } from "react-native-svg" +import { timerMediumPlayIcon, timerMediumStopIcon } from "../../../../components/svgs/icons" interface Props { isActiveTask: boolean @@ -44,39 +46,45 @@ const TimerButton: FC = observer(({ isActiveTask, task }) => { style={[ styles.timerBtn, { - backgroundColor: colors.background, - borderColor: colors.border, + backgroundColor: + localTimerStatus.running && isActiveTask ? "#e11d48" : colors.background, + borderColor: localTimerStatus.running && isActiveTask ? "#e11d48" : colors.background, }, ]} onPress={() => handleStartTimer()} > - + {localTimerStatus.running && isActiveTask ? ( + + ) : ( + + )} ) } return ( - - handleStartTimer()}> - - - + <> + {localTimerStatus.running && isActiveTask ? ( + handleStartTimer()} + > + + + ) : ( + + handleStartTimer()}> + + + + )} + ) }) diff --git a/apps/mobile/app/screens/Authenticated/TeamScreen/components/WorkedOnTask.tsx b/apps/mobile/app/screens/Authenticated/TeamScreen/components/WorkedOnTask.tsx index 12701e6ae..f13d1126c 100644 --- a/apps/mobile/app/screens/Authenticated/TeamScreen/components/WorkedOnTask.tsx +++ b/apps/mobile/app/screens/Authenticated/TeamScreen/components/WorkedOnTask.tsx @@ -19,11 +19,17 @@ export const WorkedOnTask: FC = observer(({ memberInfo, period }) => { // Get current timer seconds const { isAuthUser, memberTask } = memberInfo - const { getTaskStat, activeTaskDailyStat, activeTaskTotalStat } = useTaskStatistics() + // activeTaskDailyStat and activeTaskTotalStat removed from useTaskStatistics call + const { getTaskStat } = useTaskStatistics() + + const { taskTotalStat, taskDailyStat } = getTaskStat(memberTask) if (isAuthUser) { - const { h: th, m: tm } = secondsToTime(activeTaskTotalStat?.duration || 0) - const { h: dh, m: dm } = secondsToTime(activeTaskDailyStat?.duration || 0) + // const { h: th, m: tm } = secondsToTime(activeTaskTotalStat?.duration || 0) + // const { h: dh, m: dm } = secondsToTime(activeTaskDailyStat?.duration || 0) + + const { h: th, m: tm } = secondsToTime(taskTotalStat?.duration || 0) + const { h: dh, m: dm } = secondsToTime(taskDailyStat?.duration || 0) return ( <> {period === "Daily" ? ( @@ -45,8 +51,6 @@ export const WorkedOnTask: FC = observer(({ memberInfo, period }) => { ) } - const { taskTotalStat, taskDailyStat } = getTaskStat(memberTask) - const { h: th, m: tm } = secondsToTime(taskTotalStat?.duration || 0) const { h: dh, m: dm } = secondsToTime(taskDailyStat?.duration || 0) return ( diff --git a/apps/mobile/app/services/hooks/features/useTaskStatics.ts b/apps/mobile/app/services/hooks/features/useTaskStatics.ts index a65f71cac..c68d0d7cd 100644 --- a/apps/mobile/app/services/hooks/features/useTaskStatics.ts +++ b/apps/mobile/app/services/hooks/features/useTaskStatics.ts @@ -89,6 +89,10 @@ export function useTaskStatistics(addSeconds = 0) { return data }, [activeTask]) // If there are a lot of tasks to load might cause slow load, as fetching a lot, depending on task count + /* + Commented the bellow function as it fetches often causing performance issues + */ + // const debounceLoadActiveTaskStat = useCallback(debounce(getActiveTaskStatData, 100), [ // activeTaskId, // ]) diff --git a/apps/web/lib/features/timer/timer-button.tsx b/apps/web/lib/features/timer/timer-button.tsx index 317ecb39a..6e8674c02 100644 --- a/apps/web/lib/features/timer/timer-button.tsx +++ b/apps/web/lib/features/timer/timer-button.tsx @@ -17,11 +17,11 @@ export function TimerButton({ onClick, running, disabled, className }: Props) { onClick={onClick} className={clsxm( running - ? ['bg-rose-600 dark:bg-rose-600 border-none'] - : ['bg-white dark:bg-dark-lighter'], + ? ['bg-rose-600 dark:bg-rose-600 border-none shadow-rose-600/30'] + : ['bg-white dark:bg-dark-lighter shadow-primary/30'], 'w-14 h-14 rounded-full inline-block min-w-[14px] !px-0 !py-0', 'flex justify-center items-center border border-[#0000001A] dark:border-[0.125rem] dark:border-[#28292F]', - 'shadow-primary/30 shadow-xl drop-shadow-3xl dark:shadow-lgcard-white', + 'shadow-xl drop-shadow-3xl dark:shadow-lgcard-white', disabled && ['opacity-70 cursor-default'], className