upd: redesign

Deskripsi:
- fitur ganti mode tema
- penerapan tema pada semua fitur

NO Issues

app/(application)/division/[id]/(fitur-division)/calendar/index.tsx

@@ -7,6 +7,7 @@ import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
 import { apiGetCalendarByDateDivision, apiGetIndicatorCalendar } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Feather } from "@expo/vector-icons";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import 'intl';
@@ -34,6 +35,7 @@ type Props = {
 };
 
 export default function CalendarDivision() {
+   const { colors, activeTheme } = useTheme();
    const [selected, setSelected] = useState<any>(new Date())
    const [data, setData] = useState<Props[]>([])
    const { token, decryptToken } = useAuthSession()
@@ -117,15 +119,15 @@ export default function CalendarDivision() {
          );
       },
       IconNext: <Pressable onPress={() => !loadingBtn ? setMonth(month + 1) : null}>
-         <Feather name="chevron-right" size={20} color={loadingBtn ? 'gray' : 'black'} />
+         <Feather name="chevron-right" size={20} color={loadingBtn ? 'gray' : colors.text} />
       </Pressable>,
       IconPrev: <Pressable onPress={() => !loadingBtn ? setMonth(month - 1) : null}>
-         <Feather name="chevron-left" size={20} color={loadingBtn ? 'gray' : 'black'} />
+         <Feather name="chevron-left" size={20} color={loadingBtn ? 'gray' : colors.text} />
       </Pressable>,
    };
 
    return (
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
          <Stack.Screen
             options={{
                // headerLeft: () => (
@@ -158,7 +160,7 @@ export default function CalendarDivision() {
             style={[Styles.h100]}
          >
             <View style={[Styles.p15]}>
-               <View style={[Styles.wrapPaper, Styles.p10]}>
+               <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
                   <Datepicker
                      components={components}
                      mode="single"
@@ -167,19 +169,19 @@ export default function CalendarDivision() {
                      onMonthChange={(month) => setMonth(month)}
                      styles={{
                         selected: Styles.selectedDate,
-                        month_label: Styles.cBlack,
-                        month_selector_label: Styles.cBlack,
-                        year_label: Styles.cBlack,
-                        year_selector_label: Styles.cBlack,
-                        day_label: Styles.cBlack,
-                        time_label: Styles.cBlack,
-                        weekday_label: Styles.cBlack,
+                        month_label: { color: colors.text },
+                        month_selector_label: { color: colors.text },
+                        year_label: { color: colors.text },
+                        year_selector_label: { color: colors.text },
+                        day_label: { color: colors.text },
+                        time_label: { color: colors.text },
+                        weekday_label: { color: colors.text },
                      }}
                   />
                </View>
                <View style={[Styles.mb15, Styles.mt15]}>
                   <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Acara</Text>
-                  <View style={[Styles.wrapPaper]}>
+                  <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
                      {
                         loading ?
                            <>