From 2ac7acd334363327180210d89e13267f2780b4f9 Mon Sep 17 00:00:00 2001 From: desperado1802 <124465103+desperado1802@users.noreply.github.com> Date: Fri, 6 Oct 2023 09:06:12 +0300 Subject: [PATCH] Bug/task cards time values visibility (#1509) * updated the color of worked time titles, and active tab bottom border color in profile screen * updated the teams screen user card worked time colors in dark theme * updated the selected tab border bottom color to be dynamic --- apps/mobile/app/components/WorkedDayHours.tsx | 6 ++++-- apps/mobile/app/components/WorkedOnTask.tsx | 8 ++++++-- .../ProfileScreen/components/TaskTab.tsx | 8 ++++++-- .../TeamScreen/components/TodayWorkTime.tsx | 17 ++++++++++++----- .../TeamScreen/components/WorkedOnTask.tsx | 16 ++++++++++++---- 5 files changed, 40 insertions(+), 15 deletions(-) diff --git a/apps/mobile/app/components/WorkedDayHours.tsx b/apps/mobile/app/components/WorkedDayHours.tsx index c7a8c9414..81a6fa845 100644 --- a/apps/mobile/app/components/WorkedDayHours.tsx +++ b/apps/mobile/app/components/WorkedDayHours.tsx @@ -1,5 +1,6 @@ /* eslint-disable react-native/no-unused-styles */ /* eslint-disable react-native/no-color-literals */ +/* eslint-disable react-native/no-inline-styles */ import React from "react" import { View, StyleSheet, Text, ViewStyle, TextStyle } from "react-native" import { secondsToTime } from "../helpers/date" @@ -7,6 +8,7 @@ import { pad } from "../helpers/number" import { useTaskStatistics } from "../services/hooks/features/useTaskStatics" import { ITeamTask } from "../services/interfaces/ITask" import { typography } from "../theme/typography" +import { useTheme } from "react-native-paper" const WorkedOnTaskHours = ({ title, @@ -21,12 +23,13 @@ const WorkedOnTaskHours = ({ }) => { const { getTaskStat } = useTaskStatistics() const { taskDailyStat } = getTaskStat(memberTask) + const { dark } = useTheme() const { h: dh, m: dm } = secondsToTime(taskDailyStat?.duration || 0) return ( - {title} : + {title} {pad(dh)} h:{pad(dm)} m @@ -36,7 +39,6 @@ const WorkedOnTaskHours = ({ const styles = StyleSheet.create({ totalTimeTitle: { - color: "#7E7991", fontFamily: typography.secondary.medium, fontSize: 10, }, diff --git a/apps/mobile/app/components/WorkedOnTask.tsx b/apps/mobile/app/components/WorkedOnTask.tsx index 82429b577..1aee79db4 100644 --- a/apps/mobile/app/components/WorkedOnTask.tsx +++ b/apps/mobile/app/components/WorkedOnTask.tsx @@ -1,5 +1,6 @@ /* eslint-disable react-native/no-unused-styles */ /* eslint-disable react-native/no-color-literals */ +/* eslint-disable react-native/no-inline-styles */ import { observer } from "mobx-react-lite" import React from "react" import { View, StyleSheet, Text, ViewStyle, TextStyle } from "react-native" @@ -8,6 +9,7 @@ import { pad } from "../helpers/number" import { useTaskStatistics } from "../services/hooks/features/useTaskStatics" import { ITeamTask } from "../services/interfaces/ITask" import { typography } from "../theme/typography" +import { useTheme } from "react-native-paper" const WorkedOnTask = observer( ({ @@ -25,12 +27,15 @@ const WorkedOnTask = observer( }) => { const { getTaskStat } = useTaskStatistics() const { taskTotalStat } = getTaskStat(memberTask) + const { dark } = useTheme() const { h: dh, m: dm } = secondsToTime(taskTotalStat?.duration || 0) return ( - {title} : + + {title} :{" "} + {pad(dh)} h:{pad(dm)} m @@ -41,7 +46,6 @@ const WorkedOnTask = observer( const styles = StyleSheet.create({ totalTimeTitle: { - color: "#7E7991", fontFamily: typography.secondary.medium, fontSize: 10, }, diff --git a/apps/mobile/app/screens/Authenticated/ProfileScreen/components/TaskTab.tsx b/apps/mobile/app/screens/Authenticated/ProfileScreen/components/TaskTab.tsx index dbc3ba37f..a97532ac0 100644 --- a/apps/mobile/app/screens/Authenticated/ProfileScreen/components/TaskTab.tsx +++ b/apps/mobile/app/screens/Authenticated/ProfileScreen/components/TaskTab.tsx @@ -1,6 +1,8 @@ +/* eslint-disable react-native/no-inline-styles */ +/* eslint-disable react-native/no-color-literals */ import { observer } from "mobx-react-lite" import React, { FC } from "react" -import { TouchableOpacity, Text, View, StyleSheet, TextStyle, ViewStyle } from "react-native" +import { TouchableOpacity, Text, View, TextStyle, ViewStyle } from "react-native" import { typography, useAppTheme } from "../../../../theme" interface Props { @@ -16,7 +18,9 @@ const TaskTab: FC = observer(({ setSelectedTab, isSelected, tabTitle, cou setSelectedTab()} diff --git a/apps/mobile/app/screens/Authenticated/TeamScreen/components/TodayWorkTime.tsx b/apps/mobile/app/screens/Authenticated/TeamScreen/components/TodayWorkTime.tsx index 1dca7b93c..4984b8ce6 100644 --- a/apps/mobile/app/screens/Authenticated/TeamScreen/components/TodayWorkTime.tsx +++ b/apps/mobile/app/screens/Authenticated/TeamScreen/components/TodayWorkTime.tsx @@ -1,4 +1,5 @@ /* eslint-disable react-native/no-color-literals */ +/* eslint-disable react-native/no-inline-styles */ /* eslint-disable camelcase */ import { observer } from "mobx-react-lite" import React, { FC } from "react" @@ -8,6 +9,7 @@ import { translate } from "../../../../i18n" import { I_TeamMemberCardHook } from "../../../../services/hooks/features/useTeamMemberCard" import { typography } from "../../../../theme/typography" import { useLiveTimerStatus } from "../../../../services/hooks/useTimer" +import { useTheme } from "react-native-paper" interface IProps { isAuthUser: boolean @@ -19,11 +21,15 @@ export const TodayWorkedTime: FC = observer(({ isAuthUser }) => { time: { m, h }, } = useLiveTimerStatus() + const { dark, colors } = useTheme() + if (isAuthUser) { return ( - {translate("teamScreen.cardTotalTimeLabel")} - + + {translate("teamScreen.cardTotalTimeLabel")} + + {pad(h)} h:{pad(m)} m @@ -32,8 +38,10 @@ export const TodayWorkedTime: FC = observer(({ isAuthUser }) => { return ( - {translate("teamScreen.cardTotalTimeLabel")} - + + {translate("teamScreen.cardTotalTimeLabel")} + + {pad(0)} h:{pad(0)} m @@ -47,7 +55,6 @@ const styles = StyleSheet.create({ justifyContent: "space-between", }, totalTimeText: { - color: "#282048", fontFamily: typography.primary.semiBold, fontSize: 12, }, diff --git a/apps/mobile/app/screens/Authenticated/TeamScreen/components/WorkedOnTask.tsx b/apps/mobile/app/screens/Authenticated/TeamScreen/components/WorkedOnTask.tsx index f13d1126c..5fda43362 100644 --- a/apps/mobile/app/screens/Authenticated/TeamScreen/components/WorkedOnTask.tsx +++ b/apps/mobile/app/screens/Authenticated/TeamScreen/components/WorkedOnTask.tsx @@ -1,4 +1,5 @@ /* eslint-disable react-native/no-color-literals */ +/* eslint-disable react-native/no-inline-styles */ /* eslint-disable camelcase */ import { observer } from "mobx-react-lite" import React, { FC } from "react" @@ -9,6 +10,7 @@ import { translate } from "../../../../i18n" import { useTaskStatistics } from "../../../../services/hooks/features/useTaskStatics" import { I_TeamMemberCardHook } from "../../../../services/hooks/features/useTeamMemberCard" import { typography } from "../../../../theme/typography" +import { useTheme } from "react-native-paper" interface IProps { memberInfo: I_TeamMemberCardHook @@ -19,6 +21,8 @@ export const WorkedOnTask: FC = observer(({ memberInfo, period }) => { // Get current timer seconds const { isAuthUser, memberTask } = memberInfo + const { dark, colors } = useTheme() + // activeTaskDailyStat and activeTaskTotalStat removed from useTaskStatistics call const { getTaskStat } = useTaskStatistics() @@ -34,15 +38,17 @@ export const WorkedOnTask: FC = observer(({ memberInfo, period }) => { <> {period === "Daily" ? ( - {translate("teamScreen.cardTodayWorkLabel")} - + + {translate("teamScreen.cardTodayWorkLabel")} + + {pad(dh)} h:{pad(dm)} m ) : ( {translate("teamScreen.cardTotalWorkLabel")} - + {pad(th)} h:{pad(tm)} m @@ -57,7 +63,9 @@ export const WorkedOnTask: FC = observer(({ memberInfo, period }) => { <> {period === "Daily" ? ( - {translate("teamScreen.cardTodayWorkLabel")} + + {translate("teamScreen.cardTodayWorkLabel")} + {pad(dh)} h:{pad(dm)} m