Merge pull request #1854 from ever-co/bug/timer-responsiveness

Bug/timer responsiveness
ever-co · Nov 22, 2023 · 8efebf0 · 8efebf0
2 parents be597b0 + 23c68b6
commit 8efebf0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/apps/mobile/app/components/TimerButton.tsx b/apps/mobile/app/components/TimerButton.tsx
@@ -3,7 +3,7 @@
 // import { LinearGradient } from "expo-linear-gradient"
 import { observer } from 'mobx-react-lite';
 import React, { FC } from 'react';
-import { View, StyleSheet, ViewStyle, ImageStyle, Pressable } from 'react-native';
+import { View, StyleSheet, ViewStyle, ImageStyle, Pressable, Dimensions, PixelRatio } from 'react-native';
 
 import { useStores } from '../models';
 import { useTimer } from '../services/hooks/useTimer';
@@ -18,6 +18,10 @@ type TimerButtonProps = {
 	iconStyle?: ImageStyle;
 };
 
+const { width: screenWidth } = Dimensions.get('window');
+
+const pixelDensity = PixelRatio.get();
+
 const TimerButton: FC<TimerButtonProps> = observer(({ containerStyle }) => {
 	const {
 		TimerStore: { localTimerStatus }
@@ -73,7 +77,7 @@ const styles = StyleSheet.create({
 		elevation: 8,
 		height: 60,
 		justifyContent: 'center',
-		marginHorizontal: 15,
+		marginRight: screenWidth * 0.0467 * (pixelDensity / 3),
 		shadowColor: '#e11d48',
 		shadowOffset: {
 			width: 0,
@@ -92,7 +96,7 @@ const styles = StyleSheet.create({
 		elevation: 8,
 		height: 60,
 		justifyContent: 'center',
-		marginHorizontal: 15,
+		marginRight: screenWidth * 0.0467 * (pixelDensity / 3),
 		width: 60
 	},
 	timerBtnInactive: {
@@ -104,7 +108,7 @@ const styles = StyleSheet.create({
 		elevation: 8,
 		height: 60,
 		justifyContent: 'center',
-		marginHorizontal: 15,
+		marginRight: screenWidth * 0.0467 * (pixelDensity / 3),
 		shadowColor: '#3826A6',
 		shadowOffset: {
 			width: 0,

diff --git a/apps/mobile/app/components/TimerCard.tsx b/apps/mobile/app/components/TimerCard.tsx
@@ -2,7 +2,7 @@
 /* eslint-disable react-native/no-color-literals */
 /* eslint-disable camelcase */
 import React, { FC } from 'react';
-import { View } from 'react-native';
+import { Dimensions, View } from 'react-native';
 import { ProgressBar, Text } from 'react-native-paper';
 import EStyleSheet from 'react-native-extended-stylesheet';
 
@@ -16,6 +16,7 @@ import { useTaskStatistics } from '../services/hooks/features/useTaskStatics';
 
 export interface Props {}
 
+const { width: screenWidth } = Dimensions.get('window');
 const TimerCard: FC<Props> = observer(() => {
 	const { colors } = useAppTheme();
 	const {
@@ -45,16 +46,17 @@ const TimerCard: FC<Props> = observer(() => {
 				<View style={styles.timeAndProgressBarWrapper}>
 					<Text style={[styles.timerText, { color: colors.primary }]}>
 						{pad(hours)}:{pad(minutes)}:{pad(seconds)}
-						<Text style={{ fontSize: 14, fontWeight: '600' }}>:{pad(ms_p)}</Text>
+						<Text style={{ fontSize: screenWidth * 0.03, fontWeight: '600' }}>:{pad(ms_p)}</Text>
 					</Text>
-					<View style={{ width: '79%' }}>
+					<View style={{ width: '85%' }}>
 						<ProgressBar
 							style={styles.progressBar}
 							progress={getTimePercentage()}
 							color={activeTask && activeTask.estimate > 0 ? '#27AE60' : '#F0F0F0'}
 						/>
 					</View>
 				</View>
+				<View style={{ height: '100%', width: 2, backgroundColor: colors.border }} />
 				<View style={[styles.timerBtn, { borderLeftColor: colors.border }]}>
 					<TimerButton />
 				</View>
@@ -75,16 +77,12 @@ const styles = EStyleSheet.create({
 		marginVertical: 4,
 		justifyContent: 'center',
 		alignItems: 'center',
-		width: '34%',
-		borderLeftWidth: 2,
-		borderLeftColor: 'rgba(0, 0, 0, 0.08)',
 		height: '100%'
 	},
 	progressBar: { backgroundColor: '#E9EBF8', width: '100%', height: 6, borderRadius: 3 },
 	timeAndProgressBarWrapper: {
 		flexDirection: 'column',
 		justifyContent: 'space-between',
-		width: '66%',
 		height: 70,
 		paddingBottom: 0
 	},
@@ -102,7 +100,7 @@ const styles = EStyleSheet.create({
 	},
 	timerText: {
 		fontWeight: '600',
-		fontSize: '2.3rem',
+		fontSize: screenWidth * 0.082,
 		color: '#1B005D',
 		marginTop: 0,
 		paddingTop: 0,