fix: timer icon and resetting on cancel

src/assets/icons/timer-icon.svg

@@ -1,5 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g>
-<path d="M7.99498 13.1613C10.8527 13.1613 13.1931 10.8209 13.1931 7.96316C13.1931 5.11048 10.8577 2.77008 8 2.77008C7.68861 2.77008 7.51283 2.95591 7.51283 3.25725V5.10546C7.51283 5.3616 7.69364 5.56249 7.94977 5.56249C8.20591 5.56249 8.38672 5.3616 8.38672 5.10546V3.81472C10.5112 4.01059 12.1484 5.7885 12.1484 7.96316C12.1484 10.2634 10.3052 12.1216 7.99498 12.1216C5.68973 12.1216 3.83649 10.2634 3.84152 7.96316C3.84654 6.97376 4.19308 6.05468 4.77567 5.34653C4.96652 5.08537 4.99665 4.80914 4.78069 4.59318C4.56473 4.37722 4.21819 4.39731 3.99219 4.69363C3.2539 5.5876 2.8019 6.72767 2.8019 7.96316C2.8019 10.8209 5.1423 13.1613 7.99498 13.1613ZM8.80357 8.7366C9.2154 8.29966 9.13002 7.70702 8.63783 7.37053L6.08649 5.61774C5.78515 5.41684 5.49386 5.71316 5.69475 6.0145L7.44754 8.56082C7.78404 9.05803 8.37667 9.14843 8.80357 8.7366Z" />
-</g>
-</svg>

src/assets/icons/timer.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99121 19.0322C14.9922 19.0322 19.0879 14.9365 19.0879 9.93555C19.0879 4.94336 15.001 0.847656 10 0.847656C9.45508 0.847656 9.14746 1.17285 9.14746 1.7002V4.93457C9.14746 5.38281 9.46387 5.73438 9.91211 5.73438C10.3604 5.73438 10.6768 5.38281 10.6768 4.93457V2.67578C14.3945 3.01855 17.2598 6.12988 17.2598 9.93555C17.2598 13.9609 14.0342 17.2129 9.99121 17.2129C5.95703 17.2129 2.71387 13.9609 2.72266 9.93555C2.73145 8.2041 3.33789 6.5957 4.35742 5.35645C4.69141 4.89941 4.74414 4.41602 4.36621 4.03809C3.98828 3.66016 3.38184 3.69531 2.98633 4.21387C1.69434 5.77832 0.90332 7.77344 0.90332 9.93555C0.90332 14.9365 4.99902 19.0322 9.99121 19.0322ZM11.4062 11.2891C12.127 10.5244 11.9775 9.4873 11.1162 8.89844L6.65137 5.83105C6.12402 5.47949 5.61426 5.99805 5.96582 6.52539L9.0332 10.9814C9.62207 11.8516 10.6592 12.0098 11.4062 11.2891Z" />
+</svg>

src/screens/modals/Player/components/Timer.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components/native';
 import { THEME_COLOR } from '@/CONSTANTS';
 import { useDispatch } from 'react-redux';
 import { useTypedSelector } from '@/store';
-import TimerIcon from '@/assets/icons/timer-icon.svg';
+import TimerIcon from '@/assets/icons/timer.svg';
 import { setTimerDate } from '@/store/sleep-timer';
 import ticksToDuration from '@/utility/ticksToDuration';
 import useDefaultStyles from '@/components/Colors';
@@ -66,7 +66,8 @@ export default function Timer() {
     // Close the picker when it is canceled
     const handleCancelDatePicker = useCallback(() => {
         setShowPicker(false);
-    }, []);
+        dispatch(setTimerDate(null));
+    }, [dispatch]);
 
     // Show it when it should be opened
     const showDatePicker = useCallback(() => {
@@ -110,7 +111,9 @@ export default function Timer() {
                         fill={showPicker || date
                             ? THEME_COLOR
                             : defaultStyles.textHalfOpacity.color
-                        } 
+                        }
+                        width={16}
+                        height={16}
                     />
                     <Label
                         style={{ color: showPicker || date
@@ -126,6 +129,7 @@ export default function Timer() {
                     <DateTimePickerModal
                         isVisible={showPicker}
                         mode='time'
+                        date={new Date()}
                         onConfirm={handleConfirm}
                         onCancel={handleCancelDatePicker}
                     />