#style:

Deskripsi :
- Perbaikan UI Donasi
## NO Issue

src/app_modules/donasi/create/create_cerita_penggalang.tsx

@@ -27,8 +27,13 @@ import toast from "react-simple-toasts";
 import ComponentDonasi_NotedBox from "../component/noted_box";
 import { NotifPeringatan } from "../component/notifikasi/notif_peringatan";
 import { Donasi_funCreate } from "../fun/create/fun_create_donasi";
-import { gs_donasi_tabs_posting } from "../global_state";
+import { gs_donasi_hot_menu, gs_donasi_tabs_posting } from "../global_state";
 import { MODEL_DONASI_TEMPORARY } from "../model/interface";
+import ComponentGlobal_BoxInformation from "@/app_modules/_global/component/box_information";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 export default function CreateCeritaPenggalangDonasi({
   dataTemporary,
   userId,
@@ -42,6 +47,8 @@ export default function CreateCeritaPenggalangDonasi({
   const [tabsPostingDonasi, setTabsPostingDonasi] = useAtom(
     gs_donasi_tabs_posting
   );
+  const [donasiHotMenu, setDonasiHotMenu] = useAtom(gs_donasi_hot_menu);
+
   const [create, setCreate] = useState({
     pembukaan: "",
     cerita: "",
@@ -78,8 +85,9 @@ export default function CreateCeritaPenggalangDonasi({
     await Donasi_funCreate(body as any, gambar).then((res) => {
       if (res.status === 201) {
         setLoading(true);
-        router.push(RouterDonasi.page_pop_up_create);
+        router.push(RouterDonasi.page_pop_up_create, { scroll: false });
         setTabsPostingDonasi("Review");
+        setDonasiHotMenu(1);
       } else {
         toast(res.message);
       }
@@ -87,19 +95,24 @@ export default function CreateCeritaPenggalangDonasi({
   }
   return (
     <>
-      <Stack spacing={50} px={"md"}>
+      <Stack spacing={50} px={"md"} py={"md"}>
         {/* <pre>{JSON.stringify(dataTempo, null, 2)}</pre> */}
         <Stack spacing={"sm"}>
-          <ComponentDonasi_NotedBox informasi="Ceritakan dengan jujur & benar mengapa Penggalanagn Dana ini harus diadakan!" />
+          <ComponentGlobal_BoxInformation informasi="Ceritakan dengan jujur & benar mengapa Penggalanagn Dana ini harus diadakan!" />
 
           <Stack spacing={5}>
             <Textarea
+              styles={{
+                label: {
+                  color: "white",
+                },
+              }}
               autosize
               minRows={2}
               maxRows={4}
               withAsterisk
               label="Pembukaan"
-              placeholder="Pembuka dari isi cerita"
+              placeholder="Pembuka cerita"
               maxLength={300}
               onChange={(val) =>
                 setCreate({
@@ -116,6 +129,11 @@ export default function CreateCeritaPenggalangDonasi({
 
           <Stack spacing={5}>
             <Textarea
+              styles={{
+                label: {
+                  color: "white",
+                },
+              }}
               autosize
               minRows={2}
               maxRows={10}
@@ -158,12 +176,12 @@ export default function CreateCeritaPenggalangDonasi({
               >
                 {(props) => (
                   <Button
-                    compact
                     {...props}
                     radius={"xl"}
-                    variant="outline"
-                    w={150}
                     leftIcon={<IconCamera />}
+                    bg={MainColor.yellow}
+                    color="yellow"
+                    c={"black"}
                   >
                     Upload
                   </Button>
@@ -172,17 +190,25 @@ export default function CreateCeritaPenggalangDonasi({
             </Center>
 
             {imageCerita ? (
-              <AspectRatio ratio={16 / 9}>
-                <Paper radius={"md"}>
+              <AspectRatio ratio={1 / 1} mah={300}>
+                <Paper
+                  style={{
+                    border: `2px solid ${AccentColor.blue}`,
+                    backgroundColor: AccentColor.darkblue,
+                    padding: "10px",
+                    borderRadius: "10px",
+                  }}
+                >
                   <Image
                     alt="Foto"
                     src={imageCerita ? imageCerita : "/aset/no-img.png"}
+                    maw={200}
                   />
                 </Paper>
               </AspectRatio>
             ) : (
               <Center>
-                <Text fs={"italic"} fz={10}>
+                <Text fs={"italic"} fz={10} c={"white"}>
                   Upload poster atau gambar penggalangan !
                 </Text>
               </Center>
@@ -191,8 +217,13 @@ export default function CreateCeritaPenggalangDonasi({
         </Stack>
 
         <Stack spacing={"sm"}>
-          <ComponentDonasi_NotedBox informasi="Lengkapi nama bank dan rekening di bawah untuk mempermudah admin jika penggalangan dana ini telah di publish!" />
+          <ComponentGlobal_BoxInformation informasi="Lengkapi nama bank dan rekening di bawah untuk mempermudah admin jika penggalangan dana ini telah di publish!" />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             placeholder="Contoh: BNI, BCA, MANDIRI, DLL"
             label="Nama Bank"
@@ -205,6 +236,11 @@ export default function CreateCeritaPenggalangDonasi({
             }}
           />
           <TextInput
+            styles={{
+              label: {
+                color: "white",
+              },
+            }}
             withAsterisk
             placeholder="Maskuan nomor rekening"
             label="Nomor rekening"
@@ -229,6 +265,9 @@ export default function CreateCeritaPenggalangDonasi({
           w={"100%"}
           radius={"xl"}
           onClick={() => onCreate()}
+          bg={MainColor.yellow}
+          color="yellow"
+          c={"black"}
         >
           Simpan
         </Button>