upd: redesign

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

NO Issues

components/calendar/headerCalendarDetail.tsx

@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles"
 import { apiDeleteCalendar } from "@/lib/api"
 import { setUpdateCalendar } from "@/lib/calendarUpdate"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
 import { router } from "expo-router"
 import { useState } from "react"
@@ -19,6 +20,7 @@ type Props = {
 }
 
 export default function HeaderRightCalendarDetail({ id, idReminder }: Props) {
+   const { colors } = useTheme()
    const [isVisible, setVisible] = useState(false)
    const { token, decryptToken } = useAuthSession()
    const update = useSelector((state: any) => state.calendarUpdate)
@@ -49,7 +51,7 @@ export default function HeaderRightCalendarDetail({ id, idReminder }: Props) {
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
-                  icon={<MaterialIcons name="groups" color="black" size={25} />}
+                  icon={<MaterialIcons name="groups" color={colors.text} size={25} />}
                   title="Tambah Anggota"
                   onPress={() => {
                      setVisible(false)
@@ -57,7 +59,7 @@ export default function HeaderRightCalendarDetail({ id, idReminder }: Props) {
                   }}
                />
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
                   title="Edit"
                   onPress={() => {
                      setVisible(false)
@@ -65,7 +67,7 @@ export default function HeaderRightCalendarDetail({ id, idReminder }: Props) {
                   }}
                />
                <MenuItemRow
-                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  icon={<Ionicons name="trash" color={colors.text} size={25} />}
                   title="Hapus"
                   onPress={() => {
                      setVisible(false)

components/calendar/headerCalendarList.tsx

@@ -1,6 +1,7 @@
 import Styles from "@/constants/Styles"
 import { apiGetDivisionOneFeature } from "@/lib/api"
 import { useAuthSession } from "@/providers/AuthProvider"
+import { useTheme } from "@/providers/ThemeProvider"
 import { AntDesign, MaterialCommunityIcons } from "@expo/vector-icons"
 import { router, useLocalSearchParams } from "expo-router"
 import { useEffect, useState } from "react"
@@ -11,6 +12,7 @@ import DrawerBottom from "../drawerBottom"
 import MenuItemRow from "../menuItemRow"
 
 export default function HeaderRightCalendarList() {
+   const { colors } = useTheme()
    const [isVisible, setVisible] = useState(false)
    const { token, decryptToken } = useAuthSession()
    const { id } = useLocalSearchParams<{ id: string }>();
@@ -47,7 +49,7 @@ export default function HeaderRightCalendarList() {
                      <></>
                   ) : (
                      <MenuItemRow
-                        icon={<AntDesign name="pluscircle" color="black" size={25} />}
+                        icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
                         title="Tambah Acara"
                         onPress={() => {
                            setVisible(false)
@@ -57,7 +59,7 @@ export default function HeaderRightCalendarList() {
                   )
                }
                <MenuItemRow
-                  icon={<MaterialCommunityIcons name="history" color="black" size={25} />}
+                  icon={<MaterialCommunityIcons name="history" color={colors.text} size={25} />}
                   title="Riwayat"
                   onPress={() => {
                      setVisible(false)

components/calendar/itemDateCalendar.tsx

@@ -1,4 +1,5 @@
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import { Pressable, View } from "react-native";
 import Text from "../Text";
 
@@ -11,10 +12,11 @@ type Props = {
 
 
 export default function ItemDateCalendar({ text, isSelected, isSign, onPress }: Props) {
+   const { colors } = useTheme()
    return (
       <>
          <Pressable style={{ alignItems: 'center' }} onPress={onPress}>
-            <Text style={[isSelected ? Styles.cWhite : Styles.cBlack]}>{text}</Text>
+            <Text style={[isSelected ? Styles.cWhite : { color: colors.text }]}>{text}</Text>
             <View style={[Styles.signDate, { backgroundColor: isSign ? 'red' : 'transparent' }]}></View>
          </Pressable>
       </>

components/calendar/itemHistoryEvent.tsx

@@ -1,5 +1,6 @@
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
 import { View } from "react-native";
 import Text from "../Text";
 
@@ -14,12 +15,13 @@ type Props = {
 }[]
 
 export default function ItemHistoryEvent({ data }: { data: Props }) {
+   const { colors, activeTheme } = useTheme()
    return (
       <>
          {
             data.length > 0 ? (
                data.map((item, index) => (
-                  <View key={index} style={[{ flexDirection: 'row' }, Styles.mv05, ColorsStatus.lightGreen, Styles.p10, Styles.round10]}>
+                  <View key={index} style={[{ flexDirection: 'row' }, Styles.mv05, activeTheme === 'dark' ? { backgroundColor: colors.card } : ColorsStatus.lightGreen, Styles.p10, Styles.round10, { borderBottomWidth: 1, borderColor: colors.background }]}>
                      <View style={[Styles.mr10, Styles.ph05]}>
                         <Text style={[Styles.textSubtitle]}>{String(item.dateStart)}</Text>
                         <Text style={[Styles.textDefault, { textAlign: 'center' }]}>{item.year}</Text>