Calendar improvements

components/shared/RefreshButton.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect } from 'react';
 import { TouchableOpacity, Animated, Easing } from 'react-native';
-import { Feather } from '@expo/vector-icons'; 
+import { Feather } from '@expo/vector-icons';
 
 interface RefreshButtonProps {
   onRefresh: () => Promise<void>;
@@ -9,12 +9,12 @@ interface RefreshButtonProps {
   color?: string;
 }
 
-const RefreshButton = ({ 
-  onRefresh, 
-  isSyncing,
-  size = 24, 
-  color = "#83807F" 
-}: RefreshButtonProps) => {
+const RefreshButton = ({
+                         onRefresh,
+                         isSyncing,
+                         size = 24,
+                         color = "#83807F"
+                       }: RefreshButtonProps) => {
   const rotateAnim = useRef(new Animated.Value(0)).current;
   const rotationLoop = useRef<Animated.CompositeAnimation | null>(null);
 
@@ -29,12 +29,12 @@ const RefreshButton = ({
   const startContinuousRotation = () => {
     rotateAnim.setValue(0);
     rotationLoop.current = Animated.loop(
-      Animated.timing(rotateAnim, {
-        toValue: 1,
-        duration: 1000,
-        easing: Easing.linear,
-        useNativeDriver: true,
-      })
+        Animated.timing(rotateAnim, {
+          toValue: 1,
+          duration: 1000,
+          easing: Easing.linear,
+          useNativeDriver: true,
+        })
     );
     rotationLoop.current.start();
   };
@@ -56,11 +56,28 @@ const RefreshButton = ({
   };
 
   return (
-    <TouchableOpacity onPress={handlePress} disabled={isSyncing}>
-      <Animated.View style={{ transform: [{ rotate }] }}>
-        <Feather name="refresh-cw" size={size} color={color} />
-      </Animated.View>
-    </TouchableOpacity>
+      <TouchableOpacity
+          onPress={handlePress}
+          disabled={isSyncing}
+          style={{
+            width: size * 2,
+            height: size + 10,
+            justifyContent: 'center',
+            alignItems: 'center'
+          }}
+      >
+        <Animated.View
+            style={{
+              transform: [{ rotate }],
+              width: size,
+              height: size,
+              justifyContent: 'center',
+              alignItems: 'center'
+            }}
+        >
+          <Feather name="refresh-cw" size={size} color={color} />
+        </Animated.View>
+      </TouchableOpacity>
   );
 };