upd: redesign

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

NO Issues

app/(application)/division/index.tsx

@@ -10,6 +10,7 @@ import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
 import { apiGetDivision } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { useTheme } from "@/providers/ThemeProvider";
 import {
    AntDesign,
    Feather,
@@ -38,9 +39,11 @@ export default function ListDivision() {
    const [isList, setList] = useState(false);
    const entityUser = useSelector((state: any) => state.user)
    const { token, decryptToken } = useAuthSession()
+   const { colors } = useTheme();
    const [search, setSearch] = useState("")
    const [nameGroup, setNameGroup] = useState("")
    const [data, setData] = useState<Props[]>([])
+   // ... state same ...
    const update = useSelector((state: any) => state.divisionUpdate)
    const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
    const [loading, setLoading] = useState(false)
@@ -114,11 +117,11 @@ export default function ListDivision() {
 
 
    return (
-      <View style={[Styles.p15, { flex: 1 }]}>
+      <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
          <View>
             {
                entityUser.role != "user" && entityUser.role != "coadmin" ?
-                  <View style={[Styles.wrapBtnTab]}>
+                  <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
                      <ButtonTab
                         active={status == "false" ? "false" : "true"}
                         value="true"
@@ -127,7 +130,7 @@ export default function ListDivision() {
                         icon={
                            <Feather
                               name="check-circle"
-                              color={status == "false" ? "black" : "white"}
+                              color={status == "false" ? colors.text : "white"}
                               size={20}
                            />
                         }
@@ -141,7 +144,7 @@ export default function ListDivision() {
                         icon={
                            <AntDesign
                               name="closecircleo"
-                              color={status == "true" ? "black" : "white"}
+                              color={status == "true" ? colors.text : "white"}
                               size={20}
                            />
                         }
@@ -149,7 +152,7 @@ export default function ListDivision() {
                      />
                   </View>
                   :
-                  <View style={[Styles.wrapBtnTab]}>
+                  <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
                      <ButtonTab
                         active={category == "semua" ? "false" : "true"}
                         value="true"
@@ -158,7 +161,7 @@ export default function ListDivision() {
                         icon={
                            <Ionicons
                               name="file-tray-outline"
-                              color={category == "semua" ? "black" : "white"}
+                              color={category == "semua" ? colors.text : "white"}
                               size={20}
                            />
                         }
@@ -172,7 +175,7 @@ export default function ListDivision() {
                         icon={
                            <Ionicons
                               name="file-tray-stacked-outline"
-                              color={category == "semua" ? "white" : "black"}
+                              color={category == "semua" ? "white" : colors.text}
                               size={20}
                            />
                         }
@@ -190,7 +193,7 @@ export default function ListDivision() {
                >
                   <MaterialCommunityIcons
                      name={isList ? "format-list-bulleted" : "view-grid"}
-                     color={"black"}
+                     color={colors.text}
                      size={30}
                   />
                </Pressable>
@@ -232,9 +235,10 @@ export default function ListDivision() {
                                        key={index}
                                        onPress={() => { router.push(`/division/${item.id}`) }}
                                        borderType="bottom"
+                                       bgColor={colors.card}
                                        icon={
                                           <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                             <MaterialIcons name="group" size={25} color={"#384288"} />
+                                             <MaterialIcons name="group" size={25} color={colors.primary} />
                                           </View>
                                        }
                                        title={item.name}