Improve/timer stop button color mobile (#1502)

* changed the timer's stop button with red one * added shadow to the stop timer button * added the small stop icon in header * added the play icons as svg, also increased the size of the timer screen play/stop icons * removed commented code * added red shadow to timer button, when running
ever-co · Oct 5, 2023 · 2aa5724 · 2aa5724
1 parent 78f5397
commit 2aa5724
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 65 deletions.
diff --git 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 ? (
-					<Image style={styles.btnImage} source={require("../../assets/icons/new/stop-blue.png")} />
+					// <Image style={styles.btnImage} source={require("../../assets/icons/new/stop-blue.png")} />
+					<SvgXml xml={timerSmallStopIcon} />
 				) : (
-					<Image style={styles.btnImage} source={require("../../assets/icons/new/play.png")} />
+					<SvgXml xml={timerSmallPlayIcon} />
 				)}
 			</TouchableOpacity>
 			<View style={styles.progressContainer}>
@@ -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
@@ -1,23 +1,25 @@
 /* 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
 	containerStyle?: ViewStyle
 	iconStyle?: ImageStyle
 }
 
-const TimerButton: FC<TimerButtonProps> = observer(({ containerStyle, iconStyle }) => {
+const TimerButton: FC<TimerButtonProps> = observer(({ containerStyle }) => {
 	const {
 		TimerStore: { localTimerStatus },
 	} = useStores()
@@ -38,25 +40,15 @@ const TimerButton: FC<TimerButtonProps> = observer(({ containerStyle, iconStyle
 							disabled={!canRunTimer}
 							onPress={() => startTimer()}
 						>
-							<Image
-								resizeMode="contain"
-								style={[styles.timerIcon, iconStyle]}
-								source={require("../../assets/icons/new/play.png")}
-							/>
+							<SvgXml xml={timerLargePlayIcon} />
 						</Pressable>
 					</>
 				) : (
-					<Pressable onPress={() => stopTimer()} style={[styles.timerBtnInactive, containerStyle]}>
-						<LinearGradient
-							colors={["#E93CB9", "#6A71E7"]}
-							style={[styles.timerBtnInactive, containerStyle]}
-						>
-							<Image
-								resizeMode="contain"
-								style={[styles.timerIcon, iconStyle]}
-								source={require("../../assets/icons/new/stop.png")}
-							/>
-						</LinearGradient>
+					<Pressable
+						onPress={() => stopTimer()}
+						style={[styles.timerBtnActive, { backgroundColor: "#e11d48" }, containerStyle]}
+					>
+						<SvgXml xml={timerLargeStopIcon} />
 					</Pressable>
 				)}
 			</View>
@@ -76,20 +68,15 @@ const TimerButton: FC<TimerButtonProps> = observer(({ containerStyle, iconStyle
 						disabled={!canRunTimer}
 						onPress={() => (canRunTimer ? startTimer() : {})}
 					>
-						<Image
-							resizeMode="contain"
-							style={[styles.timerIcon, iconStyle]}
-							source={require("../../assets/icons/new/play.png")}
-						/>
+						<SvgXml xml={timerLargePlayIcon} />
 					</Pressable>
 				</>
 			) : (
-				<Pressable onPress={() => stopTimer()} style={[styles.timerBtnInactive, containerStyle]}>
-					<Image
-						resizeMode="contain"
-						style={[styles.timerIcon, iconStyle]}
-						source={require("../../assets/icons/new/stop.png")}
-					/>
+				<Pressable
+					onPress={() => stopTimer()}
+					style={[styles.timerBtnActive, { backgroundColor: "#e11d48" }, containerStyle]}
+				>
+					<SvgXml xml={timerLargeStopIcon} />
 				</Pressable>
 			)}
 		</View>
@@ -99,6 +86,22 @@ const TimerButton: FC<TimerButtonProps> = 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
@@ -175,3 +175,90 @@ export const userActive = `<svg width="18" height="18" viewBox="0 0 18 18" fill=
 <path d="M9 9C11.0711 9 12.75 7.32107 12.75 5.25C12.75 3.17893 11.0711 1.5 9 1.5C6.92893 1.5 5.25 3.17893 5.25 5.25C5.25 7.32107 6.92893 9 9 9Z" fill="#3826A6"/>
 <path d="M9.00012 10.875C5.24262 10.875 2.18262 13.395 2.18262 16.5C2.18262 16.71 2.34762 16.875 2.55762 16.875H15.4426C15.6526 16.875 15.8176 16.71 15.8176 16.5C15.8176 13.395 12.7576 10.875 9.00012 10.875Z" fill="#3826A6"/>
 </svg>`
+
+export const timerLargeStopIcon = `<svg
+			width="30"
+			height="30"
+			viewBox="0 0 28 28"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+
+		>
+			<path
+				d="M23.7533 9.07667L5.29667 20.16C4.585 20.5917 3.62833 20.16 3.535 19.3317C3.51167 19.11 3.5 18.8883 3.5 18.6667V9.33333C3.5 5.83333 5.83333 3.5 9.33333 3.5H18.6667C22.1667 3.5 23.6017 5.29667 24.2783 7.75833C24.4183 8.27167 24.1967 8.80833 23.7533 9.07667Z"
+				fill="white"
+			/>
+			<path
+				d="M24.4999 12.9383V18.6666C24.4999 22.1666 22.1666 24.4999 18.6666 24.4999H9.33323C8.2599 24.4999 7.2449 24.2083 6.38156 23.6949C5.6349 23.2633 5.68156 22.1666 6.41656 21.7233L22.7266 11.9349C23.5082 11.4683 24.4999 12.0283 24.4999 12.9383Z"
+				fill="white"
+			/>
+		</svg>`
+
+export const timerMediumStopIcon = `<svg
+			width="21"
+			height="21"
+			viewBox="0 0 28 28"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+
+		>
+			<path
+				d="M23.7533 9.07667L5.29667 20.16C4.585 20.5917 3.62833 20.16 3.535 19.3317C3.51167 19.11 3.5 18.8883 3.5 18.6667V9.33333C3.5 5.83333 5.83333 3.5 9.33333 3.5H18.6667C22.1667 3.5 23.6017 5.29667 24.2783 7.75833C24.4183 8.27167 24.1967 8.80833 23.7533 9.07667Z"
+				fill="white"
+			/>
+			<path
+				d="M24.4999 12.9383V18.6666C24.4999 22.1666 22.1666 24.4999 18.6666 24.4999H9.33323C8.2599 24.4999 7.2449 24.2083 6.38156 23.6949C5.6349 23.2633 5.68156 22.1666 6.41656 21.7233L22.7266 11.9349C23.5082 11.4683 24.4999 12.0283 24.4999 12.9383Z"
+				fill="white"
+			/>
+		</svg>`
+
+export const timerSmallStopIcon = `<svg
+			width="17"
+			height="17"
+			viewBox="0 0 28 28"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+
+		>
+			<path
+				d="M23.7533 9.07667L5.29667 20.16C4.585 20.5917 3.62833 20.16 3.535 19.3317C3.51167 19.11 3.5 18.8883 3.5 18.6667V9.33333C3.5 5.83333 5.83333 3.5 9.33333 3.5H18.6667C22.1667 3.5 23.6017 5.29667 24.2783 7.75833C24.4183 8.27167 24.1967 8.80833 23.7533 9.07667Z"
+				fill="#e11d48"
+			/>
+			<path
+				d="M24.4999 12.9383V18.6666C24.4999 22.1666 22.1666 24.4999 18.6666 24.4999H9.33323C8.2599 24.4999 7.2449 24.2083 6.38156 23.6949C5.6349 23.2633 5.68156 22.1666 6.41656 21.7233L22.7266 11.9349C23.5082 11.4683 24.4999 12.0283 24.4999 12.9383Z"
+				fill="#e11d48"
+			/>
+		</svg>`
+
+export const timerLargePlayIcon = `<svg
+			width="30"
+			height="30"
+			viewBox="0 0 28 28"
+			fill="#3826A6"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path d="M20.4043 11.2L6.53268 19.565C5.71602 20.055 4.66602 19.4717 4.66602 18.515V9.18168C4.66602 5.11002 9.06435 2.56668 12.5993 4.59668L17.9544 7.67668L20.3927 9.07668C21.1977 9.55502 21.2094 10.7217 20.4043 11.2Z" />
+			<path d="M21.1056 18.0367L16.3806 20.7667L11.6673 23.485C9.97559 24.4533 8.06226 24.255 6.67393 23.275C5.99726 22.8083 6.07893 21.77 6.79059 21.35L21.6189 12.46C22.3189 12.04 23.2406 12.4367 23.3689 13.2417C23.6606 15.05 22.9139 16.9983 21.1056 18.0367Z" />
+		</svg>`
+
+export const timerMediumPlayIcon = `<svg
+			width="21"
+			height="21"
+			viewBox="0 0 28 28"
+			fill="#3826A6"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path d="M20.4043 11.2L6.53268 19.565C5.71602 20.055 4.66602 19.4717 4.66602 18.515V9.18168C4.66602 5.11002 9.06435 2.56668 12.5993 4.59668L17.9544 7.67668L20.3927 9.07668C21.1977 9.55502 21.2094 10.7217 20.4043 11.2Z" />
+			<path d="M21.1056 18.0367L16.3806 20.7667L11.6673 23.485C9.97559 24.4533 8.06226 24.255 6.67393 23.275C5.99726 22.8083 6.07893 21.77 6.79059 21.35L21.6189 12.46C22.3189 12.04 23.2406 12.4367 23.3689 13.2417C23.6606 15.05 22.9139 16.9983 21.1056 18.0367Z" />
+		</svg>`
+
+export const timerSmallPlayIcon = `<svg
+			width="17"
+			height="17"
+			viewBox="0 0 28 28"
+			fill="#3826A6"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path d="M20.4043 11.2L6.53268 19.565C5.71602 20.055 4.66602 19.4717 4.66602 18.515V9.18168C4.66602 5.11002 9.06435 2.56668 12.5993 4.59668L17.9544 7.67668L20.3927 9.07668C21.1977 9.55502 21.2094 10.7217 20.4043 11.2Z" />
+			<path d="M21.1056 18.0367L16.3806 20.7667L11.6673 23.485C9.97559 24.4533 8.06226 24.255 6.67393 23.275C5.99726 22.8083 6.07893 21.77 6.79059 21.35L21.6189 12.46C22.3189 12.04 23.2406 12.4367 23.3689 13.2417C23.6606 15.05 22.9139 16.9983 21.1056 18.0367Z" />
+		</svg>`
diff --git a/apps/mobile/app/screens/Authenticated/ProfileScreen/components/TimerButton.tsx b/apps/mobile/app/screens/Authenticated/ProfileScreen/components/TimerButton.tsx
@@ -1,16 +1,18 @@
 /* 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"
 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<Props> = 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()}
 			>
-				<Image
-					resizeMode="contain"
-					style={styles.timerIcon}
-					source={
-						localTimerStatus.running && isActiveTask
-							? require("../../../../../assets/icons/new/stop-blue.png")
-							: require("../../../../../assets/icons/new/play.png")
-					}
-				/>
+				{localTimerStatus.running && isActiveTask ? (
+					<SvgXml xml={timerMediumStopIcon} />
+				) : (
+					<SvgXml xml={timerMediumPlayIcon} />
+				)}
 			</TouchableOpacity>
 		)
 	}
 
 	return (
-		<LinearGradient colors={["#E93CB9", "#6A71E7"]} style={styles.timerBtn}>
-			<TouchableOpacity onPress={() => handleStartTimer()}>
-				<Image
-					resizeMode="contain"
-					style={styles.timerIcon}
-					source={
-						localTimerStatus.running && isActiveTask
-							? require("../../../../../assets/icons/new/stop.png")
-							: require("../../../../../assets/icons/new/play-dark.png")
-					}
-				/>
-			</TouchableOpacity>
-		</LinearGradient>
+		<>
+			{localTimerStatus.running && isActiveTask ? (
+				<TouchableOpacity
+					style={[
+						styles.timerBtn,
+						{
+							backgroundColor: "#e11d48",
+							borderColor: "#e11d48",
+						},
+					]}
+					onPress={() => handleStartTimer()}
+				>
+					<SvgXml xml={timerMediumStopIcon} />
+				</TouchableOpacity>
+			) : (
+				<LinearGradient colors={["#E93CB9", "#6A71E7"]} style={styles.timerBtn}>
+					<TouchableOpacity onPress={() => handleStartTimer()}>
+						<SvgXml xml={timerMediumPlayIcon} />
+					</TouchableOpacity>
+				</LinearGradient>
+			)}
+		</>
 	)
 })
 

diff --git 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