From 568b49242cdc4b71d8b87c989ab0c26babc1e2f1 Mon Sep 17 00:00:00 2001
From: lukman <lukman@lukmans-MacBook-Air.local>
Date: Fri, 13 Sep 2024 13:50:23 +0800
Subject: [PATCH] style : tema document

---
 .../document/ui/drawer_cut_documents.tsx      | 12 ++++++----
 .../ui/drawer_menu_document_division.tsx      | 23 ++++++++++---------
 src/module/document/ui/drawer_more.tsx        | 11 +++++----
 .../document/ui/drawer_share_document.tsx     |  5 ++--
 .../document/ui/navbar_document_division.tsx  | 17 +++++++-------
 5 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/src/module/document/ui/drawer_cut_documents.tsx b/src/module/document/ui/drawer_cut_documents.tsx
index a33f3b6..48e6824 100644
--- a/src/module/document/ui/drawer_cut_documents.tsx
+++ b/src/module/document/ui/drawer_cut_documents.tsx
@@ -1,4 +1,4 @@
-import { WARNA } from '@/module/_global';
+import { TEMA } from '@/module/_global';
 import { Box, Breadcrumbs, Button, Divider, Flex, Grid, Group, Modal, ScrollArea, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 import toast from 'react-hot-toast';
@@ -10,6 +10,7 @@ import { useShallowEffect } from '@mantine/hooks';
 import { MdFolder } from 'react-icons/md';
 import router from 'next/router';
 import { GoChevronRight } from 'react-icons/go';
+import { useHookstate } from '@hookstate/core';
 
 
 export default function DrawerCutDocuments({ category, onChoosePath, data }: { category: string, data: IFormDetailMoreItem[], onChoosePath: (val: string) => void }) {
@@ -19,6 +20,7 @@ export default function DrawerCutDocuments({ category, onChoosePath, data }: { c
   const [dataDocument, setDataDocument] = useState<IDataDocument[]>([])
   const [dataJalur, setDataJalur] = useState<IJalurItem[]>([])
   const [valName, setValName] = useState('')
+  const tema = useHookstate(TEMA)
 
 
   async function onCreateFolder() {
@@ -68,10 +70,10 @@ export default function DrawerCutDocuments({ category, onChoosePath, data }: { c
       }}>
         <Grid justify='center'>
           <Grid.Col span={6}>
-            <Button variant="subtle" fullWidth color={WARNA.biruTua} radius={"xl"} onClick={() => setOpened(true)}>BUAT FOLDER BARU</Button>
+            <Button variant="subtle" fullWidth color={tema.get().utama} radius={"xl"} onClick={() => setOpened(true)}>BUAT FOLDER BARU</Button>
           </Grid.Col>
           <Grid.Col span={6}>
-            <Button variant="filled" fullWidth color={WARNA.biruTua} radius={"xl"} onClick={() => onChoosePath(path)}>
+            <Button variant="filled" fullWidth color={tema.get().utama} radius={"xl"} onClick={() => onChoosePath(path)}>
               {
                 (category == "move") ?
                   "PINDAH" : "SALIN"
@@ -152,7 +154,7 @@ export default function DrawerCutDocuments({ category, onChoosePath, data }: { c
             <TextInput
               styles={{
                 input: {
-                  color: WARNA.biruTua,
+                  color: tema.get().utama,
                   borderRadius: '#828AFC',
                   borderColor: '#828AFC',
                 },
@@ -169,7 +171,7 @@ export default function DrawerCutDocuments({ category, onChoosePath, data }: { c
               <Button variant="subtle" fullWidth color='#969494' onClick={() => setOpened(false)}>Batalkan</Button>
             </Grid.Col>
             <Grid.Col span={6}>
-              <Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={() => onCreateFolder()}>Membuat</Button>
+              <Button variant="subtle" fullWidth color={tema.get().utama} onClick={() => onCreateFolder()}>Membuat</Button>
             </Grid.Col>
           </Grid>
         </Box>
diff --git a/src/module/document/ui/drawer_menu_document_division.tsx b/src/module/document/ui/drawer_menu_document_division.tsx
index 2e3139d..8157628 100644
--- a/src/module/document/ui/drawer_menu_document_division.tsx
+++ b/src/module/document/ui/drawer_menu_document_division.tsx
@@ -1,5 +1,5 @@
 "use clent"
-import { LayoutDrawer, WARNA } from '@/module/_global';
+import { LayoutDrawer, TEMA } from '@/module/_global';
 import { ActionIcon, Box, Button, Divider, Flex, Grid, Modal, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
 import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import React, { useRef, useState } from 'react';
@@ -23,6 +23,7 @@ export default function DrawerMenuDocumentDivision() {
   const refresh = useHookstate(globalRefreshDocument)
   const openRef = useRef<() => void>(null)
   const [fileForm, setFileForm] = useState<any>()
+  const tema = useHookstate(TEMA)
 
   const [bodyFolder, setBodyFolder] = useState({
     name: '',
@@ -78,10 +79,10 @@ export default function DrawerMenuDocumentDivision() {
         >
           <Flex justify={'center'} align={'center'} direction={'column'} >
             <Box>
-              <IoAddCircle size={30} color={WARNA.biruTua} />
+              <IoAddCircle size={30} color={tema.get().utama} />
             </Box>
             <Box >
-              <Text c={WARNA.biruTua}>Tambah Dokumen</Text>
+              <Text c={tema.get().utama}>Tambah Dokumen</Text>
             </Box>
           </Flex>
         </SimpleGrid>
@@ -96,11 +97,11 @@ export default function DrawerMenuDocumentDivision() {
           <Flex onClick={() => setOpenModal(true)} justify={'center'} align={'center'} direction={'column'} mb={20} >
             <Box>
               <ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
-                <FaFolderClosed size={40} color={WARNA.biruTua} />
+                <FaFolderClosed size={40} color={tema.get().utama} />
               </ActionIcon>
             </Box>
             <Box mt={10}>
-              <Text c={WARNA.biruTua}>Membuat Folder</Text>
+              <Text c={tema.get().utama}>Membuat Folder</Text>
             </Box>
           </Flex>
           <Dropzone
@@ -123,11 +124,11 @@ export default function DrawerMenuDocumentDivision() {
             <Flex justify={'center'} align={'center'} direction={'column'} mb={20} onClick={() => openRef.current?.()}>
               <Box>
                 <ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
-                  <HiDocumentText size={40} color={WARNA.biruTua} />
+                  <HiDocumentText size={40} color={tema.get().utama} />
                 </ActionIcon>
               </Box>
               <Box mt={10}>
-                <Text c={WARNA.biruTua}>Upload File</Text>
+                <Text c={tema.get().utama}>Upload File</Text>
               </Box>
             </Flex>
           </Dropzone>
@@ -135,11 +136,11 @@ export default function DrawerMenuDocumentDivision() {
           {/* <Flex justify={'center'} align={'center'} direction={'column'} mb={20} >
             <Box>
               <ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
-                <FaRegImage size={40} color={WARNA.biruTua} />
+                <FaRegImage size={40} color={tema.get().utama} />
               </ActionIcon>
             </Box>
             <Box mt={10}>
-              <Text c={WARNA.biruTua}>Upload Foto</Text>
+              <Text c={tema.get().utama}>Upload Foto</Text>
             </Box>
           </Flex> */}
         </SimpleGrid>
@@ -162,7 +163,7 @@ export default function DrawerMenuDocumentDivision() {
             <TextInput
               styles={{
                 input: {
-                  color: WARNA.biruTua,
+                  color: tema.get().utama,
                   borderRadius: '#828AFC',
                   borderColor: '#828AFC',
                 },
@@ -179,7 +180,7 @@ export default function DrawerMenuDocumentDivision() {
               <Button variant="subtle" fullWidth color='#969494' onClick={() => setOpenModal(false)}>Batalkan</Button>
             </Grid.Col>
             <Grid.Col span={6}>
-              <Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={() => onCreateFolder()}>Membuat</Button>
+              <Button variant="subtle" fullWidth color={tema.get().utama} onClick={() => onCreateFolder()}>Membuat</Button>
             </Grid.Col>
           </Grid>
         </Box>
diff --git a/src/module/document/ui/drawer_more.tsx b/src/module/document/ui/drawer_more.tsx
index 97ff2f8..6c42e71 100644
--- a/src/module/document/ui/drawer_more.tsx
+++ b/src/module/document/ui/drawer_more.tsx
@@ -1,4 +1,4 @@
-import { LayoutDrawer, WARNA } from "@/module/_global";
+import { LayoutDrawer, TEMA } from "@/module/_global";
 import { Box, Flex, Group, SimpleGrid, Stack, Text } from "@mantine/core";
 import React, { useState } from "react";
 import { LuFolders, LuFolderSymlink } from "react-icons/lu";
@@ -17,6 +17,7 @@ export default function DrawerMore({ data }: { data: IDataDocument[] }) {
   const refresh = useHookstate(globalRefreshDocument)
   const param = useParams<{ id: string }>()
   const [forbidCopy, setForbidCopy] = useState(true)
+  const tema = useHookstate(TEMA)
 
 
   async function onMoveItem(path: string) {
@@ -72,20 +73,20 @@ export default function DrawerMore({ data }: { data: IDataDocument[] }) {
         >
           <Flex onClick={() => setIsCut(true)} justify={'center'} align={'center'} direction={'column'} >
             <Box>
-              <LuFolderSymlink size={30} color={WARNA.biruTua} />
+              <LuFolderSymlink size={30} color={tema.get().utama} />
             </Box>
             <Box>
-              <Text c={WARNA.biruTua}>Pindah</Text>
+              <Text c={tema.get().utama}>Pindah</Text>
             </Box>
           </Flex>
           {
             (!forbidCopy) &&
             <Flex onClick={() => setIsCopy(true)} justify={'center'} align={'center'} direction={'column'} >
               <Box>
-                <LuFolders size={30} color={WARNA.biruTua} />
+                <LuFolders size={30} color={tema.get().utama} />
               </Box>
               <Box>
-                <Text c={WARNA.biruTua}>Salin</Text>
+                <Text c={tema.get().utama}>Salin</Text>
               </Box>
             </Flex>
           }
diff --git a/src/module/document/ui/drawer_share_document.tsx b/src/module/document/ui/drawer_share_document.tsx
index 9f529bd..9c5fc6c 100644
--- a/src/module/document/ui/drawer_share_document.tsx
+++ b/src/module/document/ui/drawer_share_document.tsx
@@ -1,4 +1,4 @@
-import { WARNA } from "@/module/_global";
+import { TEMA } from "@/module/_global";
 import { funGetListDivisionByIdDivision, IDataDivison } from "@/module/division_new";
 import { IDataMemberTaskDivision } from "@/module/task/lib/type_task";
 import { Box, Select, Button, Avatar, Divider, Flex, Group, Stack, Text, ActionIcon } from "@mantine/core";
@@ -17,6 +17,7 @@ export default function DrawerShareDocument({ data }: { data: IShareDivision[]})
    const [isData, setData] = useState<IDataDivison[]>([])
    const param = useParams<{ id: string }>()
    const refresh = useHookstate(globalRefreshDocument)
+   const tema = useHookstate(TEMA)
    
 
 
@@ -112,7 +113,7 @@ export default function DrawerShareDocument({ data }: { data: IShareDivision[]})
             <Box>
                <Button
                   c={"white"}
-                  bg={WARNA.biruTua}
+                  bg={tema.get().utama}
                   size="lg"
                   radius={30}
                   fullWidth
diff --git a/src/module/document/ui/navbar_document_division.tsx b/src/module/document/ui/navbar_document_division.tsx
index bc07c04..7dda41b 100644
--- a/src/module/document/ui/navbar_document_division.tsx
+++ b/src/module/document/ui/navbar_document_division.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { LayoutDrawer, LayoutModalViewFile, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { LayoutDrawer, LayoutModalViewFile, LayoutNavbarNew, TEMA } from '@/module/_global';
 import { ActionIcon, Anchor, Box, Breadcrumbs, Button, Checkbox, Divider, Flex, Grid, Group, Indicator, Modal, rem, Select, SimpleGrid, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 import { HiMenu } from 'react-icons/hi';
@@ -47,7 +47,8 @@ export default function NavbarDocumentDivision() {
   const [selectedFiles, setSelectedFiles] = useState<any>([])
   const [selectAll, setSelectAll] = useState(false)
   const [dariSelectAll, setDariSelectAll] = useState(false)
-  const isMobile = useMediaQuery('(max-width: 369px)');
+  const isMobile = useMediaQuery('(max-width: 369px)')
+  const tema = useHookstate(TEMA)
   const [bodyRename, setBodyRename] = useState({
     id: '',
     name: '',
@@ -252,7 +253,7 @@ export default function NavbarDocumentDivision() {
     <Box>
       {(selectedFiles.length > 0 || dariSelectAll) && (
         <>
-          <Box h={90} bg={WARNA.biruTua} pos={'fixed'} top={0} w={"100%"} style={{
+          <Box h={90} bg={tema.get().utama} pos={'fixed'} top={0} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 999,
           }}>
@@ -271,7 +272,7 @@ export default function NavbarDocumentDivision() {
               </ActionIcon>
             </Flex>
           </Box>
-          <Box h={70} bg={WARNA.biruTua} pos={'fixed'} bottom={0} w={"100%"} style={{
+          <Box h={70} bg={tema.get().utama} pos={'fixed'} bottom={0} w={"100%"} style={{
             maxWidth: rem(550),
             zIndex: 999,
           }}>
@@ -340,7 +341,7 @@ export default function NavbarDocumentDivision() {
 
       <LayoutNavbarNew back={`/division/${param.id}/`} title={name}
         menu={
-          <ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+          <ActionIcon onClick={() => setOpen(true)} variant="light" bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
             <HiMenu size={20} color='white' />
           </ActionIcon>
         }
@@ -384,7 +385,7 @@ export default function NavbarDocumentDivision() {
                         <Box>
                           {
                             (v.share) ?
-                              <Indicator offset={15} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaShare />} size={25}>
+                              <Indicator offset={15} withBorder inline color={tema.get().bgIcon} position="bottom-end" label={<FaShare />} size={25}>
                                 {
                                   (v.category == "FOLDER") ?
                                     <FcFolder size={isMobile ? 40 : 50} /> :
@@ -486,7 +487,7 @@ export default function NavbarDocumentDivision() {
             <TextInput
               styles={{
                 input: {
-                  color: WARNA.biruTua,
+                  color: tema.get().utama,
                   borderRadius: '#828AFC',
                   borderColor: '#828AFC',
                 },
@@ -503,7 +504,7 @@ export default function NavbarDocumentDivision() {
               <Button variant="subtle" fullWidth color='#969494' onClick={() => setRename(false)}>Batalkan</Button>
             </Grid.Col>
             <Grid.Col span={6}>
-              <Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={(val) => onRenameSubmit()}>Simpan</Button>
+              <Button variant="subtle" fullWidth color={tema.get().utama} onClick={(val) => onRenameSubmit()}>Simpan</Button>
             </Grid.Col>
           </Grid>
         </Box>