style : update tema

Deskripsi:
- update calender
- update color palette
- update discussion
- update division
- update task

No Issue

src/module/task/ui/list_division_task.tsx

@@ -1,4 +1,4 @@
-import { WARNA } from "@/module/_global";
+import { TEMA } from "@/module/_global";
 import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Progress, Skeleton, Text, TextInput, Title } from "@mantine/core";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
@@ -9,6 +9,7 @@ import { funGetAllTask } from "../lib/api_task";
 import toast from "react-hot-toast";
 import { useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
+import { useHookstate } from "@hookstate/core";
 
 export default function ListDivisionTask() {
    const [isList, setIsList] = useState(false)
@@ -19,6 +20,7 @@ export default function ListDivisionTask() {
    const status = searchParams.get('status')
    const [searchQuery, setSearchQuery] = useState('')
    const [loading, setLoading] = useState(true);
+   const tema = useHookstate(TEMA)
 
    const handleList = () => {
       setIsList(!isList)
@@ -58,7 +60,7 @@ export default function ListDivisionTask() {
                <TextInput
                   styles={{
                      input: {
-                        color: WARNA.biruTua,
+                        color: tema.get().utama,
                         borderRadius: '#A3A3A3',
                         borderColor: '#A3A3A3',
                      },
@@ -73,9 +75,9 @@ export default function ListDivisionTask() {
             <Grid.Col span={'auto'}>
                <Flex justify={'center'}>
                   {isList ? (
-                     <HiOutlineListBullet size={35} color={WARNA.biruTua} onClick={handleList} />
+                     <HiOutlineListBullet size={35} color={tema.get().utama} onClick={handleList} />
                   ) : (
-                     <HiSquares2X2 size={35} color={WARNA.biruTua} onClick={handleList} />
+                     <HiSquares2X2 size={35} color={tema.get().utama} onClick={handleList} />
                   )}
                </Flex>
             </Grid.Col>
@@ -86,10 +88,10 @@ export default function ListDivisionTask() {
                   <Skeleton width={"100%"} height={100} radius={"md"} />
                </Box>
                :
-               <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
-                  <Text fw={'bold'} c={WARNA.biruTua}>Total Kegiatan</Text>
+               <Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
+                  <Text fw={'bold'} c={tema.get().utama}>Total Kegiatan</Text>
                   <Flex justify={'center'} align={'center'} h={'100%'}>
-                     <Text fz={40} fw={'bold'} c={WARNA.biruTua}>{isData.length}</Text>
+                     <Text fz={40} fw={'bold'} c={tema.get().utama}>{isData.length}</Text>
                   </Flex>
                </Box>
             }
@@ -110,13 +112,14 @@ export default function ListDivisionTask() {
                                           size={50}
                                           aria-label="Gradient action icon"
                                           radius={100}
-                                          gradient={{
-                                             from: '#DFDA7C',
-                                             to: '#F2AF46',
-                                             deg: 174
-                                          }}
+                                          // gradient={{
+                                          //    from: '#DFDA7C',
+                                          //    to: '#F2AF46',
+                                          //    deg: 174
+                                          // }}
+                                          bg={tema.get().bgFiturDivisi}
                                        >
-                                          <HiMiniPresentationChartBar size={25} color={WARNA.biruTua} />
+                                          <HiMiniPresentationChartBar size={25} color={tema.get().utama} />
                                        </ActionIcon>
                                     </Center>
                                  </Group>
@@ -164,7 +167,7 @@ export default function ListDivisionTask() {
                               <Box key={i} mb={20}>
                                  <Card shadow="sm" padding="md" component="a" radius={10} onClick={() => router.push(`task/${v.id}`)}>
                                     <Card.Section>
-                                       <Box h={120} bg={WARNA.biruTua}>
+                                       <Box h={120} bg={tema.get().utama}>
                                           <Flex justify={'center'} align={'center'} h={"100%"} pl={20} pr={20}>
                                              <Title order={3} c={"white"} ta={"center"} lineClamp={2}>{v.title}</Title>
                                           </Flex>
@@ -180,7 +183,7 @@ export default function ListDivisionTask() {
                                        <Group align='center' pt={10} justify='space-between'>
                                           <Avatar.Group>
                                              <Avatar>
-                                                <MdAccountCircle size={32} color={WARNA.biruTua} />
+                                                <MdAccountCircle size={32} color={tema.get().utama} />
                                              </Avatar>
                                              <Avatar>{(v.member == 0) ? "0" : "+" + (v.member - 1)}</Avatar>
                                           </Avatar.Group>