From 7aa49fef9712363d757c1f4aeb2650fbf9445dd5 Mon Sep 17 00:00:00 2001
From: farhoudshapouran <farhood.shapouran@teleskop.app>
Date: Tue, 31 Oct 2023 17:34:01 +0300
Subject: [PATCH] fix: time selector display in web

---
 src/components/TimePicker/Wheel.tsx | 10 +++++++++-
 src/components/TimeSelector.tsx     |  7 ++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/TimePicker/Wheel.tsx b/src/components/TimePicker/Wheel.tsx
index 3f8b2a5..12eafa1 100644
--- a/src/components/TimePicker/Wheel.tsx
+++ b/src/components/TimePicker/Wheel.tsx
@@ -5,9 +5,11 @@ import {
   TextStyle,
   View,
   ViewStyle,
+  Platform,
 } from 'react-native';
 import React, { useMemo, useRef } from 'react';
 import { sin } from './AnimatedMath';
+import { CALENDAR_HEIGHT } from '../../enums';
 
 export interface WheelStyleProps {
   containerStyle?: ViewStyle;
@@ -180,11 +182,17 @@ export default function Wheel({
 
 const styles = StyleSheet.create({
   container: {
-    height: '100%',
     minWidth: 30,
     overflow: 'hidden',
     alignItems: 'center',
     justifyContent: 'center',
+    height: CALENDAR_HEIGHT / 2,
+    ...Platform.select({
+      web: {
+        cursor: 'pointer',
+        userSelect: 'none',
+      },
+    }),
   },
   contentContainer: {
     justifyContent: 'space-between',
diff --git a/src/components/TimeSelector.tsx b/src/components/TimeSelector.tsx
index a47fc4f..112d5b7 100644
--- a/src/components/TimeSelector.tsx
+++ b/src/components/TimeSelector.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 import { useCalendarContext } from '../CalendarContext';
 import Wheel from './TimePicker/Wheel';
+import { CALENDAR_HEIGHT } from '../enums';
 
 function createNumberList(num: number) {
   return new Array(num).fill(0).map((_, index) => index);
@@ -83,11 +84,11 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    width: 140,
-    height: '50%',
+    width: CALENDAR_HEIGHT / 2,
+    height: CALENDAR_HEIGHT / 2,
   },
   timePickerText: {
-    fontSize: 22,
+    fontSize: 24,
     fontWeight: 'bold',
   },
 });